1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > ViewPager TabLayout Fragment实现tabs滑动

ViewPager TabLayout Fragment实现tabs滑动

时间:2021-09-07 16:55:35

相关推荐

ViewPager TabLayout Fragment实现tabs滑动

工作半年了,准备在新的一年开始写点博客,记录自己的成长,如果能给别人一些参考就更好了。

Demo实现:

前段时间公司的项目遇到了使用ViewPager,TabLayoutFragment实现一个多个tab之间的滑动,这样的效果在大部分的app中都有,因为有了5.0以后的TabLayout控件,实现这样的效果简单多了。下面是demo的效果图:

接下来就是代码了,先是Fragenmnt的xml文件:

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"android:orientation="vertical"android:gravity="center"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:gravity="center"android:id="@+id/tv_content"android:layout_width="match_parent"android:layout_height="match_parent"android:text="hello world"/></LinearLayout>

为了简单就写了个TextView,然后是Fragment的代码:

public class TestFragment extends Fragment {private static final String TAG ="TestFragment";private int mIndex;@BindView(R.id.tv_content)TextView mContentTv;private View mTestView;public TestFragment(){}@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {mTestView = inflater.inflate(R.layout.fragment_test, container, false);ButterKnife.bind(this, mTestView);return mTestView;}@Overridepublic void onViewCreated(View view, @Nullable Bundle savedInstanceState) {super.onViewCreated(view, savedInstanceState);mContentTv.setText("TestFragment" + mIndex);}@Overridepublic void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);mIndex = getArguments().getInt("index");//根据不同的额index显示不同的内容}@Overridepublic void onStart() {super.onStart();Log.d(TAG,"onStart()" + mIndex);}@Overridepublic void onPause() {super.onPause();Log.d(TAG,"onPause()" + mIndex);}@Overridepublic void onResume() {super.onResume();Log.d(TAG,"onResume()" + mIndex);}}

那几个生命周期方法是为了待会在Tab之间切换时跟踪一下Fragment的生命周期方法。代码里为了偷懒使用了butterknife插件=_=

然后是Adapter的代码:

