效果演示
项目地址
百度云:链接: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)]
<!-- 第一行表格布局-->
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- 第一行-->
<!-- 头部两个按钮-->
<TableRow>
<!-- 第一个按钮-->
<!-- 中间空格-->
<Button
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/bg_btn_color02"
android:text="登 录" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="4" />
<!-- 第二个按钮-->
<Button
android: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左右对齐
第二行的布局
<!-- 第二行按钮-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- CH 左边两个按钮-->
<TableLayout
android:layout_width="60dp"
android:layout_height="wrap_content">
<TableRow>
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_weight="1"
android:background="@drawable/bg_bt_ch_pu" />
</TableRow>
<TableRow>
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_weight="1"
android:background="@drawable/bg_bt_ch_down" />
</TableRow>
</TableLayout>
<!-- 中间空格-->
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="4">
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
android:background="@drawable/bg_bt_dir_up" />
</TableRow>
<TableRow>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
android:background="@drawable/bg_bt_dir_left" />
<Button
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
android:background="@drawable/bg_btn_ok" />
<Button
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
android:background="@drawable/bg_bt_dir_right" />
</LinearLayout>
</TableRow>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
android:background="@drawable/bg_bt_dir_down" />
</TableRow>
</TableLayout>
<!-- 右边二个按钮音量键-->
<TableLayout
android:layout_width="60dp"
android:layout_height="wrap_content">
<TableRow>
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_weight="1"
android:background="@drawable/bg_bt_add_up" />
</TableRow>
<TableRow>
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_weight="1"
android:background="@drawable/bg_bt_add_down" />
</TableRow>
</TableLayout>
</LinearLayout>
数字键盘布局
<!-- 数字键盘-->
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:orientation="vertical">
<!-- 第一排按钮-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android: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" />
<Button
android: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" />
<Button
android: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>
<!-- 第二排按钮-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android: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" />
<Button
android: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" />
<Button
android: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>
<!-- 第三排按钮-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android: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" />
<Button
android: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" />
<Button
android: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"