`
l540151663
  • 浏览: 185687 次
  • 性别: Icon_minigender_1
  • 来自: 浙江
社区版块
存档分类
最新评论

关于Material Design的CollapsingToolbarLayout初次使用

 
阅读更多
最近了解了下CollapsingToolbarLayout的使用。

xml代码如下:
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="#30469b"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView

                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <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>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="none" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

属性layout_scrollFlags:想滑动 必须添加scroll值。
属性expandedTitleMarginStart:左侧边距。
属性contentScrim:折叠后的背景颜色。
属性layout_collapseMode:折叠模式 pin为折叠后toolbar保留。parallax为折叠后色差消失。
属性layout_collapseParallaxMultiplier:色差系数。
属性layout_behavior:相应CollapsingToolbarLayout的layout_scrollFlags事件。
分享到:
评论

相关推荐

    Material Design控件的使用

    本篇文章将深入探讨如何在项目中使用Material Design控件。 一、Material Design控件介绍 Material Design提供了丰富的UI组件,如按钮、输入框、滑块、开关、底部导航栏等。这些控件遵循一套统一的设计规范,确保...

    Material Design相关demo

    这个“Material Design相关demo”很可能是包含了使用Material Design组件的一些示例代码,帮助开发者理解和实践如何在自己的应用中集成这些组件。 在Material Design中,RecycleView是一种高效的数据列表视图,它...

    android material design实现demo

    2. **Widget 示例**:演示如何使用 Material Design 组件,如 `MaterialButton`, `TextInputLayout`, `BottomNavigationView` 等。 3. **主题和颜色**:可能包含自定义主题和颜色方案,以体现 Material Design 的...

    material design libaray demo

    使用Material Design Library Demo可以帮助开发者创建与用户预期一致的应用界面,从而提高用户满意度和留存率。 总之,Material Design Library Demo是一个宝贵的资源,对希望遵循Material Design指南的Android...

    C# WPF MaterialDesignInXAML样式库和控件集 源码

    3. 使用控件:在XAML布局文件中,使用Material Design控件替换原生WPF控件,如`&lt;materialDesign:Card&gt;`代替`&lt;Border&gt;`。 五、示例与实践 为了更好地理解和运用MaterialDesignInXamlToolkit,开发者可以创建一个...

    MaterialDesignInXaml.Examples-master.zip

    通过研究这个压缩包中的例子,开发者不仅可以了解如何在WPF应用中使用MaterialDesignInXaml,还可以学习到关于WPF、MVVM模式以及如何编写高质量代码的最佳实践。 总的来说,"MaterialDesignInXaml.Examples-master...

    Android Material Design 中文版

    原质化设计(Material Design)中文版 完整版 Google I/O 2014 发布的 Material Design 势必将会成为统一 Android Mobile、Android Table、Desktop Chrome 等全平台设计语言规范,对从业人员意义重大

    Material Design风格登录界面

    Material Design风格登录界面是当前移动应用设计的一种流行趋势,它由Google提出,旨在提供一致、直观且富有表现力的用户体验。这种设计语言以其简洁、现代的视觉效果和交互模式受到开发者和用户的一致好评。在...

    WPF =&gt;MaterialDesign工具

    WPF =&gt;MaterialDesign工具

    MaterialDesign-Webfont-master.zip

    MaterialDesign-Webfont-master.zip 是一个包含Material Design Webfont资源的压缩包,旨在帮助开发者轻松地在网页项目中集成Material Design风格的图标。Material Design是由Google推出的一种现代化、统一的设计...

    android-material-design

    在Android应用中采用Material Design,可以使用一系列自定义控件来实现这一设计风格。这些控件通常包括但不限于: 1. **FloatingActionButton**:悬浮操作按钮,一个圆形的按钮,常位于屏幕边缘,用于触发主要的或...

    Android开发MaterialDesign设计风格UI示例演示集

    1. **颜色系统**:Material Design强调使用色彩来表达品牌和功能。颜色方案包括主色、副色以及各种色调,用于突出界面元素、创建背景和提供反馈。开发者可以使用`Color`类和`ColorPalette`来管理和使用这些颜色。 2...

    MaterialDesign.zip

    MaterialDesign.zip是一个包含关于Material Design实现的资源包,主要展示了如何在Android开发中应用这一设计规范。Material Design是由Google推出的现代设计语言,旨在提供统一、跨平台的设计体验,强调层次感、...

    Android代码-关于 Material Design 的一切资料

    最全面的 Material Design 学习资料 &gt;本人目前正在找工作,想了解我的详细情况请移步到我的 网页版...Material Design 使用教程 Material Design 官网 Material Design 中文版(极客学院) Material Design 最新中文版 A

    Material Design 壁纸.zip

    Material Design提倡使用易读的字体,合理的行距和字间距,以及清晰的标题和副标题层次。虽然壁纸可能不直接涉及文字,但其布局和构图可能反映了Material Design对对齐和比例的注重。 动画是Material Design的另一...

    Material Design的各种效果

    1. **颜色系统**:Material Design使用了一套系统化的颜色方案,包括主色、次要色和背景色等。开发者可以通过代码设置颜色主题,以体现品牌的视觉识别。 2. **组件(Components)**:Material Design包含了许多预定...

    Android之Material Design兼容使用

    在"Android之Material Design兼容使用"中,源码可能展示了如何将DrawerLayout和Toolbar结合使用,以创建一个符合Material Design规范的Android应用。具体实现步骤可能包括以下几点: 1. 引入依赖:首先在项目的...

    Android 低版本实现Material Design侧滑和floatingButton效果

    - 确保在`build.gradle`文件中正确配置依赖,添加appcompat_v7库,这样可以使用`Theme.AppCompat`主题,它提供了与Material Design类似的外观。 - 对于颜色、字体、阴影等视觉元素,需要检查它们在低版本上的表现...

    MaterialDesign应用

    1. **颜色系统**:Material Design使用了一套灵活的颜色系统,允许开发者创建品牌独特的调色板。在"MDDemo"中,我们可能会看到不同颜色的使用来区分功能区域,或者通过色彩来传达信息的重要性。 2. **动画与过渡**...

    Visual Studio 2017 C#WPF用MaterialDesign实现工控界面.rar

    在本文中,我们将深入探讨如何使用Visual Studio 2017、C#和WPF结合MaterialDesign库来创建一个工控界面。MaterialDesign是一种现代化的用户界面设计风格,源自谷歌的Material Design规范,它提供了丰富的视觉效果和...

Global site tag (gtag.js) - Google Analytics