TabLayout+ViewPager+Fragment 快速实现标题切换效果
首先呢,这个控件使用起来并不难,算是非常简单的了,不过这个 TabLayout 的 setupWithViewPager 方法有坑,要注意了,具体什么坑,自己踩过才有映像,我这里就不说了,就介绍一下如何使用吧。
在 FragmentOne 中的布局文件里面添加一个 ViewPager 和一个 TabLayout,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
app:tabSelectedTextColor="#9966cc"
app:tabTextColor="#a2c699"
android:layout_width="match_parent"
android:layout_height="56dp" />
<android.support.v4.view.ViewPager
android:id="@+id/one_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tab_layout">
</android.support.v4.view.ViewPager>
</RelativeLayout>
这里的 ViewPager 内部存放的不是 Fragment 了,而是我们的布局文件,里面只要一个 textview 显示区别,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="威威喵 1" />
</RelativeLayout>
由于三个布局文件都基本一样,也没什么好说的。然后,就是 ViewPager 的一个适配器了,这里要把 View 和 TabLayout 的标题传进去,代码如下:
package nd.no.xww.bottomnavigationlayout;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
/**
* 功能: ViewPageAdapt
*
* @author : xww
* @created at : 19-3-8
* @time : 下午11:16
*/
public final class ViewPageAdapter extends PagerAdapter {
private List<View> mViews;
private List<String> mTitles;
public ViewPageAdapter(List<View> views) {
this(views, null);
}
public ViewPageAdapter(List<View> views, List<String> titles) {
this.mViews = views;
this.mTitles = titles;
if (mTitles == null) {
mTitles = new ArrayList<>();
}
}
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
container.addView(mViews.get(position));
return mViews.get(position);
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView(mViews.get(position));
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return mTitles.size() > 0 ? mTitles.get(position) : "";
}
@Override
public int getCount() {
return mViews.size();
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object obj) {
return view == obj;
}
}
getPageTitle 就是去获取标题的方法。然后在 Fragment 中的代码:
package nd.no.xww.bottomnavigationlayout;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
/**
* @author xww
* @desciption : 威威喵
* @date 2019/7/22
* @time 23:40
*/
public class OneFragment extends Fragment {
ViewPager viewPager;
TabLayout tabLayout;
List<View> views;
List<String> titles;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_one, container, false);
return view;
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
viewPager = view.findViewById(R.id.one_view_pager);
tabLayout = view.findViewById(R.id.tab_layout);
View viewOne = LayoutInflater.from(view.getContext()).inflate(R.layout.fragment_one_view_1, null);
View viewTwo = LayoutInflater.from(view.getContext(http://www.amjmh.com/v/BIBRGZ_558768/)).inflate(R.layout.fragment_one_view_2, null);
View viewThree = LayoutInflater.from(view.getContext()).inflate(R.layout.fragment_one_view_3, null);
views = new ArrayList<>();
views.add(viewOne);
views.add(viewTwo);
views.add(viewThree);
titles = new ArrayList<>();
titles.add("线性布局");
titles.add("网格布局");
titles.add("瀑布流");
ViewPageAdapter adapter = new ViewPageAdapter(views, titles);
for (String title : titles) {
tabLayout.addTab(tabLayout.newTab().setText(title));
}
tabLayout.setupWithViewPager(viewPager);
viewPager.setAdapter(adapter);
}
}
---------------------