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

最新推荐文章于 2022-04-01 11:14:04 发布
最新推荐文章于 2022-04-01 11:14:04 发布
阅读量7.6k 收藏 3
点赞数 1
分类专栏： 安豆计算器 手把手教你做安卓应用开发 文章标签： 界面美化 style 添加背景
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anddlecn/article/details/51813826
版权

第5节 界面美化

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

5.1 整体背景色

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

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

  2. 这里的颜色是采用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 添加显示区域分隔栏

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

  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="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>

  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="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>

  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="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>

  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编程中购买相关硬件。同时也感谢大家对我们这些码农的支持。

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

anddlecn
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
界面美观的计算器
05-15
自己编写的计算器，很实用，可以用来交作业哦
安卓实验-设计三种计算器的UI
m0_59740979的博客
06-29 1571
三种计算器的UI设计，简单、程序、科学
Android 计算器解析(三): 美化计算器界面
like_program 的博客
07-16 7633
转载请注明出处： http://blog.csdn.net/like_program/article/details/51925765 上一篇博客，我们写的计算器已经有计算功能了，但是界面并不美观，这一篇博客，我将讲解 如何美化界面 。在前面的博客中，由于我们的计算器的操作界面（GridView）用的是 Androd 自带的子项布局，而自带的子项布局是 textview，所以只能简单的显示文字，而且
一个比较漂亮的计算器
徐小mu的博客
10-14 2467
我是在写计算器时，有个地方不知道怎么写的，就去查了查其他人的，然后无意间就发现了这篇博客，大致功能完成的都挺好，最主要是外观上挺好看的，我这里就转一下。见博客。 ———————————————— 版权声明：本文为CSDN博主「༺ཌ琦ད༻」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weixin_...
【Arduino】基于4*4键盘制作计算器
weixin_43319452的博客
04-02 10000
实验现象 在44键盘输入简单的数学运算，如加法、减法、乘法和除法,实时在串口监视器显示答案。 实验准备 arduino主板-1 面包板-1 数据线-1 44键盘-1 跳线若干 连接电路 图1 44键盘8个引脚连接arduino板 除数字按钮外，其他按钮的作用如下： 'A’用于加法 'B’用于减法 'C’用于清零 'D’用于除法 ''用于乘法 实物连接图 实验代码 #include<Ke...
SAP创建供应商主数据.pdf
07-14
通过安豆学院提供的SAP认证培训，可以进一步提升对SAP系统的理解，培养创新思维，并在全球范围内增强职业竞争力。在实践中学习和掌握这些知识，对于优化企业的供应商管理、提高业务效率具有重要意义。访问...
SAP创建流程行业资源.pdf
11-04
同时，持续的培训和对SAP认证的追求，如安豆学院提供的课程，可以帮助提升个人在IT领域的专业技能，从而在全球范围内增强职业竞争力。通过学习和掌握SAP系统，企业可以更好地利用其强大的功能，实现更高效的流程行业...
简单的计算器界面
03-07
有关于计算器界面的代码，方便取用有关于计算器界面的代码，方便取用有关于计算器界面的代码，方便取用
用css美化的简易计算器 |完整代码及注解
Rover95的博客
09-27 2588
效果展示图： 思路： 1.确定计算机页面的具体内容，生成按钮，文本框等 2.实现按键的具体功能，编写函数 3.美化界面 计算器页面的完整代码 cal.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
微信小程序开发（八）—— 制作一款好看的计算器
苦作舟的空城机
07-06 6834
文章目录 序 正文开始 创建页面 页面布局 页面样式 数据渲染 计算逻辑 序 微信小程序总是学习知识点也是很枯燥的，那么就做个小栗子来缓解一下学习的疲倦吧（更累了） 像我学习小程序视频教程中也有说过做计算器，不过教程中的计算器太粗糙了，只能计算一下就结束了。 这可不行，男人要持久???? 所以我有感而发，准备做一个完整度高一些的简单计算器，计算器的基本功能就模仿win10自带的计算器吧，有加、减、乘、除、取余、正负这几块的功能，界面自己进行一下调整。 实现效果： 正文开始 微信开发文档：http
简洁美观的jQuery计算器插件
08-02
基于jQuery的计算器插件，外观简洁和美观，计算器的功能也很强大。有兴趣的同学可以继续为这款计算器扩展功能，应该也不是难事。
简单好看的html5网页计算器代码.zip
07-11
一款简单好看的html5网页计算器代码，精美的html5 css3计算器样式特效。 js代码   [removed]     function s(v) { document.getElementById('res').value = v }     function a(v) { document.getElementById('res').value = v }     function e() { try { s(eval(document.getElementById('res').value)) } catch(e) { s('Error') } }   [removed]
漂亮计算器,功能齐全，界面漂亮美丽，可以，点击联网帮助，登录到我的博客
09-16
用到了简单工厂，策略模式，c#实现，容易修干等等。。。。，共同交流学习，多多交流，我qq:690681311
C#计算器，界面很美观
06-15
C#计算器功能，完成老师布置的大作业，页面很好看，没有缺陷。 各种运算都已涵盖 包括异常处理等等 。作业老师已经给了满分，大家可以下载下来参考 嗯嗯嗯，非常棒
Android开发丶GridLayoutの一个简易精美的计算器界面
01-04
记录了Android开发的历程，本DEMO是通过GridLayout布局编写了一个精美简易的计算器界面，暂时还没计算的功能，后续会补上
手把手教你安卓入门（上）
不积跬步无以至千里
05-20 1925
前言 很多同学想学安卓应用开发，但是还没有开始就遇到了很多问题，比如资源无法下载，环境搭建遇到问题，代码不知该从何处写起。从0到1的过程让新手们抓狂。 于是想写一篇比较简单、操作性强的快速指南，帮助准备开始学习安卓应用开发的同学。万事开头难，把开始的第一只拦路虎解决掉，以后的路就越走越宽了。 本文将从一个实用的例子－“计算器”应用入手，向准备学习安卓开发的新手介绍安卓应用开发的整个过程–包...
c#窗体简易计算器美化版
冰月灵狐
06-27 2339
对于之前的计算器有些地方稍加修改了，对于界面也美化了一下。代码如下：乘法的代码private void button15_Click(object sender, EventArgs e)        {            if (c == true)            {                textBox1.Text = "";                c = fal...
Android studio 设计简易的计算器
weixin_41879980的博客
04-07 3345
效果显示： 第一步，简单的界面布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" a...
【arduino教学】4x4 键盘
m0_46152804的博客
04-01 3193
标准 4x4 键盘。非常适合数字输入，例如安全 PIN 码。 源代码 Arduino 代码示例 下面的示例使用用于 Arduino 的键盘库。数组中设置的键名定义返回的值。它们不必与实际的密钥标签匹配（但如果不匹配，可能会令人困惑），并且它们必须只包含一个 ASCII 字符。keyskeypad.getKey() #include <Keypad.h> const uint8_t ROWS = 4; const uint8_t COLS = 4; char keys[ROWS][COLS]
SAP供应商主数据创建指南
"这份文档是关于在SAP系统中创建供应商主数据的详细教程，由安豆学院提供，旨在帮助学习者理解和掌握如何在SAP环境中有效地管理供应商信息。文档内容包括不同类型的供应商创建过程，如采购相关的供应商、无采购关系...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值