ViewPager + FragmentPagerAdapter

这里模仿下微信APP界面的实现

国际惯例,先看下效果图:

 

activity_main.xml 布局文件:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="vertical"
  7. tools:context="com.kevin.viewpager_fragment.MainActivity">
  8.  
  9. <include layout="@layout/top" />
  10.  
  11. <android.support.v4.view.ViewPager
  12. android:id="@+id/id_viewpager"
  13. android:layout_width="match_parent"
  14. android:layout_height="0dp"
  15. android:layout_weight="1" />
  16.  
  17. <include layout="@layout/bottom" />
  18.  
  19. </LinearLayout>

top.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="45dp"
  5. android:background="@mipmap/title_bar"
  6. android:gravity="center"
  7. android:orientation="vertical">
  8.  
  9. <TextView
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:layout_gravity="center"
  13. android:text="微信"
  14. android:textColor="#ffffff"
  15. android:textSize="20sp"
  16. android:textStyle="bold" />
  17.  
  18. </LinearLayout>

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="match_parent"
  4. android:layout_height="55dp"
  5. android:background="@mipmap/bottom_bar"
  6. android:orientation="horizontal">
  7.  
  8. <LinearLayout
  9. android:id="@+id/id_tab_weixin"
  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/id_tab_weixin_img"
  18. android:layout_width="wrap_content"
  19. android:layout_height="wrap_content"
  20. android:background="#00000000"
  21. android:clickable="false"
  22. android:src="@mipmap/tab_weixin_pressed" />
  23.  
  24. <TextView
  25. android:layout_width="wrap_content"
  26. android:layout_height="wrap_content"
  27. android:text="微信"
  28. android:textColor="#ffffff" />
  29.  
  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="@mipmap/tab_find_frd_normal" />
  47.  
  48. <TextView
  49. android:layout_width="wrap_content"
  50. android:layout_height="wrap_content"
  51. android:text="朋友"
  52. android:textColor="#ffffff" />
  53.  
  54. </LinearLayout>
  55.  
  56. <LinearLayout
  57. android:id="@+id/id_tab_address"
  58. android:layout_width="0dp"
  59. android:layout_height="match_parent"
  60. android:layout_weight="1"
  61. android:gravity="center"
  62. android:orientation="vertical">
  63.  
  64. <ImageButton
  65. android:id="@+id/id_tab_address_img"
  66. android:layout_width="wrap_content"
  67. android:layout_height="wrap_content"
  68. android:background="#00000000"
  69. android:clickable="false"
  70. android:src="@mipmap/tab_address_normal" />
  71.  
  72. <TextView
  73. android:layout_width="wrap_content"
  74. android:layout_height="wrap_content"
  75. android:text="通讯录"
  76. android:textColor="#ffffff" />
  77.  
  78. </LinearLayout>
  79.  
  80. <LinearLayout
  81. android:id="@+id/id_tab_setting"
  82. android:layout_width="0dp"
  83. android:layout_height="match_parent"
  84. android:layout_weight="1"
  85. android:gravity="center"
  86. android:orientation="vertical">
  87.  
  88. <ImageButton
  89. android:id="@+id/id_tab_setting_img"
  90. android:layout_width="wrap_content"
  91. android:layout_height="wrap_content"
  92. android:background="#00000000"
  93. android:clickable="false"
  94. android:src="@mipmap/tab_settings_normal" />
  95.  
  96. <TextView
  97. android:layout_width="wrap_content"
  98. android:layout_height="wrap_content"
  99. android:text="设置"
  100. android:textColor="#ffffff" />
  101.  
  102. </LinearLayout>
  103.  
  104. </LinearLayout>

tap01.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. <TextView
  8. android:layout_width="match_parent"
  9. android:layout_height="match_parent"
  10. android:gravity="center"
  11. android:text="微信"
  12. android:textSize="30sp"
  13. android:textStyle="bold" />
  14.  
  15. </LinearLayout>

tap02.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. <TextView
  8. android:layout_width="match_parent"
  9. android:layout_height="match_parent"
  10. android:gravity="center"
  11. android:text="微信2"
  12. android:textSize="30sp"
  13. android:textStyle="bold" />
  14.  
  15. </LinearLayout>

tap03.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. <TextView
  8. android:layout_width="match_parent"
  9. android:layout_height="match_parent"
  10. android:gravity="center"
  11. android:text="微信3"
  12. android:textSize="30sp"
  13. android:textStyle="bold" />
  14.  
  15. </LinearLayout>

