手把手教你做安豆计算器－界面美化

Posted 2020-08-02 anddlecn

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手把手教你做安豆计算器－界面美化相关的知识，希望对你有一定的参考价值。

第5节界面美化

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

5.1 整体背景色

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

在布局文件activity_main.xml中，给整个界面增加一个背景颜色#FF4B5459，对界面的父布局LinearLayout使用android:background属性设置；

这里的颜色是采用AARRGGBB的形式进行定义的，AA表示透明度，RR代表红色，GG代表绿色，BB代表蓝色；

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.anddle.calculator.MainActivity"
    android:orientation="vertical"
    android:background="#FF4B5459">
</LinearLayout>

5.2 美化显示区域

开始调整显示区域。

5.2.1 添加显示区域分隔栏

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

它们表达式区域和结果区域之间，增加一条间隔线，高度设置为5dp；

间隔线的颜色为#FF5C6265；

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="vertical">

    <TextView
        android:id="@+id/result_area"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="#FF5C6265" />

    <TextView
        android:id="@+id/formula_area"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

</LinearLayout>

5.2.2 修改字体和排列

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="vertical">

    <TextView
        android:id="@+id/result_area"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:textColor="#FFFFFFFF"
        android:textSize="45sp"
        android:gravity="center_vertical|right"
        android:padding="5dp"/>

    <View
            android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="#FF5C6265" />

    <TextView
        android:id="@+id/formula_area"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:textColor="#FFFFFFFF"
        android:textSize="45sp"
        android:gravity="center_vertical|right"
        android:padding="5dp"/>

</LinearLayout>

5.3 美化键盘

接下来开始美化键盘。

5.3.1 字体大小和颜色修改

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

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

<TableRow android:layout_weight="1">
    <Button android:id="@+id/btn_c" 
        android:text="C" 
        android:onClick="onClick"
        android:textColor="#FF000000"
        android:textSize="35sp"/>
    ......
</TableRow>

5.3.2 增加按钮效果

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

数字按键0-9 .使用的效果；
C DEL /使用的效果；
* - + =使用的效果；

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

5.3.2.1 数字按键效果

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

<resources>
    ......    
    <color name="colorDigitalBtnNormal">#D0DCE3</color>
    <color name="colorDigitalBtnPressed">#BED1DB</color>
</resources>

在res\drawable\目录下，点击右键，启动创建drawable resource的向导；
创建selector drawable的xml文件，文件名为digital_btn_selector.xml；
根据Button是否被按下的状态android:state_pressed，分别为它们设置不同的颜色，android:state_pressed=true，说明当前按钮被按下，android:state_pressed=false，说明当前按钮没有被按下；设置颜色使用@color关键字，并加上之前在colors.xml中定义的颜色的名字；
```
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:drawable="@color/colorDigitalBtnNormal"/>
    <item android:state_pressed="true" android:drawable="@color/colorDigitalBtnPressed"/>
</selector>
```

给数字按键7的Button设置android:background属性，使用drawable selector，

<TableRow android:layout_weight="1">
    <Button android:id="@+id/btn_7" 
        android:text="7" 
        android:onClick="onClick"
        android:textColor="#FF000000"
        android:textSize="35sp"
        android:background="@drawable/digital_btn_selector"/>
    ......
</TableRow>

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

5.3.2.2 浅色按键效果

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

<resources>
    ......    
    <color name="colorSymbolLightBtnNormal">#BED1DB</color>
    <color name="colorSymbolLightBtnPressed">#66A1B4</color>
</resources>

创建selector drawable的xml文件，文件名为symbol_light_btn_selector.xml；

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:drawable="@color/colorSymbolLightBtnNormal"/>
    <item android:state_pressed="true" android:drawable="@color/colorSymbolLightBtnPressed"/>
</selector>

给按键C的Button设置android:background属性，使用drawable selector，

<TableRow android:layout_weight="1">
    <Button android:id="@+id/btn_c" 
        android:text="C" 
        android:onClick="onClick"
        android:textColor="#FF000000"
        android:textSize="35sp"
        android:background="@drawable/symbol_light_btn_selector"/>
    ......
