Android布局之线性布局LinearLayout(二) ----简单模仿ios端小米计算器主界面UI

  今天老师的要求是让用LinearLayout布局做自己手机自带的计算器的UI设计，因为ios端的计算器是圆形按钮的，当时做的时候还不清楚Button控件如何调整成圆形，故我下载了小米计算器，方形按钮比较容易用Button控件实现。
  图片如下：

  思路：计算器界面可以用竖直布局，上面显示数字，下面为各种按钮，通过权重来设置比例。按钮部分可以用水平布局来实现。
  缺陷：

  1. 没有模仿ios计算器；
  2. Button按钮不知道如何加边框，而是用了一个非常笨的方法，用TextView加灰色背景色充当边框；
  3. 布局没有设计好，橘黄色的长条状“=”按钮是用两个Button控件拼接出来的，仅仅只是做到了形似

  activity_main.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><!--文字显示--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="5"android:background="#EDEEEE"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginRight="30dp"android:layout_marginBottom="60dp"android:gravity="right|bottom"android:text="0"android:textColor="#313131"android:textSize="60dp" /></LinearLayout><TextViewandroid:layout_width="match_parent"android:layout_height="1dp"android:background="#797979" /><!--第一行--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="horizontal"><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FDFDFD"android:text="C"android:textColor="#FF5722"android:textSize="25dp" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#797979" /><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="DEL"android:textSize="25dp" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#797979" /><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="÷"android:textSize="25dp" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#797979" /><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="×"android:textSize="25dp" /></LinearLayout><!--第一行--><TextViewandroid:layout_width="match_parent"android:layout_height="1dp"android:background="#797979" /><!--第二行--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="horizontal"><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="7"android:textSize="25dp" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#797979" /><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="8"android:textSize="25dp" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#797979" /><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="9"android:textSize="25dp" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#797979" /><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="-"android:textSize="25dp" /></LinearLayout><TextViewandroid:layout_width="match_parent"android:layout_height="1dp"android:background="#797979" /><!--第三行--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="horizontal"><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="4"android:textSize="25dp" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#797979" /><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="5"android:textSize="25dp" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#797979" /><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="6"android:textSize="25dp" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#797979" /><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="+"android:textSize="25dp" /></LinearLayout><TextViewandroid:layout_width="match_parent"android:layout_height="1dp"android:background="#797979" /><!--第四行--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="horizontal"><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="1"android:textSize="25dp" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#797979" /><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="2"android:textSize="25dp" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#797979" /><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="3"android:textSize="25dp" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#797979" /><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FF5722"android:text=""android:textSize="25dp" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="1dp"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="1dp"android:layout_weight="3"android:background="#797979" /><TextViewandroid:layout_width="wrap_content"android:layout_height="1dp"android:layout_weight="1"android:background="#FF5722" /></LinearLayout><!--第五行--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="horizontal"><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="%"android:textSize="25dp" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#797979" /><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="0"android:textSize="25dp" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#797979" /><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FFFFFF"android:text="."android:textSize="25dp" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#797979" /><Buttonandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="#FF5722"android:text="＝"android:textColor="#FFFFFF"android:textSize="25dp" /></LinearLayout></LinearLayout>

  为了更加美观和达到100%还原，这里隐藏了标题栏并把状态栏改成灰色
styles.xml添加了如下代码：

        <!--隐藏标题栏--><item name="windowNoTitle">true</item><!--隐藏状态栏--><item name="android:windowFullscreen">false</item>

colors.xml更改了如下代码：

    <color name="colorPrimary">#EDEEEE</color><color name="colorPrimaryDark">#EDEEEE</color>

运行截图如下：

  明天争取实现完全模仿ios端原生计算器。

转载于:https://www.cnblogs.com/smileher/p/10753207.html

