全向移动平台android版手机控制器——UI界面设计

当前可行的轮式全向移动平台大致有两种方式,一种是在每个车轮上加装一套转向机构,另一种就是采用麦克纳姆轮及其各种变种。后一种全向移动平台在响应速度、运动转换平滑性要远远比前一种方式优秀。


不管那种实现方式,最终的轮式全向移动平台都是平面内三自由度的,因此其手机端控制器需要实现的功能都是一样的:即将横向、纵向、自转及其组合运动的控制信息发送到平台控制器上,再由平台控制器控制每个电机转速。

在UI界面上,为保证良好的用户体验,应以简洁为主。

具体的,横向、纵向、自转各自独立的控件是必须提供的,经验显示,采用手机控制时在精确定位几乎都是靠这几个按钮。

再提供一个类似于手柄的控件对应于平面内向各个方向的平移运动。

同时为保证安全,急停按钮也必须放在界面上,最好在屏幕右下角。

其余连接、断开、上电、下电的功能最好放在actionbar里,防止用户误操作。

对各种速度、限速的设置可以作为首选项也放到actionbar里。

在状态显示方面,根据需要放置几个模拟指示灯即可。


界面方面,主要的工作量都集中在按钮控件PNG贴图的制作上,实木风格的按钮PNG图片稍后挂到网上,传送门:

http://download.csdn.net/detail/kagami1983/8791633


XML配置文件如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp"
    tools:context=".MecanumControlActivity"
    android:background="@drawable/wood02" >



    <TextView
        android:id="@+id/txtmessagereceived"
        android:layout_width="200dp"
        android:layout_height="20dp"        
        android:layout_centerHorizontal="true"
        android:layout_marginTop="0dp"
        android:scrollbars="vertical" />



    <ImageButton
        android:id="@+id/imgbtn_left"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        
        android:background="@drawable/imgbtn_selector03" />

    <ImageButton
        android:id="@+id/imgbtn_right"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        
        android:background="@drawable/imgbtn_selector04" />

    <ImageButton
        android:id="@+id/imgbtn_leftturn"
        android:layout_width="50dp"
        android:layout_height="50dp"
        
        android:layout_alignParentLeft="true"
        android:layout_below="@id/imgbtn_left"
        android:layout_marginTop="30dp"
        android:background="@drawable/imgbtn_selector01" />

    <ImageButton
        android:id="@+id/imgbtn_rightturn"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_below="@id/imgbtn_right"
        android:layout_alignParentRight="true"
        android:layout_marginTop="30dp"
        android:background="@drawable/imgbtn_selector02" />    
    
    <ImageButton
        android:id="@+id/imgbtn_forward"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_above="@id/imgbtn_left"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="30dp"
        android:background="@drawable/imgbtn_selector05" />

    <ImageButton
        android:id="@+id/imgbtn_backward"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_above="@id/imgbtn_right"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="30dp"
        android:background="@drawable/imgbtn_selector06" />

    <ImageButton
        android:id="@+id/imgbtn_stop"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_toLeftOf="@id/imgbtn_backward"
        android:layout_marginRight="40dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="40dp"
        android:background="@drawable/imgbtn_selector07" />    

    <ImageView
        android:id="@+id/img_green"
        android:layout_width="50dp"
        android:layout_height="50dp"        
        android:layout_toRightOf="@id/imgbtn_forward"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="30dp"        
        android:background="@drawable/light_green_off_144" />    
    <ImageView
        android:id="@+id/img_blue"
        android:layout_width="50dp"
        android:layout_height="50dp"        
        android:layout_toLeftOf="@id/imgbtn_backward"
        android:layout_marginRight="40dp"
        android:layout_marginTop="30dp"        
        android:background="@drawable/light_blue_off_144" /> 
          
    
    
    <ImageView
        android:id="@+id/roundimg"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:scaleType="centerCrop"
        android:src="@drawable/cross_arrow_432_ori"    
         />

</RelativeLayout>



功能也算简单,最终的界面效果如下:




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章