CollapsingToolbarLayoutDemo

最新推荐文章于 2024-06-20 14:52:01 发布
最新推荐文章于 2024-06-20 14:52:01 发布
阅读量187 收藏
点赞数
分类专栏： android 文章标签： android collapsingToolbarLayout
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38023774/article/details/103714942
版权

首先，

activity_main.xml布局文件示意图：

其中AppBarLayout下的textView部分也可以为一个imageView。

xml全部代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="256sp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingBar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@color/toolbar_bg"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/toolbar_bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar_collapsing"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />


        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                app:cardCornerRadius="5dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="卡片式布局"
                    android:textSize="20sp"
                    android:layout_margin="20dp"/>

            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                app:cardCornerRadius="5dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="卡片式布局"
                    android:textSize="20sp"
                    android:layout_margin="20dp"/>

            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                app:cardCornerRadius="5dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="卡片式布局"
                    android:textSize="20sp"
                    android:layout_margin="20dp"/>

            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                app:cardCornerRadius="5dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="卡片式布局"
                    android:textSize="20sp"
                    android:layout_margin="20dp"/>

            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                app:cardCornerRadius="5dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="卡片式布局"
                    android:textSize="20sp"
                    android:layout_margin="20dp"/>

            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                app:cardCornerRadius="5dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="卡片式布局"
                    android:textSize="20sp"
                    android:layout_margin="20dp"/>

            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                app:cardCornerRadius="5dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="卡片式布局"
                    android:textSize="20sp"
                    android:layout_margin="20dp"/>

            </androidx.cardview.widget.CardView>

        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

对应的activity：

package com.example.collapsingtoolbarlayout;

import android.os.Bundle;

import com.google.android.material.appbar.AppBarLayout;
import com.google.android.material.appbar.CollapsingToolbarLayout;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.snackbar.Snackbar;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {
    private AppBarLayout appBarLayout;
    private CollapsingToolbarLayout collapsingToolbarLayout;
    private ImageView imageView;
    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.content_main);
        toolbar = findViewById(R.id.toolbar_collapsing);
        setSupportActionBar(toolbar);

        collapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsingBar);
        appBarLayout = (AppBarLayout)findViewById(R.id.appBar);
        imageView = (ImageView)findViewById(R.id.imageView);
        setTitleToCollapsingToolBarLayout();
        FloatingActionButton fab = findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
    //改变标题栏标题
    private void setTitleToCollapsingToolBarLayout(){
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
                if (i <= imageView.getHeight() * 4 / 5 ){
                    collapsingToolbarLayout.setTitle("change title");
                    collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(android.R.color.transparent));
                    collapsingToolbarLayout.setCollapsedTitleTextColor(getResources().getColor(R.color.toolbar_title));
                }else {
                    collapsingToolbarLayout.setTitle("");
                }
            }
        });

    }
}

参考文章：

https://www.cnblogs.com/whycxb/p/9374690.html

 

 

使用步骤

