全向移動平臺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>



功能也算簡單,最終的界面效果如下:




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