Android MVVM框架搭建（九）TabLayout、ViewPager、城市地图天气切换

很简单，我们先在fragment包下创建一个InfoFragment，对应的布局info_fragment.xml，代码如下：

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:app=“http://schemas.android.com/apk/res-auto”

xmlns:tools=“http://schemas.android.com/tools”>

<RelativeLayout

android:layout_width=“match_parent”

android:layout_height=“match_parent”

tools:context=“.ui.fragment.InfoFragment”>

<com.google.android.material.tabs.TabLayout

android:id=“@+id/tab”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

app:tabIndicatorColor=“@color/purple_500”

app:tabTextColor=“@color/purple_500” />

<androidx.viewpager.widget.ViewPager

android:id=“@+id/vp”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:layout_below=“@+id/tab” />

① Fragment适配器

然后我们创建一个Fragment适配器，在adapter包创建InfoFragmentAdapter类，代码如下：

public class InfoFragmentAdapter extends FragmentPagerAdapter {

String titleArr[];

List mFragmentList;

public InfoFragmentAdapter(FragmentManager fm, List list, String[] titleArr) {

super(fm);

mFragmentList = list;

this.titleArr = titleArr;

}

@Override

public Fragment getItem(int i) {

return mFragmentList.get(i);

}

@Override

public int getCount() {

return mFragmentList != null ? mFragmentList.size() : 0;

}

@Nullable

@Override

public CharSequence getPageTitle(int position) {

return titleArr[position];

}

@Override

public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {

// super.destroyItem(container, position, object);

}

}

② TabLayout组合ViewPager

下面在InfoFragment中进行两个控件的组合，InfoFragment中代码如下：

public class InfoFragment extends BaseFragment {

public static InfoFragment newInstance() {

return new InfoFragment();

}

private InfoFragmentBinding binding;

/**

• 标题数组

*/

private final String[] titles = {“新闻”,“视频”};

private final List fragmentList = new ArrayList<>();

@Override

public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,

@Nullable Bundle savedInstanceState) {

binding = DataBindingUtil.inflate(inflater,R.layout.info_fragment,container,false);

return binding.getRoot();

}

@Override

public void onActivityCreated(@Nullable Bundle savedInstanceState) {

super.onActivityCreated(savedInstanceState);

fragmentList.add(new NewsFragment());

fragmentList.add(new VideoFragment());

binding.vp.setAdapter(new InfoFragmentAdapter(getChildFragmentManager(), fragmentList, titles));

binding.tab.setupWithViewPager(binding.vp);

}

}

现在这个InfoFragment就写好了，下面就是去移除掉nav_graph.xml中的NewsFragment和VideoFragment，移除后如下图所示

然后就是底部的菜单移除，navigation_menu.xml中移除新闻和视频，移除后如下图：