Android遥控器界面

效果演示

项目地址

百度云：链接：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"
              >

属性分析：

1. ​ android:layout_width=“match_parent” ：设置当前布局宽度满屏
2. ​ android:layout_height=“match_parent” :设置当前布局高度满屏
3. ​ android:background=“#556666” ：设置当前布局背景颜色
4. ​ android:orientation=“vertical”：设置当前布局方向是垂直。则在改布局中的view都是垂直排布。和tablelayout的tablrow类似
5. ​ 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>

1. 这里使用的是tablelayout表格布局。让该布局的宽充满。使用 **android:orientation=“horizontal”**将布局里的view设置为水平方向。如果没有 android:orientation=“horizontal” 默认也是水平方向。
2. 使用tablerow标签来控制tablelayout里的每一行。
3. 在tablerow里，新建两个button以及一个textview来控制button布局
4. 使用 **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>

1. selector ：选择器标签
2. item：选择器里的每一个项
3. android:drawable=“@drawable/bt_ad_down_pressed”：指向的背景。这里是放在drawable里的图片
4. 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>

因为在给按钮设置边框和设置背景的时候

这里有两个状态

1. 未点击状态的边框和底色default_border
2. 点击状态的边框和底色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"