1. 程式人生 > >Android開發消除橫向排列的多個Button之間的空隙

Android開發消除橫向排列的多個Button之間的空隙

一.問題重述

摘要裡描述的可能不太清楚,問題如下圖:

如何消除Button1和Button2之間的空隙,以及Button與左右邊界之間的空隙?

二.問題根源

這裡出現的空隙其實是Button的背景圖片中的透明部分,如下圖:(兩個按鈕被同時按下)

因為間隙是Button自身的一部分,所以設定margin和padding為0也無法消除(至於把margin設定為負值,額,這算解決方案嗎?)

三.解決方案及驗證

  1. 設定Button的style屬性:
    <Button style="?android:attr/buttonBarButtonStyle"/>
    

    (初始)

    (兩個按鈕都被按下)

    方案1的效果:可以消除間隙,並且不影響按鈕預設的點選效果(背景變藍)

  2. 設定Button的style為自定義style(或者直接設定Button的background屬性為自定義圖片):
    <style name="mybutton">
        <item name="android:background" >@drawable/whitecolor</item>
        <item name="android:padding">0dp</item>
        <item name="android:gravity">center</item>
    </style>
    

    (初始/按下)

    方案2的效果:可以消除間隙,但按鈕預設的點選效果沒了

  3. 設定Button的background為透明色:
    android:background="#00000000"
    

    (初始/按下)

    方案3的效果:可以消除間隙,但按鈕預設的點選效果沒了(和方案2效果一樣)

  4. 把LinearLayout換為TableLayout:
    <TableLayout
        android:stretchColumns="*"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
        <TableRow>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="0"
                android:text=" Button1" />
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="1"
                android:text=" Button2" />
        </TableRow>
    </TableLayout>
    

    方案4的效果:無法消除間隙

  5. 自定義selector作為Button背景:
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/highlight"
            android:state_pressed="true"></item>
        <item android:drawable="@drawable/normal"></item>
    </selector>
    
    android:background="@drawable/bg_btn"
    

    (左邊按鈕被按下)

    方案5的效果:可以消除間隙,並且不影響按鈕的預設點選效果(和方案1的效果類似,比方案1更好一些,可以自定義按鈕背景)

四.總結

消除按鈕間隙的關鍵在於改background屬性,用邊框不含透明色的圖片作為按鈕的背景即可消除間隙

消除按鈕間隙建議使用方案5:自定義selector作為按鈕背景圖片