Android制作漂亮自適布局鍵盤的方法
更新時間：2015年12月21日 09:57:56 作者：歡醉
最近做了個自定義鍵盤，但面對不同分辨率的機型其中數字鍵盤不能根據界面大小自已鋪滿，但又不能每種機型都做一套吧，所以要做成自適應，那這里主講思路，感興趣的朋友一起學習吧
最近做了個自定義鍵盤，但面對不同分辨率的機型其中數字鍵盤不能根據界面大小自已鋪滿，但又不能每種機型都做一套吧，所以要做成自適應，那這里主講思路。
這里最上面的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，但是最右邊的3、6、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開發(fā)最為頭疼的碎片化問題之一。如果設置成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>
是不是很酷？
圖標什么的自己上網找吧，這里就不貼出來了。
Android制作漂亮自適布局鍵盤的方法就先給大家介紹到這里，后續(xù)還會持續(xù)更新相關知識，希望大家繼續(xù)關注腳本之家網站，謝謝！
相關文章
Android 創(chuàng)建與解析XML（四）——詳解Pull方式
本篇文章主要介紹了Android創(chuàng)建與解析XML(二)——詳解Pull方式,這里整理了詳細的代碼,有需要的小伙伴可以參考下。2016-11-11
Android自定義view系列之99.99%實現QQ側滑刪除效果實例代碼詳解
這篇文章給大家介紹android自定義view系列之99.99%實現QQ側滑刪除效果，本文介紹的非常詳細，具有參考借鑒價值，需要的朋友參考下吧2016-09-09
這篇文章主要為大家詳細介紹了Flutter質感設計之列表項，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了android Socket實現簡單聊天功能以及文件傳輸,非常具有實用價值，有需要的朋友可以參考下。2017-02-02
Android高級組件AutoCompleteTextView自動完成文本框使用詳解
這篇文章主要介紹了Android高級組件AutoCompleteTextView自動完成文本框的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
Android Studio報：“Attribute application@theme or @ icon ”問題的解
這篇文章主要給大家介紹了關于Android Studio報：“Attribute application@theme or @ icon ”問題的解決方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2017-12-12
這篇文章主要為大家詳細介紹了Android仿微信聯(lián)系人列表字母側滑控件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了android 網絡編程之網絡通信幾種方式，有需要的朋友可以參考一下2013-12-12
本文主要介紹Android中實現清空搜索框的文字的方法。項目中的有關搜索的地方，加上清空文字的功能，目的是為了增加用戶體驗，使用戶刪除文本更加快捷。需要的朋友一起來看下吧2016-12-12
這篇文章主要介紹了Android?使用flow實現倒計時的方式,借助Flow這個工具,更加優(yōu)雅地實現這個需求功能，文末給大家整理了Android?實現倒計時的幾種方式，需要的朋友可以參考下2022-04-04