一.头部布局,主要是微信两个字和两个图片按钮,中间空白部分可以用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目录下)