ViewPager实现微信主界面

一前言

　　　在微信中，tab底栏有四个按钮，中间是可以左右滑动的界面，上面一个标题栏，大致情况如此，今天我们就来模仿一下，写出微信的UI。

好，废话咱少讲，先来上图看效果。

二XML布局　

1.Tab底栏 bottle.xml

　　　　在XML布局中，tab底栏我们用一个LinearLayout嵌套四个LinearLayout，这四个子LinearLayout中嵌套一个ImageButton和一个TextView垂直排列就好了。

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="horizontal" android:layout_width="match_parent"
 4     android:layout_height="55dp"
 5     android:background="@drawable/bottom_bar"
 6     
 7     >
 8     
 9     <LinearLayout
10         android:layout_width="0dp"
11         android:layout_height="match_parent"
12         android:layout_weight="1"
13         android:gravity="center"
14         android:orientation="vertical"
15         >
16         <ImageButton
17             android:id="@+id/btn1"
18             android:layout_width="wrap_content"
19             android:layout_height="wrap_content"
20             android:background="@drawable/tab_weixin_pressed"
21 
22             />
23         <TextView
24             android:text="微信"
25             android:layout_width="wrap_content"
26             android:layout_height="wrap_content"
27             android:textColor="#FFFFFF"
28             />
29     </LinearLayout>
30 
31     <LinearLayout
32         android:layout_width="0dp"
33         android:layout_height="match_parent"
34         android:layout_weight="1"
35         android:gravity="center"
36         android:orientation="vertical"
37         >
38         <ImageButton
39             android:id="@+id/btn2"
40             android:layout_width="wrap_content"
41             android:layout_height="wrap_content"
42             android:background="@drawable/tab_find_frd_normal"
43             />
44         <TextView
45             android:text="朋友"
46             android:layout_width="wrap_content"
47             android:layout_height="wrap_content"
48             android:textColor="#FFFFFF"
49             />
50     </LinearLayout>
51 
52     <LinearLayout
53         android:layout_width="0dp"
54         android:layout_height="match_parent"
55         android:gravity="center"
56         android:layout_weight="1"
57         android:orientation="vertical"
58         >
59         <ImageButton
60             android:id="@+id/btn3"
61             android:layout_width="wrap_content"
62             android:layout_height="wrap_content"
63             android:background="@drawable/tab_address_normal"
64             />
65         <TextView
66             android:text="通讯录"
67             android:layout_width="wrap_content"
68             android:layout_height="wrap_content"
69             android:textColor="#FFFFFF"
70             />
71     </LinearLayout>
72 
73 
74     <LinearLayout
75         android:layout_width="0dp"
76         android:gravity="center"
77         android:layout_height="match_parent"
78         android:layout_weight="1"
79         android:orientation="vertical"
80         >
81         <ImageButton
82             android:id="@+id/btn4"
83             android:layout_width="wrap_content"
84             android:layout_height="wrap_content"
85             android:background="@drawable/tab_settings_normal"
86             />
87         <TextView
88             android:text="功能"
89             android:layout_width="wrap_content"
90             android:layout_height="wrap_content"
91             android:textColor="#FFFFFF"
92             />
93     </LinearLayout>
94     
95 </LinearLayout>

　　　2.顶部标题栏 top.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical" android:layout_width="match_parent"
 4     android:layout_height="45dp"
 5     android:background="@drawable/title_bar"
 6     android:gravity="center"
 7     >
 8     <TextView
 9         android:text="微信"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:textColor="#ffffff"
13         android:textSize="20sp"
14         />
15 
16 </Linear

　　　　3.activity_main主界面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"


    android:orientation="vertical"
    tools:context="com.wyf.tab.MainActivity">
    <include layout="@layout/top"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        ></android.support.v4.view.ViewPager>

    <include layout="@layout/bottle"/>
</LinearLayout>

　　4 ViewPager四个滑动所用的界面tab1.xml(复制四个)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
   <TextView
       android:text=" this is one"
       android:gravity="center"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</LinearLayout>

三 JAVA代码

