转载

打造一款计算器——1、界面设计

学习android有一段时间了，计划打造一款简单易用的计算器，界面及功能从最基础的样式开始，后续实现的过程中再慢慢进行完善。

欢迎感兴趣的朋友一起讨论、学习，大家共同进步。

写这篇文章时，还没有对计算器界面上按钮对应的功能进行实现，只是给出界面设计及布局生成（xml代码的编写）过程中需要注意的地方。

1、界面设计布局代码

  1 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"   2     android:id="@+id/tablelayout_calculator"   3     android:layout_width="match_parent"   4     android:layout_height="match_parent"   5     android:stretchColumns="*" >   6    7     <TextView android:id="@+id/text_input"   8         android:layout_weight="3"   9         android:layout_height="0dp"  10         android:layout_width="match_parent"  11         android:hint="input something"  12         android:gravity="bottom|right"  13         android:textSize="@dimen/text_size"  14         android:textColor="#0000ff" />  15   16     <TableRow android:layout_weight="1" >  17         <Button android:id="@+id/btn_sin"  18             android:layout_height="match_parent"  19             android:layout_width="wrap_content"  20             android:text="sin"  21             android:textSize="@dimen/text_size"  22             android:textAllCaps="false" />  23         <Button android:id="@+id/btn_cos"  24             android:layout_height="match_parent"  25             android:layout_width="wrap_content"  26             android:text="cos"  27             android:textSize="@dimen/text_size"  28             android:textAllCaps="false" />  29         <Button android:id="@+id/btn_tan"  30             android:layout_height="match_parent"  31             android:layout_width="wrap_content"  32             android:text="tan"  33             android:textSize="@dimen/text_size"  34             android:textAllCaps="false" />  35         <Button android:id="@+id/btn_cls"  36             android:layout_height="match_parent"  37             android:layout_width="wrap_content"  38             android:text="C"  39             android:textSize="@dimen/text_size"  40             android:textAllCaps="false" />  41         <Button android:id="@+id/btn_del"  42             android:layout_height="match_parent"  43             android:layout_width="wrap_content"  44             android:text="Del"  45             android:textSize="@dimen/text_size"  46             android:textAllCaps="false" />  47     </TableRow>  48   49     <TableRow android:layout_weight="1" >  50         <Button android:id="@+id/btn_pia"  51             android:layout_height="match_parent"  52             android:layout_width="wrap_content"  53             android:text="@string/calculator_pia"  54             android:textSize="@dimen/text_size" />  55         <Button android:id="@+id/btn_lna"  56             android:layout_height="match_parent"  57             android:layout_width="wrap_content"  58             android:text="ln"  59             android:textSize="@dimen/text_size"  60             android:textAllCaps="false" />  61         <Button android:id="@+id/btn_log"  62             android:layout_height="match_parent"  63             android:layout_width="wrap_content"  64             android:text="log"  65             android:textSize="@dimen/text_size"  66             android:textAllCaps="false" />  67         <Button android:id="@+id/btn_sig"  68             android:layout_height="match_parent"  69             android:layout_width="wrap_content"  70             android:text="!"  71             android:textSize="@dimen/text_size"  72             android:textColor="#ff9933" />  73         <Button android:id="@+id/btn_add"  74             android:layout_height="match_parent"  75             android:layout_width="wrap_content"  76             android:text="+"  77             android:textSize="@dimen/text_size"  78             android:textColor="#ff9933" />  79     </TableRow>  80   81     <TableRow android:layout_weight="1">  82         <Button android:id="@+id/btn_7"  83             android:layout_height="match_parent"  84             android:layout_width="wrap_content"  85             android:text="7"  86             android:textSize="@dimen/text_size" />  87         <Button android:id="@+id/btn_8"  88             android:layout_height="match_parent"  89             android:layout_width="wrap_content"  90             android:text="8"  91             android:textSize="@dimen/text_size" />  92         <Button android:id="@+id/btn_9"  93             android:layout_height="match_parent"  94             android:layout_width="wrap_content"  95             android:text="9"  96             android:textSize="@dimen/text_size" />  97         <Button android:id="@+id/btn_pow"  98             android:layout_height="match_parent"  99             android:layout_width="wrap_content" 100             android:text="^" 101             android:textSize="@dimen/text_size" 102             android:textColor="#ff9933"/> 103         <Button android:id="@+id/btn_sub" 104             android:layout_height="match_parent" 105             android:layout_width="wrap_content" 106             android:text="-" 107             android:textSize="@dimen/text_size" 108             android:textColor="#ff9933" /> 109     </TableRow> 110  111     <TableRow android:layout_weight="1"> 112         <Button android:id="@+id/btn_4" 113             android:layout_height="match_parent" 114             android:layout_width="wrap_content" 115             android:text="4" 116             android:textSize="@dimen/text_size" /> 117         <Button android:id="@+id/btn_5" 118             android:layout_height="match_parent" 119             android:layout_width="wrap_content" 120             android:text="5" 121             android:textSize="@dimen/text_size" /> 122         <Button android:id="@+id/btn_6" 123             android:layout_height="match_parent" 124             android:layout_width="wrap_content" 125             android:text="6" 126             android:textSize="@dimen/text_size" /> 127         <Button android:id="@+id/btn_sqr" 128             android:layout_height="match_parent" 129             android:layout_width="wrap_content" 130             android:text="@string/calculator_sqr" 131             android:textSize="@dimen/text_size" 132             android:textColor="#ff9933" /> 133         <Button android:id="@+id/btn_mul" 134             android:layout_height="match_parent" 135             android:layout_width="wrap_content" 136             android:text="*" 137             android:textSize="@dimen/text_size" 138             android:textColor="#ff9933" /> 139     </TableRow> 140  141     <TableRow android:layout_weight="1"> 142         <Button android:id="@+id/btn_1" 143             android:layout_height="match_parent" 144             android:layout_width="wrap_content" 145             android:text="1" 146             android:textSize="@dimen/text_size" /> 147         <Button android:id="@+id/btn_2" 148             android:layout_height="match_parent" 149             android:layout_width="wrap_content" 150             android:text="2" 151             android:textSize="@dimen/text_size" /> 152         <Button android:id="@+id/btn_3" 153             android:layout_height="match_parent" 154             android:layout_width="wrap_content" 155             android:text="3" 156             android:textSize="@dimen/text_size" /> 157         <Button android:id="@+id/btn_lef" 158             android:layout_height="match_parent" 159             android:layout_width="wrap_content" 160             android:text="(" 161             android:textSize="@dimen/text_size" 162             android:textColor="#ff9933" /> 163         <Button android:id="@+id/btn_div" 164             android:layout_height="match_parent" 165             android:layout_width="wrap_content" 166             android:text="/" 167             android:textSize="@dimen/text_size" 168             android:textColor="#ff9933" /> 169     </TableRow> 170  171     <TableRow android:layout_weight="1"> 172         <Button android:id="@+id/btn_0" 173             android:layout_height="match_parent" 174             android:layout_width="wrap_content" 175             android:text="0" 176             android:textSize="@dimen/text_size" /> 177         <Button android:id="@+id/btn_00" 178             android:layout_height="match_parent" 179             android:layout_width="wrap_content" 180             android:text="00" 181             android:textSize="@dimen/text_size" /> 182         <Button android:id="@+id/btn_poi" 183             android:layout_height="match_parent" 184             android:layout_width="wrap_content" 185             android:text="." 186             android:textSize="@dimen/text_size" /> 187         <Button android:id="@+id/btn_rig" 188             android:layout_height="match_parent" 189             android:layout_width="wrap_content" 190             android:text=")" 191             android:textSize="@dimen/text_size" 192             android:textColor="#ff9933" /> 193         <Button android:id="@+id/btn_equ" 194             android:layout_height="match_parent" 195             android:layout_width="wrap_content" 196             android:text="=" 197             android:textSize="@dimen/text_size" 198             android:textColor="#ff9933" /> 199     </TableRow> 200  201 </TableLayout>

