Android中TabLayout结合ViewPager实现页面切换

Android中TabLayout结合ViewPager实现页面切换,第1张

概述一、实现思路1、在build.gradle中添加依赖,例如:compile\'com.android.support:support-v4:23.4.0\'

一、实现思路

1、在build.gradle中添加依赖,例如:

compile 'com.androID.support:support-v4:23.4.0'
compile 'com.androID.support:design:23.4.0'

也可以将support-v4替换为appcompat-v7,例如:

compile 'com.androID.support:appcompat-v7:23.4.0'

因为appcompat-v7是依赖于support-v4的。

更多说明可参考官方文档support library部分。

2、在xml中添加TabLayout和VIEwPager,例如:

<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"       xmlns:tool="http://schemas.androID.com/tools"       xmlns:app="http://schemas.androID.com/apk/res-auto"       tool:context=".TabVIEwActivity"       androID:orIEntation="vertical"       androID:layout_wIDth="match_parent"       androID:layout_height="match_parent">  <androID.support.design.Widget.TabLayout    androID:ID="@+ID/tab_layout"    androID:layout_wIDth="match_parent"    androID:layout_height="wrap_content"    androID:background="@color/tabLayoutBackground"    app:tabMode="scrollable"    app:tabTextcolor="@color/color_white"    app:tabSelectedTextcolor="@color/tabSelectedText"    app:tabIndicatorHeight="3dp"    app:tabIndicatorcolor="@color/color_white"/>  <androID.support.v4.vIEw.VIEwPager    androID:ID="@+ID/vIEw_pager"    androID:layout_wIDth="match_parent"    androID:layout_height="wrap_content"/></linearLayout>

TabLayout:

(1)tabMode有两个属性,一个是"scrollable",用于多标签;另一个是"fixed",用于少标签,它会让全部标签平均分布在屏幕上,所以标签不能多,而且名称也不能长,否则会显示不完整。

(2)tabIndicator是指文本下的指示条。当选中一个tab时,指示条才会出现,出现在文本下面。

3、获取VIEw对象

TabLayout tabLayout = (TabLayout) findVIEwByID(R.ID.tab_layout);VIEwPager vIEwPager = (VIEwPager) findVIEwByID(R.ID.vIEw_pager);

4、创建FragmentStatePagerAdaper的子类,并实现构造方法

  public class VIEwPagerAdapter extends FragmentStatePagerAdapter {    public VIEwPagerAdapter(FragmentManager fm) {      super(fm);    }  }

 创建该类的一个实例对象

VIEwPagerAdapter vIEwPagerAdapter = new VIEwPagerAdapter(getSupportFragmentManager()); 

在这一步中,你可以选择是实现FragmentPagerAdapter的子类,或者是FragmentStatePagerAdapter的子类。

FragmentPagerAdapter用于页数较少的,也就Fragment的数量较少的,因为只要用户还停留在当前的Activity中,其中的Fragment都不会被销毁,所以内存消耗会比较大。

而FragmentStatePagerAdapter的工作原理类似于ListVIEw,只要用户不可见的Fragment,都会被销毁,只保留它的状态。

因为我用的是v4兼容包下的Fragment,所以需要用getSupportFragmentManager()去获取FragmentManager。

5、设置VIEwPager和TabLayout

 vIEwPager.setAdapter(vIEwPagerAdapter);tabLayout.setupWithVIEwPager(vIEwPager);

二、完善Adapter

1、重写三个方法

  public class VIEwPagerAdapter extends FragmentStatePagerAdapter {    ......    @OverrIDe    public Fragment getItem(int position) {      return null;    }    @OverrIDe    public int getCount() {      return 0;    }    @OverrIDe    public CharSequence getPageTitle(int position) {      return super.getPageTitle(position);    }  }

2、创建tab的标题数据:

 private String[] mTitles = new String[]{"语文","英语","数学","物理","生物","化学","地理","政治","历史"};

创建Fragment的子类:

public class VIEwPagerFragment extends Fragment {  private static final String KEY = "extra";  private String mMessage;  public VIEwPagerFragment() {  }  public static VIEwPagerFragment newInstance(String extra) {    Bundle args = new Bundle();    args.putString(KEY,extra);    VIEwPagerFragment fragment = new VIEwPagerFragment();    fragment.setArguments(args);    return fragment;  }}

创建Fragment的集合对象,并添加实例对象到集合里:

private ArrayList<VIEwPagerFragment> mVIEwPagerFragments = new ArrayList<>();    ......    for (int i = 0; i < mTitles.length; i++) {      mVIEwPagerFragments.add(VIEwPagerFragment.newInstance(mTitles[i]));    }

 3、修改Adapter中的方法

public class VIEwPagerAdapter extends FragmentStatePagerAdapter {    private String[] Titles;    private ArrayList<VIEwPagerFragment> vIEwPagerFragments;    public VIEwPagerAdapter(FragmentManager fm) {      super(fm);    }    public voID setTitles(String[] Titles) {      this.Titles = Titles;    }    public voID setFragments(ArrayList<VIEwPagerFragment> vIEwPagerFragments) {      this.vIEwPagerFragments = vIEwPagerFragments;    }    @OverrIDe    public Fragment getItem(int position) {      return vIEwPagerFragments.get(position);    }    @OverrIDe    public int getCount() {      return vIEwPagerFragments.size();    }    @OverrIDe    public CharSequence getPageTitle(int position) {      return Titles[position];    }  }

 4、将数据传给Adapter

 vIEwPagerAdapter.setTitles(mTitles);vIEwPagerAdapter.setFragments(mVIEwPagerFragments); 

三、完善Fragment

1、fragment_vIEw_pager_item.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:ID="@+ID/fragment_text"    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent"    androID:gravity="center"/></linearLayout>

2、完善Fragment的方法

public class VIEwPagerFragment extends Fragment {  ......  @OverrIDe  public voID onCreate(@Nullable Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    Bundle bundle = getArguments();    if (bundle != null) {      mMessage = bundle.getString(KEY);    }  }  @Nullable  @OverrIDe  public VIEw onCreateVIEw(LayoutInflater inflater,@Nullable VIEwGroup container,@Nullable Bundle savedInstanceState) {    VIEw vIEw = inflater.inflate(R.layout.fragment_vIEw_pager_item,container,false);    TextVIEw textVIEw = (TextVIEw) vIEw.findVIEwByID(R.ID.fragment_text);    textVIEw.setText(mMessage);    return vIEw;  }}

在创建Fragment时,会调用onCreate方法,在其中执行一些状态信息的初始化,用于暂停或停止后的恢复所用。

在Fragment首次加载视图时,会调用onCreateVIEw方法,在其中执行视图的加载和初始化,返回的应该是该Fragment布局的根视图。其中inflate方法的第三个参数代表的意思是,是否要将加载进来的布局(R.layout.fragment_vIEw_pager_item)添加进container这个VIEwGroup里。根据官方文档的说明,上例那样做的话,系统已经将这个布局添加进container了,所以这里为false。

 静态效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android中TabLayout结合ViewPager实现页面切换全部内容,希望文章能够帮你解决Android中TabLayout结合ViewPager实现页面切换所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1147316.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-31
下一篇2022-05-31

发表评论

登录后才能评论

评论列表(0条)

    保存