一、简介
- 需求：实现一个像知乎顶部标签页，来展现3个页面。
- 解决办法：TabLayout是Design包中推出的控件，可以配合着ViewPager和Fragment来实现顶部标签和底部菜单栏。
二、效果图
效果图.jpg
三、实现步骤
- 添加依赖：implementation 'com.android.support:design:27.1.1'
- 创建多个Fragment.java文件，并绑定XML布局文件。
- 创建FragmentPagerAdapter适配器文件。
- 在布局中使用TabLayout控件和Viewpager控件。
- 在代码中实现Viewpager与Fragment的绑定，和TabLayout的绑定。
四、具体步骤
- 添加依赖
implementation 'com.android.support:design:27.1.1'
- 创建多个Fragment.java文件，并绑定XML布局文件。
/**
* Created by SongSong on 2018/11/9
* 这是TabLayout展示的其中一个页面
*/
public class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment1, container, false);
}
}
<?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"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="218dp"
android:text="Page:"
android:textSize="20sp"
android:textStyle="bold"/>
<TextView
android:id="@+id/titile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView"
android:layout_centerHorizontal="true"
android:textSize="50sp"
android:text="1"/>
</RelativeLayout>
- 创建FragmentPagerAdapter适配器文件
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private String[] mTitles = new String[]{"Tab 1", "Tab 2", "Tab 3"};
public MyFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
if (position == 1)
return new Fragment2();
else if (position == 2)
return new Fragment3();
return new Fragment1();
}
@Override
public int getCount() {
return mTitles.length;
}
//用来设置tab的标题
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
}
- 在布局中使用TabLayout控件和Viewpager控件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tab_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabIndicatorColor="#94ec9d"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#FFFFFF"
app:tabTextColor="#FFFFFF">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
</LinearLayout>
- 在代码中实现Viewpager与Fragment的绑定，和TabLayout的绑定
public class MainActivity extends AppCompatActivity {
private TabLayout mTabLayout;
private ViewPager mViewPager;
private MyFragmentPagerAdapter myFragmentPagerAdapter;
private TabLayout.Tab one;
private TabLayout.Tab two;
private TabLayout.Tab three;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabLayout = findViewById(R.id.tab_main);
mViewPager = findViewById(R.id.vp_main);
myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
//使用适配器将ViewPager与Fragment绑定在一起
mViewPager.setAdapter(myFragmentPagerAdapter);
//将TabLayout和ViewPager绑定在一起，相互影响，解放了开发人员对双方变动事件的监听
mTabLayout.setupWithViewPager(mViewPager);
//指定Tab的位置
one = mTabLayout.getTabAt(0);
two = mTabLayout.getTabAt(1);
three = mTabLayout.getTabAt(2);
//给tab设置图标
one.setIcon(R.mipmap.ic_launcher);
two.setIcon(R.mipmap.ic_launcher);
three.setIcon(R.mipmap.ic_launcher);
}
}
五、项目地址
https://github.com/WangXianSong/TabLayoutDemo
六、留下的问题
在三个Fragment的ViewPager中，由于ViewPager默认会预加载左右两个Fragment页面。(顺序：左右Fragment再到当前Fragment)
每次加载都需要消耗一定的内存和网络的话，是非常不友善的，所以为了优化这个问题，我在网上找到了关于setUserVisibleHint方法的详解，在后续再更新。
Fragment的setUserVisibleHint方法
public void setUserVisibleHint(boolean isVisibleToUser) {
super.setUserVisibleHint(isVisibleToUser);
Log.d(TAG, "setUserVisibleHint: Fragment1");
}
