一.頭部布局,主要是微信兩個字和兩個圖片按鈕,中間空白部分可以用TextView控件設置權重為1,其他都不設置,它便會自動填滿空白
head.xml：
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="50dp" 5 android:orientation="horizontal" 6 android:background="#21292c"> 7 8 <TextView 9 android:id="@+id/textView1" 10 android:layout_width="wrap_content" 11 android:layout_height="wrap_content" 12 android:text="@string/weixin" 13 android:textColor="#ffffff" 14 android:textSize="20sp" 15 android:layout_gravity="center" 16 android:padding="10dp"/> 17 <TextView 18 android:layout_width="wrap_content" 19 android:layout_height="wrap_content" 20 android:layout_weight="1"/> 21 22 <LinearLayout 23 android:layout_width="wrap_content" 24 android:layout_height="match_parent" 25 android:gravity="center"> 26 27 <ImageView 28 android:id="@+id/imageView2" 29 android:layout_width="40dp" 30 android:layout_height="30dp" 31 android:src="@drawable/fdj" 32 android:layout_marginRight="10dp"/> 33 34 <ImageView 35 android:id="@+id/imageView1" 36 android:layout_width="40dp" 37 android:layout_height="30dp" 38 android:src="@drawable/barbuttonicon_add" /> 39 40 </LinearLayout> 41 42 </LinearLayout>
二.底部布局
1.主要是四個單選按鈕加4個圖片
bottom.xml：
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="horizontal" > 6 7 <RadioGroup 8 android:id="@+id/radioGroup1" 9 android:layout_width="match_parent" 10 android:layout_height="60dp" 11 android:orientation="horizontal" 12 android:background="@drawable/group_buton_nomal" 13 android:gravity="center"> 14 15 <RadioButton 16 android:id="@+id/radio0" 17 android:layout_width="wrap_content" 18 android:layout_height="wrap_content" 19 android:checked="true" 20 android:text="@string/weixin" 21 style="@style/radioStyle" 22 android:drawableTop="@drawable/tab_weixin"/> 23 24 <RadioButton 25 android:id="@+id/radio1" 26 android:layout_width="wrap_content" 27 android:layout_height="wrap_content" 28 android:text="@string/addressList" 29 style="@style/radioStyle" 30 android:drawableTop="@drawable/tab_address"/> 31 32 <RadioButton 33 android:id="@+id/radio2" 34 android:layout_width="wrap_content" 35 android:layout_height="wrap_content" 36 android:text="@string/find" 37 style="@style/radioStyle" 38 android:drawableTop="@drawable/tab_find"/> 39 40 <RadioButton 41 android:id="@+id/radio3" 42 android:layout_width="wrap_content" 43 android:layout_height="wrap_content" 44 android:text="@string/set" 45 style="@style/radioStyle" 46 android:drawableTop="@drawable/tab_set"/> 47 </RadioGroup> 48 49 </LinearLayout>
我們可以將共同的樣式進行分離(本來應該要寫四次的,現在只需要寫一次)
將樣式定義在res/values目錄下的styles.xml文件里
styles.xml:
1 <resources xmlns:android="http://schemas.android.com/apk/res/android"> 2 <style name="radioStyle"> 3 <item name="android:button">@null</item> 4 <item name="android:layout_weight">1</item> 5 <item name="android:gravity">center</item> 6 <item name="android:textColor">@drawable/text_color</item> 7 </style> 8 </resources>
2.單擊圖片是要切換到相對應的綠色的圖片
首先需要在我們res/drawable-hdpi目錄下新建4個selector(選擇器)
tab_weixin.xml、tab_address.xml、tab_find.xml、tab_set.xml(代碼都同是一樣的,不同的切換的圖片,這里就不一一列出來了)
1 <?xml version="1.0" encoding="utf-8"?> 2 <selector xmlns:android="http://schemas.android.com/apk/res/android" > 3 <item android:state_checked="true" 4 android:drawable="@drawable/tabbar_mainframehl"></item> 5 <item 6 android:drawable="@drawable/tabbar_mainframe"></item> 7 8 </selector>
三.主界面(中間部分原理跟頭部布局一樣,設置權重為1,其他都不設置,它便會自動填滿空白)
activity_main.xml：
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 <!-- 頭部 --> 7 <LinearLayout 8 android:layout_width="match_parent" 9 android:layout_height="wrap_content" > 10 <include layout="@layout/head"/> 11 </LinearLayout> 12 13 <!-- 中間 --> 14 <LinearLayout 15 android:layout_width="match_parent" 16 android:layout_height="wrap_content" 17 android:layout_weight="1"> 18 </LinearLayout> 19 20 <!-- 底部 --> 21 <LinearLayout 22 android:layout_width="match_parent" 23 android:layout_height="wrap_content" > 24 <include layout="@layout/bottom"/> 25 </LinearLayout> 26 27 </LinearLayout>
四.運行結果如下：
以上就是一個簡單的模仿微信主頁面的例子(ps:我們項目使用到的圖片統一放到res/drawable-hdpi目錄下)