Android-CoordinatorLayout.……

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

2020-10-30  本文已影响0人  hao_developer

实现效果:

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监听有点儿耗性能

上一篇下一篇

猜你喜欢

热点阅读