使用 自定义布局 实现灵活的万能遥控器界面

   首先，看下效果图 

         拿到这个图片我第一想到的是用GridLayout来写，但是写出来代码比较繁琐，很 麻烦，于是考虑到这样写：

      1. 先把整个布局写好

      

 <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="@dimen/x35"
                android:layout_marginRight="@dimen/x35"
                android:layout_weight="1"
                android:background="@mipmap/remote_tv_bj">
                <include layout="@layout/activity_remote_keyboard"></include>
            </LinearLayout>

  

 2.然后写 include里面的布局

          a. 

activity_remote_keyboard

       <pre name="code" class="html"><pre name="code" class="html">    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="12dp">

    <LinearLayout style="@style/remote_line">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="电视机"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="18sp" />

    </LinearLayout>

    <LinearLayout style="@style/remote_line">

        <LinearLayout style="@style/remote_kb">

            <ImageView
                android:id="@+id/turn_off_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/remote_tv_close" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <ImageView
                android:id="@+id/add_voice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/add_voice" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <ImageView
                android:id="@+id/reduce_voice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/reduce_voice" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/switch_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TV/AV"
                android:textColor="@color/colorPrimaryDark" />
        </LinearLayout>

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1.5dp"
        android:layout_margin="4dp"
        android:background="@mipmap/remote_tv_edix" />

    <LinearLayout style="@style/remote_line">

        <LinearLayout style="@style/remote_kb">

            <ImageView
                android:id="@+id/turn_on_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/remote_tv_open" />
        </LinearLayout>

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:gravity="center"
            android:text="机顶盒"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="18sp" />

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/mute"
                style="@style/remote_kb_text"
                android:text="静音" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout style="@style/remote_line">

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv_1"
                style="@style/remote_kb_text"
                android:text="1" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv_2"
                style="@style/remote_kb_text"
                android:text="2" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv_3"
                style="@style/remote_kb_text"
                android:text="3" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/add_channel"
                style="@style/remote_kb_text"
                android:text="频道 +" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout style="@style/remote_line">

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv_4"
                style="@style/remote_kb_text"
                android:text="4" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv_5"
                style="@style/remote_kb_text"
                android:text="5" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv_6"
                style="@style/remote_kb_text"
                android:text="6" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/reduce_channel"
                style="@style/remote_kb_text"
                android:text="频道 —" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout style="@style/remote_line">

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv_7"
                style="@style/remote_kb_text"
                android:text="7" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv_8"
                style="@style/remote_kb_text"
                android:text="8" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv_9"
                style="@style/remote_kb_text"
                android:text="9" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/add_jd_voice"
                style="@style/remote_kb_text"
                android:text="音量 +" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout style="@style/remote_line">

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv_ok"
                style="@style/remote_kb_text"
                android:text="确认" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv_0"
                style="@style/remote_kb_text"
                android:text="0" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv_information"
                style="@style/remote_kb_text"
                android:text="信息" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/remote_jd_voice"
                style="@style/remote_kb_text"
                android:text="音量 —" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout style="@style/remote_line">

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv"
                style="@style/remote_kb_text"
                android:text="电视" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv_custom1"
                style="@style/remote_kb_text"
                android:text="自定义" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv_custom2"
                style="@style/remote_kb_text"
                android:text="自定义" />
        </LinearLayout>

        <LinearLayout style="@style/remote_kb">

            <TextView
                android:id="@+id/tv_back"
                style="@style/remote_kb_text"
                android:text="返回" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

3. styles.xml 

     

  <!-- 电视机机顶盒样式-->
    <style name="remote_line">
        <item name="android:layout_weight">1</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">0dp</item>
        <item name="android:orientation">horizontal</item>
    </style>

    <!-- 电视机机顶盒按键样式-->
    <style name="remote_kb">
        <item name="android:clickable">true</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_width">0dp</item>
        <item name="android:background">@drawable/remote_kb</item>
        <item name="android:layout_margin">4dp</item>
    </style>

  

   这样就OK了~~