Android高仿微信6.3.31版本主界面布局

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