Android相對佈局網格按鈕

Question

我試圖在相對佈局中創建字母按鈕。主要問題是我不能設置按鈕保持1：1的寬高比並在屏幕上正確顯示它。

這就是我想要達到的目標：

按鈕應始終爲1：1和文本喊叫按鈕中間開始。 到目前爲止，我嘗試了網格佈局，並把按鈕放在5x5研磨。但如果我設置按鈕W/H，讓我們說50dp在某些顯示我能看到的只有ABC和D

另外一半我試圖把在LinearLayout中，如：

<RelativeLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_above="@id/adSponsor" 
    android:layout_below="@id/barSearch" 
    android:layout_margin="20dp"> 

    <LinearLayout 

     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
     android:layout_centerVertical="true" 
     android:orientation="vertical"> 

     <LinearLayout 
      android:id="@+id/buttonPanel" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal"> 

      <Button 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_margin="5dp" 
       android:layout_weight="1" 
       android:background="@drawable/letter_button" 
       android:gravity="center|top" 
       android:text="A" 
       android:textAlignment="gravity" 
       android:textColor="@color/red" 
       android:textSize="@dimen/letter_box_text" 
       android:textStyle="bold" /> 

      <Button 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_margin="5dp" 
       android:layout_weight="1" 
       android:background="@drawable/letter_button" 
       android:gravity="center|top" 
       android:text="B" 
       android:textAlignment="gravity" 
       android:textColor="@color/red" 
       android:textSize="@dimen/letter_box_text" 
       android:textStyle="bold" /> 

      <Button 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_margin="5dp" 
       android:layout_weight="1" 
       android:background="@drawable/letter_button" 
       android:gravity="center|top" 
       android:text="C" 
       android:textAlignment="gravity" 
       android:textColor="@color/red" 
       android:textSize="@dimen/letter_box_text" 
       android:textStyle="bold" /> 

      <Button 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_margin="5dp" 
       android:layout_weight="1" 
       android:background="@drawable/letter_button" 
       android:gravity="center|top" 
       android:text="D" 
       android:textAlignment="gravity" 
       android:textColor="@color/red" 
       android:textSize="@dimen/letter_box_text" 
       android:textStyle="bold" /> 

      <Button 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_margin="5dp" 
       android:layout_weight="1" 
       android:background="@drawable/letter_button" 
       android:gravity="center|top" 
       android:text="E" 
       android:textAlignment="gravity" 
       android:textColor="@color/red" 
       android:textSize="@dimen/letter_box_text" 
       android:textStyle="bold" /> 

     </LinearLayout> 

    </LinearLayout> 

</RelativeLayout> 

但在這種情況下，按鈕不是1：1的寬高比。

有人可以指我什麼是實現這一目標的正確方法。此外，按鈕喊中間。按鈕和搜索欄之間的距離以及按鈕和頁腳之間的按鈕應該是相同的。

Answer 1

爲了得到一個方形按鈕，我建議你到子類Button類並重寫onMeasure方法：

public class SquareButton extends Button { 
    public SquareButton(Context context) { 
     super(context); 
    } 

    public SquareButton(Context context, AttributeSet attrs) { 
     super(context, attrs); 
    } 

    public SquareButton(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
    } 

    @TargetApi(Build.VERSION_CODES.LOLLIPOP) 
    public SquareButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { 
     super(context, attrs, defStyleAttr, defStyleRes); 
    } 

    @Override 
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
     int width = MeasureSpec.getSize(widthMeasureSpec); 
     int height = MeasureSpec.getSize(heightMeasureSpec); 
     if(width > height) { 
      super.onMeasure(heightMeasureSpec, heightMeasureSpec); 
     } else { 
      super.onMeasure(widthMeasureSpec, widthMeasureSpec); 
     } 
    } 
} 

爲了讓按鍵之間的空間，甚至，我會去和在Buttons上設置LinearLayout方法和layout_weight。如果您每行的按鈕數量是可變的，您可以跳過在母公司上設置weightSum。 爲了讓信件的底部從按鈕的中間開始，可能值得嘗試一下，看看您是否可以將Button的paddingBottom屬性與textSize屬性相匹配。如果沒有，我想你也必須重寫onDraw方法。

Answer 2

屁股這在你的水平的LinearLayout：

android:weightSum="5" 

這在您的按鈕：

android:layout_weight="1" 

這是假設你有每一行中5個按鈕。

Answer 3

正如@iTurki指出的那樣，您應該使用weightSum和layout_weight組合將視圖均勻地分佈在線性佈局中。這就是說，我知道你仍然需要在方框中顯示你的角色。 爲此，您可以使用包含ImageViews的RelativeLayout並使用ImageView作爲可點擊的按鈕。

ImageView的優點是，您可以將透明方形圖像設置爲背景，並使用android:adjustViewBounds="true"，以便根據圖像視圖可用的水平寬度空間增加/減少圖像視圖的高度。你的佈局應該看起來像這樣。

<LinearLayout 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:orientation="horizontal" 
android:weightSum="5" 
> 
<RelativeLayout 
android:layout_width="0dp" 
android:layout_weight="1" 
android:layout_height="wrap_content" 
> 
<ImageView 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:adjustViewBounds="true" 
android:src="square_transparent_Image.png" 
/> 
<TextView 
android:layout_height="wrap_content" 
android:layout_width="match_parent" 
android:gravity="center" 
android:textAlignment="center" 
android:text="A" 
/> 
</RelativeLayout> 
<RelativeLayout 
android:layout_width="0dp" 
android:layout_weight="1" 
android:layout_height="wrap_content" 
> 
<ImageView 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:adjustViewBounds="true" 
android:src="square_transparent_Image.png" 
/> 
<TextView 
android:layout_height="wrap_content" 
android:layout_width="match_parent" 
android:gravity="center" 
android:textAlignment="center" 
android:text="B" 
/> 
</RelativeLayout> 
<RelativeLayout 
android:layout_width="0dp" 
android:layout_weight="1" 
android:layout_height="wrap_content" 
> 
<ImageView 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:adjustViewBounds="true" 
android:src="square_transparent_Image.png" 
/> 
<TextView 
android:layout_height="wrap_content" 
android:layout_width="match_parent" 
android:gravity="center" 
android:textAlignment="center" 
android:text="C" 
/> 
</RelativeLayout> 
<RelativeLayout 
android:layout_width="0dp" 
android:layout_weight="1" 
android:layout_height="wrap_content" 
> 
<ImageView 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:adjustViewBounds="true" 
android:src="square_transparent_Image.png" 
/> 
<TextView 
android:layout_height="wrap_content" 
android:layout_width="match_parent" 
android:gravity="center" 
android:textAlignment="center" 
android:text="D" 
/> 
</RelativeLayout> 
<RelativeLayout 
android:layout_width="0dp" 
android:layout_weight="1" 
android:layout_height="wrap_content" 
> 
<ImageView 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:adjustViewBounds="true" 
android:src="square_transparent_Image.png" 
/> 
<TextView 
android:layout_height="wrap_content" 
android:layout_width="match_parent" 
android:gravity="center" 
android:textAlignment="center" 
android:text="E" 
/> 
</RelativeLayout> 
</LinearLayout>