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

   首先，看下效果图 






         拿到这个图片我第一想到的是用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
4000
"
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了~~