动图展示app:layout_scrollFlags的5种滑动属性

在学习这5种滑动属性之前你需要知道的基础知识:

CoordinatorLayout,AppBarLayout

在刚开始接触CoordinatorLayout的时候我是一脸蒙逼的,心里在想”啥玩意?怎么要记这么多东西呀?”可是真的当我明白每个的用法的时候你会觉得这是多么奇妙啊

就跟你刚玩LOL的时候还在纳闷怎么要按那么多键?Q,W,E,R,P,B,D,F,手都忙不过来,但是当你真的熟练的时候你会发现么每个地方都有他的功能,带着这种态度去学习就不害怕了

CoordinatorLayout=AppBarLayout+RecyclerView

公式这么写不太严谨但是大家看起来可能会一目了然,大致明白他的意思,我们平时滑动的时候会遇到RecyclerView上部跟着一起滑动的需求(我第一次遇到是在微博的发现里面),这个时候手动处理滚动监听是一件非常复杂的事,这个时候用CoordinatorLayout就会很简单,AppBarLayout里面是RecyclerView上部的布局,这样RecyclerView滑动的时候上部的布局也会跟着滑动了,非常Material Design

大致基础普及到这里,开始进入我们的主题,先看下我们没有设置任何滑动属性的时候的原始代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.coordinator.MainActivity">
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            <android.support.design.widget.TabLayout
                android:background="@color/colorAccent"
                android:layout_width="match_parent"
                android:layout_height="100dp" />
        </android.support.design.widget.AppBarLayout>
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerview"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>

代码很简单,RecyclerView上面有一个红色的TabLayout

效果图如下:

这里写图片描述

我们发现只有RecyclerView在动,而TabLayout无论如何都不滚动

1 app:layout_scrollFlags=”scroll”

我们在TabLayout的属性里面添加上面这句话

这里写图片描述

我们发现RecyclerView向上滚动的时候,TabLayout也跟着滚动,等到TabLayout滚出屏幕之后RecyclerView还在继续滚动,下拉的时候等到拉到RecyclerView的头部TabLayout才会进入屏幕。

2 app:layout_scrollFlags=”scroll|enterAlways”

这五种属性有一个很操蛋的地方就是有的属性必须在声明其他属性之后才可以使用,下面的属性也是scroll开头,如果不声明scroll其他的都不好使。

这里写图片描述

这个属性和scroll唯一不同的地方是,只要往下拉,TabLayout就会显示出来,不必等着RecyclerView到顶部才可以显示

3 app:layout_scrollFlags=”scroll|enterAlways|enterAlwaysCollapsed”

TabLayout属性改为下面:

 <android.support.design.widget.TabLayout
                    app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                    android:background="@color/colorAccent"
                    android:minHeight="50dp"
                    android:layout_height="100dp"
                    android:layout_width="match_parent"
    />

为了让变化更加直观,我让TabLayout的高度变成了100dp

这里写图片描述

滚出屏幕时还是和以前一样,但是滚入屏幕时,TabLayout会和RecyclerView一起滚入50dp,然后等RecyclerView滚入到边界的时候再滚入剩下的50dp

4 app:layout_scrollFlags=”scroll|exitUntilCollapsed”

 <android.support.design.widget.TabLayout
                    app:layout_scrollFlags="scroll|exitUntilCollapsed"
                    android:background="@color/colorAccent"
                    android:minHeight="50dp"
                    android:layout_height="100dp"
                    android:layout_width="match_parent" />

这里写图片描述

有滚入限制就会有滚出限制,如图所示,TabLayout不能完全滚出屏幕,最少也得留在屏幕上50dp,当滚入屏幕时,等RecyclerView到达边界的时候才会继续滚入

5 app:layout_scrollFlags=”scroll|snap”

将TabLayout的其他属性恢复到原始代码

这里写图片描述

这个属性很简单,就是设置吸附性效果,当你滚动TabLayout不足一半高度的时候就会回弹,高于一半的时候就会全部隐藏(即要么全部显示,要么全部隐藏)

最后要强调的是:

这5个属性不是独立使用的,有的属性必须要包含其他属性才可以使用

  • 30
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/round_style" android:elevation="4dp" android:layout_margin="8dp" android:padding="10dp"> <com.xuexiang.xui.widget.textview.autofit.AutoFitTextView style="@style/item_show_title" android:id="@+id/spec" android:paddingTop="2dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"/> <com.xuexiang.xui.widget.textview.autofit.AutoFitTextView style="@style/item_show_title" android:id="@+id/style" app:layout_constraintStart_toEndOf="@+id/spec" app:layout_constraintTop_toTopOf="parent"/> <com.xuexiang.xui.widget.textview.autofit.AutoFitTextView style="@style/item_show_title" android:id="@+id/name" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/spec"/> <com.xuexiang.xui.widget.textview.autofit.AutoFitTextView style="@style/item_show_title" android:id="@+id/real_inventory" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/name"/> <com.xuexiang.xui.widget.textview.autofit.AutoFitTextView style="@style/item_show_title" android:id="@+id/check_inventory" app:layout_constraintStart_toEndOf="@+id/real_inventory" app:layout_constraintTop_toBottomOf="@+id/name"/> <ImageView android:id="@+id/status" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toBottomOf="@+id/name" app:layout_constraintTop_toTopOf="parent" /> <View style="@style/item_show" android:id="@+id/view_task_list" android:layout_width="match_parent" android:layout_height="1dp" android:background="#cccccc" android:layout_marginTop="3dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toBottomOf="@+id/real_inventory" app:layout_constraintStart_toStartOf="@+id/real_inventory"/> </androidx.constraintlayout.widget.ConstraintLayout>加入button功能,但并不影响源码
06-03

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值