Material Design风格的标题栏

最新推荐文章于 2024-03-24 20:09:25 发布
最新推荐文章于 2024-03-24 20:09:25 发布
阅读量1k 收藏 3
点赞数 1
分类专栏： Android 文章标签： Material Android 标题栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/du591310450/article/details/79364095
版权

一、基本样式

直接上代码

<android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.design.widget.AppBarLayout
            android:id="@+id/barlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:contentScrim="@android:color/holo_blue_dark"
                app:titleTextColor="@color/colorAccent"
                app:expandedTitleGravity="center"
                app:collapsedTitleGravity="left"
                app:title="冒泡的嘟嘟"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/im_banner"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scaleType="fitXY"
                    android:adjustViewBounds="true"
                    android:src="@drawable/bg"
                    app:layout_collapseMode="parallax" />

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:titleTextColor="@color/colorAccent"
                    app:layout_collapseMode="pin">
                </android.support.v7.widget.Toolbar>
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>


        <android.support.v4.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">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:text="冒泡的嘟嘟"
                    android:gravity="center_vertical"
                    />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:text="冒泡的嘟嘟"
                    android:gravity="center_vertical"
                    />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:text="冒泡的嘟嘟"
                    android:gravity="center_vertical"
                    />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:text="冒泡的嘟嘟"
                    android:gravity="center_vertical"
                    />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:text="冒泡的嘟嘟"
                    android:gravity="center_vertical"
                    />
            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>

几个关键属性：

    AppBarLayout子布局属性:

                  layout_scrollFlags:控件滚动效果

                  值为：

                           scroll:设置此属性后控件会随滚动事件一起滚动

                           enterAlways:设置此属性后当向下滚动时控件会直接显示出来

                           exitUntilCollapsed:先执行控件隐藏的滚动事件，再执行外层滚动事件

                          enterAlwaysCollapsed:向下滚动时执行enterAlways,当滚动到顶部时展开控件

                 具体可以参考这位大神的文章： 点击打开链接

    CollapsingToolbarLayout属性:

                  contentScrim:布局折叠后的颜色

                  expandedTitleGravity:布局展开时标题的位置

                  collapsedTitleGravity:布局折叠时标题的位置

   CollapsingToolbarLayout子控件属性：

                 layout_collapseMode:

                  值为：

                        

                    pin：折叠完成后固定在顶端；

                    parallax：滚动时控件也会有视差效果。

    NestedScrollView:

                    layout_behavior:

二、标题栏逐渐显示

布局代码：

<android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/barlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:contentScrim="@android:color/holo_blue_dark"
                app:expandedTitleGravity="center"
                app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/im_banner"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:scaleType="centerCrop"
                    android:src="@drawable/bg"
                    app:layout_collapseMode="parallax" />

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:contentInsetLeft="0dp"
                    app:contentInsetStart="0dp"
                    app:layout_collapseMode="pin">

                    <TextView
                        android:id="@+id/tv_title"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:textColor="@android:color/white"
                        android:textSize="20dp"
                        />

                </android.support.v7.widget.Toolbar>
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>


        <android.support.v4.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">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:text="冒泡的嘟嘟"
                    android:gravity="center_vertical"
                    />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:text="冒泡的嘟嘟"
                    android:gravity="center_vertical"
                    />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:text="冒泡的嘟嘟"
                    android:gravity="center_vertical"
                    />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:text="冒泡的嘟嘟"
                    android:gravity="center_vertical"
                    />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:text="冒泡的嘟嘟"
                    android:gravity="center_vertical"
                    />
            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>
activity代码： 
package yuncaitong.com.csdnmaterial;