Android布局之线性布局LinearLayout(二) ----简单模仿ios端小米计算器主界面UI相关推荐

  1. 安卓六大布局之 线性布局（LinearLayout）

    Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面. Android的六大布局分别是 LinearL ...

  2. android动态更改布局宽高,动态更改Android上的线性布局宽度或高度

    我试图动态更改线性布局或任何其他窗口小部件宽度或高度,但引发异常.动态更改Android上的线性布局宽度或高度 我的布局: android:id="@+id/abc" androi ...

  3. 六大布局之线性布局详解

    1. 什么是Layout? Layout--界面布局,为应用程序提供界面架构.控制Activity中控件的大小.位置.颜色等属性的方法. Layout 与 ViewGroup的关系 ViewGroup ...

  4. Android开发本地及网络Mp3音乐播放器(二十)歌曲下载完成后通知主界面更新本地音乐

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/51448597 项目源码(打赏5积分请点这边):http://download.csdn ...

  5. Android布局管理器-使用LinearLayout实现简单的登录窗口布局

    场景 Android布局管理器-从实例入手学习相对布局管理器的使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1038389 ...

  6. Android UI布局之线性布局LinearLayout

    Android UI 布局 线性布局 线性布局 activity_main.xml <?xml version="1.0" encoding="utf-8" ...

  7. Android 开发 -- 开发第一个安卓程序、Android UI开发（布局的创建：相对布局和线性布局、控件单位：px pt dp sp、常用控件 、常见对话框、ListView）

    文章目录 1. 开发第一个Hello World程序 1.1 开发程序 1.2 认识程序中的文件 1.3 Android程序结构 1.4 安卓程序打包 2. Android UI开发 2.1 布局的创 ...

  8. 【Android】UI布局之线性布局（登录界面代码）

    1.布局管理 组件在activity中呈现的方式,包含组件大小.间距.对齐方式 Android提供了两种布局的实现方式: .在xml配置文件中声明,通过setContentView(R.layout. ...

  9. android 线性布局位置,android – 如何在线性布局中更改视图的位置.

    所以我有一个已经填充了子项的线性布局.有没有办法改变其中一个孩子的位置? 如果有任何帮助的话,我正试图交换他们之间的观点. final LinearLayout parrent = (LinearLa ...

最新文章

  1. C语言static 具体分析
  2. P2048 [NOI2010]超级钢琴
  3. 测试硬盘读写速度软件_Linux测试硬盘读写速度用什么命令
  4. C语言编程笔记：关于 for循环 的那些不为人知的秘密
  5. 如何选择适合你的企业数据管理类产品
  6. 如何才能成为编程高手？别人都不告诉你的东西，我来说给你听！
  7. c语言基本练习题 doc,C语言练习题-基本数据类型和运算.doc
  8. C 基础——指针函数与函数指针
  9. 第三章 进化算法之遗传算法及其应用
  10. 网页版excel数据批量导入数据库
  11. 面向对象程序设计———大花园
  12. web系统整体性能测试
  13. 聊一聊输入阻抗、输出阻抗和阻抗匹配
  14. Excel插入复选框
  15. 【BZOJ3991】【SDOI2015】寻宝游戏
  16. JS编程建议——16：防止switch贯穿
  17. MT6761处理器介绍
  18. 我的世界bukkit服务器开发教程第一章——开发环境
  19. Android 摄像头拍照显示 相册显示 图片裁剪绘制显示
  20. 前端架构设计第十课 前端数据结构和算法

热门文章

  1. 京东承认刘强东涉案！
  2. RocketMQ(超级无敌认真好用，万字收藏篇!!!!)
  3. LeetCode课程表Ⅱ
  4. 【微信小程序---绑定事件bindtap跳转】
  5. 从0开始CentOS7上安装ELK，实现日志收集
  6. 路由器逆向分析------在QEMU MIPS虚拟机上运行MIPS程序（ssh方式）
  7. # istio 实战 五 网格可视化 - kiali
  8. 使用PHP,实现查询天府通余额
  9. 售前工程师炼成记--第一天
  10. 疑似天津联通黑产：记一次被流量劫持薅羊毛