public class ViewPagerAdapter extends FragmentPagerAdapter {private List<String> mTabTitles ;private static final int FRAGMENT_COUNT = 6;public ViewPagerAdapter(FragmentManager fragmentManager, List<BaseFragment> fragments,List<String> tabTitles) {super(fragmentManager);mTabTitles = tabTitles;}@Overridepublic Fragment getItem(int position) {TestFragment testFragment = new TestFragment();Bundle bundle = new Bundle();bundle.putInt("index",position);//传入不同的indextestFragment.setArguments(bundle);return testFragment;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {return super.instantiateItem(container, position);}@Overridepublic int getCount() {return FRAGMENT_COUNT;}//设置Tab的标题@Overridepublic CharSequence getPageTitle(int position) {return mTabTitles.get(position);}}

好像也没什么注释的,接下来就是Activity的代码了,把这些组合起来使用:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:orientation="vertical"xmlns:app="/apk/res-auto"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.example.why.demo.MainActivity"><android.support.design.widget.TabLayoutandroid:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabIndicatorColor="@color/colorAccent"app:tabIndicatorHeight="2dp"app:tabMode="fixed"></android.support.design.widget.TabLayout><android.support.v4.view.ViewPagerandroid:id="@+id/view_pager"android:layout_width="match_parent"android:layout_height="wrap_content"></android.support.v4.view.ViewPager></LinearLayout>TabLayout的属性app:tabMode还有一直模式scrollable,可以自行尝试。代码部分:public class MainActivity extends AppCompatActivity {@BindView(R.id.tab_layout)TabLayout mTabLayout;@BindView(R.id.view_pager)ViewPager mViewPager;private List<String> mTabTitles = new ArrayList<>();private List<BaseFragment> mFragments = new ArrayList<>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ButterKnife.bind(this);initTab();mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(),mFragments,mTabTitles));mTabLayout.setupWithViewPager(mViewPager);//注意:这行代码不能少,使TabLayout和ViewPager绑定}//设置Tab的titleprivate void initTab() {for (int i = 0; i < 6; i++) {mTabTitles.add("Tab" + i);}}}

这里的代码就只是将ViewPager和TabLayout结合,并设置了Adapter。到这里效果就出来了,当然这里没有对TabLayout的讲解,TabLayout出来也挺久了,除了官网的介绍外,也有很多博客对其进行了讲解,这里也就不介绍了。

Fragment生命周期跟踪:

写到这里效果是有了,但是由于ViewPager的预加载机制,导致我当时想实现几个页面同步更新同步(就是几个tab用相同的内容,比如在tab1删除了一些内容,希望在tab2也发生改变了,由于预加载的原因Fragment主要生命周期的方法不会再调用了所以无法在Fragment的生存周期方法中实现改变)更新内容时遇到了点麻烦。先说下ViewPager预加载,每次加载三个,比如现在是ta2那么ta1和tab3也被加载了(当然也可以取消预加载),比如我在Acivity通过mViewPager.setCurrentItem(3),demo初始界面:

日志:

可以看到tab2,tab3,tab4的生命周期都被调用了。如果我们从左往右滑动,日志如下:

现在在tab4,tab2调用了onPause(),tab5被加载了,tab3已经加载过了。如果我们一开始是从右往左滑动,那么日志如下:

现在在tab2,tab4调用了onPause(),tab1被加载了。

不同Tab的同步更新:

回到前面的问题,如何同步更新不同tab的内容?在网上找到了一个方法,已经找不到到那篇csdn博客了,表示感谢,解决了我的问题。

那篇博客里的解决方法是给每个fragment打上tag,使用是FragmentPagerAdapter内部的 String makeFragmentName(int viewId, long id)方法,这里我们可以直接复制放在自己定义的ViewPagerAdapter里给fragment打tag,这个动作放在instantiateItem(ViewGroup container, int position)中,然后要同步更新的时候调用FragmentManager.findFragmentByTag()获取对应的Fragment就可以调用相应的方法了,这里是打上tag后的代码:

public class ViewPagerAdapter extends FragmentPagerAdapter {private List<String> mTabTitles ;private static final int FRAGMENT_COUNT = 6;private List<String> mFragmentTags = new ArrayList<>();private FragmentManager mFragmentManager;public ViewPagerAdapter(FragmentManager fragmentManager, List<BaseFragment> fragments,List<String> tabTitles) {super(fragmentManager);mTabTitles = tabTitles;this.mFragmentManager = fragmentManager;}@Overridepublic Fragment getItem(int position) {TestFragment testFragment = new TestFragment();Bundle bundle = new Bundle();bundle.putInt("index",position);//传入不同的indextestFragment.setArguments(bundle);return testFragment;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {mFragmentTags.add(makeFragmentName(container.getId(),position));//设置tagreturn super.instantiateItem(container, position);}@Overridepublic int getCount() {return FRAGMENT_COUNT;}//设置Tab的标题@Overridepublic CharSequence getPageTitle(int position) {return mTabTitles.get(position);}//这个方法是FragmentPagerAdapter内部方法,其内部就是根据这个给fragment打tag的,我们直接使用可以获取正确的tag。private static String makeFragmentName(int viewId, long id) {return "android:switcher:" + viewId + ":" + id;}//这个方法可以在Fragment的代码中调用public void synchronizedFragment() {for (int i = 0; i < mFragmentTags.size();i++) {TestFragment testFragment = (TestFragment) mFragmentManager.findFragmentByTag(mFragmentTags.get(i));//接下来就可以调用testFragment相应的更新方法了testFragment.update();}}

}

就这些了,有些内容参考过别人的文章就不一一贴出来了(很久以前看的),很多内容网上都有,这里只是做个总结。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。