Android计算器界面布局
程序员文章站
2022-06-10 13:50:23
...
- 这是一个Android的计算器界面布局,仅布局,不实现功能
目录
1. 界面布局分析
- 效果图
- 这个界面总体是垂直分布,从上到下共7行
- 第1、2行是输入、输出框,这里采用的是EditText
- 第3到7行是输入按钮,每行水平分布
- 第3到6行行内每个Button大小相同
- 第7行的Button“0”占了两个位置
由此我们可以简单总结出,总框架权重设置为7,每行占总权重的1,但是按钮行的按钮个数、大小不一样,要使界面美观的话必须也要行内对齐,所以每行也要单独设置权重
2. 实现代码及注释
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" #垂直分布
android:weightSum="7"> #总权重为7
<EditText #第一个输入框
android:id="@+id/input"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#aaaaaa"
android:layout_weight="1"/> #占总权重7的1(7.1)
<EditText #第二个文本框
android:id="@+id/output"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#cccccc"
android:layout_weight="1"/> #占总权重7的1(7.2)
<LinearLayout #第一行Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" #此行占总权重的1(7.3)
android:orientation="horizontal" #控件内容水平排列
android:weightSum="5"> #控件有5个button,设置行权重5
<Button #第一行第一个Button
android:id="@+id/button_clear"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" #占父LinearLayout权重的1(5.1)
android:text="AC"
android:textSize="25sp" />
<Button #第一行第二个Button
android:id="@+id/button_delete"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" #占父LinearLayout权重的1(5.2)
android:text="DEL"
android:textSize="25sp" />
<Button
android:id="@+id/button_left"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="("
android:textSize="25sp" />
<Button
android:id="@+id/button_right"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text=")"
android:textSize="25sp" />
<Button #第一行第5个Button
android:id="@+id/button_divide"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" #占父LinearLayout权重的1(5.5)
android:text="/"
android:textSize="25sp" />
</LinearLayout>
<LinearLayout #第二行Button
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" #占总权重的1(7.4)
android:orientation="horizontal" #控件内容水平排列
android:weightSum="4"> #控件有4个button,设置行权重4
<Button
android:id="@+id/button_7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" #占父LinearLayout权重的1(4.1)
android:text="7"
android:textSize="25sp" />
<Button
android:id="@+id/button_8"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" #占父LinearLayout权重的1(4.2)
android:text="8"
android:textSize="25sp" />
<Button
android:id="@+id/button_9"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" #占父LinearLayout权重的1(4.3)
android:text="9"
android:textSize="25sp" />
<Button
android:id="@+id/button_add"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" #占父LinearLayout权重的1(4.4)
android:text="+"
android:textSize="50sp" />
</LinearLayout>
<LinearLayout #第三行Button
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" #占总权重的1(7.5)
android:orientation="horizontal"
android:weightSum="4"> #此控件包含4个Button,设置行权重4
<Button
android:id="@+id/button_4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" #占父LinearLayout权重的1(4.1)
android:text="4"
android:textSize="25sp" />
<Button
android:id="@+id/button_5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" #占父LinearLayout权重的1(4.2)
android:text="5"
android:textSize="25sp" />
<Button
android:id="@+id/button_6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" #占父LinearLayout权重的1(4.3)
android:text="6"
android:textSize="25sp" />
<Button
android:id="@+id/button_minus"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" #占父LinearLayout权重的1(4.4)
android:text="-"
android:textSize="25sp" />
</LinearLayout>
<LinearLayout #第四行Button
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" #占总权重的1(7.6)
android:orientation="horizontal"
android:weightSum="4"> #此控件包含4个Button,设置行权重4
<Button
android:id="@+id/button_1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
android:textSize="25sp" />
<Button
android:id="@+id/button_2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="2"
android:textSize="25sp" />
<Button
android:id="@+id/button_3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="3"
android:textSize="25sp" />
<Button
android:id="@+id/button_mult"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="x"
android:textSize="25sp" />
</LinearLayout>
<LinearLayout #第五行Button,特殊
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4"> #“0”占了两个位置,其余两个按钮分别占了一个位置,设置行权重为4
<Button
android:id="@+id/button_0"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" #“0”占了两个位置,占父LinearLayout权重的2(4.2)
android:text="0"
android:textSize="25sp" />
<Button
android:id="@+id/button_point"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" #“.”占了1个位置,占父LinearLayout权重的1(4.3)
android:text="."
android:textSize="25sp" />
<Button
android:id="@+id/button_equal"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" #占了1个位置,占父LinearLayout权重的1(4.4)
android:text="="
android:textSize="25sp" />
</LinearLayout>
</LinearLayout>
3. 代码说明
- 这个布局主要考验对权重 android:layout_weight 的理解,可以简单粗暴的理解为主控件 android:weightSum 设置总权重,旗下每个控件的 android:layout_weight 表示子控件占父控件的空间比例
- 这个例子中的主控件是最外层的 LinearLayout,旗下包含7个子控件,两个 EditText 用于显示输入输出,5个子 LinearLayout 用于显示每行的按钮,所以设置主控件的权重为7,每个子控件各占1
- 在子控件 LinearLayout 中,前4个 LinearLayout 中的 Button 都是均匀分布,大小相同的,所以有几个 Button 就设置父 LinearLayout 的权重 android:weightSum 为几,然后每个 Button 所占的权重 android:layout_weight 为1,效果就是每行 LinearLayout 内的 Button 均匀排列
- 最后一行的 LinearLayout 中,Button “0” 占了两个位置,其它两个 Button 各占一个位置,共4个位置大小,所以设置父 LinearLayout 的权重 android:weightSum 为4,Button ”0“ 的 android:layout_weight 为2,其余两个 Button 的 android:layout_weight 均为1
- android:layout_weight 对应属性的属性值设置为0dp,此例中主控件 LinearLayout 的子控件为垂直排列,因此子控件 EditText 和子控件 LinearLayout 的 android:layout_height 的值都是0dp; 在子控件 LinearLayout 中,Button 为水平摆列,因此 Button 的 android:layout_width 的值是0dp