【安卓开发】UI设计基础2：用线性布局实现计算器UI布局

线性布局

1、线性布局的摆放规则是子视图按照纵向（由上到下）或者横向（由左到右）单向排列。通过 android:orientation 属性来选择其子视图是纵向（值为 vertical）还是横向（值为 horizontal，默认值）排列。

2、 线性布局中的子视图，可以通过设置 layout_weight 属性，来声明自己占据的空间的比例权值。

布局层次

红色框为父视图分为垂直的两个布局，蓝色框为功能键分为垂直的五个布局



• 父视图包含垂直的两个布局



• 功能键这一布局中包含五个垂直的布局，每个布局为一排功能键



• 每排功能键布局中有四个水平放置的按钮

代码实现

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="70dp"
android:text="计算结果"
android:textSize="50dp"
android:gravity="right|bottom"
/>

</LinearLayout>     <!-- 显示结果的文本框 -->

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:orientation="vertical"
tools:ignore="ExtraText">
>

<!--因为此布局是功能键的一排，因此宽应该是填满功能键的宽度，高应该是把内容显示出来，四个键是水平分布的-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"

>

<!--  button 的水平方向和垂直方向都应该是把内容显示出来所以都要wrap_content-->

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AC"
android:textSize="30dp"/>
<!--  每个button中的text为内容，textsize为字体大小-->

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:text="DEL"
android:textSize="30dp" />
<!--  除第一个button外，其余的button可以设置与左边button的距离，我这里设置的0dp也就是默认值-->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:text="-/+"
android:textSize="30dp" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:text="/"
android:textSize="30dp" />

</LinearLayout>             <!-- 第一排功能键-->

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"

>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
android:textSize="30dp"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:text="8"
android:textSize="30dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:text="9"
android:textSize="30dp"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:text="*"
android:textSize="30dp" />
</LinearLayout>                 <!-- 第二排功能键-->

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"

>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"

android:textSize="30dp"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:text="5"
android:textSize="30dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:text="6"
android:textSize="30dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:text="-"
android:textSize="30dp"/>

</LinearLayout>             <!-- 第三排功能键-->

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"

android:orientation="horizontal"

>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="30dp"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:text="2"
android:textSize="30dp"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:text="3"
android:textSize="30dp"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:text="+"
android:textSize="30dp" />

</LinearLayout>

</LinearLayout>                 <!-- 第四排功能键-->

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"

>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="="
android:textSize="30dp" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="30dp" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:layout_marginRight="0dp"
android:text="."
android:textSize="30dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"

android:text="%"
android:textSize="30dp" />

</LinearLayout>                 <!-- 第五排功能键-->

</LinearLayout>

</LinearLayout>