2、xml代码简单分析

针对计算器这种功能性按钮呈类似表格状分布的应用程序界面，笔者首先想到的布局组件就是TableLayout和TableRow。

从xml布局代码或开头的界面示意图可以看出，整体界面的布局采用的组件如下：

a、根元素是1个TableLayout，并且设置了属性 android:stretchColumns="*"，保证其子组件TableRow中的元素所占列宽相同；

b、第二级子组件为 1个TextView和6个TableView，前者TextView用来显示用户输入内容和最终计算结果；后者每个TableRow各有五个按钮，即总共30个按钮；

下面主要介绍一下布局代码中需要注意的地方。

a、第8、9行对于TextView组件的高度属性设置为android:layout_weight="3" ， android:layout_height="0dp"，结合后面的5个TableRow组件的高度属性设置android:layout_weight="1"，那么整个TableLayout的所占的界面高度被分为了8份，最终效果为1个TextView占总高度的3/8，5个TableRow各占总高度1/8；

b、第22行对于按钮文本内容显示的大小写属性设置为android:textAllCaps="false"，false表示最终显示在按钮的文本内容的大小写和定义时一致，如果不设置的话默认为true，那么程序会自动将本文全部转为大写；

c、第20、26等行是在xml布局文件中直接对按钮文本进行设置，规范的做法应该是在资源文件values/strings.xml（名称自取，不固定）文件中进行定义，然后在xml文件中利用 @string/xxx（Java代码中是R.string.xxx）的形式进行获取；当然，有些字串是无法直接在xml布局文件中进行输入的，如π（pi，53行）、√（sqrt，130行）等，这时就必须在资源文件中对其进行定义，利用机器能够识别的十进制编码。定义代码如下：

