android布局实践——模仿微信主界面

这是目前微信6.0版本的主界面

　　

先来分析一波：

　　1.（top.xml）界面头部有一个微信（6）消息提醒    一个搜索图标   一个更多的的图标+，中间还有一段空白，我们可以弄两个textView（其中一个权重给会自动占其余空白部分），和两个图片按钮

　　2.(bottom.xml)界面底部可以看到是由4个相同的部分组成，这里我们可以先弄个单选群（ <RadioGroup>）给4个包起来，然后再分为4个单选按钮控件（radioButton）

　　3.(wx.xml)然后我们再建一个wx.xml把前面两个包含进来，有上面图片可看出界面分三部分，所以我们zai'wx.xml新建三个LinearLayout分别显示头部，中部和底部

　　4.底部4个控件当我们点击其中一个会变成绿色，其余为白色，这里我们可以在drawable中添加选择器分别设置（tab_wx.xml,tab_lxr.xml,tab_fx.xml,tab_wo.xml）。

代码如下:

　　1.top.xml

　　　　

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="50dp"
     android:orientation="horizontal"
     android:background="#21292c">
 
     <TextView
         android:id="@+id/textView1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="微信"
         android:textColor="#ffffff"
         android:textSize="20sp"
         android:layout_gravity="center"
         android:padding="10dp"/>
 
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1" />
 
     <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:gravity="center">
 
         <ImageView
             android:id="@+id/imageView2"
             android:layout_width="40dp"
             android:layout_height="30dp"
             android:src="@drawable/actionbar_search_icon"
             android:layout_marginRight="10dp"/>
 
         <ImageView
             android:id="@+id/imageView1"
             android:layout_width="40dp"
             android:layout_height="30dp"
             android:src="@drawable/actionbar_add_icon" />
 
     </LinearLayout>
 
 </LinearLayout>

2.bottom.xml

　　

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="horizontal" >
 
     <RadioGroup
         android:id="@+id/radioGroup1"
         android:layout_width="match_parent"
         android:layout_height="50dp"
         padding
         android:orientation="horizontal"
         android:background="@drawable/back"
         android:gravity="center">
 
         <RadioButton
             android:id="@+id/radio0"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:checked="true"
             android:text="@string/wx"
                style="@style/radioStyle"
                android:drawableTop="@drawable/tab_wx"/>    注：在后面有介绍到
 
         <RadioButton
             android:id="@+id/radio1"
             style="@style/radioStyle"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:drawableTop="@drawable/tab_lxr"
             android:text="@string/lxr" />
 
         <RadioButton
             android:id="@+id/radio2"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/fx"
                style="@style/radioStyle"
                android:drawableTop="@drawable/tab_fx"/>
 
          <RadioButton
             android:id="@+id/radio3"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/wo"
                style="@style/radioStyle"
                android:drawableTop="@drawable/tab_wo"/>
     </RadioGroup>
 
 </LinearLayout>

3.wx.xml

　　

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical" >
     <!-- head -->
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content" >
         <include layout="@layout/top"/>
     </LinearLayout>
 
     <!-- 中间 -->
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_weight="1">
     </LinearLayout>
 
     <!-- 底部 -->
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content" >
         <include layout="@layout/bottom"/>
     </LinearLayout>
 
 </LinearLayout>

4.tab_wx.xml,tab_lxr.xml,tab_fx.xml,tab_wo.xml   和text_color.xml

　　前面4个文件都差不多所以只展示一个（分别为底部那四个图片）

　　　　

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android" >
      <item android:state_checked="true"
         android:drawable="@drawable/wo1"></item>
     <item
         android:drawable="@drawable/wo"></item>
 
 </selector>

text_color.xml

　　

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item android:state_checked="true"
         android:color="#07bb07"></item>
     <item
         android:color="#999999"></item>
 
 </selector>

这个text 如何用的呢？

　　找到values文件下的styles.xml加入下面代码

　　

  <style name="radioStyle">
         <item name="android:button">@null</item>
         <item name="android:layout_weight">1</item>
         <item name="android:TextSize">15sp</item>
         <item name="android:gravity">center</item>
         <item name="android:textColor">@drawable/text_color</item>
     </style>

整体效果图为