TabLayout+ViewPager实现页面切换导航

最新推荐文章于 2019-04-14 19:58:33 发布

原创最新推荐文章于 2019-04-14 19:58:33 发布 · 269 阅读

CC 4.0 BY-SA版权

本文介绍如何使用Android Support库中的TabLayout和ViewPager组件来实现一个带有多标签页的登录界面。通过自定义适配器MyFragmentPagerAdapter，可以轻松地在不同的登录方式间切换，如手机快捷登录和账号密码登录。

1.引入依赖库

 implementation 'com.android.support:design:27.1.1'

如果出现版本错误，把conpileSdkVersion和targetSdkVersion的版本改成27.

2.布局文件

 <android.support.design.widget.TabLayout
        android:id="@+id/login_tablayout"
        android:textDirection="firstStrong"
        android:layout_width="match_parent"
        app:tabSelectedTextColor="@color/colorPrimary"
        app:tabIndicatorHeight="1dp"
        app:tabIndicatorColor="#4092f7"
        android:layout_height="40dp">

    </android.support.design.widget.TabLayout>
   
    <android.support.v4.view.ViewPager
        android:id="@+id/login_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

3.自定义myAdapter继承FragmentPagerAdapter

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private String[] titles;
    private List<Fragment> fragmentList;
    
    public MyFragmentPagerAdapter(FragmentManager fragmentManager, List<Fragment> fragments, String[] titles) {
        super(fragmentManager);
        fragmentList = fragments;
        this.titles = titles;
    }
    
    @Override
    public Fragment getItem(int position) {
        Fragment fragment;
        if (position < titles.length) {
            fragment = fragmentList.get(position);
        } else {
            fragment = fragmentList.get(0);
        }
        return fragment;
    }
    
    @Override
    public int getCount() {
        return titles.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        if (titles != null && titles.length > 0)
            return titles[position];
        return null;
    }

}

4.根据自己需要创建Fragment的个数。new --> Fragment --> Fragment(Black)

5.修改MainActivity.java

public class MainActivity extends AppCompatActivity {

    private TabLayout login_tablayout;
    private ViewPager login_viewpager;
    private List<Fragment> fragments;

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

        login_tablayout = (TabLayout)findViewById(R.id.login_tablayout);
        login_viewpager = (ViewPager)findViewById(R.id.login_viewpager);
        //账号密码登录（text_login）  手机号登录（phone_login）
        fragments = new ArrayList<>();
        fragments.add(new Fragment1());
        fragments.add(new Fragment2());
        final String[] titles = {"手机快捷登录","账号密码的登录"};
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),fragments,titles);
        login_viewpager.setAdapter(adapter);
        login_tablayout.setupWithViewPager(login_viewpager);
    }
}

最终效果