Android开发TabLayout和Fragment实现选项卡效果

Android开发TabLayout和Fragment实现选项卡效果

使用TabLayout和Fragment，实现选项卡的功能
先上效果图

先写界面

main_activity.xml代码

vertical线性布局，两个控件，上面是选项卡，下面用于显示内容

    "@+id/tab_select"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:tabTextColor="@color/colorWhite"/>


    "@+id/vp_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    />

这里需要Android Design Support Library，只需在gradle文件中添加

    compile 'com.android.support:design:26.0.0'

MainActivity.java代码

这里用到了FragmentPagerAdapter 适配器，代码在下面

    public class MainActivity extends FragmentActivity {
        @BindView(R.id.vp_viewpager)
        ViewPager vpViewpager;
        @BindView(R.id.tab_select)
        TabLayout tabSelect;

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

            vpViewpager.setAdapter(new TabFragmentPagerAdapter(getSupportFragmentManager()));
            tabSelect.setupWithViewPager(vpViewpager);
    }
}

BaseFragment.java代码

不同页面用Fragment展示，为了方便新建一个父类Fragment，其他具体Fragment继承自这个父类

    public abstract class BaseFragment extends Fragment {
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            return setupView(inflater, container);
        }
    protected abstract View setupView(LayoutInflater inflater, ViewGroup container);
}

one.xml代码

这是内容界面，为了方便演示，只添加了一个TextView

        "match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="one" />

OneFragment.java代码

    public class OneFragment extends BaseFragment {
        public static OneFragment newInstance() {
            return new OneFragment();
        }
        @Override
        protected View setupView(LayoutInflater inflater, ViewGroup container) {
            return inflater.inflate(R.layout.one, container, false);
        }
}

其他页面与OneFragment类似

TabFragmentPagerAdapter.java代码

FragmentPagerAdapter 适配器

public class TabFragmentPagerAdapter extends FragmentPagerAdapter {
    public TabFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
        mFragmentList = new ArrayList<>();
        for (int i = 0; i < TITLES.length; i++) {
            mFragmentList.add(instanceFragment(i));
        }
    }

    private ArrayList mFragmentList;

    private final String[] TITLES = {"One", "Two", "Three", "Four", "Five"};

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    private BaseFragment instanceFragment(int position) {
        BaseFragment fragment = null;
        switch (position) {
            case 0:
                fragment = OneFragment.newInstance();
                break;
            case 1:
                fragment = TwoFragment.newInstance();
                break;
            case 2:
                fragment = ThreeFragment.newInstance();
                break;
            case 3:
                fragment = FourFragment.newInstance();
                break;
            case 4:
                fragment = FiveFragment.newInstance();
                break;
        }
        return fragment;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return TITLES[position];
    }

    @Override
    public int getCount() {
        return TITLES.length;
    }
}