折叠ToolBar

最新推荐文章于 2019-04-28 21:09:28 发布

原创最新推荐文章于 2019-04-28 21:09:28 发布 · 450 阅读

0 ·

CC 4.0 BY-SA版权

折叠ToolBar 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用 Android 的 CoordinatorLayout 和 CollapsingToolbarLayout 实现具有折叠效果的界面布局。通过设置相应的属性，可以使得 Toolbar 和 ImageView 在滚动时产生折叠动画，并详细展示了配置 RecyclerView 以实现整体滚动的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，布局

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--包裹的内容作为app的头标题-->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <!--包裹内容可滚动-->
        <!--contentScrim属性是折叠后的toolBar的颜色-->
        <!--expandedTitleMarginStart  文字距离左边-->
        <!--  app:layout_scrollFlags="scroll|exitUntilCollapsed" 
         是跟布局CoordinatorLayout的属性，代表可滚动，需要和app:layout_behavior="@string/appbar_scrolling_view_behavior"一起使用
         才能一起滚动-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingtoolbarlayout"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:contentScrim="#000000"
            app:expandedTitleMarginStart="10dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!--layout_collapseMode =parallax表示一起滚动-->
            <!--layout_collapseParallaxMultiplier表示视觉差-->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/test"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />
            <!--layout_collapseMode =pin  停到最顶端 -->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

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


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

    <!--layout_behavior和上边的配合使用才能实现一起滚动效果-->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

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

对应的代码：

package com.example.administrator.toolbar;

import android.graphics.Color;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;

import com.gyf.barlibrary.ImmersionBar;

import java.util.ArrayList;

import static com.example.administrator.toolbar.R.id.toolbar;

/**
 * Created by Administrator on 2017/7/16/016.
 */

public class CoordinatorLayoutActivity extends BaseActivity {

    private ArrayList<String> arr;
    private RecyclerView recycView;
    private TreasureFragmentAdapter adapter;
    private CollapsingToolbarLayout collapsingtoolbarlayout;
    private Toolbar toolbar;

    @Override
    public int getId() {
        return R.layout.activity_coordinator;
    }

    @Override
    protected void initView() {
        recycView = (RecyclerView) findViewById(R.id.recycView);
        collapsingtoolbarlayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingtoolbarlayout);
        toolbar = (Toolbar) findViewById(R.id.toolbar);

        //设置标题名字
        collapsingtoolbarlayout.setTitle("呜呜呜呜");
        //设置标题展开时候颜色
        collapsingtoolbarlayout.setExpandedTitleColor(getResources().getColor(android.R.color.black));
        //设置缩起来的文字颜色
        collapsingtoolbarlayout.setCollapsedTitleTextColor(getResources().getColor(android.R.color.white));
        //沉浸式状态栏
        ImmersionBar.with(this).titleBar(R.id.toolbar).init();

    }

    @Override
    protected void initData() {

        arr = new ArrayList<>();
        for (int i = 0; i < 200; i++) {
            arr.add(i + "");
        }
    }

    @Override
    protected void initListener() {
//        //设置加载方式
        recycView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
        //创建Adapter
        adapter = new TreasureFragmentAdapter(R.layout.item, arr);
        //设置Adapter
        recycView.setAdapter(adapter);


    }


}