Android Material Design CollapsingToolbarLayout使用

最新推荐文章于 2022-11-21 06:30:00 发布

蓝色笙箫

最新推荐文章于 2022-11-21 06:30:00 发布

阅读量216

点赞数

分类专栏： android移动端开发

本文链接：https://blog.csdn.net/bxllove/article/details/78351535

版权

android移动端开发专栏收录该内容

46 篇文章 0 订阅

订阅专栏

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);
    }

}