当前位置：首页 > 移动端开发 > 正文内容

Android CoordinatorLayout运用示例记载

邻居的猫1个月前 (12-09)移动端开发344

原文链接: Android CoordinatorLayout运用示例记载-Stars-One的杂货小窝

简略记载下常用CoordinatorLayout的几个作用代码示例,便利后续有需求的时分参照完成

开端之前,注意下项目material 版别,下文说到的某些特点是在后续版别才有的

implementation("com.google.android.material:material:1.9.0")

一级吸顶作用

作用:

代码:

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

    <com.google.android.material.appbar.AppBarLayout
        app:elevation="0dp"
        android:background="#00000000"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:textColor="@color/white"
            android:background="#2BDC70"
            android:gravity="center"
            android:textSize="32sp"
            android:text="翻滚后会躲藏"
            app:layout_scrollFlags="scroll|snap"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:textColor="@color/white"
            android:background="#FD2E54"
            android:gravity="center"
            android:textSize="32sp"
            android:text="固定头部"
            />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:orientation="vertical">
           <TextView
               android:layout_width="match_parent"
               android:text="其他内容"
               android:gravity="center_horizontal"
               android:textColor="@color/white"
               android:textSize="38sp"
               android:layout_height="700dp"
               android:background="#4A8A9E"/>
       </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

翻滚弹性显现标题

作用:

代码:

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:collapsedTitleGravity="start"
            app:contentScrim="#ff0000"
			app:expandedTitleTextColor="#00000000"
            app:collapsedTitleTextColor="@color/white"
            app:expandedTitleGravity="left|bottom"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="240dp"
                android:orientation="vertical"
                app:layout_collapseMode="parallax">

                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:src="@drawable/img" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="当时版别: "
                    android:textColor="#FFFFFF" />
            </LinearLayout>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:title="关于"
                app:titleTextColor="#00000000"
                app:layout_collapseMode="pin" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="700dp"
                android:background="#D88343"
                android:gravity="center"
                android:textColor="#ffffff"
                android:text="这是一个翻滚布局"
                android:textSize="20sp" />
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

layout_behavior特点设置尽管引证的string,但实践上这个string便是一个全类名!

CollapsingToolbarLayout特点弥补

特点名 描绘
app:contentScrim CollapsingToolbarLayout彻底折叠后的布景色彩
app:titleEnabled 是否显现标题
app:title 标题
app:toolbarId toolbar 对应的view id
app:statusBarScrim 折叠后状况栏的布景
app:scrimVisibleHeightTrigger 设置收起多少高度时，显现ContentScrim的内容
app:scrimAnimationDuration 打开状况和折叠状况之间，内容转化的动画时刻
app:expandedTitleTextAppearance 布局打开的时分title的款式
app:expandedTitleMarginTop 布局打开的时分title的margin top
app:expandedTitleMarginStart 布局打开的时分title的margin start
app:expandedTitleMarginEnd 布局打开的时分title的margin end
app:expandedTitleMarginBottom 布局打开的时分title的margin bottom
app:expandedTitleMargin 布局打开的时分title的margin
app:expandedTitleGravity 布局打开的时分title的方位
app:collapsedTitleTextAppearance 布局折叠的时分title的款式
app:collapsedTitleGravity 布局折叠的时分title的gravity
app:expandedTitleTextColor 布局打开的时分title的色彩
app:collapsedTitleTextColor 布局折叠时分title的色彩

翻滚躲藏底部菜单

这儿运用了自定义的behavior来完成

Behavior行为控制器：完成了用户能够在子视图上进行的一个或多个交互。这些交互或许包含拖动，滑动，甩动或任何其他手势。

Behavior中常用的重写的办法:

