Android——使用TabLayout+ViewPager实现顶部导航栏
使用TabLayout+ViewPager的方式,实现顶部导航栏切换的效果,效果如下图。
实现的主要有以下几点:
- 在activity的xml文件中加入 TabLayout 和 ViewPager;
- 创建fragment和fragmentactivity/appcompatactivity;
- 自定义一个类继承自FragmentPagerAdapter,里面重写getPageTitle,getCount,getItemPosition,instantiateItem,getItem方法;
- 在activity中将tablayout、viewpager、adapter绑定。
代码:
xml文件:
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout_msg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/color_white"
app:tabIndicatorColor="@color/colorTheme"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/colorTheme"
app:tabTextColor="@color/color_333333" />
<android.support.v4.view.ViewPager
android:id="@+id/view_pager_msg"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
activity:
private TabLayout mTabLayout;
private ViewPager mViewPager;
private MessageFragmentAdapter myFragmentPagerAdapter;
private String[] tabs = {"全部", "应用提醒", "城市推送", "系统通知"};
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_message_list);
showContentView();
initView();
}
@Override
protected void getData() {
super.getData();
showContentView();
}
private void initView() {
mTabLayout = bindingView.tabLayoutMsg;
mViewPager = bindingView.viewPagerMsg;
myFragmentPagerAdapter = new MessageFragmentAdapter(getSupportFragmentManager(), tabs);
mViewPager.setAdapter(myFragmentPagerAdapter);
mTabLayout.setupWithViewPager(mViewPager);
}
fragmentadapter文件:
public class MessageFragmentAdapter extends FragmentPagerAdapter {
private String[] mTitles;
public MessageFragmentAdapter(FragmentManager fm, String[] tabs) {
super(fm);
mTitles = tabs;
}
@Override
public Fragment getItem(int position) {
return MessageFragment.newInstance(position);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
MessageFragment fragment = (MessageFragment) super.instantiateItem(container, position);
fragment.updateArguments(position);
return fragment;
}
@Override
public int getItemPosition(Object object) {
return PagerAdapter.POSITION_NONE;
}
@Override
public int getCount() {
return mTitles.length;
}
//用来设置tab的标题
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}}
fragment文件:
public class MessageFragment extends MvvmBaseFragment<FragmentMessageBinding> {
private int mType;
private final int MESSAGE_TYPE_ALL = 0;
private final int MESSAGE_TYPE_APP = 1;
private final int MESSAGE_TYPE_PUSH = 2;
private final int MESSAGE_TYPE_SYSTOM = 3;
private List<MessageBean.DataBean.MsgsBean> msgBeans = new ArrayList<>();
private MessageItemAdapter adapter;
@Override
public int setContent() {
return R.layout.fragment_message;
}
@Override
protected void getData() {
super.getData();
showContentView();
}
@Override
public void onResume() {
super.onResume();
if (msgBeans.isEmpty()) {
//查询最新数据
getLatestMessageList(mType);
}
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
adapter = new MessageItemAdapter(msgBeans, getContext());
bindingView.rvMessageList.setAdapter(adapter);
bindingView.rvMessageList.setLayoutManager(new LinearLayoutManager(getContext()));
}
private void getLatestMessageList(int type) {
//TODO 四种消息类型,type不同,发送网络请求
msgBeans.add(new MessageBean.DataBean.MsgsBean(
"https://blog.csdn.net/NNadn/article/details/89211845",
"CXTX",
"申请事项:********************\n预约时间:2019-01-11 上午9:00-12:00",
"预约成功!",
"1078130680573059074",
"09:20"));
msgBeans.add(new MessageBean.DataBean.MsgsBean(
"",
"CXTX",
"过年期间,请注意防火防盗,不要燃放烟花爆竹,不要往人员密集的地方跑。",
"安全通知",
"1078130680573059074",
"昨天09:20"));
msgBeans.add(new MessageBean.DataBean.MsgsBean(
"",
"CXTX",
"恭喜!您的实名认证已经通过。",
"实名认证",
"1078130680573059074",
"昨天09:20"));
adapter.notifyDataSetChanged();
}
//从adapter中拿到type
public static MessageFragment newInstance(int type) {
MessageFragment f = new MessageFragment();
Bundle b = new Bundle();
b.putInt("type", type);
f.setArguments(b);
return f;
}
@Override
public void onAttach(Context context) {
super.onAttach(context);
Bundle arguments = getArguments();
if (arguments != null) {
//当前页面消息类型
mType = arguments.getInt("type", 0);
}
}
//更新type
public void updateArguments(int pageType) {
this.mType = pageType;
Bundle args = getArguments();
if (args != null) {
args.putInt("type", pageType);
}
}}
其中fragment中的newInstance、onAttach、updateArguments方法是因为我用的是4个相同的fragment,但是需要在页面请求上做不同的操作。我在fragmentadapter中实例化fragment的时候,将type传入,这样getmessage方法里直接根据传入的type方法就可以区别处理了。