Android仿智聯(lián)詳情

很久沒有發(fā)文章了测蘑，這一年多一直在卷灌危。最近由于疫情的原因，很多公司都在給員工發(fā)“畢業(yè)證”碳胳，我也很榮幸拿到了“畢業(yè)證”勇蝙。不知道是應該開心還是桑心，北京最近因為疫情基本都居家辦公固逗，而我也開始了做簡歷浅蚪，刷面試題的道路。??

最近在投簡歷的時候發(fā)現(xiàn)智聯(lián)招聘的公司詳情頁設計的很有意思烫罩，雖然很簡單惜傲，但是也忍不住仿一下，

智聯(lián)的效果

zhilian.gif

仿的效果（基本效果一致）

custom.gif

效果需求分析：
1贝攒、剛進入界面時盗誊，“在招職位”布局在底部露頭，并距離屏幕左邊一半屏幕寬度的距離隘弊。
2哈踱、當詳情滑動到最底部，然后再向上滑動時梨熙，展開“在招職位”布局开镣。
3、“在招職位”布局支持手勢拖動咽扇，向上時布局距離屏幕左邊越來越近（最終距離屏幕左邊距離為0）邪财，向下時布局距離越來越遠（最終是屏幕的寬度的一半）陕壹。

根據(jù)上面的分析，主要的功能其實就是這個“在招職位”布局的收起和展開树埠，默認收起糠馆，然后手勢控制展開。說到這里其實我們就知道如何實現(xiàn)了怎憋，那就是behavior又碌，它默認已經(jīng)給我們處理了收起展開狀態(tài)及拖動操作，我們只需要監(jiān)聽拖動和狀態(tài)來設置布局的位置變化就可以了绊袋。開干~

為了省事底部布局我就直接截圖放到布局了

XML

<?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"
    android:background="#0099cc">
    <androidx.core.widget.NestedScrollView
        android:id="@+id/scrollview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <androidx.appcompat.widget.AppCompatImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            app:srcCompat="@drawable/icon_detail_zhilian" />
    </androidx.core.widget.NestedScrollView>
    <androidx.appcompat.widget.LinearLayoutCompat
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingTop="50dp"
        android:visibility="visible"
        app:behavior_hideable="true"
        app:behavior_peekHeight="110dp"
        app:layout_behavior="@string/bottom_sheet_behavior"
        tools:ignore="MissingPrefix">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@drawable/shape_header">

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/layout_bottom_sheet"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:gravity="center"
                android:orientation="vertical"
                android:text="在招職位-54個"
                android:textColor="@android:color/black"
                android:textSize="14sp"
                android:layout_margin="24dp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/drag"
                android:layout_width="16dp"
                android:layout_height="16dp"
                android:layout_margin="8dp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@mipmap/ic_launcher_round" />
        </androidx.constraintlayout.widget.ConstraintLayout>
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </androidx.appcompat.widget.LinearLayoutCompat>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Activity

package com.study.fangdemo.zhilian

import android.os.Bundle
import android.view.MotionEvent
import android.view.View
import android.view.ViewConfiguration
import android.view.ViewGroup.MarginLayoutParams
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.isVisible
import com.google.android.material.bottomsheet.BottomSheetBehavior
import com.google.android.material.bottomsheet.BottomSheetBehavior.*
import com.study.fangdemo.databinding.ActivityMainBinding
import com.study.fangdemo.utils.RecyclerDataUtils


class ZhiLianActivity : AppCompatActivity() {
    private var binding: ActivityMainBinding? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding?.root)
        initView()
        initListener()

    }

    private fun initListener() {
        val behavior = from(binding!!.bottomSheet)
        behavior?.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
            override fun onStateChanged(bottomSheet: View, newState: Int) {
                //左邊圖標顯示
                binding?.drag?.isVisible = true
                when (newState) {
                    STATE_DRAGGING -> {}
                    STATE_SETTLING -> {}
                    STATE_EXPANDED -> {
                        //展開狀態(tài)時隱藏左邊圖標
                        binding?.drag?.isVisible = false
                    }
                    STATE_COLLAPSED -> {}
                    STATE_HIDDEN -> {}
                    STATE_HALF_EXPANDED -> {}
                }
            }

            override fun onSlide(bottomSheet: View, slideOffset: Float) {
                val width = windowManager.defaultDisplay.width
                val margin = ((0.5 - slideOffset / 2) * width).toInt()
                margin(bottomSheet, margin)
            }
        })

        //詳情滑動到底部 再往上滑動時展開
        binding?.scrollview?.setOnTouchListener(object : View.OnTouchListener {
            var startX: Float = 0.0f
            var startY: Float = 0.0f
            var offsetX: Float = 0.0f
            var offsetY: Float = 0.0f
            var touchSlop = ViewConfiguration.get(baseContext).scaledTouchSlop
            override fun onTouch(view: View?, event: MotionEvent?): Boolean {
                when (event?.action) {
                    MotionEvent.ACTION_DOWN -> {
                        startX = event.x
                        startY = event.y

                    }
                    MotionEvent.ACTION_UP -> {
                        offsetX = event.x - startX
                        offsetY = event.y - startY
                        if (Math.abs(offsetX) > Math.abs(offsetY)) {
                            // left
                            if (offsetX < -touchSlop) {

                            }
                            // right
                            else if (offsetX > touchSlop) {
                            }
                        } else {
                            // up
                            if (offsetY < -touchSlop) {
                                if (isScrollViewEnd()) {
                                    behavior.state = STATE_EXPANDED
                                }
                            }
                            // down
                            else if (offsetY > touchSlop) {
                            }
                        }
                    }
                }
                return false
            }

        })

    }

    /**
     * NestedScrollView 是否滾動到底部
     */
    private fun isScrollViewEnd(): Boolean {
        binding?.apply {
            var scrollY = scrollview?.scrollY
            var onlyChild = scrollview?.getChildAt(0)
            if (onlyChild?.height!! <= (scrollY!! + scrollview?.height!!)) {
                return true
            }
        }
        return false
    }

    private fun initView() {
        binding?.apply {
            //設置測試列表數(shù)據(jù)
            RecyclerDataUtils.setRecyclerAdater(baseContext, recyclerview, "測試數(shù)據(jù)", 30)

            //設置屏幕寬
            bottomSheet?.post {
                val params = bottomSheet.layoutParams
                params.width = windowManager.defaultDisplay.width
                bottomSheet.layoutParams = params
            }

            //默認外左邊距是屏幕寬度一半
            margin(bottomSheet, windowManager.defaultDisplay.width / 2)
        }

    }

    /**
     * 設置左邊Margin
     */
    private fun margin(v: View, l: Int) {
        if (v.layoutParams is MarginLayoutParams) {
            val p = v.layoutParams as MarginLayoutParams
            p.leftMargin = l
            v.requestLayout()
        }
    }
}

代碼其實還是比較少的毕匀，其實主要是通過監(jiān)聽拖動來設置“在招職位”布局距離左邊的margin值就可以了，希望能對新入手的同學有點幫助愤炸，我也算復習了下期揪。

具體的測試APK可以通過這個鏈接測試下：
http://d.firim.pro/7by9

github：https://github.com/yixiaolunhui/FangDemo