7.QMUI----QMUICollapsingTopBarLayout的用法 (头部布局)

最新推荐文章于 2023-05-30 16:22:16 发布

路上风景独好

最新推荐文章于 2023-05-30 16:22:16 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

分类专栏： QMUI

本文链接：https://blog.youkuaiyun.com/qq_31309689/article/details/79291314

QMUI 专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何在项目中引入QMUI库，并重点讲解了QMUICollapsingTopBarLayout的使用方法，包括从JCenter仓库配置依赖到具体布局的实现步骤。

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

1. 引入库

1.最新的库会上传到 JCenter 仓库上，请确保配置了 JCenter 仓库源，然后直接引用：

compile 'com.qmuiteam:qmui:1.0.6'

至此，QMUI 已被引入项目中。

2.需要引用QMUI的样式

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">

<style name="AppTheme" parent="QMUI.Compat.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

2.QMUICollapsingTopBarLayout的用法

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

    <com.qmuiteam.qmui.widget.QMUIAppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true">

        <com.qmuiteam.qmui.widget.QMUICollapsingTopBarLayout
            android:id="@+id/collapsing_topbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:qmui_collapsedTitleGravity="center"
            app:qmui_contentScrim="?attr/qmui_config_color_blue"
            app:qmui_expandedTitleGravity="center_horizontal|bottom"
            app:qmui_expandedTitleMarginBottom="20dp"
            app:qmui_statusBarScrim="?attr/qmui_config_color_blue">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:contentDescription="@string/common_example"
                android:fitsSystemWindows="false"
                android:scaleType="centerCrop"
                android:src="@mipmap/qd_show_img_1"
                app:qmui_layout_collapseMode="parallax"
                app:qmui_layout_collapseParallaxMultiplier="0.7"/>

            <com.qmuiteam.qmui.widget.QMUITopBar
                android:id="@+id/topbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/qmui_topbar_height"
                android:fitsSystemWindows="true"
                app:qmui_layout_collapseMode="pin"
                app:qmui_topbar_bg_color="@color/qmui_config_color_transparent"
                app:qmui_topbar_need_separator="false"/>
        </com.qmuiteam.qmui.widget.QMUICollapsingTopBarLayout>
    </com.qmuiteam.qmui.widget.QMUIAppBarLayout>

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

2.用法：

QMUICollapsingTopBarLayout mCollapsingTopBarLayout=findViewById(R.id.collapsing_topbar_layout);

mCollapsingTopBarLayout.setTitle("这是标题");