　　　　在MainActivity中

  1 package com.wyf.tab;
  2 
  3 import android.os.Bundle;
  4 import android.support.v4.view.PagerAdapter;
  5 import android.support.v4.view.ViewPager;
  6 import android.support.v7.app.AppCompatActivity;
  7 import android.view.LayoutInflater;
  8 import android.view.View;
  9 import android.view.ViewGroup;
 10 import android.widget.ImageButton;
 11 
 12 import java.util.ArrayList;
 13 import java.util.List;
 14 
 15 
 16 public class MainActivity extends AppCompatActivity implements View.OnClickListener {
 17 
 18     ImageButton btn1,btn2,btn3,btn4;
 19     List<View> mView=new ArrayList<View>();
 20     PagerAdapter adapter;
 21     ViewPager viewPager;
 22 
 23 
 24     @Override
 25     protected void onCreate(Bundle savedInstanceState) {
 26         super.onCreate(savedInstanceState);
 27 
 28         setContentView(R.layout.activity_main);
 29         getSupportActionBar().hide();
 30 
 31         initView();
 32 
 33         initEvent();
 34 
 35     }
 36 
 37     /***
 38      * 监听事件
 39      */
 40     private void initEvent() {
 41 
 42         btn1.setOnClickListener(this);
 43         btn2.setOnClickListener(this);
 44         btn3.setOnClickListener(this);
 45         btn4.setOnClickListener(this);
 46         //ViewPager使用OnPageChangeListener监听
 47         viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
 48             @Override
 49             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 50 
 51             }
 52             //被选中后触发
 53             @Override
 54             public void onPageSelected(int position) {
 55                 restImg();      //重置图片
 56                 //哪个被点击设置哪个ImageButton图片改变
 57                 switch (viewPager.getCurrentItem())
 58                 {
 59                     case 0:
 60                         btn1.setImageResource(R.drawable.tab_weixin_pressed);
 61                         break;
 62                     case 1:
 63                         btn2.setImageResource(R.drawable.tab_find_frd_pressed);
 64                         break;
 65 
 66                     case 2:
 67                         btn3.setImageResource(R.drawable.tab_address_pressed);
 68                         break;
 69 
 70                     case 3:
 71                         btn4.setImageResource(R.drawable.tab_settings_pressed);
 72                         break;
 73 
 74                 }
 75             }
 76 
 77             @Override
 78             public void onPageScrollStateChanged(int state) {
 79 
 80             }
 81         });
 82 
 83 
 84 
 85     }
 86 
 87     /**
 88      * 设置四个ImageButton图片为没有触发的图片
 89      */
 90     private void restImg() {
 91         btn1.setImageResource(R.drawable.tab_weixin_normal);
 92         btn2.setImageResource(R.drawable.tab_find_frd_normal);
 93         btn3.setImageResource(R.drawable.tab_address_normal);
 94         btn4.setImageResource(R.drawable.tab_settings_normal);
 95 
 96     }
 97 
 98     /**
 99      * 实例化ImageButton和ViewPager
100      */
101     private void initView() {
102         btn1=(ImageButton)findViewById(R.id.btn1);
103         btn2=(ImageButton)findViewById(R.id.btn2);
104         btn3=(ImageButton)findViewById(R.id.btn3);
105         btn4=(ImageButton)findViewById(R.id.btn4);
106 
107         viewPager=(ViewPager)findViewById(R.id.viewPager);
108 
109 
110        //添加四个ViewPager的layout布局
111         final LayoutInflater mInflater=LayoutInflater.from(this);
112         View tab1=mInflater.inflate(R.layout.tab1,null);
113         View tab2=mInflater.inflate(R.layout.tab2,null);
114         View tab3=mInflater.inflate(R.layout.tab3,null);
115         View tab4=mInflater.inflate(R.layout.tab4,null);
116         mView.add(tab1);
117         mView.add(tab2);
118         mView.add(tab3);
119         mView.add(tab4);
120 
121         adapter=new PagerAdapter() {
122             //得到滑动layout的数量
123             @Override
124             public int getCount() {
125 
126                 return  mView.size();
127             }
128             //instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是代表的同一个视图(即它俩是否是对应的，对应的表示同一个View)
129             @Override
130             public boolean isViewFromObject(View view, Object object) {
131 
132                 return view==object;
133             }
134             //从当前container中删除指定位置（position）的View;
135             @Override
136             public void destroyItem(ViewGroup container, int position, Object object) {
137                // super.destroyItem(container, position, object);
138                 container.removeView(mView.get(position));
139             }
140             //instantiateItem()：做了两件事，第一：将当前视图添加到container中，第二：返回当前View
141             @Override
142             public Object instantiateItem(ViewGroup container, int position) {
143 
144 
145                 View view=mView.get(position);
146                 container.addView(view);
147                 return  view;
148             }
149         };
150         viewPager.setAdapter(adapter);
151 
152     }
153 
154     @Override
155     public void onClick(View v) {
156         restImg();
157         switch (v.getId())
158         {
159             case R.id.btn1:
160                 btn1.setImageResource(R.drawable.tab_weixin_pressed);
161                 viewPager.setCurrentItem(0);
162                 break;
163             case R.id.btn2:
164                 btn2.setImageResource(R.drawable.tab_find_frd_pressed);
165                 viewPager.setCurrentItem(1);
166                 break;
167             case R.id.btn3:
168                 btn3.setImageResource(R.drawable.tab_address_pressed);
169                 viewPager.setCurrentItem(2);
170                 break;
171             case R.id.btn4:
172                 btn4.setImageResource(R.drawable.tab_settings_pressed);
173                 viewPager.setCurrentItem(3);
174                 break;
175         }
176 
177     }
178 }

四总结

　　　　OK，好了，其实做出一个微信的界面也是没有那么难吧，只要稍加认真想想，一切都变得秀简单.在这里，要说一下PagerAdapter,PagerAdapter是这里的一个难点，

PagerAdapter有四个主要方法：

public int getCount()

public boolean isViewFromObject(View view, Object object)

public void destroyItem(ViewGroup container, int position, Object object)

public Object instantiateItem(ViewGroup container, int position)

记住他们的用法就好了，至于理解不了没关系，以后会明白的。