Android——微信界面（簡易版）

前面我們簡單的介紹了一下android的五大布局，那么現在我們來實踐一下，寫一個簡單的微信界面

　　首先，我們新建一個weixin.xml的linnerlayout布局

　　我們日常使用的微信，從簡單的方面來說我可一分成三個內容，頭部標簽欄，中間顯示信息欄，還有一個底部。那么我們就按照這個來先建一個頁面

 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     <!-- head -->
 7     <LinearLayout
 8         android:layout_width="match_parent"
 9         android:layout_height="wrap_content" >
10     </LinearLayout>
11     
12     <!-- 中間 -->
13     <LinearLayout
14         android:layout_width="match_parent"
15         android:layout_height="wrap_content" 
16     </LinearLayout>
17     
18     <!-- 底部 -->
19     <LinearLayout
20         android:layout_width="match_parent"
21         android:layout_height="wrap_content" >
22     </LinearLayout>
23 
24 </LinearLayout>

效果如下：

　　這是完成后的顯示

　　

那么要怎么實現到這個效果，

 1.先創建一個標題欄的layout文件

 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 
18     <TextView
19         android:layout_width="wrap_content"
20         android:layout_marginTop="20dp"
21         android:layout_height="30dp"
22         android:layout_weight="1"
23         android:gravity="bottom" />
24 
25     <LinearLayout
26         android:layout_width="wrap_content"
27         android:layout_height="match_parent" 
28         android:gravity="bottom">
29 
30         <ImageView
31             android:id="@+id/imageView2"
32             android:layout_width="40dp"
33             android:layout_height="30dp"
34             android:src="@drawable/fdj" 
35             android:layout_marginRight="10dp"/>
36 
37         <ImageView
38             android:id="@+id/imageView1"
39             android:layout_width="40dp"
40             android:layout_height="30dp"
41             android:src="@drawable/barbuttonicon_add" />
42         
43     </LinearLayout>
44 
45 </LinearLayout>

然后我們在創建一個底部的文件的

 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>

 

底部文件采用的是單選按鈕組，這里我就不過多解釋了，跟HTML的單選按鈕類似

上面的用到的style是自己設計的一個按鈕樣式，放在style.xml的文件里，具體代碼如下

1 <style name="radioStyle">
2         <item name="android:button">@null</item>
3         <item name="android:layout_weight">1</item>
4         <item name="android:gravity">center</item>
5         <item name="android:textColor">@drawable/text_color</item>
6     </style>

為了讓讓底部的顯示效果更加的接近我們日常使用的微信，我們對按鈕做了一個判斷，就是使用selector（不懂的請看下一章）

代碼如下：

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_contacts_hl"></item>
5     <item 
6         android:drawable="@drawable/tabbar_contacts"></item>
7 
8 </selector>

就是通過焦點是否在該按鈕上，在的化顯示有顏色的圖片，不在的化顯示沒顏色的。對其他桑按鈕同樣的操作，代碼一樣，只是把圖片換一下就OK了。

還有文字也進行了相同的操作

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_contacts_hl"></item>
5     <item 
6         android:drawable="@drawable/tabbar_contacts"></item>
7 
8 </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="1">
    </LinearLayout>
    
    <!-- 底部 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <include layout="@layout/bottom"/>
    </LinearLayout>

</LinearLayout>

 這樣一個簡單的微信界面就准備h好了

但是你運行的時候是不是覺得不對勁，跟我們的實際用的微信不一樣，那是因為多了一個系統默認的標題欄，我們把他去掉就可以了。

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

那樣一個見到你微信布局就完成了.