详解Android中fragment和viewpager的那点事儿

在之前的博文《Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果》和《详解Android中Fragment的两种创建方式》以及《Android中fragment与activity之间的交互（两种实现方式）》中我们介绍了ViewPager以及Fragment各自的使用场景以及不同的实现方式。

那如果将他们两结合起来，会不会擦出点火花呢，答案是肯定的。之前在介绍ViewPager时，我们实现了多个ImageView的切换，并配合更新导航原点的状态。那我们现在就将之前的imageview替换为fragment，将导航原点替换为更加生动的布局，比如我们经常使用的微信（取消了ActionBar）：

（1）我们可以通过点击下面的导航按钮选择对应的显示界面（fragment），如下图：

（2）我们也可以通过滑动界面（fragment）来实现界面切换，同时下面的导航按钮状态也会发生变化，如下图：

那么重点来了，这样的效果要怎么实现呢，大至分为以下的步骤

（1）布局文件中直接部署ViewPager以及下方的导航布局

（2）根据导航的个数来建立对应的fragment布局并建立配套的Fragment类（为方便后期扩展，建议建立与导航个数相同的fragments）

（3）drable下使用selector实现导航组件的形态变化

（4）通过FragmentPagerAdapter（V4包下）实现ViewPager与Fragment的关联

（5）设置下方导航的点击事件以及ViewPager的OnPageChangeListener方法实现对应的状态改变

第一步：layout中的主布局文件activity_main.xml文件

取消了actionBar，采用LinearLayout嵌套来实现主布局：

<?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:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" tools:context="com.example.administrator.viewpagerfragment.MainActivity">
 <LinearLayout
 android:background="@color/colorblack"
 android:padding="10dp"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 <TextView
 android:layout_width="0dp"
 android:layout_weight="1"
 android:gravity="center_vertical"
 android:layout_height="match_parent"
 android:layout_marginLeft="5dp"
 android:text="潘侯爷微信"
 android:textSize="20sp"
 android:textColor="@color/colorWhite"/>
 <ImageView
android:src="@mipmap/jy_drltsz_btn_addperson"
 android:adjustViewBounds="true"
 android:maxHeight="23dp"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />
 </LinearLayout>
 <android.support.v4.view.ViewPager
 android:id="@+id/viewPager"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1"/>
 <View
 android:layout_width="match_parent"
 android:layout_height="1dp"
 android:background="@color/colornormal"/>
 <LinearLayout
 android:orientation="horizontal"
 android:padding="5dp"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 <LinearLayout
 android:id="@+id/weixin"
 android:clickable="true"
 android:orientation="vertical"
 android:layout_width="0dp"
 android:gravity="center"
 android:layout_weight="1"
 android:layout_height="wrap_content">
 <ImageView
 android:id="@+id/weixin_img"
android:background="@drawable/weixin_picture_selector"
 android:layout_width="30dp"
 android:layout_height="25dp" />
 <TextView
 android:id="@+id/weixin_txt"
 android:layout_width="wrap_content"
 android:gravity="center"
 android:layout_height="wrap_content"
 android:text="微信"
 android:textSize="12sp"
android:textColor="@drawable/weixin_text_selector"/>
 </LinearLayout>
 <LinearLayout
 android:id="@+id/contact"
 android:clickable="true"
 android:orientation="vertical"
 android:layout_width="0dp"
 android:gravity="center"
 android:layout_weight="1"
 android:layout_height="wrap_content">
 <ImageView
 android:id="@+id/contact_img"
android:background="@drawable/txl_picture_selector"
 android:layout_width="30dp"
 android:layout_height="25dp" />
 <TextView
 android:id="@+id/contact_txt"
 android:layout_width="wrap_content"
 android:gravity="center"
 android:layout_height="wrap_content"
 android:text="通讯录"
 android:textSize="12sp"
android:textColor="@drawable/weixin_text_selector"/>
 </LinearLayout>
 <LinearLayout
 android:id="@+id/find"
 android:clickable="true"
 android:orientation="vertical"
 android:layout_width="0dp"
 android:gravity="center"
 android:layout_weight="1"
 android:layout_height="wrap_content">
 <ImageView
 android:id="@+id/find_img"
