Android开发之利用ViewPager实现页面的切换(仿微信、QQ)

这里利用ViewPager实现页面的滑动，下面直接上代码：

1、首先写一个Activity，然后将要滑动的Fragment镶嵌到写好的Activity中。

Activity的布局文件：activity_main.xml：

 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 
 7       <FrameLayout
 8            android:id="@+id/id_content"
 9            android:layout_weight="1"
10            android:layout_width="match_parent"
11            android:layout_height="0dp"/>
12 
13     <android.support.v4.view.ViewPager
14         android:id="@+id/id_viewpage"
15         android:layout_width="fill_parent"
16         android:layout_height="0dp"
17         android:layout_weight="0.001" >
18     </android.support.v4.view.ViewPager>
19 
20     <include layout="@layout/bottom" />
21 
22 </LinearLayout>

activity_main.xml中引入的布局（下面的切换的部分）

bottom.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="55dp"
 5     android:background="@drawable/bottom"
 6     android:orientation="horizontal" >
 7 
 8     <LinearLayout
 9         android:id="@+id/id_tab_education"
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         <!-- android:clickable="false" 是为了防止ImageButton截取了触摸事件 ，这里事件要给它的上一级linearlayout -->
17 
18         <ImageButton
19             android:id="@+id/id_tab_education_img"
20             android:layout_width="wrap_content"
21             android:layout_height="wrap_content"
22             android:background="#00000000"
23             android:clickable="false"
24             android:src="@drawable/tab_bar_01_check" />
25 
26         <TextView
27             android:layout_width="wrap_content"
28             android:layout_height="wrap_content"
29             android:text="@string/bottom_jurisdiction" />
30     </LinearLayout>
31 
32     <LinearLayout
33         android:id="@+id/id_tab_frd"
34         android:layout_width="0dp"
35         android:layout_height="match_parent"
36         android:layout_weight="1"
37         android:gravity="center"
38         android:orientation="vertical" >
39 
40         <ImageButton
41             android:id="@+id/id_tab_frd_img"
42             android:layout_width="wrap_content"
43             android:layout_height="wrap_content"
44             android:background="#00000000"
45             android:clickable="false"
46             android:src="@drawable/tab_bar_04" />
47 
48         <TextView
49             android:layout_width="wrap_content"
50             android:layout_height="wrap_content"
51             android:text="@string/bottom_discover" />
52     </LinearLayout>
53 
54     <LinearLayout
55         android:id="@+id/id_tab_setting"
56         android:layout_width="0dp"
57         android:layout_height="match_parent"
58         android:layout_weight="1"
59         android:gravity="center"
60         android:orientation="vertical" >
61 
62         <ImageButton
63             android:id="@+id/id_tab_setting_img"
64             android:layout_width="wrap_content"
65             android:layout_height="wrap_content"
66             android:background="#00000000"
67             android:clickable="false"
68             android:src="@drawable/tab_bar_05" />
69 
70         <TextView
71             android:layout_width="wrap_content"
72             android:layout_height="wrap_content"
73             android:text="@string/bottom_my" />
74     </LinearLayout>
75 
76 </LinearLayout>

MainActivity.class（用来镶嵌Fragment）

  1 package com.example.activity;
  2 
  3 import com.example.fragment.SeekFragment;
  4 import com.example.fragment.ProcedureFragment;
  5 import com.example.fragment.MyFragment;
  6 import com.example.myproject.R;
  7 
  8 import android.app.Activity;
  9 import android.os.Bundle;
 10 import android.support.v4.app.Fragment;
 11 import android.support.v4.app.FragmentActivity;
 12 import android.support.v4.app.FragmentManager;
 13 import android.support.v4.app.FragmentTransaction;
 14 import android.support.v4.view.ViewPager;
 15 import android.support.v4.view.ViewPager.OnPageChangeListener;
 16 import android.view.KeyEvent;
 17 import android.view.View;
 18 import android.view.View.OnClickListener;
 19 import android.view.Window;
 20 import android.widget.ImageButton;
 21 import android.widget.LinearLayout;
 22 import android.widget.Toast;
 23 
 24 public class MainActivity extends FragmentActivity implements OnClickListener{
 25 
 26     private long lastTime;//退出键的最后时间
 27     private ViewPager mViewPager;// 用来放置界面切换
 28     // 三个Tab，每个Tab包含一个按钮
 29     private LinearLayout mTabEducation;
 30     private LinearLayout mTabFrd;
 31     private LinearLayout mTabSetting;
 32     // 三个按钮
 33     private ImageButton mEducationImg;
 34     private ImageButton mFrdImg;
 35     private ImageButton mSettingImg;
 36     // 初始化3个Fragment
 37     private Fragment jurisdiction;
 38     private Fragment discover;
 39     private Fragment setting;
 40 
 41     @Override
 42     protected void onCreate(Bundle savedInstanceState) {
 43         // TODO Auto-generated method stub
 44         super.onCreate(savedInstanceState);
 45         requestWindowFeature(Window.FEATURE_NO_TITLE);
 46         setContentView(R.layout.activity_main);
 47         
 48         initView();
 49         initEvent();
 50         initViewPage(0);
 51     }
 52 
 53     /*
 54      * 判断哪个要显示，及设置按钮图片
 55      */
 56     @Override
 57     public void onClick(View arg0) {
 58         switch (arg0.getId()) {
 59         case R.id.id_tab_education:
 60             initViewPage(0);
 61             mViewPager.setCurrentItem(0);
 62             resetImg();
 63             mEducationImg.setImageResource(R.drawable.tab_bar_01_check);
 64             break;
 65         case R.id.id_tab_frd:
 66             initViewPage(1);
 67             mViewPager.setCurrentItem(1);
 68             resetImg();
 69             mFrdImg.setImageResource(R.drawable.tab_bar_04_check);
 70             break;
 71         case R.id.id_tab_setting:
 72             initViewPage(2);
 73             mViewPager.setCurrentItem(2);
 74             resetImg();
 75             mSettingImg.setImageResource(R.drawable.tab_bar_05_check);
 76             break;
 77         default:
 78             break;
 79         }
 80     }
 81 
 82     /*
 83      * 初始化配置
 84      */
 85     private void initView() {
 86         mViewPager = (ViewPager) findViewById(R.id.id_viewpage);
 87         // 初始化三个LinearLayout
 88         mTabEducation = (LinearLayout) findViewById(R.id.id_tab_education);
 89         mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
 90         mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);
 91         // 初始化三个按钮
 92         mEducationImg = (ImageButton) findViewById(R.id.id_tab_education_img);
 93         mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
 94         mSettingImg = (ImageButton) findViewById(R.id.id_tab_setting_img);
 95     }
 96 
 97     /*
 98      * 初始化initViewPage
 99      */
