CoordinatorLayout-带图片伸缩工具栏

伸缩工具栏toolbardesign

效果图：

步骤一：

在build.gilde中添加以下代码

dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:appcompat-v7:22.2.0'

    compile 'com.android.support:design:22.2.0'

    compile 'com.android.support:cardview-v7:22.2.0'

}

步骤二：

布局文件：

<?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/main_content"

    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="@dimen/detail_backdrop_height"

        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="48dp"

            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="@drawable/cheese_2"

                app:layout_collapseMode="parallax" />

            <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>

    <!--第二部分：主要内容，NestedScrollView和ScrollView基本功能一致，只不过NestedScrollView可以兼容新的控件-->

    <android.support.v4.widget.NestedScrollView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:orientation="vertical"

            android:paddingTop="24dp">

            <!--卡片布局-->

            <android.support.v7.widget.CardView

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_margin="@dimen/card_margin">

                <LinearLayout

                    style="@style/Widget.CardContent"

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content">

                    <TextView

                        android:layout_width="match_parent"

                        android:layout_height="wrap_content"

                        android:text="Info"

                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView

                        android:layout_width="match_parent"

                        android:layout_height="wrap_content"

                        android:text="@string/cheese_ipsum" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_marginBottom="@dimen/card_margin"

                android:layout_marginLeft="@dimen/card_margin"

                android:layout_marginRight="@dimen/card_margin">

                <LinearLayout

                    style="@style/Widget.CardContent"

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content">

                    <TextView

                        android:layout_width="match_parent"

                        android:layout_height="wrap_content"

                        android:text="Friends"

                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView

                        android:layout_width="match_parent"

                        android:layout_height="wrap_content"

                        android:text="@string/cheese_ipsum" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_marginBottom="@dimen/card_margin"

                android:layout_marginLeft="@dimen/card_margin"

                android:layout_marginRight="@dimen/card_margin">

                <LinearLayout

                    style="@style/Widget.CardContent"

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content">

                    <TextView

                        android:layout_width="match_parent"

                        android:layout_height="wrap_content"

                        android:text="Related"

                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView

                        android:layout_width="match_parent"

                        android:layout_height="wrap_content"

                        android:text="@string/cheese_ipsum" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

    <!--第三部分：漂浮按钮-->

    <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_discuss"

        app:layout_anchor="@id/appbar"

        app:layout_anchorGravity="bottom|right|end" />

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

步骤三：

主页面代码：

public class MainActivity extends AppCompatActivity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        //给页面设置工具栏

        final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        //设置工具栏标题

        CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);

        collapsingToolbar.setTitle("cheeseName");

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.menu_main, menu);

        return true;

    }

    @Override

    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();

        if (id == R.id.action_settings) {

            return true;

        }

        return super.onOptionsItemSelected(item);

    }

}

小结：

伸缩工具栏的代码结构：

<android.support.design.widget.AppBarLayout

        android:layout_height="192dp"

        android:layout_width="match_parent">

    <android.support.design.widget.CollapsingToolbarLayout

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <android.support.v7.widget.Toolbar

                android:layout_height="?attr/actionBarSize"

                android:layout_width="match_parent"

                app:layout_collapseMode="pin"/>

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

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