Android菜鸟成长记8 -- 布局实践（微信界面的编写）

　　前面我们简单的介绍了一下android的五大布局，那么现在我们来实践一下，写一个简单的微信界面

　　首先，我们新建一个weixin.xml的linnerlayout布局

　　我们日常使用的微信，从简单的方面来说我可一分成三个内容，头部标签栏，中间显示信息栏，还有一个底部。那么我们就按照这个来先建一个页面

 <?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" >
     </LinearLayout>

     <!-- 中间 -->
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
     </LinearLayout>

     <!-- 底部 -->
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content" >
     </LinearLayout>

 </LinearLayout>

效果如下：

　　这是完成后的显示

　　

那么要怎么实现到这个效果，

1.先创建一个标题栏的layout文件

 <?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="@string/weixin"
         android:textColor="#ffffff"
         android:textSize="20sp"
         android:layout_gravity="center"
         android:padding="10dp"/>

     <TextView
         android:layout_width="wrap_content"
         android:layout_marginTop="20dp"
         android:layout_height="30dp"
         android:layout_weight=""
         android:gravity="bottom" />

     <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:gravity="bottom">

         <ImageView
             android:id="@+id/imageView2"
             android:layout_width="40dp"
             android:layout_height="30dp"
             android:src="@drawable/fdj"
             android:layout_marginRight="10dp"/>

         <ImageView
             android:id="@+id/imageView1"
             android:layout_width="40dp"
             android:layout_height="30dp"
             android:src="@drawable/barbuttonicon_add" />

     </LinearLayout>

 </LinearLayout>

然后我们在创建一个底部的文件的

 <?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="60dp"
         android:orientation="horizontal"
         android:background="@drawable/group_buton_nomal"
         android:gravity="center">

         <RadioButton
             android:id="@+id/radio0"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:checked="true"
             android:text="@string/weixin"
                style="@style/radioStyle"
                android:drawableTop="@drawable/tab_weixin"/>

         <RadioButton
             android:id="@+id/radio1"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/addressList"
                style="@style/radioStyle"
                android:drawableTop="@drawable/tab_address"/>

         <RadioButton
             android:id="@+id/radio2"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/find"
                style="@style/radioStyle"
                android:drawableTop="@drawable/tab_find"/>

          <RadioButton
             android:id="@+id/radio3"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/set"
                style="@style/radioStyle"
                android:drawableTop="@drawable/tab_set"/>
     </RadioGroup>

 </LinearLayout>

底部文件采用的是单选按钮组，这里我就不过多解释了，跟HTML的单选按钮类似

上面的用到的style是自己设计的一个按钮样式，放在style.xml的文件里，具体代码如下

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

为了让让底部的显示效果更加的接近我们日常使用的微信，我们对按钮做了一个判断，就是使用selector（不懂的请看下一章）

代码如下：

 <?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/tabbar_contacts_hl"></item>
     <item
         android:drawable="@drawable/tabbar_contacts"></item>

 </selector>

就是通过焦点是否在该按钮上，在的化显示有颜色的图片，不在的化显示没颜色的。对其他桑按钮同样的操作，代码一样，只是把图片换一下就OK了。

还有文字也进行了相同的操作

 <?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/tabbar_contacts_hl"></item>
     <item
         android:drawable="@drawable/tabbar_contacts"></item>

 </selector>

好了，一切准备，就绪，我们只需要将一切和起来就可以了。我们可以在weixin.xml通过include的标签把这些包含进来

<?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/head"/>
    </LinearLayout>

    <!-- 中间 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="">
    </LinearLayout>

    <!-- 底部 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <include layout="@layout/bottom"/>
    </LinearLayout>

</LinearLayout>

这样一个简单的微信界面就准备h好了

但是你运行的时候是不是觉得不对劲，跟我们的实际用的微信不一样，那是因为多了一个系统默认的标题栏，我们把他去掉就可以了。

在AndroidManifest.xml的作一下的修改即可

那样一个见到你微信布局就完成了.