Android 5.0+可折叠toolbar布局(CollapsingToolbarLayout)的使用

先上效果图:(录屏软件有点问题,直接用图片了)

向上滑动过程展示如图:

这里写图片描述

这里写图片描述

这里写图片描述

接下来 布局:
在xml中解释很清楚了


<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.example.administrator.coordinatedemo.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        style="@style/MyAppBarLayout"
        >
        <!--scroll表示可以滚动,enterAlways表示向下移动时立即显示Toolbar,
            contentScrim - 设置当完全CollapsingToolbarLayout折叠后的背景颜色。
            有颜色渐进的变化
            expandedTitleMarginStart这个是一开始展开时距离左侧的距离
            exitUntilCollapsed - 向上滚动时收缩View,但可以固定Toolbar一直在上面。
            -->
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/collaps_toolbar_layout"
            app:expandedTitleMarginStart="29dp"
            app:contentScrim="@color/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@mipmap/ic_launcher"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"  />
                <!--

                pin -  此模式,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上。

                parallax - 设置为这个模式时,在内容滚动时,
                CollapsingToolbarLayout中的View(比如我们上面的ImageView)也可以同时滚动,实现视差滚动效果,
                通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。

                layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子,值为:0~1
                关于视差效果,大家有兴趣可以去了解-->
            <!--实现此效果,控件必须是Toolbar,不要设置toobar的位置,
            对CollapsingToolbarLayout设置的title会无效-->
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"



                android:id="@+id/toolbar"
                />
        </android.support.design.widget.CollapsingToolbarLayout>


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


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

MainActivity

package com.example.administrator.coordinatedemo;

import android.graphics.Color;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private CollapsingToolbarLayout colaps;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = ((Toolbar) findViewById(R.id.toolbar));
        colaps = (CollapsingToolbarLayout) findViewById(R.id.collaps_toolbar_layout);
        setSupportActionBar(toolbar);
        //返回图标
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //一定给CollapsingToolbarLayout设置title不要给toolbar设置title,无效
        colaps.setTitle("这个是显示的Title");
    //可选
        colaps.setExpandedTitleColor(Color.RED);//设置还没收缩时状态下字体颜色
        colaps.setCollapsedTitleTextColor(Color.BLUE);//设置收缩后Toolbar上字体的颜色




    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值