一、基本样式
直接上代码
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/barlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="@android:color/holo_blue_dark"
app:titleTextColor="@color/colorAccent"
app:expandedTitleGravity="center"
app:collapsedTitleGravity="left"
app:title="冒泡的嘟嘟"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/im_banner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="@drawable/bg"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleTextColor="@color/colorAccent"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="冒泡的嘟嘟"
android:gravity="center_vertical"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="冒泡的嘟嘟"
android:gravity="center_vertical"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="冒泡的嘟嘟"
android:gravity="center_vertical"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="冒泡的嘟嘟"
android:gravity="center_vertical"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="冒泡的嘟嘟"
android:gravity="center_vertical"
/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
几个关键属性:
AppBarLayout子布局属性:
layout_scrollFlags:控件滚动效果
值为:
scroll:设置此属性后控件会随滚动事件一起滚动
enterAlways:设置此属性后当向下滚动时控件会直接显示出来
exitUntilCollapsed:先执行控件隐藏的滚动事件,再执行外层滚动事件
enterAlwaysCollapsed:向下滚动时执行enterAlways,当滚动到顶部时展开控件
具体可以参考这位大神的文章: 点击打开链接
CollapsingToolbarLayout属性:
contentScrim:布局折叠后的颜色
expandedTitleGravity:布局展开时标题的位置
collapsedTitleGravity:布局折叠时标题的位置
CollapsingToolbarLayout子控件属性:
layout_collapseMode:
值为:
pin:折叠完成后固定在顶端;
parallax:滚动时控件也会有视差效果。
NestedScrollView:
layout_behavior:
二、标题栏逐渐显示
布局代码:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/barlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="@android:color/holo_blue_dark"
app:expandedTitleGravity="center"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed">
<ImageView
android:id="@+id/im_banner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="@drawable/bg"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin">
<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@android:color/white"
android:textSize="20dp"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="冒泡的嘟嘟"
android:gravity="center_vertical"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="冒泡的嘟嘟"
android:gravity="center_vertical"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="冒泡的嘟嘟"
android:gravity="center_vertical"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="冒泡的嘟嘟"
android:gravity="center_vertical"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:text="冒泡的嘟嘟"
android:gravity="center_vertical"
/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
activity代码:
package yuncaitong.com.csdnmaterial;
import android.app.Activity;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Window;
import android.view.WindowManager;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private AppBarLayout barlayout;
private Toolbar toolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getSupportActionBar().hide();
setContentView(R.layout.main_layout);
change(this,android.R.color.holo_blue_dark);
setBarListing();
}
//设置appbar滑动监听
private void setBarListing() {
barlayout = (AppBarLayout) findViewById(R.id.barlayout);
toolbar = (Toolbar) findViewById(R.id.toolbar);
final TextView tv_title = (TextView) findViewById(R.id.tv_title);
barlayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
toolbar.setBackgroundColor(changeAlpha(getResources().getColor(android.R.color.holo_blue_dark), Math.abs(verticalOffset * 1.0f) / appBarLayout.getTotalScrollRange()));
tv_title.setTextColor(changeAlpha(getResources().getColor(android.R.color.white), Math.abs(verticalOffset * 1.0f) / appBarLayout.getTotalScrollRange()));
if (verticalOffset == 0) {
tv_title.setText("");
} else {
tv_title.setText("冒泡的嘟嘟");
}
}
});
}
public int changeAlpha(int color, float fraction) {
int red = Color.red(color);
int green = Color.green(color);
int blue = Color.blue(color);
int alpha = (int) (Color.alpha(color) * fraction);
return Color.argb(alpha, red, green, blue);
}
private void change(Activity activity, int colorResId){
try {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = activity.getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(activity.getResources().getColor(colorResId));
}else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
barlayout.addOnOffsetChangedListener用于监听AppBarLayout的折叠状态
verticalOffset为0时表示为折叠状态
根据滚动距离动态设置标题栏内容的透明度
三、自定义显示内容
布局代码:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.CoordinatorLayout
android:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/barlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="@android:color/holo_blue_dark"
app:expandedTitleGravity="center"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/ll_head"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="@drawable/bg">
</ImageView>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
>
<EditText
android:id="@+id/et_title"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_centerInParent="true"
android:hint="冒泡的嘟嘟"
android:paddingLeft="20dp"
android:background="@drawable/edittext"
/>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:gravity="center_vertical"
android:text="冒泡的嘟嘟" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:gravity="center_vertical"
android:text="冒泡的嘟嘟" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:gravity="center_vertical"
android:text="冒泡的嘟嘟" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:gravity="center_vertical"
android:text="冒泡的嘟嘟" />
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:gravity="center_vertical"
android:text="冒泡的嘟嘟" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
注意:此处自定义内容需放在ToolBar之后否则折叠后toolbar将遮盖自定义内容
或者可以实现折叠监听使用动画实现更复杂的效果