美文网首页Android-CoordinatorLayout.……
android 实现吸附悬停效果并实现滑动模块改变view的背景

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

作者: hao_developer | 来源:发表于2020-10-30 10:05 被阅读0次

    实现效果:

    e34371e415200a2fca9abca544d47ea7.gif
    使用CoordinatorLayoutAppBarLayoutCollapsingToolbarLayoutTabLayout来实现想要的效果

    布局的实现:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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"
        android:orientation="vertical">
    
        <View
            android:id="@+id/topView"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@android:color/holo_red_dark" />
    
        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:id="@+id/coordLay"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/tabLay"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
    
                <com.google.android.material.appbar.CollapsingToolbarLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed"
                    app:title="123"
                    app:titleEnabled="false">
    
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">
    
                        <View
                            android:id="@+id/oneView"
                            android:layout_width="match_parent"
                            android:layout_height="100dp"
                            android:background="@color/colorPrimary" />
    
                        <View
                            android:id="@+id/twoView"
                            android:layout_width="match_parent"
                            android:layout_height="100dp"
                            android:background="@color/colorPrimaryDark" />
    
                        <View
                            android:id="@+id/threeView"
                            android:layout_width="match_parent"
                            android:layout_height="100dp"
                            android:background="@android:color/holo_green_dark" />
    
                    </LinearLayout>
    
                </com.google.android.material.appbar.CollapsingToolbarLayout>
    
                <com.google.android.material.tabs.TabLayout
                    android:id="@+id/tabContent"
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:background="@android:color/holo_purple">
    
                    <com.google.android.material.tabs.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="惊喜呀" />
    
                    <com.google.android.material.tabs.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="惊喜呀" />
    
                    <com.google.android.material.tabs.TabItem
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="惊喜呀" />
    
                </com.google.android.material.tabs.TabLayout>
    
            </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">
    
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/ic_launcher" />
    
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/ic_launcher" />
    
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/ic_launcher" />
    
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/ic_launcher" />
    
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/ic_launcher" />
    
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/ic_launcher" />
    
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/ic_launcher" />
    
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/ic_launcher" />
    
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/ic_launcher" />
    
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/ic_launcher" />
    
                </LinearLayout>
    
            </androidx.core.widget.NestedScrollView>
    
        </androidx.coordinatorlayout.widget.CoordinatorLayout>
    
    </LinearLayout>
    

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

    AppBarLayoutaddOnOffsetChangedListener监听有点儿耗性能

    相关文章

      网友评论

        本文标题:android 实现吸附悬停效果并实现滑动模块改变view的背景

        本文链接:https://www.haomeiwen.com/subject/sbirvktx.html