安豆计算器 第5节 界面美化

第5节 界面美化

这一节,我们将对粗糙的计算器界面进行美化,最后让它的效果如下,

5.1 整体背景色

给整个背景调整一个背景颜色,让它变得美观。

  1. 在布局文件activity_main.xml中,给整个界面增加一个背景颜色#FF4B5459,对界面的父布局LinearLayout使用android:background属性设置;
  2. 这里的颜色是采用AARRGGBB的形式进行定义的,AA表示透明度,RR代表红色,GG代表绿色,BB代表蓝色;

5.2 美化显示区域

开始调整显示区域。

5.2.1 添加显示区域分隔栏

结果显示区域和表达式显示区域混在一起,不易分辨,需要把它们分开;

  1. 它们表达式区域和结果区域之间,增加一条间隔线,高度设置为5dp
  2. 间隔线的颜色为#FF5C6265

5.2.2 修改字体和排列

  1. 显示区域的字体颜色通过android:textColor属性设置成白色#FFFFFFFF
  2. 字体大小通过android:textSize属性设置成45sp
  3. 通过android:gravity属性让文字位于左边居中显示;
  4. 显示区域的页边距通过android:padding属性设置成5dp

5.3 美化键盘

接下来开始美化键盘。

5.3.1 字体大小和颜色修改

修改Button的字体大小和字体颜色,与修改TextView的字体大小和字体颜色完全一样,

  1. android:textColor设置文字颜色为黑色#FF000000
  2. android:textSize设置文字大小为35sp

5.3.2 增加按钮效果

下面开始修改Button的按键背景效果,我们的键盘有3种效果:

  1. 数字按键0-9 .使用的效果;
  2. C DEL /使用的效果;
  3. * - + =使用的效果;

修改按钮的背景需要使用selector drawble。首先用数字按钮举例。

5.3.2.1 数字按键效果

  1. 打开res\values\colors.xml文件,定义没有按下按钮时背景的颜色为#D0DCE3按下按钮时背景的颜色为#BED1DB

  2. res\drawable\目录下,点击右键,启动创建drawable resource的向导;

  3. 创建selector drawable的xml文件,文件名为digital_btn_selector.xml

  4. 根据Button是否被按下的状态android:state_pressed,分别为它们设置不同的颜色,android:state_pressed=true,说明当前按钮被按下,android:state_pressed=false,说明当前按钮没有被按下;设置颜色使用@color关键字,并加上之前在colors.xml中定义的颜色的名字;

  5. 给数字按键7Button设置android:background属性,使用drawable selector,

    这样就能看到数字按键的效果了。

5.3.2.2 浅色按键效果

  1. 定义没有按下按钮时背景的颜色为#BED1DB按下按钮时背景的颜色为#66A1B4

  2. 创建selector drawable的xml文件,文件名为symbol_light_btn_selector.xml

  3. 给按键CButton设置android:background属性,使用drawable selector,

5.3.2.3 深色按键效果

  1. 定义没有按下按钮时背景的颜色为#66A1B4按下按钮时背景的颜色为#78CCE6

  2. 创建selector drawable的xml文件,文件名为symbol_dark_btn_selector.xml

  3. 给按键*Button设置android:background属性,使用drawable selector,

5.3.3 使用style来实现三种不同的效果

要修改所有的按钮效果,可以给每个Button使用android:background属性增加对应的背景,但是这样就需要修改很多地方。

为了减少修改每个Button的工作量,可以将上面Button的3种显示效果各定义成一种style,然后再为Button设置对应的style就可以了。
先以数字按键为例,来定义style。

5.3.3.1 数字按键style

  1. 打开res\values\styles.xml文件;
  2. Button的共同特性定义成一个style---DigitalBtnStyle;此外,为了键盘美观,通过定义android:layout_margin属性,增加了每个按钮的间距。

  3. 为所有数字按钮设置style属性,添加DigitalBtnStyle风格;

5.3.3.2 符号浅色按键style

  1. res\values\styles.xml文件中,定义SymbolLightBtnStyle

  2. C DEL /按钮设置style属性,添加SymbolLightBtnStyle风格;

5.3.3.3 符号深色按键style

  1. res\values\styles.xml文件中,定义SymbolDarkBtnStyle

  2. * - + =按钮设置style属性,添加SymbolDarkBtnStyle风格;

5.3.4 使用style来实现显示区域的效果

显示区域也可以使用style

  1. res\values\styles.xml文件中,定义一个TextAreaStyle

  2. 使用TextAreaStyle

至此,计算器界面美化完成。