文章目录
源码地址
1.CoordinatorLayout
2.AppBarLayout
- AppBarLayout继承自LinearLayout,布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料设计的概念,它可以让你定制当某个可滚动View的滚动手势发生变化时,其内部的子View实现何种动作。
- 我们可以通过给AppBarLayout下的子View添加app:layout_scrollFlags来设置各子View执行的动作,app:layout_scrollFlags有5种动作:scroll,enterAlways,enterAlwaysCollapsed,exitUntilCollapsed,snap
scroll:view随着指定的ScrollView一起滚动,就像是指定scrollview的一部分
enterAlways:当指定的scrollview向下滚动时,view也会跟着scrollview向下滚动
enterAlwaysCollapsed:当指定的scrollview向下滚动时,view首先是enterAlways效果,直至view达到最小高度(android:minHeight),View就暂时不去往下滚动,直到ScrollView滑动到顶部不再滑动时,View再继续往下滑动,直到滑到View的顶部结束
exitUntilCollapsed:当指定的scrollview向上滚动时,View会一直往上滑动,逐渐消失,直到view剩下的的高度达到它的最小高度(android:minHeight)后,view会固定不动,滑动事件会再交给scrollview
snap:在滚动结束后,如果view只是部分可见,它将滑动到最近的边界。比如,如果view的底部只有25%可见,它将滚动离开屏幕,而如果底部有75%可见,它将滚动到完全显示
3.CollapsingToolbarLayout
CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup,主要是用于实现折叠的AppBar效果。它需要放在AppBarLayout布局里面,并且作为AppBarLayout的直接子View
app:title 设置标题
app:expandedTitleTextAppearance 展开时title的style
app:collapsedTitleTextAppearance 折叠时title的style
app:collapsedTitleGravity="center" 设置标题位置
app:contentScrim 设置折叠时toolbar的颜色,默认是colorPrimary的色值
app:statusBarScrim 设置折叠时状态栏的颜色 ,默认是colorPrimaryDark的色值
app:layout_collapseMode="parallax" 视差模式,在折叠的时候会有个视差折叠的效果
app:layout_collapseMode="pin" 固定模式,在折叠的时候最后固定在顶端
4.实现Toolbar的折叠效果
activity
public class CooActivity extends AppCompatActivity {
private CollapsingToolbarLayout collapsingToolbarLayout;
private Toolbar toolbar;
private ImageView iv;
private ViewPager viewPager;
private TabLayout tabLayout;
private ArrayList<String> dataList;
private ArrayList<Fragment> fragments = new ArrayList<>();
private AppBarLayout appbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_coo);
initView();
initData();
initTabVp();
setAvatorChange();
}
private void initTabVp() {
if (dataList != null){
for (int i = 0;i < dataList.size();i++){
fragments.add(new QJFragment());
tabLayout.addTab(tabLayout.newTab());
}
}
viewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));
tabLayout.setupWithViewPager(viewPager);