import android.app.Activity;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Window;
import android.view.WindowManager;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private AppBarLayout barlayout;
    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        setContentView(R.layout.main_layout);
        change(this,android.R.color.holo_blue_dark);
        setBarListing();



    }


    //设置appbar滑动监听
    private void setBarListing() {
        barlayout = (AppBarLayout) findViewById(R.id.barlayout);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        final TextView tv_title = (TextView) findViewById(R.id.tv_title);

        barlayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                toolbar.setBackgroundColor(changeAlpha(getResources().getColor(android.R.color.holo_blue_dark), Math.abs(verticalOffset * 1.0f) / appBarLayout.getTotalScrollRange()));
                tv_title.setTextColor(changeAlpha(getResources().getColor(android.R.color.white), Math.abs(verticalOffset * 1.0f) / appBarLayout.getTotalScrollRange()));
                if (verticalOffset == 0) {
                    tv_title.setText("");
                } else {
                    tv_title.setText("冒泡的嘟嘟");
                }
            }
        });
    }

    public int changeAlpha(int color, float fraction) {
        int red = Color.red(color);
        int green = Color.green(color);
        int blue = Color.blue(color);
        int alpha = (int) (Color.alpha(color) * fraction);
        return Color.argb(alpha, red, green, blue);
    }


    private void change(Activity activity, int colorResId){
        try {

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

                Window window = activity.getWindow();

                window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

                window.setStatusBarColor(activity.getResources().getColor(colorResId));

            }else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            }

        } catch (Exception e) {

            e.printStackTrace();

        }
    }
}

barlayout.addOnOffsetChangedListener用于监听AppBarLayout的折叠状态

                verticalOffset为0时表示为折叠状态

                根据滚动距离动态设置标题栏内容的透明度

   

三、自定义显示内容

布局代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/barlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:contentScrim="@android:color/holo_blue_dark"
                app:expandedTitleGravity="center"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">


                    <ImageView
                        android:id="@+id/ll_head"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:adjustViewBounds="true"
                        android:scaleType="fitXY"
                        android:src="@drawable/bg">

                    </ImageView>
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:contentInsetLeft="0dp"
                    app:contentInsetStart="0dp"
                    app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_collapseMode="parallax"
                    >
                <EditText
                    android:id="@+id/et_title"
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_centerInParent="true"
                    android:hint="冒泡的嘟嘟"
                    android:paddingLeft="20dp"
                    android:background="@drawable/edittext"
                    />
                </RelativeLayout>
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>


        <android.support.v4.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">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:gravity="center_vertical"
                    android:text="冒泡的嘟嘟" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:gravity="center_vertical"
                    android:text="冒泡的嘟嘟" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:gravity="center_vertical"
                    android:text="冒泡的嘟嘟" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:gravity="center_vertical"
                    android:text="冒泡的嘟嘟" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:gravity="center_vertical"
                    android:text="冒泡的嘟嘟" />
            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

       注意：此处自定义内容需放在ToolBar之后否则折叠后toolbar将遮盖自定义内容

或者可以实现折叠监听使用动画实现更复杂的效果


源码下载