tap04.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. <TextView
  8. android:layout_width="match_parent"
  9. android:layout_height="match_parent"
  10. android:gravity="center"
  11. android:text="微信4"
  12. android:textSize="30sp"
  13. android:textStyle="bold" />
  14.  
  15. </LinearLayout>

MainActivity.class 主类。 使用的是FragmentPagerAdapter,这个承载的是一个个Fragment,需要注意的是,这里需要继承自 FragmentActivity 。 上源码吧,看了就知道是多么简单了。

  1. package com.kevin.viewpager_fragment;
  2.  
  3. import android.os.Bundle;
  4. import android.support.v4.app.Fragment;
  5. import android.support.v4.app.FragmentActivity;
  6. import android.support.v4.app.FragmentPagerAdapter;
  7. import android.support.v4.view.ViewPager;
  8. import android.view.View;
  9. import android.widget.ImageButton;
  10. import android.widget.LinearLayout;
  11.  
  12. import java.util.ArrayList;
  13. import java.util.List;
  14.  
  15. import fragment.AddressFragment;
  16. import fragment.FrdFragment;
  17. import fragment.SettingFragment;
  18. import fragment.WeiXinFragment;
  19.  
  20. public class MainActivity extends FragmentActivity implements View.OnClickListener {
  21.  
  22. private ViewPager mViewPager;
  23. private FragmentPagerAdapter mAdapter;
  24. private List<Fragment> mFragments;
  25.  
  26. private LinearLayout mTabWeixin;
  27. private LinearLayout mTabFrd;
  28. private LinearLayout mTabAddress;
  29. private LinearLayout mTabSetting;
  30.  
  31. private ImageButton mImgWeixin;
  32. private ImageButton mImgFrd;
  33. private ImageButton mImgAddress;
  34. private ImageButton mImgSetting;
  35.  
  36. @Override
  37. protected void onCreate(Bundle savedInstanceState) {
  38. super.onCreate(savedInstanceState);
  39. setContentView(R.layout.activity_main);
  40.  
  41. initView();
  42. initEvent();
  43. }
  44.  
  45. private void initEvent() {
  46. mTabWeixin.setOnClickListener(this);
  47. mTabFrd.setOnClickListener(this);
  48. mTabAddress.setOnClickListener(this);
  49. mTabSetting.setOnClickListener(this);
  50. }
  51.  
  52. private void initView() {
  53. mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
  54.  
  55. mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
  56. mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
  57. mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
  58. mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);
  59.  
  60. mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);
  61. mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);
  62. mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);
  63. mImgSetting = (ImageButton) findViewById(R.id.id_tab_setting_img);
  64.  
  65. mFragments = new ArrayList<>();
  66. Fragment mTab01 = new WeiXinFragment();
  67. Fragment mTab02 = new FrdFragment();
  68. Fragment mTab03 = new AddressFragment();
  69. Fragment mTab04 = new SettingFragment();
  70. mFragments.add(mTab01);
  71. mFragments.add(mTab02);
  72. mFragments.add(mTab03);
  73. mFragments.add(mTab04);
  74.  
  75. mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
  76. @Override
  77. public Fragment getItem(int position) {
  78. return mFragments.get(position);
  79. }
  80.  
  81. @Override
  82. public int getCount() {
  83. return mFragments.size();
  84. }
  85. };
  86.  
  87. mViewPager.setAdapter(mAdapter);
  88.  
  89. mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
  90. @Override
  91. public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  92.  
  93. }
  94.  
  95. @Override
  96. public void onPageSelected(int position) {
  97. int currentItem = mViewPager.getCurrentItem();//拿到当前显示的那一个item页面
  98. setTab(currentItem);
  99. }
  100.  
  101. @Override
  102. public void onPageScrollStateChanged(int state) {
  103.  
  104. }
  105. });
  106. }
  107.  
  108. @Override
  109. public void onClick(View v) {
  110.  
  111. switch (v.getId()) {
  112. case R.id.id_tab_weixin:
  113. setSelect(0);
  114. break;
  115. case R.id.id_tab_frd:
  116. setSelect(1);
  117. break;
  118. case R.id.id_tab_address:
  119. setSelect(2);
  120. break;
  121. case R.id.id_tab_setting:
  122. setSelect(3);
  123. break;
  124. default:
  125. break;
  126. }
  127. }
  128.  
  129. /*
  130. * 切换所有图片为暗色
  131. * */
  132. private void resetImgs() {
  133. mImgWeixin.setImageResource(R.mipmap.tab_weixin_normal);
  134. mImgFrd.setImageResource(R.mipmap.tab_find_frd_normal);
  135. mImgAddress.setImageResource(R.mipmap.tab_address_normal);
  136. mImgSetting.setImageResource(R.mipmap.tab_settings_normal);
  137. }
  138.  
  139. private void setSelect(int i) {
  140.  
  141. setTab(i);
  142.  
  143. mViewPager.setCurrentItem(i);
  144.  
  145. }
  146.  
  147. private void setTab(int i) {
  148.  
  149. resetImgs();//调用这个方法,设置所有的tab图片为暗色
  150.  
  151. // 设置图片为亮色
  152. //切换内容区域
  153. switch (i) {
  154. case 0:
  155. mImgWeixin.setImageResource(R.mipmap.tab_weixin_pressed);
  156. break;
  157. case 1:
  158. mImgFrd.setImageResource(R.mipmap.tab_find_frd_pressed);
  159. break;
  160. case 2:
  161. mImgAddress.setImageResource(R.mipmap.tab_address_pressed);
  162. break;
  163. case 3:
  164. mImgSetting.setImageResource(R.mipmap.tab_settings_pressed);
  165. break;
  166. }
  167. }
  168. }