/**
  * 确认运用Behavior的View要依靠的View的类型
  * 只要是CoordinatorLayout内的View的状况发送了改动,该办法就会履行
  * @param parent     顶层父控件CoordinatorLayout
  * @param child      咱们设置这个Behavior的View
  * @param dependency 值会不断的改动,他会轮询CoordinatorLayout下一切所属的子View
  * @return 这儿判别dependency所属的View是哪一个, 回来true，onDependentViewChanged才履行,不然不履行
  */
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency)

/**
  * 当被依靠的View状况改动时回调
  * @param parent     顶层父控件CoordinatorLayout
  * @param child      咱们设置这个Behavior的View
  * @param dependency 值会不断的改动,他会轮询CoordinatorLayout下一切所属的子View
  * @return 当咱们改动了child的巨细或许方位的时分咱们需求回来true
  */
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency)

/**
  * 当被依靠的View移除时回调
  * @param parent  顶层父控件CoordinatorLayout
  * @param child 咱们设置这个Behavior的View
  * @param dependency 值会不断的改动,他会轮询CoordinatorLayout下一切所属的子View
  */
@Override
public void onDependentViewRemoved(@NonNull CoordinatorLayout parent, @NonNull View child, @NonNull View dependency)

作用(向上滑动时底部控件逐渐躲藏，向下滑动时底部控件逐渐显现):

代码:

package zhan.scollzoomlistview.activity

import android.content.Context
import android.util.AttributeSet
import android.util.Log
import android.view.View
import androidx.coordinatorlayout.widget.CoordinatorLayout
import androidx.coordinatorlayout.widget.CoordinatorLayout.Behavior
import com.google.android.material.appbar.AppBarLayout
import kotlin.math.abs

class MyBehavior: CoordinatorLayout.Behavior<View> {
    constructor() : super()
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)

    override fun layoutDependsOn(
        parent: CoordinatorLayout,
        child: View,
        dependency: View
    ): Boolean {
        //这儿判别dependency所属的View是哪一个,回来true，onDependentViewChanged才履行,不然不履行
        return dependency is AppBarLayout;
    }

    override fun onDependentViewChanged(
        parent: CoordinatorLayout,
        child: View,
        dependency: View
    ): Boolean {
        /*
        *这儿获取dependency的top值,也便是AppBarLayout的top,由于AppBarLayout
        *在是向上滚出界面的,咱们的由于是和AppBarLayout相反,每次都取反
        */
        Log.d("ttt", "onDependentViewChanged: ${dependency.top}")
        val myY = -dependency.top
        child.translationY = myY.toFloat()
        return true
    }

}

解说下:

屏幕坐标以左上角为原点,y正方向为向下,而咱们手指向上滑动,实践AppBarLayout也在向上翻滚(仅仅屏幕不显现了)

AppBarLayout的top便是y,而初始方位top为0,然后其向上翻滚,这个时分的appbarlayout实践top间隔现已变为负数了

而咱们要修正底部菜单的translationY,实践便是相当于原始方位的y坐标偏移

  • 假如 translationY 设置为 50，那么视图的制作方位会相对于它的原始方位向下平移 50 像素。
  • 假如 translationY 设置为 -50，那么视图的制作方位会向上平移 50 像素。

所以:

  • 底部菜单设置正数的translationY,完成的作用便是它向下移动到消失
  • 底部菜单设置负数的translationY,完成的作用便是它向上移动到显现
<?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">

    <com.google.android.material.appbar.AppBarLayout
        app:elevation="0dp"
        android:background="#00000000"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:textColor="@color/white"
            android:background="#2BDC70"
            android:gravity="center"
            android:textSize="32sp"
            android:text="翻滚后会躲藏"
            app:layout_scrollFlags="scroll|snap"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:textColor="@color/white"
            android:background="#FD2E54"
            android:gravity="center"
            android:textSize="32sp"
            android:text="固定头部"
            />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:text="其他内容"
                android:gravity="center_horizontal"
                android:textColor="@color/white"
                android:textSize="38sp"
                android:layout_height="700dp"
                android:background="#4A8A9E"/>
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
	
    <!--  底部菜单,简略写个布局来做比如  -->
    <LinearLayout
        android:layout_gravity="bottom"
        app:layout_behavior="zhan.scollzoomlistview.activity.MyBehavior"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#5AC3E7"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="模仿底部菜单"/>
    </LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

