Android Material Design CollapsingToolbarLayout使用

Android Material Design CollapsingToolbarLayout使用

CollapsingToolbarLayout 继承的是FrameLayout 因此也有FrameLayout 的属性,它是为了能够更好的丰富toolbar 以及头部导航栏能够具有绚丽的滑动折叠特效而存在的 其实可以简单的理解为是对toolbar的补充,在使用 CollapsingToolbarLayout 时必须要用 AppBarLayout包裹, 使其成为AppbarLayout的子控件才能实现完成滑动折叠特效 ,因为之前说过AppbarLayout 具有使其子控件支持滑动手势,所以两者必须结合方能使用.

1先看控件布局的使用

• android:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar” 主题白色
  app:layout_scrollFlags=”scroll|exitUntilCollapsed”
  以上两个属性在Toolbar没有父控件CollapsingToolbarLayout 之前都是写在toolbar 里边的被包裹后上移到了此处
• app:contentScrim=”?attr/colorAccent”属性是折叠完成后背景色
• app:collapsedTitleGravity=”center” 折叠后title中央默认left
• app:expandedTitleGravity=”center|bottom” 展开后title显示中下方

<?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"    android:id="@+id/coordinator"    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="wrap_content">         <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collapsing_toolbar"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:fitsSystemWindows="true"            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"            app:contentScrim="?attr/colorAccent"            app:collapsedTitleGravity="center"            app:expandedTitleGravity="center|bottom"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <ImageView                android:id="@+id/backdrop"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:fitsSystemWindows="true"                android:scaleType="centerCrop"                android:src="@mipmap/timg" />            <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.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <TextView            android:layout_width="match_parent"            android:layout_height="match_parent"            android:text="@string/str"></TextView>    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

MainActivity

import android.os.Bundle;import android.support.design.widget.CollapsingToolbarLayout;import android.support.design.widget.FloatingActionButton;import android.support.design.widget.Snackbar;import android.view.View;import android.support.design.widget.NavigationView;import android.support.v4.view.GravityCompat;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarDrawerToggle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.Menu;import android.view.MenuItem;import android.widget.ArrayAdapter;import android.widget.ListView;import java.util.ArrayList;public class MainActivity extends AppCompatActivity{    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.app_bar_main);        CollapsingToolbarLayout collapsingToolbar =                (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);        collapsingToolbar.setTitle("小仓优子");        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);    }}