</TableRow>

5.3.2.3 深色按键效果

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

<resources>
    ......
    <color name="colorSymbolDarkBtnNormal">#66A1B4</color>
    <color name="colorSymbolDarkBtnPressed">#78CCE6</color>
</resources>

创建selector drawable的xml文件，文件名为symbol_dark_btn_selector.xml；

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:drawable="@color/colorSymbolDarkBtnNormal"/>
    <item android:state_pressed="true" android:drawable="@color/colorSymbolDarkBtnPressed"/>
</selector>

给按键*的Button设置android:background属性，使用drawable selector，

<TableRow android:layout_weight="1">
    <Button android:id="@+id/btn_mul" 
        android:text="*" 
        android:onClick="onClick"
        android:textColor="#FF000000"
        android:textSize="35sp"
        android:background="@drawable/symbol_dark_btn_selector"/>
    ......
</TableRow>

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

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

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

5.3.3.1 数字按键style

打开res\values\styles.xml文件；

将Button的共同特性定义成一个style－－－DigitalBtnStyle；此外，为了键盘美观，通过定义android:layout_margin属性，增加了每个按钮的间距。

<resources>
    ......
    <style name="DigitalBtnStyle">
        <item name="android:layout_margin">0.5dp</item>
        <item name="android:textSize">35sp</item>
        <item name="android:textColor">#FF000000</item>
        <item name="android:background">@drawable/digital_button_selector</item>
    </style>
</resources>

为所有数字按钮设置style属性，添加DigitalBtnStyle风格；

<TableRow android:layout_weight="1">
    <Button android:id="@+id/btn_7"
        android:text="7"
        android:onClick="onClick"
        android:layout_weight="1" 
        android:layout_width="0dp"
        android:layout_height="match_parent"
        style="@style/DigitalBtnStyle" />

    ......
</TableRow>

5.3.3.2 符号浅色按键style

在res\values\styles.xml文件中，定义SymbolLightBtnStyle。

<resources>
    ......
    <style name="SymbolLightBtnStyle">
        <item name="android:layout_margin">0.5dp</item>
        <item name="android:textSize">35sp</item>
        <item name="android:textColor">#FF000000</item>
        <item name="android:background">@drawable/symbol_light_button_selector</item>
    </style>
</resources>

为C DEL /按钮设置style属性，添加SymbolLightBtnStyle风格；

<TableRow android:layout_weight="1">
    <Button android:id="@+id/btn_c"
        android:text="C"
        android:onClick="onClick"
        android:layout_weight="1" 
        android:layout_width="0dp"
        android:layout_height="match_parent"
        style="@style/SymbolLightBtnStyle" />

    ......
</TableRow>

5.3.3.3 符号深色按键style

在res\values\styles.xml文件中，定义SymbolDarkBtnStyle。

<resources>
    ......
    <style name="SymbolDarkBtnStyle">
        <item name="android:layout_margin">0.5dp</item>
        <item name="android:textSize">35sp</item>
        <item name="android:textColor">#FF000000</item>
        <item name="android:background">@drawable/symbol_dark_button_selector</item>
    </style>
</resources>

为* - + =按钮设置style属性，添加SymbolDarkBtnStyle风格；

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="vertical">

    <Button android:id="@+id/btn_mul" android:text="*"
            android:layout_weight="1"
            android:onClick="onClick"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            style="@style/SymbolDarkBtnStyle"/>
    ......      
</LinearLayout>

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

显示区域也可以使用style，

在res\values\styles.xml文件中，定义一个TextAreaStyle。

<style name="TextAreaStyle">
    <item name="android:textColor">#FFFFFFFF</item>
    <item name="android:textSize">45sp</item>
    <item name="android:gravity">center_vertical|right</item>
</style>

使用TextAreaStyle

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

    <TextView
        android:id="@+id/result_area"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        style="@style/TextAreaStyle" />

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="#FF5C6265" />

    <TextView
        android:id="@+id/formula_area"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        style="@style/TextAreaStyle" />

</LinearLayout>