Android to make beautiful self-adapting layout keyboard method _android

Recently made a custom keyboard, but the face of different resolution of the model in which the number of keyboards can not be based on the size of the interface, but can not be a set of each model to do it, so to make adaptive, then here is the idea of the speaker.

Here the top titlebar height is fixed, the amount of input below is also fixed (of course can be adaptive), mainly in the middle of the numeric keypad, height and width need to adapt. First, the effect of the picture:

The most common solution is to use a linear layout, adaptive, of course, proportionally, but the concept of no% in the layout, it is necessary to use the layout_weight, the role of this property is to determine the control in its parent layout of the display weight (the specific concept is not much to say).

Here use a linearlayout to package the numeric keypad with the following payment type, and then use a large linearlayout to wrap all the numeric keyboards as shown below, which is 6:1 proportional to the following type of payment, so that the numeric keypad changes in height and width of the screen size, Each line of numeric keypad is a linearlayout with 3 digits inside the button.

Set the LinearLayout layout_height=0dp,layout_weight=1 for each row, as follows:

 <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>

This ensures that the up and down adaptive layout. Then the button inside the line is also evenly distributed, but here is the landscape layout: Layout_width=0dp,layout_weight=1, set as follows:

<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>

This has reached the top of the numeric keypad and up and down the adaptive. Now the question is, how does the gray border come out? TextView does not set the Border property, the online search method is very troublesome.

Here is a trick to use, using the gray background, so that the two keys between the margin=1, up and Down is also margin=1, but the rightmost 3, 6, 9 and the last line does not need to add.

<button
 android:id= "@+id/btn_1"
 style= "@style/btn_input_amount_style"
 android:layout_ marginright= "1DP"
 android:text= "1"/>

Why do you want to set up LAYOUT_WIDTH=0DP? Combined with layout_weight, the control can be shown in a proportional example, easily addressing one of the most vexing fragmentation problems of current Android development. If set to wrap_content, excessive content can result in an inability to align up and down.

The following are the entire layout contents:

<?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 a Ndroid:id= "@+id/bar_back" android:layout_width= "wrap_content" android:layout_height= "Match_parent" android:backgr ound= "@color/transparent" android:drawableleft= "@drawable/btn_back_detail" android:paddingleft= "17dip" Android:pa ddingright= "17dip"/> <textview android:id= "@+id/bar_title" style= "@style/title_text_style" android:layou
T_width= "Wrap_content" android:layout_height= "Wrap_content"   Android:layout_centerinparent= "true" android:layout_marginleft= "50DP" android:layout_marginright= "50DP" Androi 
  D:singleline= "true" android:text= "input Amount"/> </RelativeLayout> <linearlayout android:id= "@+id/txt_amount" Android:layout_width= "Match_parent" android:layout_height= "wrap_content" android:layout_below= "@id/bar_input" and roid: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_wi Dth= "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" an droid: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 and Roid:id= "@+id/btn_3" style= "@style/btn_input_amount_style" android:text= "3"/> </LinearLayout> &l T LinearLayout style= "@style/layout_input_amount_style" > <button android:id= "@+id/btn_4" style= "@style/b Tn_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 Andr Oid: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/b Tn_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"/> </L inearlayout> <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=". "/> <bu Tton 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 "a ndroid:layout_height= "68DP" android:layout_weight= "1" android:orientation= "horizontal" > <linearlayout a Ndroid:id= "@+id/layout_zhifubao" android:layout_width= "0DP" android:layout_height= "Wrap_content" android:layou t_weight= "1" android:background= "@color/logo_background" android:gravity= "center" android:orientation= "Vertica L "> <imageview android:layout_width=" wrap_content "android:layout_height=" Wrap_content "android:l ayout_margintop= "9DP" android:src= "@drawable/ico_zhifubao"/> <textview android:layout_width= "Wrap_con Tent "Android:layout_height= "Wrap_content" android:layout_marginbottom= "9DP" android:text= "Alipay" android:textcolor= "@color/whit
    E "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/I
     Co_wechat "/> <textview android:layout_width= wrap_content" android:layout_height= "Wrap_content" Android:layout_marginbottom= "9DP" android:text= "micro-letter" android:textcolor= "@color/white" android:textsize= "12sp "/> </LinearLayout> <linearlayout android:id=" @+id/layout_pay "android:layout_width=" 0DP "a Ndroid:layout_height= "WRAp_content "android:layout_weight=" "1" android:background= "#ff7700" android:gravity= "center" android:orient
     ation= "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= "stored value" Android:textcolor= "@color/white" android:textsize= "12sp"/> </LinearLayout> </LinearLayout> &L T;/linearlayout> </RelativeLayout>

Isn't it cool?

Icons or what they find on the Internet, here is not posted.

Android to make beautiful self-adaptive layout of the keyboard method to introduce to everyone here, follow-up will continue to update the relevant knowledge, I hope you continue to pay attention to cloud Habitat community site, thank you!