Android开发计算器之布局

浏览数：18 / 时间：2015年06月11日

学习了一段时间的安卓，现在开始操作一个小例子——计算器。相信我们的手机中都有计算器这个软件，但是你知道它是怎么进行具体操作的吗？其实我暂时也还不知道，现在就简单的布局来做一个小总结。

对于一个软件，漂亮的用户界面（UI）总能给使用者留下深刻印象，这也是我们听了界面设计课之后应有的思想。对于Android这样的手机应用软件而言，用户界面更是不可忽略的。在Android中，View是所有可视化控件的基类，它有五大布局方式：

技术分享

线性布局

线性布局（LinearLayout）是较简单的一个布局，它提供了控件水平或者垂直方向的排列方式。

表格布局

表格布局（TableLayout）是按照行列来组织子视图的布局，包含一系列的TableRow队形，用于定义行。

相对布局

相对布局（RelativeLayout）是指在容器内部的子元素可以使用彼此之间的相对位置或与容器间的相对位置来进行定位。

帧布局

帧布局（FrameLayout）是五大布局中最简单的一个布局，在这个布局中，整个界面被当成空白区域，所有子元素都不能都不能指定位置放置，全都放在空白区域的左上角，并且后面的子元素直接覆盖在前面的子元素上，将前面的子元素部分或全部遮挡。

绝对布局

绝对布局（AbsoluteLayout）是指所有控件的排列由开发人员通过控件的坐标来指定，容器不负责管理子控件的位置。

上面说了Android的五大布局，在进行实际设计的时候，开发人员根据界面的需求选择相应的布局。此外，五大布局还可以相互的嵌套。下面是设计Android计算机的界面的例子，采用了布局的嵌套。修改

主Activity的布局文件main.xml，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="本案例演示布局的嵌套" 
        android:textSize="20px"/>
    
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="50px"
        android:textSize="40px"
		android:gravity="right"
        android:background="#fff" />
    

    	<RelativeLayout
    	    android:layout_width="fill_parent"
    	    android:layout_height="wrap_content"
    	    android:orientation="horizontal" >

    	    
    	    <Button
    	        android:id="@+id/num1"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_alignParentLeft="true"
    	        android:padding="20px"
    	        android:text="1"
    	        android:textSize="20px" />

    	    <Button
    	        android:id="@+id/num2"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/num1"
    	        android:padding="20px"
    	        android:text="2"
    	        android:textSize="20px" />

    	    <Button
    	        android:id="@+id/num3"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/num2"
    	        android:padding="20px"
    	        android:text="3"
    	        android:textSize="20px" />
    	    
    	    <Button
    	        android:id="@+id/back"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/num3"
    	        android:padding="20px"
    	        android:text="BACK"
    	        android:textSize="20px" />

    	    <Button
    	        android:id="@+id/add"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/back"
    	        android:padding="20px"
    	        android:text="+"
    	        android:textSize="20px" />
    	    
    	</RelativeLayout>
    	
    	    <RelativeLayout
    	    android:layout_width="fill_parent"
    	    android:layout_height="wrap_content"
    	    android:orientation="horizontal" >

    	    
    	    <Button
    	        android:id="@+id/num11"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_below="@id/num1"
    	        android:padding="20px"
    	        android:text="4"
    	        android:textSize="20px" />

    	    <Button
    	        android:id="@+id/num12"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/num11"
    	        android:padding="20px"
    	        android:text="5"
    	        android:textSize="20px" />

    	    <Button
    	        android:id="@+id/num13"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/num12"
    	        android:padding="20px"
    	        android:text="6"
    	        android:textSize="20px" />
    	    
    	    <Button
    	        android:id="@+id/left"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/num13"
    	        android:padding="20px"
    	        android:text="("
    	        android:textSize="20px" />

    	    <Button
    	        android:id="@+id/jian"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/left"
    	        android:padding="20px"
    	        android:text="-"
    	        android:textSize="20px" />
    	    
    	</RelativeLayout>
    	
    	        <RelativeLayout
    	    android:layout_width="fill_parent"
    	    android:layout_height="wrap_content"
    	    android:orientation="horizontal" >

    	    
    	    <Button
    	        android:id="@+id/num21"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_below="@id/num11"
    	        android:padding="20px"
    	        android:text="7"
    	        android:textSize="20px" />

    	    <Button
    	        android:id="@+id/num22"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/num21"
    	        android:padding="20px"
    	        android:text="8"
    	        android:textSize="20px" />

    	    <Button
    	        android:id="@+id/num23"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/num22"
    	        android:padding="20px"
    	        android:text="9"
    	        android:textSize="20px" />
    	    
    	    <Button
    	        android:id="@+id/right"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/num23"
    	        android:padding="20px"
    	        android:text=")"
    	        android:textSize="20px" />

    	    <Button
    	        android:id="@+id/chen"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/right"
    	        android:padding="20px"
    	        android:text="*"
    	        android:textSize="20px" />
    	    
    	</RelativeLayout>
    	
		<RelativeLayout
    	    android:layout_width="fill_parent"
    	    android:layout_height="wrap_content"
    	    android:orientation="horizontal" >

    	    
    	    <Button
    	        android:id="@+id/num31"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_below="@id/num21"
    	        android:padding="20px"
    	        android:text="0"
    	        android:textSize="20px" />

    	    <Button
    	        android:id="@+id/num32"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/num31"
    	        android:padding="20px"
    	        android:text="CE"
    	        android:textSize="20px" />

    	    <Button
    	        android:id="@+id/num33"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/num32"
    	        android:padding="20px"
    	        android:text="."
    	        android:textSize="20px" />
    	    
    	    <Button
    	        android:id="@+id/equal"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/num33"
    	        android:padding="20px"
    	        android:text="="
    	        android:textSize="20px" />

    	    <Button
    	        android:id="@+id/gang"
    	        android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
    	        android:layout_toRightOf="@id/equal"
    	        android:padding="20px"
    	        android:text="/"
    	        android:textSize="20px" />
    	    
    	</RelativeLayout>
</LinearLayout>

效果图如下：

技术分享