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

时间：2016-07-03 11:55:32 阅读：369 评论：0 收藏：0 [点我收藏+]

标签：

第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>

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

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

标签：

原文地址：http://blog.csdn.net/anddlecn/article/details/51813826

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

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

第5节 界面美化

5.1 整体背景色

5.2 美化显示区域

5.2.1 添加显示区域分隔栏

5.2.2 修改字体和排列

5.3 美化键盘

5.3.1 字体大小和颜色修改

5.3.2 增加按钮效果

5.3.2.1 数字按键效果

5.3.2.2 浅色按键效果

5.3.2.3 深色按键效果

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

5.3.3.1 数字按键style

5.3.3.2 符号浅色按键style

5.3.3.3 符号深色按键style

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

第5节界面美化