【安卓开发——Fragment中使用TabLayout和ViewPager切换Tab页面】

本文详细介绍如何在界面交互开发中实现顶部Tab页面切换功能,使用TabLayout和ViewPager控件,通过具体Fragment加载,实现滑动及点击切换Tab页面。

在界面交互开发中,除了上篇文章讲到的底部导航栏经常使用到,还有一个类似功能,就是顶部的Tab页面切换。效果大致如下

它需要使用到两个控件,TabLayout和ViewPager,这样不仅滑动内容能够切换Tab页面,点击Tab标题栏,也可实现Tab切换。界面代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/orderListTab"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_48">
    </android.support.design.widget.TabLayout>

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

接下来,需要几个具体的Fragment及其页面,用来进行具体的Tab加载,这块比较简单,直接添加Fragment及其页面布局,如下

public class FragmentUnfinishOrder extends Fragment {

    public FragmentUnfinishOrder() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_order_unfinish, container, false);
    }


}
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.gospell.mobilecameramonitor.activity.fragment.order.FragmentUnfinishOrder">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="第一个页面内容" />

</LinearLayout >

这里可以看到,布局都采用了LinearLayout布局,避免外部布局和内部布局相互影响,例如有FrameLayout就会界面显示重叠。按照这个方式,添加完3个具体Tab页的子Fragment之后,接下来该处理的就是跟TabLayout和ViewPager界面对应的具体代码逻辑了。

public class FragmentOrderTab extends Fragment {
    private View contextView;// 总视图
    private TabLayout tabLayout;
    private ViewPager viewpager;
    ArrayList fragmentList = new ArrayList<Fragment>();
    String[] temp = {"未处理","已处理","全部"};


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        contextView = inflater.inflate(R.layout.fragment_order_tab, container, false);
        tabLayout = contextView.findViewById(R.id.orderListTab);
        viewpager = contextView.findViewById(R.id.orderListContent);
        return contextView;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        // fragment中嵌套fragment, Manager需要用(getChildFragmentManager())
        MPagerAdapter mPagerAdapter = new MPagerAdapter(getChildFragmentManager());
        initFragment();
        tabLayout.setupWithViewPager(viewpager);
        viewpager.setAdapter(mPagerAdapter);
    }

    private void initFragment() {
        fragmentList.add(new FragmentUnfinishOrder());
        fragmentList.add(new FragmentFinishedOrder());
        fragmentList.add(new FragmentAllListOrder());
    }


    class MPagerAdapter extends FragmentPagerAdapter {


        public MPagerAdapter(FragmentManager fm) {
            super(fm);
        }

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

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            return super.instantiateItem(container, position);
        }

        //返回tablayout的标题文字;
        @Override
        public CharSequence getPageTitle(int position) {
            return temp[position];
        }
    }
}

这里需要注意的是,由于应用场景外部的容器类是fragment, 也就是fragment中嵌套fragment。因为FragmentPagerAdapter就是android.support.v4.app.Fragment才有,android.app.Fragment没有此类,所以想用fragment+viewpager只能使用前者,也因此获取Manager需要用getChildFragmentManager(),来避免获取到寄宿Activity的Manager。同时又因为采用前者,所以容器类也得引用前者,这样包含容器类fragment的activity也得采用前者。至此,此需求得以实现。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值