CollapsingToolbarLayout

效果图

代码实现

这里我们主要用到CollapsingToolbarLayout

CollapsingToolbarLayout包裹 Toolbar 的时候提供一个可折叠的 Toolbar，一般作为AppbarLayout的子视图使用。

<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:background="#00ff99"
android:layout_width="match_parent"
android:layout_height="160dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
//标题放大后距离右边的距离
app:expandedTitleMarginEnd="64dp"
//Toolbar被折叠到顶部固定时的背景
app:contentScrim="?attr/colorPrimary"
//标题放大后距离左边的距离
app:expandedTitleMarginStart="48dp"
//状态栏的背景
app:statusBarScrim="?attr/colorPrimary"
//设置北京，滚动退出屏幕，最后折叠在顶端            app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:id="@+id/image"
//CollapsingToolbarLayout滑动时，子视图的视觉差                app:layout_collapseParallaxMultiplier="0.6"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/ym2"
//折叠模式
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
//Toolbar的高度必须是固定的，否则不起效果
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.RecyclerView
android:id="@+id/recview"
android:layout_width="match_parent"
android:layout_height="match_parent"
//要滑动的View必须设置这个        app:layout_behavior="@string/appbar_scrolling_view_behavior"
></android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="normal"
android:src="@drawable/ym1"
android:scaleType="fitXY"
android:layout_gravity="bottom|end"
//设置锚点
app:layout_anchor="@+id/appbar"
app:layout_anchorGravity="bottom|end|right"
/>
</android.support.design.widget.CoordinatorLayout>

接着我们来修改ToolBar折叠到顶端的背景颜色，上面是白色的，重点就在这句代码

app:contentScrim="?attr/colorPrimary"

我们把颜色改成黄色

app:contentScrim="#ff8c00"

public class MainActivity extends AppCompatActivity{
private List<String> datas;
private RecyclerView recyclerView;
private AppBarLayout appBarLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = (RecyclerView) findViewById(R.id.recview);
appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.mipmap.ic_launcher);
initData();
CustomAdapter adapter = new CustomAdapter(this,datas);
RecyclerView.LayoutManager manager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(manager);
recyclerView.setAdapter(adapter);
}

public void initData() {
datas = new ArrayList<>();
for (int i = 'A'; i < 'K'; i++) {
datas.add(""+(char)i);
}
}

}

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.MyViewHolder> {
private Context context;
private List<String> data;
public CustomAdapter(Context context, List<String> data){
this.context = context;
this.data = data;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView = View.inflate(context, R.layout.item_view, null);
MyViewHolder holder = new MyViewHolder(itemView);
return holder;
}

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.textView.setText(data.get(position));
}

@Override
public long getItemId(int position) {
return position;
}

@Override
public int getItemCount() {
return data.size();
}
class MyViewHolder extends RecyclerView.ViewHolder {

private final TextView textView;

public MyViewHolder(View itemView) {
super(itemView);
textView = (TextView) itemView.findViewById(R.id.tv_item);
}
}
}

效果二

<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#00ff99">

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collap"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#FA7199"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="?attr/colorPrimary">

<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/ym2"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.9" />

<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.v7.widget.ButtonBarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<TextView
android:id="@+id/tv_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="立即播放"
android:textSize="20sp"
android:layout_gravity="center_vertical"
/>
</android.support.v7.widget.ButtonBarLayout>
</android.support.v7.widget.Toolbar>

</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.RecyclerView
android:id="@+id/recview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>

</android.support.design.widget.CoordinatorLayout>

然后我们需要监听AppBarLayout的状态

public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {

public enum State {
EXPANDED,
COLLAPSED,
IDLE
}

private State mCurrentState = State.IDLE;

@Override
public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
if (i == 0) {
if (mCurrentState != State.EXPANDED) {
onStateChanged(appBarLayout, State.EXPANDED);
}
mCurrentState = State.EXPANDED;
} else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
if (mCurrentState != State.COLLAPSED) {
onStateChanged(appBarLayout, State.COLLAPSED);
}
mCurrentState = State.COLLAPSED;
} else {
if (mCurrentState != State.IDLE) {
onStateChanged(appBarLayout, State.IDLE);
}
mCurrentState = State.IDLE;
}
}

public abstract void onStateChanged(AppBarLayout appBarLayout, State state);
}

public class MainActivity extends AppCompatActivity {
private List<String> datas;
private RecyclerView recyclerView;
private AppBarLayout appBarLayout;
private CollapsingToolbarLayout collapsingToolbarLayout;
private TextView tvPlay;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = (RecyclerView) findViewById(R.id.recview);
appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collap);
tvPlay = (TextView) findViewById(R.id.tv_play);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
initData();
CustomAdapter adapter = new CustomAdapter(this,datas);
RecyclerView.LayoutManager manager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(manager);
recyclerView.setAdapter(adapter);
appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
@Override
public void onStateChanged(AppBarLayout appBarLayout, State state) {
if(state == State.EXPANDED){
tvPlay.setText("");
}else if(state == State.COLLAPSED){
tvPlay.setText("立即播放");
}else{
tvPlay.setText("");
}
}

});
}

public void initData() {
datas = new ArrayList<>();
for (int i = 'A'; i < 'Z'; i++) {
datas.add(""+(char)i);
}
}

}