很久沒有發(fā)文章了，這一年多一直在卷。最近由于疫情的原因，很多公司都在給員工發(fā)“畢業(yè)證”，我也很榮幸拿到了“畢業(yè)證”。不知道是應(yīng)該開心還是桑心，北京最近因為疫情基本都居家辦公，而我也開始了做簡歷，刷面試題的道路。??
最近在投簡歷的時候發(fā)現(xiàn)智聯(lián)招聘的公司詳情頁設(shè)計的很有意思，雖然很簡單，但是也忍不住仿一下，
智聯(lián)的效果
zhilian.gif
仿的效果（基本效果一致）
custom.gif
效果需求分析：
1、剛進(jìn)入界面時，“在招職位”布局在底部露頭，并距離屏幕左邊一半屏幕寬度的距離。
2、當(dāng)詳情滑動到最底部，然后再向上滑動時，展開“在招職位”布局。
3、“在招職位”布局支持手勢拖動，向上時布局距離屏幕左邊越來越近（最終距離屏幕左邊距離為0），向下時布局距離越來越遠(yuǎn)（最終是屏幕的寬度的一半）。
根據(jù)上面的分析，主要的功能其實就是這個“在招職位”布局的收起和展開，默認(rèn)收起，然后手勢控制展開。說到這里其實我們就知道如何實現(xiàn)了，那就是behavior，它默認(rèn)已經(jīng)給我們處理了收起展開狀態(tài)及拖動操作，我們只需要監(jiān)聽拖動和狀態(tài)來設(shè)置布局的位置變化就可以了。開干~
為了省事底部布局我就直接截圖放到布局了
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) {
//左邊圖標(biāo)顯示
binding?.drag?.isVisible = true
when (newState) {
STATE_DRAGGING -> {}
STATE_SETTLING -> {}
STATE_EXPANDED -> {
//展開狀態(tài)時隱藏左邊圖標(biāo)
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è)置測試列表數(shù)據(jù)
RecyclerDataUtils.setRecyclerAdater(baseContext, recyclerview, "測試數(shù)據(jù)", 30)
//設(shè)置屏幕寬
bottomSheet?.post {
val params = bottomSheet.layoutParams
params.width = windowManager.defaultDisplay.width
bottomSheet.layoutParams = params
}
//默認(rèn)外左邊距是屏幕寬度一半
margin(bottomSheet, windowManager.defaultDisplay.width / 2)
}
}
/**
* 設(shè)置左邊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)聽拖動來設(shè)置“在招職位”布局距離左邊的margin值就可以了，希望能對新入手的同學(xué)有點幫助，我也算復(fù)習(xí)了下。
具體的測試APK可以通過這個鏈接測試下：
http://d.firim.pro/7by9
