android 滑动卡片 背景色,android 实现吸附悬停效果并实现滑动模块改变view的背景色...

实现效果:

371c2fecc445

e34371e415200a2fca9abca544d47ea7.gif

使用CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、TabLayout来实现想要的效果

布局的实现:

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/topView"

android:layout_width="match_parent"

android:layout_height="40dp"

android:background="@android:color/holo_red_dark" />

android:id="@+id/coordLay"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/tabLay"

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:layout_scrollFlags="scroll|exitUntilCollapsed"

app:title="123"

app:titleEnabled="false">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

android:id="@+id/oneView"

android:layout_width="match_parent"

android:layout_height="100dp"

android:background="@color/colorPrimary" />

android:id="@+id/twoView"

android:layout_width="match_parent"

android:layout_height="100dp"

android:background="@color/colorPrimaryDark" />

android:id="@+id/threeView"

android:layout_width="match_parent"

android:layout_height="100dp"

android:background="@android:color/holo_green_dark" />

android:id="@+id/tabContent"

android:layout_width="match_parent"

android:layout_height="40dp"

android:background="@android:color/holo_purple">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="惊喜呀" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="惊喜呀" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="惊喜呀" />

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:src="@mipmap/ic_launcher" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:src="@mipmap/ic_launcher" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:src="@mipmap/ic_launcher" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:src="@mipmap/ic_launcher" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:src="@mipmap/ic_launcher" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:src="@mipmap/ic_launcher" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:src="@mipmap/ic_launcher" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:src="@mipmap/ic_launcher" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:src="@mipmap/ic_launcher" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:src="@mipmap/ic_launcher" />

acitivity的代码:

import android.annotation.SuppressLint

import android.graphics.Color

import android.graphics.drawable.GradientDrawable

import android.os.Bundle

import android.util.Log

import androidx.appcompat.app.AppCompatActivity

import com.google.android.material.appbar.AppBarLayout

import kotlinx.android.synthetic.main.activity_coordinator_scroll_view.*

import kotlin.math.abs

/**

*@Created by wrs on 2020/10/26,11:59

*@Description: 协调者布局滑动监听测试

*/

class CoordinatorScrollActivity : AppCompatActivity(),AppBarLayout.OnOffsetChangedListener {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_coordinator_scroll_view)

initView()

initListener()

}

@SuppressLint("WrongConstant")

private fun initView() {

//实现背景颜色的渐变

val waterColors = intArrayOf(

Color.parseColor("#D3BEFF"),

Color.parseColor("#9BABFD"),

Color.parseColor("#5C97FB")

)

val drawable = GradientDrawable()

drawable.gradientType = GradientDrawable.RECTANGLE

drawable.cornerRadius = 0f

drawable.orientation = GradientDrawable.Orientation.LEFT_RIGHT

drawable.colors = waterColors

topView.background = drawable

}

private fun initListener() {

coordLay.setOnScrollChangeListener { view, scrollX, scollY, oldScrollX, oldScrollY ->

Log.e("tag","scrollX:$scrollX scollY:$scollY")

Log.e("tag","oldScrollX:$oldScrollX oldScrollY:$oldScrollY")

}

tabLay.addOnOffsetChangedListener(this)

}

@SuppressLint("WrongConstant")

override fun onOffsetChanged(bar: AppBarLayout?, height: Int) {

val heghtScroll = abs(height)

val oneHeight = oneView.height

val twoHeight = twoView.height

val threeHeight = threeView.height

val fourHeight = tabContent.height

if (heghtScroll == 0){

Log.e("tag","$height******头部")

initView()

}else if (heghtScroll in 1..oneHeight){

Log.e("tag","$height******第一部分0~300")

topView.setBackgroundColor(resources.getColor(R.color.colorPrimary))

}else if (heghtScroll in (oneHeight+1) .. (oneHeight+twoHeight)){

Log.e("tag","$height******第二部分300~600")

// topView.setBackgroundColor(resources.getColor(R.color.colorPrimaryDark))

initView()

}else if (heghtScroll in (oneHeight+twoHeight+1) until (oneHeight+twoHeight+threeHeight)){

Log.e("tag","$height******第三部分600~900")

topView.setBackgroundColor(resources.getColor(android.R.color.holo_green_dark))

}else if (heghtScroll == oneHeight+twoHeight+threeHeight){

Log.e("tag","$height******第四部分900以上")

topView.setBackgroundColor(resources.getColor(android.R.color.holo_purple))

}else{

Log.e("tag","******$height******")

}

}

override fun onDestroy() {

super.onDestroy()

tabLay.removeOnOffsetChangedListener(this)

}

}

AppBarLayout的addOnOffsetChangedListener监听有点儿耗性能

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值