android:background="@drawable/find_picture_selector"
 android:layout_width="30dp"
 android:layout_height="25dp" />
 <TextView
 android:id="@+id/find_txt"
 android:layout_width="wrap_content"
 android:gravity="center"
 android:layout_height="wrap_content"
 android:text="发现"
 android:textSize="12sp" android:textColor="@drawable/weixin_text_selector"/>
 </LinearLayout>
 <LinearLayout
 android:id="@+id/self"
 android:clickable="true"
 android:orientation="vertical"
 android:layout_width="0dp"
 android:gravity="center"
 android:layout_weight="1"
 android:layout_height="wrap_content">
 <ImageView
 android:id="@+id/self_img"
android:background="@drawable/me_picture_selector"
 android:layout_width="30dp"
 android:layout_height="25dp" />
 <TextView
 android:id="@+id/self_txt"
 android:layout_width="wrap_content"
 android:gravity="center"
 android:layout_height="wrap_content"
 android:text="我"
 android:textSize="12sp"
android:textColor="@drawable/weixin_text_selector"/>
 </LinearLayout>
 </LinearLayout>
</LinearLayout>

第二步：layout中fragment的布局文件（可自由扩展）

这里四个导航对应四个不同的fragment（实现上面的效果，也可以只建立一个fragment，但这样不利于后期扩展），这里我们只演示其中一个weixin_fragment.xml（其他三个为 contactListFragment; findFragment;selfFragment）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <TextView
 android:id="@+id/tv"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:text="没有微信消息"
 android:gravity="center"
 android:textSize="50sp"/>
</LinearLayout>

第三步：drable中设定下方导航组件不同的形态

导航组件中文字形态变化只是颜色不同，图片的话需要设置点击前后不同的图片（这里演示一种）

（1）文字的变化wenxin_text_selector.xml

这里使用selected而不用checked的原因：个人使用的导航布局为linerlayout，并且为linerlayout设置chiclable而不是其中的Text/imageView，所以为了判断变化，这里使用了selected，方便代码中设置调用。

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:color="@color/colorpressed" android:state_selected="true"/>
 <item android:color="@color/colornormal" android:state_selected="false" />
 </selector>

（2）图片的变化weixin_picture_selector.xml

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@mipmap/weixin_pressed" android:state_selected="true"/>
 <item android:drawable="@mipmap/weixin_normal" android:state_selected="false" />
 </selector>

第四步：Java中对应fragment布局的Fragment继承类

这里建议继承android.support.v4.app.Fragment包下的.Fragment，因为后面要用的FragmentPagerAdapter属于V4包，应该统一。

4个fragment对应4个java类，这里演示一个，其他三个都一样。

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
/**
 * Created by panchengjia on 2016/12/24.
 */
public class WeixinFragment extends Fragment {
 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
 View view = inflater.inflate(R.layout.weixin_fragment,container,false);
 return view;
 }
}

第五步：java中功能实现MainActivity.java文件