底部菜单的layout_behavior必定要是全类名,不然会呈现溃散问题!

参阅

  • 根据AppBarLayout完成二级吸顶&踩坑记载 - 知乎
  • Android CoordinatorLayout运用 - 掘金

扫描二维码推送至手机访问。

版权声明：本文由51Blog发布，如需转载请注明出处。

本文链接：https://www.51blog.vip/?id=465

标签: Android
分享给朋友：
返回列表

上一篇：鸿蒙安全控件之保存控件简介

下一篇：Harmony 使用开发常用组件介绍

“Android CoordinatorLayout运用示例记载” 的相关文章

手机如何退出开发者模式,全面指南

1. 华为手机： 打开“设置”应用。 进入“系统”或“系统管理”。 选择“开发人员选项”。 关闭“开发者选项”或“USB调试”等选项。2. 小米手机： 打开“设置”应用。 进入“更多设置”或“我的设备”。 选择“开发者选项”。 关闭“开发者选项”或“U...

手机app用什么语言开发,手机APP开发语言选择指南

1. Java：主要用于Android应用开发。Java是一种面向对象的编程语言，具有跨平台性，可以在多个操作系统上运行。2. Kotlin：是Android官方推荐的语言，旨在替代Java。Kotlin与Java完全兼容，同时提供了一些改进，如更简洁的语法和空安全特性。3. Swift：由苹果公司...

华为手机开发者模式,开启、功能与注意事项

华为手机开发者模式是一种高级权限模式，允许用户进行一些系统级别的设置和调试操作。以下是进入华为手机开发者模式的详细步骤： 开启方法1. 进入设置菜单： 在手机主屏幕上找到并点击“设置”图标，或者从底部工具栏中找到“设置”图标。2. 找到“关于手机”： 在设置菜单中，向下滚动并点击“关于手...

鸿蒙os操作系统

鸿蒙os操作系统

华为鸿蒙操作系统（HarmonyOS，也称为鸿蒙OS）是华为公司自主研发的一款面向全场n 2. 设计目标鸿蒙OS的设计目标是解决安卓系统的“卡顿”问题，降低开发者的开发难度，解决智能家居等场Ｋ捎昧宋⒛诤松杓疲岣吡讼低车陌踩院臀榷ㄐ浴n 3. 技术特点鸿蒙OS具有以下几个显著的技术特点： 分...

小米手机稳定版怎么刷成开发版,轻松体验最新功能与优化

小米手机稳定版怎么刷成开发版,轻松体验最新功能与优化

将小米手机从稳定版刷成开发版需要一定的操作步骤和注意事项。以下是一个基本的指南，但请注意，刷机有风险，操作不当可能会导致手机变砖。建议在进行任何操作之前，确保备份好重要数据，并遵循官方指南。1. 解锁Bootloader： 访问小米官网解锁页面，按照官方指引申请解锁权限。 下载并安装小米...

至尊鸿蒙道,神秘宇宙的修炼奥秘

至尊鸿蒙道,神秘宇宙的修炼奥秘

《鸿蒙至尊道》是天煞血少创作的一部仙侠小说，发表于起点中文网。以下是该小说的详细介绍： 小说简介《鸿蒙至尊道》的故事背景设定在一个天道崩塌、灵气稀薄的世界，修仙长生之路已经变得艰难。小说的主人公李元穿越到洪荒时代，成为女娲造人的三千人族之一。他开局即成为仙人，但却面临着妖族的屠杀，最终成为人族之祖。...

Copyright © 2024-2028 51blog All Rights Reserved

XML地图