Android遥控器界面
2024-05-07 15:27:50
效果演示
项目地址
百度云：链接：https://pan.baidu.com/s/1Nt6tOaCYSNUglKGR7PESLg 提取码：r3gx
蓝凑云：https://yxqz.lanzoui.com/innN5guld2h
功能结构分析
重要属性：orientation
重要标签：
selector 【item】
shape【solid，corners，gradient】
代码分析
总体布局（LinearLayout）
这里把所有代码剖析了。所以结束标签在文章最后面。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#556666"android:orientation="vertical"android:padding="30dp">
属性分析：
- android:layout_width=“match_parent” ：设置当前布局宽度满屏
- android:layout_height=“match_parent” :设置当前布局高度满屏
- android:background=“#556666” ：设置当前布局背景颜色
- android:orientation=“vertical”：设置当前布局方向是垂直。则在改布局中的view都是垂直排布。和tablelayout的tablrow类似
- android:padding=“30dp”：设置当前布局的内边距为30pd。不是里面的view的内边距，而是这个盒子的内边距
第一行布局
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mql8sOtz-1631160670390)(https://i.loli.net/2020/09/22/mtCrXDf5aWg1Kz9.png)]
<!-- 第一行表格布局-->
<TableLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><!-- 第一行--><!-- 头部两个按钮--><TableRow><!-- 第一个按钮--><!-- 中间空格--><Buttonandroid:layout_width="50dp"android:layout_height="wrap_content"android:layout_weight="1"android:background="@drawable/bg_btn_color02"android:text="登 录" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="4" /><!-- 第二个按钮--><Buttonandroid:layout_width="50dp"android:layout_height="wrap_content"android:layout_weight="1"android:background="@drawable/bg_btn_color03"android:text="静 音" /></TableRow></TableLayout>
- 这里使用的是tablelayout表格布局。让该布局的宽充满。使用 **android:orientation=“horizontal”**将布局里的view设置为水平方向。如果没有 android:orientation=“horizontal” 默认也是水平方向。
- 使用tablerow标签来控制tablelayout里的每一行。
- 在tablerow里，新建两个button以及一个textview来控制button布局
- 使用 **android:layout_weight=“1”**来将tablerow来分割。所以用textview来做中间空格的部分。分别让button左右对齐
第二行的布局
<!-- 第二行按钮-->
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><!-- CH 左边两个按钮--><TableLayoutandroid:layout_width="60dp"android:layout_height="wrap_content"><TableRow><Buttonandroid:layout_width="match_parent"android:layout_height="100dp"android:layout_weight="1"android:background="@drawable/bg_bt_ch_pu" /></TableRow><TableRow><Buttonandroid:layout_width="match_parent"android:layout_height="100dp"android:layout_weight="1"android:background="@drawable/bg_bt_ch_down" /></TableRow></TableLayout><!-- 中间空格--><TableLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="4"><TableRow> <Buttonandroid:layout_width="wrap_content"android:layout_height="60dp"android:layout_weight="1"android:background="@drawable/bg_bt_dir_up" /></TableRow><TableRow><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"><Buttonandroid:layout_width="wrap_content"android:layout_height="60dp"android:layout_weight="1"android:background="@drawable/bg_bt_dir_left" /><Buttonandroid:layout_width="wrap_content"android:layout_height="60dp"android:layout_weight="1"android:background="@drawable/bg_btn_ok" /><Buttonandroid:layout_width="wrap_content"android:layout_height="60dp"android:layout_weight="1"android:background="@drawable/bg_bt_dir_right" /></LinearLayout></TableRow><TableRow><Buttonandroid:layout_width="wrap_content"android:layout_height="60dp"android:layout_weight="1"android:background="@drawable/bg_bt_dir_down" /></TableRow></TableLayout><!-- 右边二个按钮音量键--><TableLayoutandroid:layout_width="60dp"android:layout_height="wrap_content"><TableRow><Buttonandroid:layout_width="match_parent"android:layout_height="100dp"android:layout_weight="1"android:background="@drawable/bg_bt_add_up" /></TableRow><TableRow><Buttonandroid:layout_width="match_parent"android:layout_height="100dp"android:layout_weight="1"android:background="@drawable/bg_bt_add_down" /></TableRow></TableLayout>
</LinearLayout>
数字键盘布局
<!-- 数字键盘--><TableLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="30dp"android:orientation="vertical"><!-- 第一排按钮--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><Buttonandroid:layout_width="100dp"android:layout_height="50dp"android:layout_margin="10dp"android:layout_weight="1"android:background="@drawable/bg_btn_color"android:text="1"android:textColor="@color/bg_btn_one" /><Buttonandroid:layout_width="100dp"android:layout_height="50dp"android:layout_margin="10dp"android:layout_weight="1"android:background="@drawable/bg_btn_color"android:text="2"android:textColor="@color/bg_btn_one" /><Buttonandroid:layout_width="100dp"android:layout_height="50dp"android:layout_margin="10dp"android:layout_weight="1"android:background="@drawable/bg_btn_color"android:text="3"android:textColor="@color/bg_btn_one" /></LinearLayout><!-- 第二排按钮--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><Buttonandroid:layout_width="100dp"android:layout_height="50dp"android:layout_margin="10dp"android:layout_weight="1"android:background="@drawable/bg_btn_color"android:text="4"android:textColor="@color/bg_btn_one" /><Buttonandroid:layout_width="100dp"android:layout_height="50dp"android:layout_margin="10dp"android:layout_weight="1"android:background="@drawable/bg_btn_color"android:text="5"android:textColor="@color/bg_btn_one" /><Buttonandroid:layout_width="100dp"android:layout_height="50dp"android:layout_margin="10dp"android:layout_weight="1"android:background="@drawable/bg_btn_color"android:text="6"android:textColor="@color/bg_btn_one" /></LinearLayout><!-- 第三排按钮--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><Buttonandroid:layout_width="100dp"android:layout_height="50dp"android:layout_margin="10dp"android:layout_weight="1"android:background="@drawable/bg_btn_color"android:text="7"android:textColor="@color/bg_btn_one" /><Buttonandroid:layout_width="100dp"android:layout_height="50dp"android:layout_margin="10dp"android:layout_weight="1"android:background="@drawable/bg_btn_color"android:text="8"android:textColor="@color/bg_btn_one" /><Buttonandroid:layout_width="100dp"android:layout_height="50dp"android:layout_margin="10dp"android:layout_weight="1"android:background="@drawable/bg_btn_color"android:text="9"android:textColor="@color/bg_btn_one" /></LinearLayout></TableLayout>
</LinearLayout>
用到的颜色配置
在res下的values下的colors.xml下配置
<?xml version="1.0" encoding="utf-8"?>
<resources><color name="red">#E9242F</color><color name="colorPrimary">#008577</color><color name="colorPrimaryDark">#00574B</color><color name="colorAccent">#D81B60</color><color name="yellow">#EEBF1E</color><!-- 绿色 --><color name="green">#008000</color><!-- 酸橙色 --><color name="mediumspringgreen">#00FA9A</color>
</resources>
按钮字体颜色xml配置
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/green" android:state_pressed="true"/>
<item android:color="@color/yellow" />
</selector>
这里也是用的选择器。
button调用color
android:textColor="@color/bg_btn_one"
第二排功能按钮背景xml设置
这里只说一个图片。
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/bt_ad_down_pressed" android:state_pressed="true"/><item android:drawable="@drawable/bt_ad_down_normal" />
</selector>
- selector ：选择器标签
- item：选择器里的每一个项
- android:drawable=“@drawable/bt_ad_down_pressed”：指向的背景。这里是放在drawable里的图片
- android:state_pressed=“true”：指的是在选中的时候。默认是false。
button调用
android:background="@drawable/bg_btn_color"
登录按钮渐变背景配置
<?xml version="1.0" encoding="utf-8"?><!--渐变红色，从上到下--><!--android:startColor和android:endColor分别为起始和结束颜android:angle是渐变角度android:angle＝“0”时，是从左到右，按照开始颜色到结束颜色来渲染的android:angle＝“90”是从下到上来渲染的android:angle＝“270”是从上到下来渲染的android:angle＝“180”是从右到左来渲染的android:angle＝“360”和android:angle＝“0”是一样的--><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"><!-- 设置边框颜色--> <solid android:color="@color/yellow"></solid><!-- 倒圆角圆角--> <corners android:radius="30dp"></corners> <!-- gradient:渐变配置--> <gradient android:startColor="#CBF0A7" android:endColor="#407C03" android:angle="270" /></shape>
bottom调用
android:background="@drawable/bg_btn_color02"
数字按钮边框和颜色背景xml设置
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/update_border" android:state_pressed="true"> </item> <item android:drawable="@drawable/default_border"> </item></selector>
因为在给按钮设置边框和设置背景的时候
这里有两个状态
- 未点击状态的边框和底色default_border
- 点击状态的边框和底色update_border
通过调用选择器(selector)调用这两个border(shape)来实现点击的时候颜色,边框不同
default_border
<?xml version="1.0" encoding="utf-8"?><!--边框设置--><shape xmlns:android="http://schemas.android.com/apk/res/android" > <!--solid用以指定内部填充色--> <solid android:color="@color/green"/> <!--可以定义边框的宽度，颜色，虚实线等--> <stroke android:width="1dp" android:color="@color/yellow" /> <corners android:radius="50dp"/></shape>
update_border
<?xml version="1.0" encoding="utf-8"?><!--边框设置--><shape xmlns:android="http://schemas.android.com/apk/res/android" > <!--solid用以指定内部填充色--> <solid android:color="@color/red"/> <!--可以定义边框的宽度，颜色，虚实线等--> <stroke android:width="1dp" android:color="@color/mediumspringgreen" /> <corners android:radius="50dp"/></shape>
bottom调用
android:background="@drawable/bg_btn_color"
Android遥控器界面相关推荐
- android用户引导页,android欢迎界面引导页
android欢迎界面是所有程序开始的一个简短的自我介绍,让用户能够通过简单的描述和图片信息更好的了解软件,对用户体验效果非常的重要.这里我会使用VIewPager做一个欢迎界面. 1设计背景图片 根 ...
- Xamarin Android设置界面提示类型错误
Xamarin Android设置界面提示类型错误 错误信息:Integer types not allow (at 'padding' with value '10') Android界面属性的长度 ...
- Android微信界面的设计
Android微信界面的设计 [尊重原创,转载请注明出处]http://blog.csdn.net/guyuealian/article/details/51777792 微信6.0主界面: (1 ...
- Android典型界面设计(3)——访网易新闻实现双导航tab切换
一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客 ...
- android注册界面高级,Android用户注册界面简单设计
本文实例为大家分享了Android用户注册界面的设计,供大家参考,具体内容如下 I. 实例目标 设计一个用户注册界面,在其中要使用到一些基础控件,如 文本框.编辑框.按钮.复选框等控件 II. 技术分 ...
- android+主界面所有应用程序图标添加统一背景主题,Android 4.0替Launcher主界面所有应用程序图标添加统一背景主题...
当前位置:我的异常网» Android » Android 4.0替Launcher主界面所有应用程序图标添加 Android 4.0替Launcher主界面所有应用程序图标添加统一背景主题 www. ...
- android中注册用户界面,Android用户注册界面
搜索热词 先给大家展示下界面效果图,感觉满意,请参考实现代码. Main.xml源码 android:layout_width="match_parent" android:lay ...
- android启动界面修改工具,Android 系统界面调节工具使用及功能
Android 系统界面调节工具(Android System UI Tuner)是个隐藏功能,里面有一些实验性功能,可以辅助平时开发. 1. 打开 系统界面调节工具是个隐藏功能,打开他说简单也简单, ...
- Android App界面和流畅度优化
Android App界面和流畅度优化 所谓界面和流畅度优化,就是尽可能多地消除用户可直接感知的.影响用户操作体验的bug 1.人为在UI线程中做轻微耗时操作,导致UI线程卡顿 人为避免一切耗时操作 ...
最新文章
- Ardino基础教程 1_让Arduino说出HelloWorld
- cocos2d-x游戏实例（18）-纵版射击游戏（5）
- 【两种解法】Quadtrees UVA - 297（隐式建树+显式建树）
- glib访问mysql_Mysql-安装与配置glibc
- 谋划一年，还把手机藏鞋里？00后高考作弊被判刑
- UVA11063 B2-Sequence【序列】
- 上海航信电子发票对接
- 平均无故障时间100万小时_无故障运行时间MTBF投标要求GB5080.7-中检
- Linux chmod、fchmod函数
- 移动端css文件命名,移动端手机前端css命名规范.docx
- eclipse导入html页面乱码,Eclipse导入项目乱码问题（中文乱码）
- springcloud搭建以及集成tx-lcn分布式事务解决框架
- Arduino LED闪烁
- 迪厅装修后地板清洁与保养
- 中琅条码打印软件如何批量打印单色黑流水号
- 解决jquery.autocomplete在IE6下被下拉框遮住的问题
- 由Asset中的double free引发的Android系统及APP崩溃问题分析
- ubuntu16.04 离线deb包 安装vim 离线环境
- java高级进阶知识整理
- 选择“食品装箱机”应该考虑的几个方面