具体效果先贴出来,toolbar带图片可以收缩,也可以说是toolbar的动画
实现该效果最主要的还是布局
首先还是添加Design的库,前面的博客已经说过
定义layout
<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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="192dp"
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:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/header"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/anim_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/scrollableview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:clickable="true"
android:src="@drawable/ic_action_add"
app:layout_anchor="@+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
CoordinatorLayout 一个FrameLayout可以让子view有特定的行为,比如悬浮按钮
AppBarLayout 一个LinearLayout (vertical)用于可以滚动的子类布局,一般是在CoordinatorLayout 的直接子视图
CollapsingToolbarLayout 看名字就知道
AppBarLayout 一个LinearLayout (vertical)用于可以滚动的子类布局,一般是在CoordinatorLayout 的直接子视图
CollapsingToolbarLayout 看名字就知道
scroll属性,保证视图可以滚动
exitUntilCollapsed属性,视图收缩到最小高度就不收缩了
这里有一个重要的属性,fitsSystemWindows每一个都最好加上,这样如果你的status bar设为透明色的话,那么toolbar上的图片就会移到status bar上面(如果设为false)
例如在代码中将status 透明
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window window = getWindow();
// Translucent status bar
window.setFlags(
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// Translucent navigation bar
window.setFlags(
WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}
也可以在style中,不过要最低版本19
<style name="AppTheme" parent="AppBaseTheme">
<!-- Status Bar -->
<item name="android:windowTranslucentStatus">true</item>
<!-- Navigation Bar -->
<item name="android:windowTranslucentNavigation">true</item>
</style>
最后都设为true这样在Android 5.0以下就不会越过status bar 而5.0以上会自动和上面融为一体
所以fitsSystemWindows要用在最外面一层的layout上,确定下面的内容不被拉到status bar上面去
而通过代码设定更加安全
而通过代码设定更加安全
XML就这一个
下面实现代码,初始化这些控件
toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(toolbar);
collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Suleiman Ali Shakir");
ImageView header = (ImageView) findViewById(R.id.header)
下面用到一个Palette API来取色,就是调色板的一个类,注意添加库
compile 'com.android.support:palette-v7:22.2.1'
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.header);
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
mutedColor = palette.getMutedColor(R.attr.colorPrimary);
collapsingToolbar.setContentScrimColor(mutedColor);
}
})
这里就是取出图片相近的颜色给toolbar上色,好,主要代码就是上面这些。