100     private void initViewPage(int i) {
101         FragmentManager fm = getSupportFragmentManager();
102         FragmentTransaction transaction = fm.beginTransaction();// 创建一个事务
103         hideFragment(transaction);// 我们先把所有的Fragment隐藏了，然后下面再开始处理具体要显示的Fragment
104         switch (i) {
105         case 0:
106             if (jurisdiction == null) {
107                 jurisdiction = new ProcedureFragment();
108                 transaction.add(R.id.id_content, jurisdiction);// 将微信聊天界面的Fragment添加到Activity中
109             } else {
110                 transaction.show(jurisdiction);
111             }
112             break;
113         case 1:
114             if (discover == null) {
115                 discover = new SeekFragment();
116                 transaction.add(R.id.id_content, discover);
117             } else {
118                 transaction.show(discover);
119             }
120             break;
121         case 2:
122             if (setting == null) {
123                 setting = new MyFragment();
124                 transaction.add(R.id.id_content, setting);
125             } else {
126                 transaction.show(setting);
127             }
128             break;
129 
130         default:
131             break;
132         }
133         
134         transaction.commit();// 提交事务
135     }
136 
137     private void initEvent() {
138         mTabEducation.setOnClickListener(this);
139         mTabFrd.setOnClickListener(this);
140         mTabSetting.setOnClickListener(this);
141         mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
142             @Override
143             public void onPageSelected(int arg0) {
144                 int currentItem = mViewPager.getCurrentItem();
145                 switch (currentItem) {
146                 case 0:
147                     resetImg();
148                     mEducationImg.setImageResource(R.drawable.tab_bar_01_check);
149                     break;
150                 case 1:
151                     resetImg();
152                     mFrdImg.setImageResource(R.drawable.tab_bar_04_check);
153                     break;
154                 case 2:
155                     resetImg();
156                     mSettingImg.setImageResource(R.drawable.tab_bar_05_check);
157                 default:
158                     break;
159                 }
160             }
161 
162             @Override
163             public void onPageScrolled(int arg0, float arg1, int arg2) {
164 
165             }
166 
167             @Override
168             public void onPageScrollStateChanged(int arg0) {
169 
170             }
171         });
172     }
173 
174     /*
175      * 隐藏所有的Fragment
176      */
177     private void hideFragment(FragmentTransaction transaction) {
178         if (jurisdiction != null) {
179             transaction.hide(jurisdiction);
180         }
181         if (discover != null) {
182             transaction.hide(discover);
183         }
184         if (setting != null) {
185             transaction.hide(setting);
186         }
187     }
188 
189     /*
190      * 把所有图片变暗
191      */
192     private void resetImg() {
193         mEducationImg.setImageResource(R.drawable.tab_bar_01);
194         mFrdImg.setImageResource(R.drawable.tab_bar_04);
195         mSettingImg.setImageResource(R.drawable.tab_bar_05);
196     }
197     @Override
198     public boolean onKeyDown(int keyCode, KeyEvent event) {
199 
200         if (keyCode == KeyEvent.KEYCODE_BACK) {
201             if (System.currentTimeMillis() - lastTime <= 2000) {
202                 finish();
203             } else {
204                 Toast.makeText(this, "再按一次退出程序", 1000).show();
205                 lastTime = System.currentTimeMillis();
206             }
207             return false;
208         }
209         return super.onKeyDown(keyCode, event);
210     }
211 }

通过以上代码即可实现微信或QQ的那种页面的切换了，具体里面的内容则根据自身情况在相应的fragment中来实现。

下面给一个一个空的Fragment，以此为蓝图，剩余的部分可以在此基础上更改添加。

SeekFragment.java

 1 package com.example.fragment;
 2 
 3 import com.example.myproject.R;
 4 
 5 import android.os.Bundle;
 6 import android.support.v4.app.Fragment;
 7 import android.view.LayoutInflater;
 8 import android.view.View;
 9 import android.view.ViewGroup;
10 /**
11  * 查找fragment
12  * @author admin
13  *
14  */
15 public class SeekFragment extends Fragment {
16     private View rootView;
17     @Override
18     public View onCreateView(LayoutInflater inflater, ViewGroup container,
19             Bundle savedInstanceState) {
20         if (null == rootView) {
21             rootView = inflater.inflate(R.layout.fragment_seek, container,
22                     false);
23             initView(rootView);
24         }
25         return rootView;
26     }
27     /**
28      * 用于初始化，具体操作视自己情况而定
29      * @param rootView
30      */
31     private void initView(View rootView) {
32 
33     }
34 }

 

转载于:https://www.cnblogs.com/1925yiyi/p/7494679.html