CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至
效果图
1.首先添加需要的支持
compile 'com.android.support:cardview-v7:23.4.0' compile 'com.android.support:design:23.4.0'
2.这里使用了cardView,我们先来简单说一下这个控件的使用
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card" android:layout_width="match_parent" android:layout_height="100dp" android:foreground="?android:attr/selectableItemBackground" card_view:cardCornerRadius="10dp" card_view:cardElevation="10dp" card_view:contentPadding="5dp"> <TextView android:id="@+id/tv_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:textAppearance="android:attr/textAppearanceLarge" /> </android.support.v7.widget.CardView>
card_view: cardCornerRadius=""//设置卡片的圆角 card_view:cardElevation=""//设置卡片的阴影大小 card_view:contentPadding=""//设置卡片的内容边距 android:foreground="?android:attr/selectableItemBackground"//设置卡片按下的一个效果
3.如果对RecyclerView不熟悉的可以看下这篇博客
4.首先布局中使用CollapsingToolbarLayout
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="com.zsy.coordinatorlayout.MainActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="250dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="20dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/iv_content" android:layout_width="match_parent" android:layout_height="match_parent" android:contentDescript ion="@null" android:fitsSystemWindows="true" android:scaleType="fitXY" android:src=http://www.tuicool.com/articles/"@drawable/bg" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.8" app:layout_scrollFlags="scroll|snap|enterAlways|enterAlwaysCollapsed" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/my_recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>
layout_scrollFlags的一些属性介绍
1.scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。 2. enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见,启用快速“返回模式”。 3. enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。 4. exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。
为ToolBar设置一个标题和颜色
//给页面设置工具栏 CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); if (collapsingToolbar != null) { //设置隐藏图片时候ToolBar的颜色 collapsingToolbar.setContentScrimColor(Color.parseColor("#11B7F3")); //设置工具栏标题 collapsingToolbar.setTitle("编程是一种信仰"); }
这里对RecyclerView实现了拖拽排序,借鉴了一位大神写的(不知道是哪位大神了,所以给不了出处了还望见谅)
/** * ItemDragHelperCallback */ public class ItemDragHelperCallback extends ItemTouchHelper.Callback { @Override public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { int dragFlags; RecyclerView.LayoutManager manager = recyclerView.getLayoutManager(); if (manager instanceof GridLayoutManager || manager instanceof StaggeredGridLayoutManager) { dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT; } else { dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN; } // 如果想支持滑动(删除)操作, swipeFlags = ItemTouchHelper.START | ItemTouchHelper.END,不需要则是0 int swipeFlags = 0; return makeMovementFlags(dragFlags, swipeFlags); } @Override public boolean on Move(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { // 不同Type之间不可移动 if (viewHolder.getItemViewType() != target.getItemViewType()) { return false; } if (recyclerView.getAdapter() instanceof OnItemMoveListener) { OnItemMoveListener listener = ((OnItemMoveListener) recyclerView.getAdapter()); listener.onItemMove(viewHolder.getAdapterPosition(), target.getAdapterPosition()); } return true; } @Override public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) { } @Override public void on SelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) { // 不在闲置状态 if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) { if (viewHolder instanceof OnDragVHListener) { OnDragVHListener itemViewHolder = (OnDragVHListener) viewHolder; itemViewHolder.onItemSelected(); } } super.on SelectedChanged(viewHolder, actionState); } @Override public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { if (viewHolder instanceof OnDragVHListener) { OnDragVHListener itemViewHolder = (OnDragVHListener) viewHolder; itemViewHolder.onItemFinish(); } super.clearView(recyclerView, viewHolder); } @Override public boolean isLongPressDragEnabled() { // 不支持长按拖拽功能 手动控制 return false; } @Override public boolean isItemViewSwipeEnabled() { // 不支持滑动功能 return false; } }
OnItemMoveListener接口
/** * Item移动后 触发 */ public interface OnItemMoveListener { void onItemMove(int fromPosition, int toPosition); }
OnDragVHListener接口
/** * ViewHolder 被选中 以及 拖拽释放 触发监听器 */ public interface OnDragVHListener { //Item被选中时触发 void onItemSelected(); //Item在拖拽结束/滑动结束后触发 void onItemFinish(); }
最后附上项目地址: https://github.com/azhong1011/CollapsingToolbarLayout 如果觉得不错的话那就star一下吧