Android之微信布局篇

 

一、准備工作：

        1、 下載好相關的圖片：

                 

          2、創建一個名WeiChat的項目，將圖片復制到res-----》drawable-hdpi目錄下。

                  

二、編寫代碼：

        1、 最終效果：

                

      2、微信可划分為頭、中間、尾三部分，最后我們將這三部分合並在同一界面。

            

         ①頭部：headlayout

headlayout.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="@string/weixin"
        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/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>

           1、通過LinearLayout布局，設置android:orientation="horizontal"，android:background="#21292c"兩個屬性顯示背景為灰黑色。

           2 、我們通過兩個TextView控件來顯示“微信” 和字體與右邊圖片隔離，通過兩個ImageView控件顯示最右邊的兩張圖片，有LinearLayout布局水平方向讓圖片對齊。

           3、通過gravity屬性設置圖片在LinearLayout居中，設置ImageView的layout_marginRight設置兩張圖片不相連。

       效果圖：

     

                         

            ②尾部：footlayout

footlayout.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" >
    
<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/weicho1"/>
        <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/weicho2"/>
        <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/weicho3"/>
        
         <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/weicho4"/>
    </RadioGroup>
</LinearLayout>

 

         1、通過四個RadioButton單選控件來顯示下面四張圖片，drawableTop屬性設置圖片，通過styles。xml文件設置樣式。

          ① 設置值為@null將去掉空心圓，設置每個RadioButton控件的layout_weight="1"位權為1，平分位置。

               styles.xml文件：

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

        2、點擊變色：點擊圖標時圖標和文字變為綠色，而其他的則為淺灰色。RadioButton有個checked點擊屬性。

        3、我們添加了五個selector類型的xml文件，分別命名為weicho1到weicho4，最后一命名為choscolor.xml文件（用來設置字體顏色）。

        4、當checked=true時就設置drawable屬性為綠色圖片,通過styles.xml文件的radioStyle設置字體顏色為綠色。（注：其他3個xml文件與weicho1.xml文件一樣只是圖片名稱不一樣）

      weicho1.xml文件：          

<?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_mainframehl"></item>
    <item 
        android:drawable="@drawable/tabbar_mainframe"></item>
</selector>

      choscolor.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="@color/green"></item>
    <item 
        android:color="@color/grey"></item>
</selector>

  效果圖片：

                   

 

            ③中間：listviewon1

listviewon1.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" >
     <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        
    </ListView>

</LinearLayout>

   1、我們通過一個ListView實現動態添加數據，現在我們就站一個位置，不這么快添加數據。（注見下一章listview動態添加數據篇）。

 

             ④合並頭、中間、尾三部分：weichatlayout

weichatlayout.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/headlayout"/>
    </LinearLayout>
    
    <!-- 中間 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:layout_weight="1">
        <include layout="@layout/listviewon1"/>
    </LinearLayout>
    
    <!-- 底部 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <include layout="@layout/footlayout"/>
    </LinearLayout>

</LinearLayout>

    1、我們通過3個LinearLayout布局設置頭，中，尾。

    2、通過layout_weight="1"設置中的位權占滿剩余的空間，固定頭和尾的大小。

    3、通過include的layout屬性設置相關的布局 。

效果圖片：