代码中详细标注了各个实现步骤的注释，这里不再赘述（为了提高程序运行效率，很多重复方法未封装，代码看起来有点臃肿了）

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
 //声明存储fragment的集合
 private ArrayList<Fragment> fragments;
 //声明四个导航对应fragment
 WeixinFragment weixinFragment;
 ContactListFragment contactListFragment;
 FindFragment findFragment;
 SelfFragment selfFragment;
 //声明ViewPager
 private ViewPager viewPager;
 FragmentManager fragmentManager;//声明fragment管理
 //声明导航栏中对应的布局
 private LinearLayout weixin, contact, find, self;
 //声明导航栏中包含的imageview和textview
 private ImageView weixin_img, contact_img, find_img, self_img;
 private TextView weixin_txt, contact_txt, find_txt, self_txt;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 //初始化加载首页布局
 initView();
 //调用自定义initListener方法，为各个组件添加监听事件
 initListener();
 //设置默认选择的pager和导航栏的状态
 viewPager.setCurrentItem(0);
 weixin_img.setSelected(true);
 weixin_txt.setSelected(true);
 }
 private void initListener() {
 //为四大导航组件添加监听
 weixin.setOnClickListener(this);
 contact.setOnClickListener(this);
 find.setOnClickListener(this);
 self.setOnClickListener(this);
 //为viewpager添加页面变化的监听以及事件处理
 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
 @Override
 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 }
 @Override
 public void onPageSelected(int position) {
 //根据位置直接决定显示哪个fragment
 viewPager.setCurrentItem(position);
 switch (position) {
  case 0:
  weixin_img.setSelected(true);
  weixin_txt.setSelected(true);
  contact_img.setSelected(false);
  contact_txt.setSelected(false);
  find_img.setSelected(false);
  find_txt.setSelected(false);
  self_img.setSelected(false);
  self_txt.setSelected(false);
  break;
  case 1:
  weixin_img.setSelected(false);
  weixin_txt.setSelected(false);
  contact_img.setSelected(true);
  contact_txt.setSelected(true);
  find_img.setSelected(false);
  find_txt.setSelected(false);
  self_img.setSelected(false);
  self_txt.setSelected(false);
  break;
  case 2:
  weixin_img.setSelected(false);
  weixin_txt.setSelected(false);
  contact_img.setSelected(false);
  contact_txt.setSelected(false);
  find_img.setSelected(true);
  find_txt.setSelected(true);
  self_img.setSelected(false);
  self_txt.setSelected(false);
  break;
  case 3:
  weixin_img.setSelected(false);
  weixin_txt.setSelected(false);
  contact_img.setSelected(false);
  contact_txt.setSelected(false);
  find_img.setSelected(false);
  find_txt.setSelected(false);
  self_img.setSelected(true);
  self_txt.setSelected(true);
  break;
 }
 }
 @Override
 public void onPageScrollStateChanged(int state) {
 }
 });
 }
 private void initView() {
 //在主布局中根据id找到ViewPager
 viewPager = (ViewPager) findViewById(R.id.viewPager);
 //实例化所属四个fragment
 weixinFragment = new WeixinFragment();
 contactListFragment = new ContactListFragment();
 findFragment = new FindFragment();
 selfFragment = new SelfFragment();
 fragments = new ArrayList<>();
 //添加fragments到集合中
 fragments.add(weixinFragment);
 fragments.add(contactListFragment);
 fragments.add(findFragment);
 fragments.add(selfFragment);
 fragmentManager = getSupportFragmentManager();
 //为ViewPager设置适配器用于部署fragments
 viewPager.setAdapter(new MyFragmentPagerAdapter(fragmentManager));
 weixin = (LinearLayout) findViewById(R.id.weixin);
 contact = (LinearLayout) findViewById(R.id.contact);
 find = (LinearLayout) findViewById(R.id.find);
 self = (LinearLayout) findViewById(R.id.self);
 weixin_img = (ImageView) findViewById(R.id.weixin_img);
 contact_img = (ImageView) findViewById(R.id.contact_img);
 find_img = (ImageView) findViewById(R.id.find_img);
 self_img = (ImageView) findViewById(R.id.self_img);
 weixin_txt = (TextView) findViewById(R.id.weixin_txt);
 contact_txt = (TextView) findViewById(R.id.contact_txt);
 find_txt = (TextView) findViewById(R.id.find_txt);
 self_txt = (TextView) findViewById(R.id.self_txt);
 }
 /**
 * 设置导航栏的点击事件并同步更新对应的ViewPager
 * 点击事件其实就是更改导航布局中对应的Text/ImageView
 * 的选中状态，配合drable中的selector更改图片以及文字变化
 *
 * @param v
 */
 @Override
 public void onClick(View v) {
 switch (v.getId()) {
 case R.id.weixin:
 viewPager.setCurrentItem(0);
 weixin_img.setSelected(true);
 weixin_txt.setSelected(true);
 contact_img.setSelected(false);
 contact_txt.setSelected(false);
 find_img.setSelected(false);
 find_txt.setSelected(false);
 self_img.setSelected(false);
 self_txt.setSelected(false);
 break;
 case R.id.contact:
 viewPager.setCurrentItem(1);
 weixin_img.setSelected(false);
 weixin_txt.setSelected(false);
 contact_img.setSelected(true);
 contact_txt.setSelected(true);
 find_img.setSelected(false);
 find_txt.setSelected(false);
 self_img.setSelected(false);
 self_txt.setSelected(false);
 break;
 case R.id.find:
 viewPager.setCurrentItem(2);
 weixin_img.setSelected(false);
 weixin_txt.setSelected(false);
 contact_img.setSelected(false);
 contact_txt.setSelected(false);
 find_img.setSelected(true);
 find_txt.setSelected(true);
 self_img.setSelected(false);
 self_txt.setSelected(false);
 break;
 case R.id.self:
 viewPager.setCurrentItem(3);
 weixin_img.setSelected(false);
 weixin_txt.setSelected(false);
 contact_img.setSelected(false);
 contact_txt.setSelected(false);
 find_img.setSelected(false);
 find_txt.setSelected(false);
 self_img.setSelected(true);
 self_txt.setSelected(true);
 break;
 }
 }
 //创建FragmentPagerAdapter
 class MyFragmentPagerAdapter extends FragmentPagerAdapter {
 public MyFragmentPagerAdapter(FragmentManager fm) {
 super(fm);
 }
 @Override
 public android.support.v4.app.Fragment getItem(int position) {
 return fragments.get(position);
 }
 @Override
 public int getCount() {
 return fragments.size();
 }
 }
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# Android  # fragment  # viewpager  # Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果  # Android App中ViewPager与Fragment结合的一些问题解决  # Android App中使用ViewPager+Fragment实现滑动切换效果  # Android App在ViewPager中使用Fragment的实例讲解  # Android基于ViewPager Fragment实现选项卡  # Android中ViewPager实现滑动指示条及与Fragment的配合  # Android中ViewPager和Fragment的使用  # Android中ViewPager实现滑动条及与Fragment结合的实例教程  # Android实现Tab布局的4种方式（Fragment+TabPageIndicator+View  # Android中ViewPager获取当前显示的Fragment  # 两种  # 来实现  # 如下图  # 栏中  # 后期  # 来了  # 也会  # 多个  # 取消了  # 会不会  # 我们可以  # 可以通过  # 要用  # 自定义  # 我们现在  # 就将  # 其中一个  # 结合起来  # 建立一个  # 首页 

