在界面交互开发中,除了上篇文章讲到的底部导航栏经常使用到,还有一个类似功能,就是顶部的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也得采用前者。至此,此需求得以实现。