仿悟空遥控器控制页面

在使用悟空遥控器的时候，发现在遥控器页面的中心控制器的设计很巧妙。如果使用xml layout布局的话，使用FrameLayout/RelativeLayout来处理5个按键（上下左右以及中间确认键），因为每个按键都是矩形，而且有重叠的部分。因此有交叉覆盖的地方总感觉不对。自定义view(ControlPanel)才能很好的处理这种场景。

总体的原理:自定义view的背景为一个圆角矩形，然后检测onTouch事件，然后再显示对应点的按键图片即可。

 

代码如下:

Xml 布局:

<ControlPanel
   android:id="@+id/navigator"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerInParent="true"
   android:background="@drawable/dpad_5way_normal"
   app:bottomPressed="@drawable/dpad_down"
    app:centerPressed="@drawable/dpad_center"
   app:leftPressed="@drawable/dpad_left"
   app:rightPressed="@drawable/dpad_right"
app:topPressed="@drawable/dpad_up"/>

attrs属性为

<declare-styleablename="ControlPanelDrawable">
        <attrname="topPressed" format="integer"/>
        <attr name="bottomPressed"format="integer"/>
        <attrname="leftPressed" format="integer"/>