相关文章： ,南京靠谱的征婚网站？  宝塔建站教程：一键部署配置流程与SEO优化实战指南  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样？  GML (Geography Markup Language)是什么，它如何用XML来表示地理空间信息？  如何选择高效稳定的ISP建站解决方案？  浅析上传头像示例及其注意事项  如何挑选高效建站主机与优质域名？  如何登录建站主机？访问步骤全解析  手机网站制作与建设方案,手机网站如何建设？  如何在服务器上三步完成建站并提升流量？  建站之星免费版是否永久可用？  宁波自助建站系统如何快速打造专业企业网站？  盐城做公司网站,江苏电子版退休证办理流程？  中山网站推广排名,中山信息港登录入口？  c# await 一个已经完成的Task会发生什么  如何快速登录WAP自助建站平台？  建站主机数据库如何配置才能提升网站性能？  如何通过网站建站时间优化SEO与用户体验？  ,网站推广常用方法？  名字制作网站免费,所有小说网站的名字？  网站制作费用多少钱,一个网站的运营，需要哪些费用？  个人网站制作流程图片大全,个人网站如何注销？  建站之星如何快速生成多端适配网站？  外贸公司网站制作哪家好,maersk船公司官网？  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  盘锦网站制作公司,盘锦大洼有多少5G网站？  C++ static_cast和dynamic_cast区别_C++静态转换与动态类型安全转换  潮流网站制作头像软件下载,适合母子的网名有哪些？  如何快速搭建FTP站点实现文件共享？  保定网站制作方案定制,保定招聘的渠道有哪些？找工作的人一般都去哪里看招聘信息？  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  C++如何编写函数模板？（泛型编程入门）  建站之星2.7模板：企业网站建设与h5定制设计专题  Android自定义控件实现温度旋转按钮效果  建站之星如何实现PC+手机+微信网站五合一建站？  如何快速生成高效建站系统源代码？  Python多线程使用规范_线程安全解析【教程】  天河区网站制作公司,广州天河区如何办理身份证？需要什么资料有预约的网站吗？  深圳网站制作的公司有哪些,dido官方网站？  C++时间戳转换成日期时间的步骤和示例代码  c++怎么编写动态链接库dll_c++ __declspec(dllexport)导出与调用【方法】  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？  如何用花生壳三步快速搭建专属网站？  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  如何通过免费商城建站系统源码自定义网站主题与功能？  内部网站制作流程,如何建立公司内部网站？  如何用好域名打造高点击率的自主建站？  ,柠檬视频怎样兑换vip？  临沂网站制作公司有哪些,临沂第四中学官网？  如何快速搭建响应式可视化网站？