首页 > 编程入门 文章详情

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

编程入门 行业动态 更新时间:2024-10-26 00:18:11

<a href=https://www.elefans.com/category/jswz/34/1765412.html style=手把手教你做安豆计算器（四）－界面美化"/>

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

第5节 界面美化

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

5.1 整体背景色

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

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

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

    <LinearLayout xmlns:android=""xmlns: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 添加显示区域分隔栏

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

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

  2. 间隔线的颜色为#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 修改字体和排列

  1. 显示区域的字体颜色通过android:textColor属性设置成白色#FFFFFFFF；
  2. 字体大小通过android:textSize属性设置成45sp；
  3. 通过android:gravity属性让文字位于左边居中显示；
  4. 显示区域的页边距通过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的字体大小和字体颜色完全一样，

  1. android:textColor设置文字颜色为黑色#FF000000；
  2. 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种效果：

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

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

5.3.2.1 数字按键效果

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

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

  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中定义的颜色的名字；

    <selector xmlns:android=""><item android:state_pressed="false" android:drawable="@color/colorDigitalBtnNormal"/><item android:state_pressed="true" android:drawable="@color/colorDigitalBtnPressed"/>
</selector>

  5. 给数字按键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 浅色按键效果

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

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

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

    <selector xmlns:android=""><item android:state_pressed="false" android:drawable="@color/colorSymbolLightBtnNormal"/><item android:state_pressed="true" android:drawable="@color/colorSymbolLightBtnPressed"/>
</selector>

  3. 给按键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 深色按键效果

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

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

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

    <selector xmlns:android=""><item android:state_pressed="false" android:drawable="@color/colorSymbolDarkBtnNormal"/><item android:state_pressed="true" android:drawable="@color/colorSymbolDarkBtnPressed"/>
</selector>

  3. 给按键*的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
  1. 打开res\values\styles.xml文件；

  2. 将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>

  3. 为所有数字按钮设置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

  1. 在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>

  2. 为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

  1. 在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>

  2. 为* - + =按钮设置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，

  1. 在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>

  2. 使用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>

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

/*******************************************************************/
* 版权声明
* 本教程只在CSDN和安豆网发布，其他网站出现本教程均属侵权。

*另外，我们还推出了Arduino智能硬件相关的教程，您可以在我们的网店跟我学Arduino编程中购买相关硬件。同时也感谢大家对我们这些码农的支持。

*最后再次感谢各位读者对安豆的支持，谢谢:)
/*******************************************************************/

更多推荐

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

本文发布于:2024-02-12 00:53:24，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/1684749.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：手把手   计算器   教你做   界面

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表