Kotlin实现详情页效果

效果图如下：

核心代码：

class MainActivity : AppCompatActivity() {
    private lateinit var pictureAdapter: DetailBannerAdapter
    private lateinit var goodAdapter: GoodAdapter
    private var pictureSize = 0
    private val pic1 = "https://img0.baidu.com/it/u=3026939796,485761977&fm=26&fmt=auto&gp=0.jpg"
    private val pic2 = "https://img0.baidu.com/it/u=3348901843,1771497252&fm=26&fmt=auto&gp=0.jpg"
    private val pic3 = "https://img1.baidu.com/it/u=1854853755,697259050&fm=26&fmt=auto&gp=0.jpg"


    private val image1 =
        "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=153960715,2502274764&fm=26&gp=0.jpg"
    private val image2 =
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1002886338,3952456142&fm=26&gp=0.jpg"
    private val image3 =
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1568028465,3811484724&fm=26&gp=0.jpg"
    private val image4 =
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3804022019,516515349&fm=26&gp=0.jpg"


    private val picList = mutableListOf<String>()
    private var goodList = mutableListOf<GoodBean>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        StatusBarUtil.immersive(window)
        initData()
        initViewPager()
        appBar.addOnOffsetChangedListener(object : AppBarLayout.OnOffsetChangedListener {
            override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
                appBarLayout?.post {
                    val offset = abs(verticalOffset) //目的是将负数转换为绝对正数；
                    //标题栏的渐变
                    toolBar.alpha = abs(verticalOffset * 1.0f) / appBarLayout.totalScrollRange
                    tvTitle.alpha = abs(verticalOffset * 1.0f) / appBarLayout.totalScrollRange
//          当前最大高度偏移值除以2 在减去已偏移值 获取浮动 先显示在隐藏

                    if (offset < appBarLayout.totalScrollRange / 2) {
                        toolBar.alpha =
                            (appBarLayout.totalScrollRange / 2 - offset * 1.0f) / (appBarLayout.totalScrollRange / 2)
                    } else if (offset > appBarLayout.totalScrollRange / 2) {
                        toolBar.alpha =
                            (offset - appBarLayout.totalScrollRange / 2) * 1.0f / (appBarLayout.totalScrollRange / 2)
                    }
                }
            }

        })

        tvTitle.text = "不小心步入你的温柔圈套"
    }

    private fun initData() {
        picList.clear()
        picList.apply {
            add(pic1)
            add(pic2)
            add(pic3)
        }
        pictureSize = picList.size
        goodList.clear()
        goodList.apply {
            add(GoodBean("太阳有点烧", "不只是否我太上脑", image1, "100"))
            add(GoodBean("心跳 往上冒", "阻止不了地在舞蹈", image2, "200"))
            add(GoodBean("不小心步入了你温柔圈套", "不知道 不明了还能否逃跑", image3, "300"))
            add(GoodBean("碰巧不需要你过多的打扰", "我只要 你一个微笑就好", image4, "400"))
            add(GoodBean("你在我指尖发梢 环绕", "你在跟我玩闹 chill out", image1, "500"))
            add(GoodBean("你不在乎我要 多少", "呼吸你的味道 刚好", image2, "600"))
            add(GoodBean("你在我脑海围绕 奔跑", "让我的心燃烧 失焦", image3, "700"))
            add(GoodBean("你让我的心跳 停掉", "感觉有点微妙 不好", image4, "800"))
        }

        goodAdapter = GoodAdapter()
        recyclerview.apply {
            adapter = goodAdapter
            layoutManager = LinearLayoutManager(this@MainActivity)
        }

        goodAdapter.setNewData(goodList)
        Handler().postDelayed({
            recyclerview.visibility = View.VISIBLE
            iv_checking_progress.visibility = View.INVISIBLE
            iv_hotel_tips.visibility = View.INVISIBLE
            tvTip.visibility = View.INVISIBLE
        }, 500)
    }

    private fun initViewPager() {
        pictureAdapter = DetailBannerAdapter(this, listOf())
        viewPagerHotel.adapter = pictureAdapter
        viewPagerHotel.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
            private var canJump = false
            override fun onPageScrollStateChanged(state: Int) {
                if (state == ViewPager.SCROLL_STATE_SETTLING) {
                    if (canJump) {
                        viewPagerHotel.post {
                            viewPagerHotel.currentItem = 5
                        }
                    }

                }
            }

            override fun onPageScrolled(
                position: Int, positionOffset: Float, positionOffsetPixels: Int
            ) {
                canJump = if (position == 5) {
                    positionOffsetPixels > 50
                } else {
                    false
                }
            }

            override fun onPageSelected(position: Int) {
                tvCurrentPicturePosition.text = "${position + 1}/$pictureSize"
            }

        })

        pictureAdapter.setNewData(picList)
    }
}

