使用自定義圖片，按鈕佈局排號

Question

我在我的res/drawable目錄中適當hdpi，mdpi，xhdpi，並且xxhdpi膠料創建的圖像，我想使用它們替代常規的按鈕。我已經完成了這部分，但我需要一些佈局和格式的幫助。我會先寫下我的問題，然後我會在下面發佈代碼和兩張截圖。任何建議表示讚賞。謝謝！我的設備上

詳細信息和圖片：

Nexus 5的運行棒棒糖。

hdpi A，B，C，D是96x96。 E是72x72

mdpiA，B，C，D是64x64。 E是48x48。

xhdpi A，B，C，D是128x128。 E是96x96。

xxhdpi A，B，C，D是192x192。 E是144x144。

問題：

1）爲什麼最後一行按鈕E水平拉伸？按鈕E是一個帶有圓角邊緣的正方形，就像所有其他邊緣一樣，但縮小了。它爲什麼伸展，我該如何修復它？

2）我怎樣才能安排與他們之間的空間，將根據屏幕大小動態調整，以保持比例相同的繪圖？ （見下圖2）

fragment_main.xml：（見下面的圖片1，看看這個看起來）

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/fragmentMain" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center" 
    android:orientation="vertical"> 

    <TableLayout 
     android:id="@+id/fragmentMainTableLayout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:gravity="center"> 

     <TableRow 
      android:gravity="center_horizontal" 
      android:layout_weight="0"> 

      <Button 
       android:id="@+id/buttonA" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:background="@drawable/a_selector"/> 

      <Button 
       android:id="@+id/buttonB" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:background="@drawable/b_selector"/> 

     </TableRow> 

     <TableRow 
      android:gravity="center_horizontal" 
      android:layout_weight="0"> 

      <Button 
       android:id="@+id/buttonC" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:background="@drawable/c_selector"/> 

      <Button 
       android:id="@+id/buttonD" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:background="@drawable/d_selector"/> 

     </TableRow> 

     <TableRow 
      android:gravity="center|bottom" 
      android:layout_weight="0"> 

      <Button 
       android:id="@+id/buttonE" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:background="@drawable/e_selector"/> 

     </TableRow> 

    </TableLayout> 

</LinearLayout> 

圖1，當前佈局：

圖2，所需的佈局（但與按鈕E適當形狀）：

Answer 1

試試這個。希望它可以幫助你...

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/fragmentMain" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center" 
    android:orientation="vertical" > 

    <TableLayout 
     android:id="@+id/fragmentMainTableLayout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:gravity="center" > 

     <TableRow 
      android:layout_weight="1" 
      android:gravity="center|bottom" 
      android:weightSum="4" > 

      <Button 
       android:id="@+id/buttonA" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:background="@drawable/ic_launcher" /> 

      <Button 
       android:id="@+id/buttonB" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:background="@drawable/ic_launcher" /> 
     </TableRow> 

     <TableRow 
      android:layout_weight="0" 
      android:gravity="center_horizontal" 
      android:weightSum="4" > 

      <Button 
       android:id="@+id/buttonC" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:background="@drawable/ic_launcher" /> 

      <Button 
       android:id="@+id/buttonD" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:background="@drawable/ic_launcher" /> 
     </TableRow> 

     <TableRow 
      android:layout_weight="1" 
      android:gravity="center" > 

      <Button 
       android:id="@+id/buttonE" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_weight="0" 
       android:background="@drawable/ic_launcher" /> 
     </TableRow> 
    </TableLayout> 

</LinearLayout> 

轉換烏爾形象是這樣的。

Answer 2

對於E至適當形，嘗試

<TableRow 
     android:gravity="center" 
     android:layout_weight="0"> 

     <Button 
      android:id="@+id/buttonE" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/abc_ab_share_pack_holo_dark"/> 

    </TableRow> 

對於間距之間的圖像嘗試使用margin屬性。 下面是與間距的完整代碼：

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/fragmentMain" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:gravity="center" 
android:orientation="vertical"> 

<TableLayout 
    android:id="@+id/fragmentMainTableLayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
     android:layout_weight=".5" 
    android:gravity="bottom"> 

    <TableRow 
     android:gravity="center_horizontal" 
     android:layout_weight="0"> 

     <Button 
      android:id="@+id/buttonA" 
      android:layout_margin="15dip" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/abc_ab_share_pack_holo_dark"/> 

     <Button 
      android:id="@+id/buttonB" 
      android:layout_margin="15dip" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/abc_ab_share_pack_holo_dark"/> 

    </TableRow> 

    <TableRow 
     android:gravity="center_horizontal" 
     android:layout_weight="0"> 

     <Button 
      android:id="@+id/buttonC" 
      android:layout_margin="15dip" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/abc_ab_share_pack_holo_dark"/> 

     <Button 
      android:id="@+id/buttonD" 
      android:layout_margin="15dip" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/abc_ab_share_pack_holo_dark"/> 

    </TableRow> 

</TableLayout> 
<TableLayout 
    android:id="@+id/fragmentMainTableLayout1" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
     android:layout_weight="0.5" 
    android:gravity="center"> 
    <TableRow 
     android:gravity="center" 
     android:layout_weight="0"> 

     <Button 
      android:id="@+id/buttonE" 
      android:layout_margin="15dip" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/abc_ab_share_pack_holo_dark"/> 

    </TableRow> 

</TableLayout> 

</LinearLayout> 

Answer 3

請與下面的佈局更換圖像的名字，我沒有太大的改變，但是當我測試工作根據自己的需要。

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/fragmentMain" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center" 
    android:orientation="vertical" > 

    <TableLayout 
     android:id="@+id/fragmentMainTableLayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:gravity="center" > 

     <TableRow 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:gravity="center_horizontal" > 

      <Button 
       android:id="@+id/buttonA" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:background="@drawable/a_selector" /> 

      <Button 
       android:id="@+id/buttonB" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:background="@drawable/b_selector" /> 
     </TableRow> 

     <TableRow 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:gravity="center_horizontal" > 

      <Button 
       android:id="@+id/buttonC" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:background="@drawable/c_selector" /> 

      <Button 
       android:id="@+id/buttonD" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:background="@drawable/d_selector" /> 
     </TableRow> 

     <TableRow 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:gravity="center_horizontal"> 

      <Button 
       android:id="@+id/buttonE" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:background="@drawable/e_selector" /> 
     </TableRow> 
    </TableLayout> 

</LinearLayout> 

Answer 4

試試這個

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 

> 
<TableLayout 
    android:id="@+id/fragmentMainTableLayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center"> 

    <TableRow 
     android:gravity="center_horizontal" 
     android:layout_weight="0"> 

     <Button 
      android:id="@+id/buttonA" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/a_selector"/> 

     <Button 
      android:id="@+id/buttonB" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/b_selector"/> 

    </TableRow> 

    <TableRow 
     android:gravity="center_horizontal" 
     android:layout_weight="0"> 

     <Button 
      android:id="@+id/buttonC" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/c_selector"/> 

     <Button 
      android:id="@+id/buttonD" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/d_selector"/> 

    </TableRow> 

    <TableRow 
     android:layout_marginTop="50dp" 
     android:gravity="center" 
     android:layout_weight="0"> 

     <Button 
      android:id="@+id/buttonE" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/e_selector"/> 

    </TableRow> 

    </TableLayout> 
    </LinearLayout>