冒泡的嘟嘟
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Material风格的标题栏
02-26
在Material Design中，标题栏（Toolbar）是一个非常重要的组件，它作为界面的顶部元素，用来展示应用的名称或者当前页面的标题。在Android开发中，实现Material风格的标题栏可以提升应用的整体质感。 首先，我们要...
盘点 Material Design 3 带来的新变化
Androiddddd的博客
06-01 2621
2014 年 Google 发布了 Material Design（简称MD），成为了 Google 系产品统一的 UI 设计语言。时至今日 MD 已经有了两次大升级，2018年发布的 Material Theming （Material Design2，简称 M2），以及 2021年新发布的 Material You （Material Design3，简称 M3）。本文就带大家细数一下 M3 相对于 M2 的升级和变化。M3 最大特色在于对个性化的注重，就如同 “You” 的命名一样。一个集中体现就是动
UI风格汇：材料设计（Material Design），是对扁平风格的延展。
2401_82616673的博客
03-24 1916
材料设计（Material Design）是由Google提出的一种UI设计风格，旨在为用户提供一种更加真实、直观和自然的界面体验。材料设计强调平面化、阴影效果、响应式动效、材质与深度以及统一的设计语言，旨在为用户提供一种更加真实、直观和自然的界面体验。
Material Design(一)
chili_fan的博客
01-10 6839
Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。 目 的为不同平台”提供更一致、更广泛的“外观和感觉”适用平台手机、平板电脑、台式机等重要功能系统字体Roboto的升级版本等 ...
强烈推荐！！！Material Design交互设计之常见用法介绍
让技术为我所用
03-01 2756
文章目录前言一、常用控件1、toolbar2、DrawerLayout3、NavigationView/ BottomNavigationView4、FloatingActionButton5、Snackbar6、CardView7、CoordinatorLayout8、AppBarLayout9、CollapsingToolbarLayout10、NestedScrollView二、常用动画1、Fade淡入2、Slider滑动3、Explode分解4、共享元素 前言 本文主要结合一个Demo的演示来对
【小沐学Android】Material Design设计规范之颜色篇
爱看书的小沐
06-23 2450
谷歌在2007年发布了第一个测试版本的 Android 软件开发工具包（SDK），第一个商业版本的 Android 1.0，则发布于2008年9月。2012年6月27日，在谷歌I/O大会上，谷歌宣布发布了 Android 版本4.1 Jelly Bean。Jelly Bean 是一个在功能和性能方面的渐进的更新，主要目的是改进用户界面，Android 源代码是根据自由和开放源码软件许可证。谷歌发布的大部分代码遵循 Apache 许可证2.0版，Linux 内核的变化遵循 GNU 通用公共许可证版本2。
了解 Material Design
qq_44577538的博客
08-12 730
了解 Material Design 什么是 Material Design Material Design 作为一种人机关系理念，这是一种充分利用设备屏幕厚度空间的设计系统。Material Design 探索了软件内部物理材质，即软件界面是什么材质构成的。 基于纸张和油墨，设计师们创造了 Material Design 所探索的核心材质——量子纸张（英文：Quantum Paper）设计师马迪亚斯·杜阿尔特 ( Matías Duarte ) 解释说：“与真正的纸张不同，我们的数字材质可以智能地扩大和
学习使用Material Design控件（四）Android实现标题栏自动缩放、放大效果
08-29
在本文中，我们将介绍如何使用Material Design控件在Android平台上实现标题栏自动缩放、放大效果。 CoordinatorLayout是一个组织它的子views之间协作的一个Layout，可以给子View切换提供动画效果。AppBarLayout...
Material Design设计控件
12-01
12. **AppBar**和**Toolbar**：应用栏（AppBar）是顶部导航区域，包含标题、菜单和返回按钮，工具栏（Toolbar）是可自定义的组件，可以作为AppBar的一部分。 要使用这些控件，开发者需要理解每个组件的属性和方法，...
Android中BaseActivity自定义标题栏
08-31
在Android开发中，自定义标题栏是一个常见的需求，特别是在需要高度定制化UI...通过创建一个BaseActivity并实现必要的逻辑，我们可以轻松地在各个活动之间实现标题栏的统一风格和交互，同时保持代码的整洁和模块化。
Material Design例子
06-28
Material Design是Google推出的一种设计语言，它以纸质质感为灵感，旨在提供统一、直观、响应式的用户体验，适用于各种设备，包括手机、平板电脑、桌面电脑甚至更大尺寸的屏幕。这个"Material Design例子"是一个示例...
Material Design初识
jolieLi2019888的博客
04-12 661
Material Design Material Design，中文名：材料设计语言，在2014年的 Google I/O 上推出，是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。 Google 的 Material Design 并不是简单的扁平设计，而是一种注重卡片式设计、纸张的模拟、使用了强烈对比色彩的...
Material Design：为你的 Android 应用提供精美的 UI 体验
虎哥LoveDroid
04-19 1519
介绍 Material Design 概念：介绍 Material Design 是 Google 推出的一种设计语言，用于创建现代、美观、直观且一致的用户界面。解释 Material Design 的基本原则，包括材料元素、动画、颜色和排版等。Material Design UI 元素：介绍常用的 Material Design UI 元素，如卡片、按钮、文本字段、图标、导航栏等，以及它们的设计准则和最佳实践。
Material-Design
李泽文的博客
04-01 2299
Material-Design 介绍Material design的相关控件在开发中使用 ##概述 对于开发人员，Android21新增了许多新控件和新特性，这些控件和特性都是基于Material Design的设计理念的，这一篇就来讲讲Material Design给Android开发带来的变化。 ##主题和布局 Material提供了下面三种主题 @android:style/The...
Material Design 最全解析_2 设计篇
Maybe
06-23 5549
简介    上篇概述讲了Material Design整体的知识点，从这篇文章开始正式分章讲解，之前说过，设计篇对于开发人员不是很重要，所以就用这一篇文章讲完，后面的应用篇会很详细地讲解每一个知识点。    这篇文章会把Material Design设计的一些重点的东西拎出来讲，学完这些，对于开发人员已经足够了，如果你还想了解更细节的东西。请阅读Material Design官方文档。 从下篇文章
Material Design（一）--初识
weixin_45773421的博客
06-03 570
一：Material Design–概述 Material Design – 是将经典的设计原则和科技、创新相结合而创造的设计语言。 Material Design原则 Material 是一种隐喻 通过构建系统化的动效和空间合理化利用，并将两个理念合二为一，构成了实体隐喻。 鲜明、形象、有意义 Material Design 设计语言强调根据用户行为凸显核心功能，进而为用户提供操作指引。 有意义的动画效果 动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定，能够
Material Design介绍
MRYZJ的博客
09-27 689
Material Design介绍 一、Toolbar 说到Toolbar，就要提到ActionBar了，每个活动最顶部的那个标题栏其实就是ActionBar。不过ActionBar由于其设计的原因，被限定只能位于活动的顶部，从而不能实现一些Material Design的效果，因此官方现在已经不再建议使用ActionBar了。 打开AndroidManifest.xml文件看一下，可以看到，这里...
Material Design的概念和认知
yanmeiyan的博客
03-06 976
概述-Introduce Material Design：材料设计语言，在2014年的 Google I/O 上推出的全新的设计语言。 Material Design 能用来干什么？ 旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。 作为谷歌的官方设计语言，不仅能用于安卓设备的 UI 设计上、网页设计、甚至电脑客户端的 UI 都能运用上 。 Google 的 ...
Material Design设计规范
热门推荐
01-13 2万+
Google在I/O 2014上推出了新的设计语言Material Design。Material Design以现实世界的纸墨为隐喻，强调了阴影和层次，用动画效果代表现实的力反馈，试图把物理世界的规则带回电子界面。而就Android 平台而言，Material Design 不像此前的Holo 风格那样深沉，它更加跳动和富有活力。
android studio标题栏改色
最新发布
06-12
在Android Studio中，如果你想更改标题栏的颜色，这个功能实际上是由系统主题和视觉样式控制的，而不是直接在应用程序内部进行自定义。然而，你可以通过调整主题或修改UI来影响标题栏的颜色，通常是在设计模式（Design Mode）或使用Material Design规范时。 以下是一些步骤： 1. **修改主题**: 在Android Studio中，打开`styles.xml`文件，这是应用的主题配置文件。你可以创建一个新的主题，覆盖默认的颜色，比如将`colorPrimary`属性设置为你想要的标题栏颜色。 ```xml <style name="YourTheme" parent="Theme.MaterialComponents.Light.DarkActionBar"> <item name="colorPrimary">@color/your_color_code</item> <item name="colorPrimaryVariant">@color/your_color_code_variant</item> <item name="colorOnPrimary">@color/your_color_on_primary</item> <!-- 添加其他相关颜色属性 --> </style> ``` 记得替换`your_color_code`为你的颜色值。 2. **启用设计模式**: 在`Design`或`Preview`模式下，点击顶部菜单栏的`Toggle Device Preview`，然后选择一个设备模拟器。在模拟器上，你可以看到实时的UI变化，包括标题栏颜色。 3. **使用AppCompat库**: 如果你正在使用AppCompat库，可以在主题中启用`AppCompat`主题，并且AppCompat提供了更多的颜色选项来调整标题栏。 如果你想要更深入地定制Android Studio的外观，你还可以查阅官方文档或使用第三方插件，但请注意这可能会影响到稳定性和兼容性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值