1 <string name="calculator_pia">π</string> 2 <string name="calculator_sqr">√</string>

d、当然，可以将每个按钮或者每个TableRow结合styles等属性分别定义成可复用的xml文件，那样的话在最终的界面布局文件activity_calculator.xml中只需要利用include关键字导入定义好的TableRow组件对应的文件名即可。这部分设计本文没有给出，后面实现过程中如有必要的话会进行实现并写入文章中；

3、字串赋值规范化

既然说到字串等资源定义的规范化，接下来就将上面介绍的按钮文本直接赋值转为资源文件+Java代码的设置方式。

首先将所有按钮用到的字串统一定义到资源文件values/strings_calculator.xml中，具体如下。

 1 <?xml version="1.0" encoding="utf-8"?>  2 <resources>  3   4     <string-array name="strings_calculator" >  5   6         <item>sin</item>  7         <item>cos</item>  8         <item>tan</item>  9         <item>C</item> 10         <item>Del</item> 11  12         <item>π</item> 13         <item>ln</item> 14         <item>log</item> 15         <item>!</item> 16         <item>+</item> 17  18         <item>7</item> 19         <item>8</item> 20         <item>9</item> 21         <item>^</item> 22         <item>-</item> 23  24         <item>4</item> 25         <item>5</item> 26         <item>6</item> 27         <item>√</item> 28         <item>*</item> 29  30         <item>1</item> 31         <item>2</item> 32         <item>3</item> 33         <item>(</item> 34         <item>/</item> 35  36         <item>0</item> 37         <item>00</item> 38         <item>.</item> 39         <item>)</item> 40         <item>=</item> 41  42     </string-array> 43  44 </resources>

接下来得注意，定义了字串资源文件后，对组件的文本进行设置可以在xml布局文件中，也可以在Java代码中。虽然常见的也较符合常理的做法是在xml中利用android:text=@string/xxx进行设置，但是针对本文介绍的计算器而言，在Java代码中进行设置更为方便。结合TableLayout和TableRow的特性，来看看怎样快速地对左右按钮进行本文的设置。

 1 package com.dylan_wang.calculator;  2   3 import android.app.Activity;  4 import android.os.Bundle;  5 import android.view.Menu;  6 import android.view.MenuItem;  7 import android.widget.Button;  8 import android.widget.TableLayout;  9 import android.widget.TableRow; 10  11 public class ActivityCalculator extends Activity { 12  13     @Override 14     protected void onCreate(Bundle savedInstanceState) { 15         super.onCreate(savedInstanceState); 16         setContentView(R.layout.activity_calculator); 17  18         String[] stringsCalculator = getResources().getStringArray(R.array.strings_calculator); 19         TableLayout tableLayout = (TableLayout)findViewById(R.id.tablelayout_calculator); 20         for(int i=1;i<tableLayout.getChildCount();++i){ 21             TableRow tableRow = (TableRow)tableLayout.getChildAt(i); 22             for(int j=0;j<tableRow.getChildCount();++j){ 23                 Button button = (Button)tableRow.getChildAt(j); 24                 button.setText(stringsCalculator[(i-1)*5+j]); 25             } 26         } 27     } 28  29     @Override 30     public boolean onCreateOptionsMenu(Menu menu) { 31         // Inflate the menu; this adds items to the action bar if it is present. 32         getMenuInflater().inflate(R.menu.menu_main, menu); 33         return true; 34     } 35  36     @Override 37     public boolean onOptionsItemSelected(MenuItem item) { 38         // Handle action bar item clicks here. The action bar will 39         // automatically handle clicks on the Home/Up button, so long 40         // as you specify a parent activity in AndroidManifest.xml. 41         int id = item.getItemId(); 42  43         //noinspection SimplifiableIfStatement 44         if (id == R.id.action_settings) { 45             return true; 46         } 47  48         return super.onOptionsItemSelected(item); 49     } 50 }