Android如何製做漂亮的自適佈局的鍵盤

　　最近作了個自定義鍵盤，但面對不一樣分辨率的機型其中數字鍵盤不能根據界面大小自已鋪滿，但又不能每種機型都作一套吧，因此要作成自適應，那這裏主講思路。

　　這裏最上面的titlebar高度固定，下面輸入的金額高度也固定（固然也能夠自適應），主要是中間的數字鍵盤，高度和寬度須要自適應。先來張效果圖：

　　最多見的解決方案是用線性佈局，自適應固然是按比例，但佈局中無%的概念，那就要用到layout_weight了，該屬性的做用是決定控件在其父佈局中的顯示權重（具體概念就很少說了）。

　　這裏用一個LinearLayout 將數字鍵盤與下面的支付類型進行包裝，而後用一個大LinearLayout包住全部的數字鍵盤以下圖，它與下面支付類型比例是6：1，這樣數字鍵盤就會按屏幕大小高度與寬度進行變化，每一行數字鍵盤用一個LinearLayout，裏面包3個數字顯示Button按鈕。

　　設置每行的LinearLayout的layout_height=0dp，layout_weight=1，具體設置以下：

 <style name="layout_input_amount_style">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_marginBottom">1dp</item>
        <item name="android:gravity">center</item>
        <item name="android:orientation">horizontal</item>
    </style>

　　這樣就保證了上下自適應佈局。而後行裏面的Button也是平均分配，不過這裏是橫向佈局：layout_width=0dp，layout_weight=1，具體設置以下：

 <style name="btn_input_amount_style">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:textSize">40sp</item>
        <item name="android:textColor">#333333</item>
        <item name="android:background">@color/white</item>
    </style>

　　這樣就達到了上面的數字鍵盤的上下左右自適應了。如今的問題是其中的灰色邊框怎麼出來呢？TextView中沒有設置border的屬性，網上找的方法又很麻煩。

　　這裏須要用到一個技巧，利用灰色背景，讓兩個按鍵間的margin=1，上下也是margin=1，可是最右邊的三、六、9和最後一行不用加。

<Button android:id="@+id/btn_1" style="@style/btn_input_amount_style" android:layout_marginRight="1dp" android:text="1" />

 　　爲何要設置layout_width=0dp？結合layout_weight，可使控件成正比例顯示，輕鬆解決了當前Android開發最爲頭疼的碎片化問題之一。若是設置成wrap_content，內容過長會致使上下沒法對齊的狀況。

　　下面爲整個佈局內容：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.view.InputAmountActivity">

    <RelativeLayout android:id="@+id/bar_input" android:layout_width="match_parent" android:layout_height="@dimen/title_bar_height" android:background="@color/logo_background" android:orientation="horizontal">

        <TextView android:id="@+id/bar_back" android:layout_width="wrap_content" android:layout_height="match_parent" android:background="@color/transparent" android:drawableLeft="@drawable/btn_back_detail" android:paddingLeft="17dip" android:paddingRight="17dip" />

        <TextView android:id="@+id/bar_title" style="@style/title_text_style" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_marginLeft="50dp" android:layout_marginRight="50dp" android:singleLine="true" android:text="輸入金額" />
    </RelativeLayout>

    <LinearLayout android:id="@+id/txt_amount" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/bar_input" android:background="@color/logo_background">

        <TextView android:id="@+id/txt_pay_amount" android:layout_width="match_parent" android:layout_height="115dp" android:background="@color/transparent" android:gravity="right|center" android:paddingLeft="17dip" android:paddingRight="20dp" android:text="￥998" android:textColor="@color/white" android:textSize="40sp" android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/txt_amount" android:orientation="vertical">

        <LinearLayout android:id="@+id/table_num" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="6" android:background="#c8cbcc" android:orientation="vertical">

            <LinearLayout style="@style/layout_input_amount_style">

                <Button android:id="@+id/btn_1" style="@style/btn_input_amount_style" android:layout_marginRight="1dp" android:text="1" />

                <Button android:id="@+id/btn_2" style="@style/btn_input_amount_style" android:layout_marginRight="1dp" android:text="2" />

                <Button android:id="@+id/btn_3" style="@style/btn_input_amount_style" android:text="3" />
            </LinearLayout>

            <LinearLayout style="@style/layout_input_amount_style">

                <Button android:id="@+id/btn_4" style="@style/btn_input_amount_style" android:layout_marginRight="1dp" android:text="4" />

                <Button android:id="@+id/btn_5" style="@style/btn_input_amount_style" android:layout_marginRight="1dp" android:text="5" />

                <Button android:id="@+id/btn_6" style="@style/btn_input_amount_style" android:text="6" />
            </LinearLayout>

            <LinearLayout style="@style/layout_input_amount_style">

                <Button android:id="@+id/btn_7" style="@style/btn_input_amount_style" android:layout_marginRight="1dp" android:text="7" />

                <Button android:id="@+id/btn_8" style="@style/btn_input_amount_style" android:layout_marginRight="1dp" android:text="8" />

                <Button android:id="@+id/btn_9" style="@style/btn_input_amount_style" android:text="9" />
            </LinearLayout>

            <LinearLayout style="@style/layout_input_amount_style">

                <Button android:id="@+id/btn_t" style="@style/btn_input_amount_style" android:layout_marginRight="1dp" android:text="." />

                <Button android:id="@+id/btn_0" style="@style/btn_input_amount_style" android:layout_marginRight="1dp" android:text="0" />

                <ImageButton android:id="@+id/btn_d" style="@style/btn_input_amount_style" android:src="@drawable/ico_del" />

            </LinearLayout>
        </LinearLayout>

        <LinearLayout android:layout_width="match_parent" android:layout_height="68dp" android:layout_weight="1" android:orientation="horizontal">

            <LinearLayout android:id="@+id/layout_zhifubao" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@color/logo_background" android:gravity="center" android:orientation="vertical">

                <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="9dp" android:src="@drawable/ico_zhifubao" />

                <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="9dp" android:text="支付寶" android:textColor="@color/white" android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout android:id="@+id/layout_wechat" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="#3cb034" android:gravity="center" android:orientation="vertical">

                <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="9dp" android:src="@drawable/ico_wechat" />

                <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="9dp" android:text="微信" android:textColor="@color/white" android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout android:id="@+id/layout_pay" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="#ff7700" android:gravity="center" android:orientation="vertical">

                <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="9dp" android:src="@drawable/ico_pay" />

                <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="9dp" android:text="儲值" android:textColor="@color/white" android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

　　是否是很酷？

　　圖標什麼的本身上網找吧，這裏就不貼出來了。

 　　　　微信支付的源碼和支付碰到的部分問題解決方法已上傳至微信公衆號【一個碼農的平常】，其它知識可回覆：數據庫，NET ，JS 便可自行下載，之後會按期更新內容。