Android框架上的简单计算器界面设计

ChEu

为了深入理解和应用Android框架系统的控件以及更加熟练的掌握eclips的开发技巧，所以就决定做一个简单的计算器来了解和介绍一下Android界面设计的基本技巧。界面的样子如下：



这个界面由一个编辑框和很多按钮组成。他的功能跟Windows下的计算其功能差不多，就是实现+-*/等功能。这个还实现了一个菜单的功能。按一下Exit就可以离开这个应用程序了。

Android框架定义了很多布局(Layout)架构。布局就像容器，里面可以装下很多控件。布局里面还可以套用其他的布局。这样就可以实现界面的多样化以及设计的灵活性。在这个界面中，我们应用了一个LinearLayout的布局，它是垂直向下扩展的。在这个LinearLayout中，我们可以应用一个EditText和一个TableLayout作为他的子控件。在TableLayout布局可以实现以表格的形式来布局空间。而TableRow是用来定义每一行。在TableLayout中，列的宽度是取其中这一列中宽度最大的控件的宽度。这个应用程序正好用到5x5的一个表格，TableLayout将是最好的选择了。

Android界面编程的一个优势是他的布局全部可以用xml文件来描述，实现了即改即现的方式。ADT又在Eclips里面做了一个Outline的插件。当你打开布局xml文件的时候，Outline就会显示布局的所有控件以及他们的结构。双击其中的控件就会打开空间的属性。你就可以直接编辑属性来轻松实现界面的布局。所改的属性也将立刻在xml文件中显示出来。以下是描述这个简单计算器的界面xml文件给大家做个参考：




?xml version="1.0" encoding="utf-8"?>
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ff808080"
    >
    EditText android:id="@+id/input"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:cursorVisible="false"
        android:gravity="right"
        android:editable = "false"/>
    TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     >
        TableRow
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         >   
            Button android:id="@+id/seven"
             android:text="7"
                android:layout_height="wrap_content"
                android:layout_width="63sp"/>   
            Button android:id="@+id/eight"
             android:text="8"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />   
            Button android:id="@+id/nine"
             android:text="9"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />   
            Button android:id="@+id/divide"
             android:text="/"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />   
            Button android:id="@+id/sqrt"
             android:text="sqrt"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />                                                                                             
        /TableRow>         
        TableRow
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         >   
            Button android:id="@+id/four"
             android:text="4"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />   
            Button android:id="@+id/five"
             android:text="5"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />   
            Button android:id="@+id/six"
             android:text="6"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />   
            Button android:id="@+id/multiply"
             android:text="*"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />   
            Button android:id="@+id/remainder"
             android:text="%"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />                                                                                             
        /TableRow>              
        TableRow
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         >   
            Button android:id="@+id/one"
             android:text="1"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />   
            Button android:id="@+id/two"
             android:text="2"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />   
            Button android:id="@+id/three"
             android:text="3"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />   
            Button android:id="@+id/minus"
             android:text="-"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />   
            Button android:id="@+id/convert"
             android:text="1/x"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />                                                                                             
        /TableRow>         
        TableRow
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         >   
            Button android:id="@+id/zero"
             android:text="0"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />   
            Button android:id="@+id/digit"
             android:text="."
                android:layout_width="63sp"
                android:layout_height="wrap_content" />   
            Button android:id="@+id/equal"
             android:text="="
                android:layout_width="63sp"
                android:layout_height="wrap_content" />   
            Button android:id="@+id/plus"
             android:text="+"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />   
            Button android:id="@+id/cancel"
             android:text="C"
             android:textColor="#ffff0000"
                android:layout_width="63sp"
                android:layout_height="wrap_content" />                                                                                             
        /TableRow>                          
    /TableLayout>        
/LinearLayout>


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u2/86463/showart_1674836.html