app/build.gradle添加：
implementation 'com.android.support:design:26.1.0'
- 添加Toolbar，TabLayout，ViewPager 并设置相应属性
<!--加强版FrameLayout 可监听子控件事件比做出反应-->
<android.support.design.widget.CoordinatorLayout
>
<!--垂直方向上LinearLayout 使ViewPager 执行向下偏移ActionBar 的行为-->
<android.support.design.widget.AppBarLayout
>
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
<!--向上滚动隐藏 向下滚动重新显示-->
app:layout_scrollFlags="scroll|enterAlways"
<!--使Toolbar在最开始处 无边距-->
app:contentInsetStart="0dp"
>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
<!--使之向下偏移一个 ToolBar 的高度-->
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
- 设置ViewPager 的 Fragment 适配器
public class FragmentAdapter extends FragmentStatePagerAdapter {
/**
* ViewPager 的 Adapter 步骤：
* 重写 getItem()
* getCount()
* getPageTile()
*/
// 存放 传值过来的 Fragment
private List<Fragment> mFragments;
// 存放 传值过来的 Tab 的 title
private List<String> mTitles;
public FragmentAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles){
super(fm);
mFragments=fragments;
mTitles=titles;
}
/**
* 获取当前 Fragment
* @param position
* @return
*/
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
/**
* 获取 Fragment 数量
* @return
*/
@Override
public int getCount() {
return mFragments.size();
}
/**
* 获取 Tab 的 title
* @param position
* @return
*/
@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}
}
- 在 Activity 的 onCreate 或 Frament 的 onCreateView 中初始化
/**
* 初始化 TabLayout ，并绑定 ViewPager
* 添加 Fragment ，初始化 ViewPager 的适配器 ，比完成配置
*/
private void initTabFragment(){
// 像 tabLayout 中添加 tab
for(int i=0;i<tabTitles.length;i++){
homeTabLayout.addTab(homeTabLayout.newTab().setText(tabTitles[i]));
}
// 设置 tab 下面的 indicator 的左右间距
homeTabLayout.post(new Runnable() {
@Override
public void run() {
setIndicator(homeTabLayout,15,15);
}
});
// 是 TabLayout 与 ViewPager 建立关联关系
homeTabLayout.setupWithViewPager(homeViewPager);
// 初始化 fragments ，并添加 FruitFragment
fragments=new ArrayList<>();
for(int i=0;i<tabTitles.length;i++){
fragments.add(FruitFragment.newInstance());
}
// 初始化 适配器，然后 ViewPager 调用 setAdapter 完成适配器设置
fragmentAdapter=new FragmentAdapter(this.getSupportFragmentManager(),fragments, Arrays.asList(tabTitles));
homeViewPager.setAdapter(fragmentAdapter);
}
-
效果
ToolbarTabLayoutViewPager.gif
总结
使 Toolbar 向上滚动隐藏 向下滚动重新显示
app:layout_scrollFlags="scroll|enterAlways"
使 Content 向下偏移一个 ToolBar 的高度，需配合 AppBarLayout
app:layout_behavior="@string/appbar_scrolling_view_behavior"
Toolbar 要先创建menu文件夹并创建menu文件，设置相应属性
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<item
android:id="@+id/shop"
android:icon="@drawable/ic_shopping"
android:title="Shopping"
app:showAsAction="always"
/>
<item
android:id="@+id/game"
android:icon="@drawable/ic_game"
android:title="Game"
app:showAsAction="always"
/>
</menu>
重写 onCreateOptionsMenu(Menu menu)
// Activity 中
getMenuInflater().inflate(R.menu.toolbar_menu,menu);
// Fragment中
inflater.inflate(R.menu.toolbar,menu);
后设置点击事件 onOptionsItemSelected(MenuItem item)
设置 tab 下面的 indicator 的左右间距的函数
setIndicator
参考博客