除了主类,接下来是4个Fragment页面。这里没什么内容,只是加载一个布局。

WeiXinFragment.class :

  1. package fragment;
  2.  
  3. import android.os.Bundle;
  4. import android.support.annotation.Nullable;
  5. import android.support.v4.app.Fragment;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  9.  
  10. import com.kevin.viewpager_fragment.R;
  11.  
  12. /**
  13. * Created by ${火龙裸先生} on 2016/11/4.
  14. * 邮箱:791335000@qq.com
  15. */
  16. public class WeiXinFragment extends Fragment {
  17.  
  18. @Nullable
  19. @Override
  20. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  21.  
  22. View view = inflater.inflate(R.layout.tab01, container, false);
  23.  
  24. return view;
  25. }
  26. }

FrdFragment.class :

  1. package fragment;
  2.  
  3. import android.os.Bundle;
  4. import android.support.annotation.Nullable;
  5. import android.support.v4.app.Fragment;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  9.  
  10. import com.kevin.viewpager_fragment.R;
  11.  
  12. /**
  13. * Created by ${火龙裸先生} on 2016/11/4.
  14. * 邮箱:791335000@qq.com
  15. */
  16. public class FrdFragment extends Fragment {
  17.  
  18. @Nullable
  19. @Override
  20. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  21. View view = inflater.inflate(R.layout.tab02, container, false);
  22.  
  23. return view;
  24. }
  25. }

AddressFragment.class :

  1. package fragment;
  2.  
  3. import android.os.Bundle;
  4. import android.support.annotation.Nullable;
  5. import android.support.v4.app.Fragment;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  9.  
  10. import com.kevin.viewpager_fragment.R;
  11.  
  12. /**
  13. * Created by ${火龙裸先生} on 2016/11/4.
  14. * 邮箱:791335000@qq.com
  15. */
  16. public class AddressFragment extends Fragment {
  17.  
  18. @Nullable
  19. @Override
  20. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  21. View view = inflater.inflate(R.layout.tab03, container, false);
  22.  
  23. return view;
  24. }
  25. }

SettingFragment.class :

  1. package fragment;
  2.  
  3. import android.os.Bundle;
  4. import android.support.annotation.Nullable;
  5. import android.support.v4.app.Fragment;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  9.  
  10. import com.kevin.viewpager_fragment.R;
  11.  
  12. /**
  13. * Created by ${火龙裸先生} on 2016/11/4.
  14. * 邮箱:791335000@qq.com
  15. */
  16. public class SettingFragment extends Fragment {
  17.  
  18. @Nullable
  19. @Override
  20. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  21. View view = inflater.inflate(R.layout.tab04, container, false);
  22.  
  23. return view;
  24. }
  25. }

就是这些代码了。
总结一下:实现这样功能的实现,不止这一种方法,但是,采用ViewPager + FragmentPagerAdapter, 这里的内容区域是Fragment,所以优势就出来了,Fragment管理自己的布局内部所有控件的事件等各种东西,不需要把代码都冗余在MainActivity.class中, 我们的MainActivity只作为一个调度器,调度显示不同的Fragment、隐藏不同的Fragment。 这样的话,便于后期的复用,也便于后期的维护。  然后,我们用的ViewPager,肯定有ViewPager的优势,如果大家希望能够左右拖动,大家就选择 “ViewPager + FragmentPagerAdapter”作为实现,如果大家不需要左右去拖动,比如QQ,一个页面有LitView或者RecyclerView,并且Item需要“侧滑删除”的一个效果,所以这个时候可能就不需要ViewPager的这样一个效果,这就可以选择直接使用Fragment去实现。也建议尽量去使用Fragment。

