Android UI设计模式

home.xml

 
 
 

  
  
  
<?xml version="1.0" encoding="utf-8"?> 
  
  
  
<merge xmlns:android="http://schemas.android.com/apk/res/android">     
  
  
  
  <include  layout="@layout/background" /> 
  
  
  
     <LinearLayout 
  
  
  
        android:orientation="vertical" 
  
  
  
        android:layout_width="fill_parent" 
  
  
  
        android:layout_height="fill_parent"> 
  
  
  
     <include layout="@layout/navigator" /> 
  
  
  
  <include layout="@layout/list" 
  
  
  
     android:layout_width="fill_parent" 
  
  
  
     android:layout_height="fill_parent" 
  
  
  
     android:layout_weight="1.0" /> 
  
  
  
  <include layout="@layout/tab" /> 
  
  
  
 </LinearLayout> 
  
  
  
</merge> 
 
 
 

background.xml

 
 
 

  
  
  
<?xml version="1.0" encoding="utf-8"?> 
  
  
  
    <ImageView xmlns:android="http://schemas.android.com/apk/res/android" 
  
  
  
    android:id="@+id/background" 
  
  
  
    android:layout_width="fill_parent" 
  
  
  
    android:layout_height="fill_parent" 
  
  
  
    android:scaleType="fitXY" 
  
  
  
    android:background="@color/background"   
  
  
  
/> 
 
 
 

navigator.xml

  
  
  

   
   
   
<?xml version="1.0" encoding="utf-8"?> 
   
   
   
   <RelativeLayout 
   
   
   
      android:layout_width="fill_parent" 
   
   
   
      android:layout_height="64dp" 
   
   
   
      android:gravity="center_vertical"   
   
   
   
      style="@android:style/ButtonBar"> 
   
   
   
 <Button    
   
   
   
      android:id="@+id/button_back"   
   
   
   
      android:layout_width="wrap_content" 
   
   
   
      android:layout_height="40dp" 
   
   
   
      android:text="@string/back" /> 
   
   
   
 <Button   
   
   
   
      android:id="@+id/button_home"   
   
   
   
      android:layout_width="wrap_content" 
   
   
   
      android:layout_height="40dp" 
   
   
   
      android:layout_alignParentRight="true" />   
   
   
   
<TextView    
   
   
   
      android:id="@android:id/title"   
   
   
   
      android:layout_width="fill_parent"   
   
   
   
      android:layout_height="wrap_content" 
   
   
   
      android:layout_toRightOf="@id/button_back" 
   
   
   
      android:layout_toLeftOf="@id/button_home" 
   
   
   
      android:gravity="center" 
   
   
   
      android:singleLine="true" 
   
   
   
      android:ellipsize="marquee" 
   
   
   
      android:textAppearance="?android:attr/textAppearanceMedium" />      
   
   
   
</RelativeLayout> 
  
  
  

list.xml

tab.xml

 
 
 

  
  
  
<?xml version="1.0" encoding="utf-8"?> 
  
  
  
<LinearLayout   
  
  
  
   xmlns:android="http://schemas.android.com/apk/res/android"   
  
  
  
   android:layout_width="fill_parent"   
  
  
  
   android:layout_height="?android:attr/listPreferredItemHeight"> 
  
  
  
<ImageButton    
  
  
  
   android:id="@+id/tab_profile" 
  
  
  
   android:layout_width="wrap_content"   
  
  
  
   android:layout_height="wrap_content" 
  
  
  
   android:src="@drawable/tab_profile" 
  
  
  
   android:layout_weight="1.0" 
  
  
  
   android:background="@drawable/bg_btn" />   
  
  
  
<ImageButton   
  
  
  
   android:id="@+id/tab_friends" 
  
  
  
   android:layout_width="wrap_content" 
  
  
  
   android:layout_height="wrap_content" 
  
  
  
   android:layout_weight="1.0" 
  
  
  
   android:src="@drawable/tab_friends" 
  
  
  
   android:background="@drawable/bg_btn" /> 
  
  
  
<ImageButton   
  
  
  
  android:id="@+id/tab_games"   
  
  
  
  android:layout_width="wrap_content" 
  
  
  
  android:layout_height="wrap_content" 
  
  
  
  android:layout_weight="1.0" 
  
  
  
  android:src="@drawable/tab_games"   
  
  
  
  android:background="@drawable/bg_btn" /> 
  
  
  
</LinearLayout> 
 
 
 

【编辑推荐】

谷歌Android UI设计技巧:框架特性

谷歌Android UI设计技巧:新的UI设计模式

谷歌Android UI设计技巧:优秀UI设计准则