<?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
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFF4F6FC">

        <include layout="@layout/layout_hotel_info_header"/>

        <LinearLayout
            android:id="@+id/llFilter"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#fff"
            android:orientation="vertical"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="@dimen/padding_common_h">

                <TextView
                    android:id="@+id/tvTotalNight"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/padding_common"
                    android:background="@drawable/bg_total_night"
                    android:gravity="center"
                    android:includeFontPadding="false"
                    android:paddingStart="@dimen/padding_common"
                    android:paddingEnd="@dimen/padding_common"
                    android:textColor="#FF8D94A9"
                    android:textSize="13sp"
                    app:layout_constraintBottom_toBottomOf="@+id/tvCheckInTime"
                    app:layout_constraintStart_toEndOf="@+id/tvCheckInTime"
                    app:layout_constraintTop_toTopOf="@+id/tvCheckInTime"
                    android:text="共1晚" />

                <TextView
                    android:id="@+id/tvCheckIn"
                    android:layout_width="67dp"
                    android:layout_height="wrap_content"
                    android:includeFontPadding="false"
                    android:text="开始"
                    android:textSize="12sp"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/tvCheckOut"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:includeFontPadding="false"
                    android:text="结束"
                    android:textSize="12sp"
                    app:layout_constraintBottom_toTopOf="@+id/tvCheckOutTime"
                    app:layout_constraintEnd_toEndOf="@+id/tvCheckOutTime"
                    app:layout_constraintStart_toStartOf="@+id/tvCheckOutTime"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/tvCheckInTime"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:fontFamily="sans-serif-medium"
                    android:includeFontPadding="false"
                    android:textColor="#292929"
                    android:textSize="17sp"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/tvCheckIn"
                    android:text="10月23日" />


                <TextView
                    android:id="@+id/tvCheckOutTime"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/padding_common"
                    android:layout_marginTop="2dp"
                    android:fontFamily="sans-serif-medium"
                    android:textColor="#292929"
                    android:textSize="17sp"
                    app:layout_constraintBottom_toBottomOf="@id/tvCheckInTime"
                    app:layout_constraintStart_toEndOf="@+id/tvTotalNight"
                    app:layout_constraintTop_toTopOf="@+id/tvCheckInTime"
                    android:text="10月24日" />

                <TextView
                    android:id="@+id/tv_change_date"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:drawableEnd="@drawable/ic_arrow_grey_right"
                    android:text="修改日期"
                    android:textColor="#FF8D94A9"
                    android:textSize="12sp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

            </androidx.constraintlayout.widget.ConstraintLayout>

            <LinearLayout
                android:id="@+id/ll_fast_filter"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:visibility="visible"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <View
                    android:id="@+id/lineTime"
                    android:layout_width="match_parent"
                    android:layout_height="0.5dp"
                    android:layout_marginStart="8dp"
                    android:background="#FFF4F6FC" />

                <RelativeLayout
                    android:id="@+id/rlFilter"
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:visibility="gone">

                    <androidx.recyclerview.widget.RecyclerView
                        android:id="@+id/rvFastFilter"
                        android:layout_width="match_parent"
                        android:layout_height="30dp"
                        android:layout_centerVertical="true"
                        android:paddingStart="@dimen/padding_common_h"
                        android:paddingEnd="@dimen/padding_common_h"
                        tools:listitem="@layout/item_hotel_fast_filter" />

                    <RelativeLayout
                        android:layout_width="86dp"
                        android:layout_height="match_parent"
                        android:layout_alignParentEnd="true"
                        android:background="#fff"
                        android:visibility="gone">

                        <TextView
                            android:id="@+id/tvFilter"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerInParent="true"
                            android:gravity="center"
                            android:includeFontPadding="false"
                            android:text="筛选"
                            android:textColor="#292929" />

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerVertical="true"
                            android:layout_toEndOf="@id/tvFilter"
                            android:src="@drawable/ic_sort_unselected_black" />
                    </RelativeLayout>

                </RelativeLayout>
            </LinearLayout>

        </LinearLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <include
        layout="@layout/layout_hotel_info_content" />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

源码地址：https://download.csdn.net/download/jingerlovexiaojie/18553988