App主界面Tab实现方法的更多相关文章

  1. 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(四)

    ViewPagerIndicator+ViewPager 要想使用ViewPagerIndicator,要使用到viewPagerlibrary开源库 top.xml <?xml version ...

  2. 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(二)

    Fragment实现Tab 首先把activity_main.xml 文件中的ViewPager标签改成Fragment标签 <FrameLayout android:id="@+id ...

  3. 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(一)

    1.ViewPager实现Tab 首先实现底部和底部布局 <?xml version="1.0" encoding="utf-8"?> <Li ...

  4. 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(三)

    FragmentPagerAdapter+ViewPager 与之前直接用ViewPager不同的是,数组里面放的不再是View,而是Fraagment; 使用FragmentPagerAdapter ...

  5. 66、多种多样的App主界面Tab(1)------ ViewPager实现Tab

    <?xml version="1.0" encoding="utf-8"?> <!-- bottom.xml --> <Linea ...

  6. 安卓开发_慕课网_Fragment实现Tab(App主界面)

    学习内容来自“慕课网” 这里用Fragment来实现APP主界面 思路: 底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字 1.默认显示第一个功能(微信 ...

  7. Android学习系列(23)--App主界面实现

    在上篇文章<Android学习系列(22)--App主界面比较>中我们浅略的分析了几个主界面布局,选了一个最大众化的经典布局.今天我们就这个经典布局,用代码具体的实现它. 1.预览图先看下 ...

  8. 安卓开发_慕课网_ViewPager与FragmentPagerAdapter实现Tab实现Tab(App主界面)

    学习内容来自“慕课网” ViewPager与FragmentPagerAdapter实现Tab 将这两种实现Tab的方法结合起来.效果就是可以拖动内容区域来改变相应的功能图标亮暗 思路: Fragme ...

  9. 安卓开发_慕课网_ViewPager实现Tab(App主界面)

    学习内容来自“慕课网” 网站上一共有4种方法来实现APP主界面的TAB方法 这里学习第一种 ViewPager实现Tab 布局文件有7个, 主界面acitivity.layout <Linear ...

随机推荐

  1. 使用SandCastle创建.Net帮助文档

    使用SandCastle创建.Net帮助文档 引用自:http://www.cnblogs.com/DotNetNuke/archive/2009/04/23/1441899.html Sandcas ...

  2. 清北暑假模拟day1 爱

    /* 水题 */ #include<iostream> #include<cstdio> #include<string> #include<cstring& ...

  3. Java项目相关监控与调优

    Linux  JVM Tomcat =========Linux =============== 监控 nmon  命令:nmon -s 10 -c 60 -f -m /home -s 10 每10s ...

  4. leofs存储总结

    1.leofs角色 Account(账户).Bucket(对象桶).Object(对象), gateway.manager0.manager1.storage Account 一个account可以创 ...

  5. CMake Error: your CXX compiler: "" was not found

    [root@amax src]# cmake . -- The CXX compiler identification is unknown CMake Error at /usr/local/sha ...

  6. DEV控件Grid显示行号

    DEV控件Grid的显示行号需要通过一个事件来设置,具体设置代码为: private void gridView1_CustomDrawRowIndicator(object sender, DevE ...

  7. Java多线程文件下载

    一. 多线程下载文件考虑处理步骤: 1. 如何获取文件的长度 2. 合理的创建线程数量,并计算每一个线程下载的长度 3. 如何将多个线程下载的字节写入到文件中 二. 代码实现如下: package c ...

  8. Codeforces 271 Div 2 A Keyboard

    题目链接:http://codeforces.com/contest/474/problem/A 解题报告:一个矩形的键盘,上面只有规定的字符,现在按的时候总是会向某个方向按偏,也就是输入一串字符后, ...

  9. NOIP2016题目整合

    今天终于拿到官方数据,兴致勃勃地全 A 了. Day 1 T1 toy 处理一下正负号加加减减取模乱搞就好了. #include <iostream> #include <cstdi ...

  10. c语言随机函数&&时间函数

    c语言中的随机函数为rand(),但是rand生成的值得大小主要相对一个变量才产生的一定有含义的数,这个相对的变量我们可以再srand()函数中进行设置,srand函数是void类型,内部含一个无符号 ...