qq_38023774
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CollapsingToolbarLayoutDemo【可折叠式标题栏，顺便带有CardView卡片式布局】
weixin_33862041的博客
10-04 218
版权声明：本文为HaiyuKing原创文章，转载请注明出处！ 前言 CollapsingToolBarLayout是一个作用于ToolBar基础之上的布局，它也是由Design Support库提供的。不过CollapsingToolBarLayout（可折叠的toolbar布局）是不能独立存在的，它在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用。而APPBarLayo...
ScrollviewDemo(CollapsingToolbarLayout滑动视图demo)
08-22
ScrollviewDemo(CollapsingToolbarLayout滑动视图demo)，请正确姿势导入：File=>New=>Import module,更多查看我博客文章: https://mp.csdn.net/postedit/81943806
Android开发-CardView卡片View的详解
最新发布
2401_85122678的博客
06-20 399
我一直以来都有整理练习大厂面试题的习惯，有随时跳出舒服圈的准备，也许求职者已经很满意现在的工作，薪酬，觉得习惯而且安逸。不过如果公司突然倒闭，或者部门被裁减，还能找到这样或者更好的工作吗？我建议各位，多刷刷面试题，知道最新的技术，每三个月可以去面试一两家公司，因为你已经有不错的工作了，所以可以带着轻松的心态去面试，同时也可以增加面试的经验。我可以将最近整理的一线互联网公司面试真题+解析分享给大家，大概花了三个月的时间整理2246页，帮助大家学习进步。
CollapsingToolbarLayout详解和应用Demo
04-27
CollapsingToolbarLayout详解和应用 http://blog.csdn.net/savelove911/article/details/51252900 的源码
MD控件(二) CollapsingToolbarLayout
成长的烧年
10-25 861
先介绍一个andorid官方文档地址，目前有api23了，基本上和developer.android.com中文中一致，英语好的同学+lantern经常掉线的同学可以看一下，个人觉得蛮好的：xsoftlab ，有兴趣的可以看一下。 学习CollapsingToolbarLayout中的知识，也有不少上面文章提供的。首先上图看一下CollapsingTollbarLayout的Demo：
android jni示例_Android CollapsingToolbarLayout示例
从零开始的教程世界
07-09 120
android jni示例Welcome to Android CollapsingToolbarLayout Example. In this tutorial, we’ll discuss and implement CollapsingToolBarLayout in our application. 欢迎使用Android CollapsingToolbarLayout示例。 在本教程中，...
『Material Design 入门学习笔记』CollapsingToolbarLayout 与 AppBarLayout（附 demo）
weixin_34029680的博客
04-19 89
这篇文章中，介绍到的其它组件有TextInputLayout，FloatingActionButton，Snackbar，CoordinatorLayout。该专题的其它文章：『Material Design入门学习笔记』前言『Material Design入门学习笔记』动画（含demo）『Material Design 入门学习笔记』主题与 AppCompatActivity（附 demo）『M...
CollapsingToolbarLayout使用 源码下载
07-16
CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。
Android开发(51) 使用 CollapsingToolbarLayout ，可折叠的顶部导航栏
张云飞Vir的专栏
06-23 270
概述 在很app上都见过 可折叠的顶部导航栏效果。google support v7 提供了 CollapsingToolbarLayout 可以实现这个效果。效果图如下： 实现步骤 1.写一个 CollapsingToolbarLayout，它有两个 子视图，一个就是上图显示的图片（降落伞哪个）的Imageview，另一个就是 顶部...
安卓可伸缩的ToolBar——CollapsingToolbarLayout
南风子的博客
09-29 4953
1.CollapsingToolbarLayout介绍: CollapsingToolbarLayout介绍: collapsingToolbarLayout一般不会单独出现在布局文件中，而是作为另一个控件CoordinatorLayout的子元素出现。 小知识：在coordinatorLayout做父布局的情况下，给滑动控件设置一个app:layout_behavior="@string/app...
Android使用可折叠工具栏布局CollapsingToolbarLayout的代码例子
02-24
Android使用可折叠工具栏布局CollapsingToolbarLayout的代码例子。用于演示通过CollapsingToolbarLayout实现标题栏的动态折叠效果，以及AppBarLayout的五种滚动标志的完整效果图。
Android5.0新特性CollapsingToolbarLayout图片拉缩
06-29
Android5.0新特性CollapsingToolbarLayout图片拉缩
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout
07-16
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar+NestedScrollView+RecyclerView+FloatingActionButton的使用demo，详细说明 http://blog.csdn.net/amazing7/article/details/51918623
CollapsingToolbarLayout展开显示动画
03-25
CollapsingToolbarLayout+TabLayout的搭配使用，展开显示图片，设置文字阴影，收起隐藏图片。
ANDROID CollapsingToolbarLayout
沙湖的天地的博客
03-06 377
CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup，主要是用于实现折叠（其实就是看起来像伸缩~）的App Bar效果。它需要放在AppBarLayout布局里面，并且作为AppBarLayout的直接子View。CollapsingToolbarLayout主要包括几个功能（参照了官方网站上内容，略加自己的理解进行解释）： (1) 折叠Tit
Android CollapsingToolbarLayout控件
假装你是大灰狼的专栏
09-04 9881
1. CollapsingToolbarLayout CollapsingToolbarLayout是5.0版本出现的控件，可以实现Toolbar的折叠效果。 CollapsingToolbarLayout的属性 app:contentScrim，指定布局内部未展开时的背景颜色 app:collapsedTitleTextAppearance，指定未展开时的标题文字字体 app:colla...
Android中可折叠工具栏布局CollapsingToolbarLayout的使用
水月洞天
03-18 3810
1.使用CollapsingToolbarLayout的几点注意事项 在build.gradle中添加几个库的编译支持，包括appcompat-v7库(Toolbar需要)、design库(CollapsingToolbarLayout需要)、recyclerview库(主页面的RecyclerView需要)。 布局文件的根布局采用CoordinatorLayout，因为design库的动态效果都依赖该控件；并且该节点要添加命名空间声明xmlns:app="http://schemas.android.
Android支持库CollapsingToolbarLayout
Black_Cat_33的博客
08-20 3426
介绍 CollapsingToolbarLayout 用于美化 Toolbar 的运行效果， 它是由Design Support 库 提 供 的。CollapsingToolbarLayout 被设计用于 AppBarLayout 的子布局，AppBarLayout 是一个垂直的 LinearLayout，只是为了实现交互动画效果它增加了一些滚动特性。AppBarLayout 只有作为 CoordinatorLayout 的直接子布局才可以正常的工作，如果 CoordinatorLayout 包含了一个不
Android基础知识 - AppbarLayout CollapsingToolbarLayout
gqg_guan的博客
07-19 921
AppbarLayout
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值