前言
Material Design 中有一种效果,向上滑动的时候隐藏 Toolbar,向下滑动的时候显示 Toolbar(这里的向上和向下是手势方向,下文中也一样,不再重复说明)。具体效果可以参考下面的链接。
https://material.io/guidelines/patterns/scrolling-techniques.html#scrolling-techniques-behavior
例子
首先添加 design library
compile 'com.android.support:design:25.4.0'
布局文件如下
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:title="Toolbar" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
例子中我们使用了 ViewPager,在 ViewPager 上面放了 Toolbar 和 TabLayout。左右滑动切换 Tab,上下滑动显示/隐藏 Toolbar。
这里用到了 AppBarLayout,AppBarLayout 的子 View 设置了
app:layout_scrollFlags 属性后,就可以在滑动的时候显示和隐藏。
app:layout_scrollFlags 可以设置以下值
- scroll:只有设置了 scroll 才会滑出屏幕,否则一直固定在屏幕上。
- enterAlways:设置了之后,向下滑动的时候会显示出来。如果只设置 scroll 不设置 enterAlways 的话,向下滑动不会显示,直到向下滑动到极限的时候再向下滑动的话会显示出来。
- enterAlwaysCollapsed:当你的 View 设置了 minHeight 的时候,向下滑动的时候,只显示最小高度,但是当向下滑动到极限的时候,会显示全部内容。
- exitUntilCollapsed:这个属性也需要配合 minHeight 使用,向上滑动隐藏 View 的时候不会全部隐藏,会折叠到最小高度显示在顶端。只设置 exitUntilCollapsed 和 scroll 的话,向下滑动到极限才会显示全部,如果想要一开始滑动就显示全部,还需要再加上 enterAlways。
为了达到滑动时显示/隐藏的效果,还需要在 CoordinatorLayout 下放一个可以滑动的 View。例子中的 ViewPager 虽然可以左右滑动,但是不可以上下滑动,是不满足要求的。本例中在 ViewPager 中放了 RecyclerView,下面代码会有讲到。
这边需要注意的是,不是所有的可以上下滑动的 View 都可以放到 CoordinatorLayout 中的,ScrollView 和 ListView 就不可以,原因是 CoordinatorLayout 中只能放可以嵌套滑动的 View,NestedScrollView 和 RecyclerView 就是可以嵌套滑动的。
最后,我们还需要设置可以滑动的 View 的
app:layout_behavior="@string/appbar_scrolling_view_behavior",这是系统定义的一个 Behavior。
下面来看看设置 TabLayout 和 ViewPager 的代码
MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(), getData()));
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);
}
private List<String> getData() {
List<String> dataList = new ArrayList<>();
for (int i = 1; i <= 3; i++) {
dataList.add(String.valueOf(i));
}
return dataList;
}
public class MyPagerAdapter extends FragmentStatePagerAdapter {
private List<String> dataList;
public MyPagerAdapter(FragmentManager fm, List<String> dataList) {
super(fm);
this.dataList = dataList;
}
@Override
public Fragment getItem(int position) {
return MyFragment.newInstance();
}
@Override
public int getCount() {
return dataList.size();
}
@Override
public CharSequence getPageTitle(int position) {
return dataList.get(position);
}
}
}
MyFragment.java
public class MyFragment extends Fragment {
public static MyFragment newInstance() {
return new MyFragment();
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.my_fragment, container, false);
RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.recycler_view);
recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
recyclerView.setAdapter(new MyAdapter());
return view;
}
class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new MyViewHolder(LayoutInflater.from(getContext()).inflate(R.layout.my_item, parent, false));
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.tv.setText(String.valueOf(position));
}
@Override
public int getItemCount() {
return 100;
}
class MyViewHolder extends RecyclerView.ViewHolder {
TextView tv;
public MyViewHolder(View view) {
super(view);
tv = (TextView) view.findViewById(R.id.text_view);
}
}
}
}
my_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
my_item.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/text_view"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:textSize="16sp" />
我们设置了三个 Tab,左右滑动可以切换,每个 Tab 底下设置了有 100
个 Item 的 RecyclerView,上下滑动显示/隐藏 Toolbar。
效果如下(这边是设置 app:layout_scrollFlags="scroll|enterAlways" 的效果)