Android计算器界面布局

- 这是一个Android的计算器界面布局，仅布局，不实现功能

---

目录

• 1. 界面布局分析
• 2. 实现代码及注释
• 3. 代码说明
• 4. 参考资料

---

1. 界面布局分析

• 效果图
  
• 这个界面总体是垂直分布，从上到下共7行
• 第1、2行是输入、输出框，这里采用的是EditText
• 第3到7行是输入按钮，每行水平分布
• 第3到6行行内每个Button大小相同
• 第7行的Button“0”占了两个位置

由此我们可以简单总结出，总框架权重设置为7，每行占总权重的1，但是按钮行的按钮个数、大小不一样，要使界面美观的话必须也要行内对齐，所以每行也要单独设置权重

---

2. 实现代码及注释

<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

---

4. 参考资料

• layout_weight深刻理解