利用TabLayout+ViewPager+Fragment实现首页侧滑

发布时间:2019-08-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了利用TabLayout+ViewPager+Fragment实现首页侧滑脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

一、简介

Viewpager使用起来就是我们通过创建adapter给它填充多个view,左右滑动时,切换不同的view。GOOGLE官方是建议我们使用Fragment来填充ViewPager的,这样 可以更加方便的生成每个Page,以及管理每个Page的生命周期

二、引入相关依赖

implementation 'com.andROId.support:design:28.0.0'

三、效果图

利用TabLayout+ViewPager+Fragment实现首页侧滑

四、代码实现

  1. XMl

    <android.support.design.widget.TabLayout
           android:id="@+id/tabLayout"
           android_layout_width="match_parent"
           android_layout_height="wrap_content" />
    
       <android.support.v4.view.ViewPager
           android:id="@+id/viewPager"
           android_layout_width="match_parent"
           android_layout_height="match_parent" />
    
  2. activity中通过id来寻找控件

     viewPager = findViewById(R.id.viewPager);
     tabLayout = findViewById(R.id.tabLayout);
    
  3. 创建ViewPager适配器

     public class PageAdapter extends FragmentPagerAdapter {
    
       List<Fragment> fragmentList = new ArrayList<>();
       List<String> titleList = new ArrayList<>();
    
       public PageAdapter(FragmentManager fm,List<Fragment> fragmentList,List<String> titleList) {
           super(fm);
           this.fragmentList = fragmentList;
           this.titleList = titleList;
       }
    
       @Override
       public Fragment getItem(int i) {
           return fragmentList.get(i);
       }
    
       @Override
       public int getCount() {
           return fragmentList.size();
       }
    
       @Nullable
       @Override
       public CharSequence getPageTitle(int position) {
           return titleList.get(position);
       }
     }
    
    
  4. 准备相关数据(fragment,title)

     private List<String> getTitleList() {
           titleList.add("Tab1");
           titleList.add("Tab2");
           return titleList;
       }
     private List<Fragment> getFragmentList() {
    
           pageModels.add(new PageModel(R.layout.examplelayout1));
           pageModels.add(new PageModel(R.layout.examplelayout2));
    
           for (int i = 0; i < pageModels.size(); i++) {
               pageFragment = PageFragment.newInstance(pageModels.get(i).exampleLayoutRes);
               fragmentList.add(pageFragment);
           }
           return fragmentList;
       }
    
       class PageModel {
           @LayoutRes
           int exampleLayoutRes;
    
           public PageModel(@LayoutRes int exampleLayoutRes) {
               this.exampleLayoutRes = exampleLayoutRes;
           }
       }
    
  5. 设置viewPager适配器

     viewPager.setAdapter(new PageAdapter(getSupportFragmentManager(), getFragmentList(), getTitleList()));
    
  6. 设置tab标题

    如果不设置此项,tab将无法显示

     tabLayout.SETUPWithViewPager(viewPager);
     
    

五、附上

布局相关:

activity_main

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout >"http://schemas.android.com/apk/res/android"
    >"http://schemas.android.com/apk/res-auto"
    >"http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>


fragment_page

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout >"http://schemas.android.com/apk/res/android"
    >"http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".fragment.PageFragment">

    <ViewStub
        android:id="@+id/exampleViewStub"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inflatedId="@+id/inflated" />

</LinearLayout>

examplelayout1

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout >"http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="View1" />

</RelativeLayout>

examplelayout2

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout >"http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="View2" />

</RelativeLayout>

功能代码

MainActivity


public class MainActivity extends AppCompatActivity {
    ViewPager viewPager;
    TabLayout tabLayout;
    List<String> titleList = new ArrayList<>();
    List<Fragment> fragmentList = new ArrayList<>();
    List<PageModel> pageModels = new ArrayList<>();
    PageFragment pageFragment;

    @Override
    protected void onCreate(Bundle savedInstancestate) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        doBisness();
    }

    private void doBisness() {
        viewPager = findViewById(R.id.viewPager);
        tabLayout = findViewById(R.id.tabLayout);
        viewPager.setAdapter(new PageAdapter(getSupportFragmentManager(), getFragmentList(), getTitleList()));

        tabLayout.setupWithViewPager(viewPager);
    }

    private List<String> getTitleList() {
        titleList.add("Tab1");
        titleList.add("Tab2");
        return titleList;
    }

    private List<Fragment> getFragmentList() {

        pageModels.add(new PageModel(R.layout.examplelayout1));
        pageModels.add(new PageModel(R.layout.examplelayout2));

        for (int i = 0; i < pageModels.size(); i++) {
            pageFragment = PageFragment.newInstance(pageModels.get(i).exampleLayoutRes);
            fragmentList.add(pageFragment);
        }
        return fragmentList;
    }

    class PageModel {
        @LayoutRes
        int exampleLayoutRes;

        public PageModel(@LayoutRes int exampleLayoutRes) {
            this.exampleLayoutRes = exampleLayoutRes;
        }
    }
}

PageFragment

public class PageFragment extends Fragment {

    @LayoutRes
    int exampleLayoutRes;

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     */
    public static PageFragment newInstance(@LayoutRes int exampleLayoutRes) {
        PageFragment fragment = new PageFragment();
        Bundle args = new Bundle();
        args.putInt("exampleLayoutRes", exampleLayoutRes);
        fragment.setarguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            exampleLayoutRes = getArguments().getInt("exampleLayoutRes");
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page, container, false);
        ViewStub exampleStub = view.findViewById(R.id.exampleViewStub);
        exampleStub.setLayoutResource(exampleLayoutRes);
        exampleStub.inflate();
        return view;
    }

}

PageAdapter

public class PageAdapter extends FragmentPagerAdapter {

    List<Fragment> fragmentList = new ArrayList<>();
    List<String> titleList = new ArrayList<>();

    public PageAdapter(FragmentManager fm,List<Fragment> fragmentList,List<String> titleList) {
        super(fm);
        this.fragmentList = fragmentList;
        this.titleList = titleList;
    }

    @Override
    public Fragment getItem(int i) {
        return fragmentList.get(i);
    }

    @Override
    public int getCount() {
        return fragmentList.size();
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return titleList.get(position);
    }
}

六、项目github地址

https://github.com/fr1014/vie...

脚本宝典总结

以上是脚本宝典为你收集整理的利用TabLayout+ViewPager+Fragment实现首页侧滑全部内容,希望文章能够帮你解决利用TabLayout+ViewPager+Fragment实现首页侧滑所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。