Android制作漂亮自適布局鍵盤的方法
更新時間：2015年12月21日 09:57:56 作者：歡醉
最近做了個自定義鍵盤，但面對不同分辨率的機型其中數(shù)字鍵盤不能根據(jù)界面大小自已鋪滿，但又不能每種機型都做一套吧，所以要做成自適應(yīng)，那這里主講思路，感興趣的朋友一起學(xué)習(xí)吧
最近做了個自定義鍵盤，但面對不同分辨率的機型其中數(shù)字鍵盤不能根據(jù)界面大小自已鋪滿，但又不能每種機型都做一套吧，所以要做成自適應(yīng)，那這里主講思路。
這里最上面的titlebar高度固定，下面輸入的金額高度也固定（當(dāng)然也可以自適應(yīng)），主要是中間的數(shù)字鍵盤，高度和寬度需要自適應(yīng)。先來張效果圖：
最常見的解決方案是用線性布局，自適應(yīng)當(dāng)然是按比例，但布局中無%的概念，那就要用到layout_weight了，該屬性的作用是決定控件在其父布局中的顯示權(quán)重（具體概念就不多說了）。
這里用一個LinearLayout 將數(shù)字鍵盤與下面的支付類型進(jìn)行包裝，然后用一個大LinearLayout包住所有的數(shù)字鍵盤如下圖，它與下面支付類型比例是6：1，這樣數(shù)字鍵盤就會按屏幕大小高度與寬度進(jìn)行變化，每一行數(shù)字鍵盤用一個LinearLayout，里面包3個數(shù)字顯示Button按鈕。
設(shè)置每行的LinearLayout的layout_height=0dp，layout_weight=1，具體設(shè)置如下：
<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>
這樣就保證了上下自適應(yīng)布局。然后行里面的Button也是平均分配，不過這里是橫向布局：layout_width=0dp，layout_weight=1，具體設(shè)置如下：
<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>
這樣就達(dá)到了上面的數(shù)字鍵盤的上下左右自適應(yīng)了?，F(xiàn)在的問題是其中的灰色邊框怎么出來呢？TextView中沒有設(shè)置border的屬性，網(wǎng)上找的方法又很麻煩。
這里需要用到一個技巧，利用灰色背景，讓兩個按鍵間的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" />
為什么要設(shè)置layout_width=0dp？結(jié)合layout_weight，可以使控件成正比例顯示，輕松解決了當(dāng)前Android開發(fā)最為頭疼的碎片化問題之一。如果設(shè)置成wrap_content，內(nèi)容過長會導(dǎo)致上下無法對齊的情況。
下面為整個布局內(nèi)容：
<?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>
是不是很酷？
圖標(biāo)什么的自己上網(wǎng)找吧，這里就不貼出來了。
Android制作漂亮自適布局鍵盤的方法就先給大家介紹到這里，后續(xù)還會持續(xù)更新相關(guān)知識，希望大家繼續(xù)關(guān)注腳本之家網(wǎng)站，謝謝！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了SeekBar拖動條的應(yīng)用實例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了Android SlidingMenu使用和示例詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-12-12
詳解如何在Android中實現(xiàn)懸浮Activity
本篇文章主要介紹詳解如何在Android中實現(xiàn)懸浮Activity，通過修改Activity的實現(xiàn)來適配平板設(shè)備，已達(dá)到代碼的最大利用率。有興趣的可以了解一下。2017-01-01
Android如何實現(xiàn)藍(lán)牙配對連接功能
Android 并沒有開放配對連接耳機的接口，而且網(wǎng)上大部分資料都是講解如何連接藍(lán)牙4.0的，很少有資料詳細(xì)介紹藍(lán)牙2.0相關(guān)的。期間還是踩了不少坑才摸索出解決辦法。所以把我自己摸索總結(jié)出來的經(jīng)驗梳理記錄下，以便備份2021-05-05
這篇文章主要介紹了android中開啟actionbar的兩種方法,本文給出了靜態(tài)開啟和動態(tài)開啟2種方法,需要的朋友可以參考下2015-06-06
Android使用Theme自定義Activity進(jìn)入退出動畫的方法
這篇文章主要介紹了Android使用Theme自定義Activity進(jìn)入退出動畫的方法,涉及Android的Activity屬性設(shè)置與資源操作技巧,需要的朋友可以參考下2016-07-07
利用Android中的TextView實現(xiàn)逐字顯示動畫
在安卓程序啟動的時候，想逐字顯示一段話，每個字都有一個從透明到不透明的漸變動畫。那如何顯示這個效果，下面一起來看看。2016-08-08
現(xiàn)在滑動效果用的比較多，尤其是在手機端上面，本文介紹了Android實現(xiàn)圖片左右滑動效果，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧。2016-10-10
詳解Android WebView的input上傳照片的兼容問題
本篇文章主要介紹了詳解Android WebView的input上傳照片的兼容問題，非常具有實用價值，需要的朋友可以參考下2017-08-08
Android實現(xiàn)右邊抽屜Drawerlayout效果
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)右邊抽屜Drawerlayout效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11