Android仿智联详情
很久没有发文章了，这一年多一直在卷。最近由于疫情的原因，很多公司都在给员工发“毕业证”，我也很荣幸拿到了“毕业证”。不知道是应该开心还是桑心，北京最近因为疫情基本都居家办公，而我也开始了做简历，刷面试题的道路。😭
最近在投简历的时候发现智联招聘的公司详情页设计的很有意思，虽然很简单，但是也忍不住仿一下，
智联的效果
仿的效果（基本效果一致）
效果需求分析：
1、刚进入界面时，“在招职位”布局在底部露头，并距离屏幕左边一半屏幕宽度的距离。
2、当详情滑动到最底部，然后再向上滑动时，展开“在招职位”布局。
3、“在招职位”布局支持手势拖动，向上时布局距离屏幕左边越来越近（最终距离屏幕左边距离为0），向下时布局距离越来越远（最终是屏幕的宽度的一半）。
根据上面的分析，主要的功能其实就是这个“在招职位”布局的收起和展开，默认收起，然后手势控制展开。说到这里其实我们就知道如何实现了，那就是behavior，它默认已经给我们处理了收起展开状态及拖动操作，我们只需要监听拖动和状态来设置布局的位置变化就可以了。开干~
为了省事底部布局我就直接截图放到布局了
###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 -> {
//展开状态时隐藏左边图标
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 {
//设置测试列表数据
RecyclerDataUtils.setRecyclerAdater(baseContext, recyclerview, "测试数据", 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()
}
}
}
代码其实还是比较少的，其实主要是通过监听拖动来设置“在招职位”布局距离左边的margin值就可以了，希望能对新入手的同学有点帮助，我也算复习了下。
具体的测试APK可以通过这个链接测试下：
http://d.firim.pro/7by9
github：https://github.com/yixiaolunhui/FangDemo
原文地址：https://blog.csdn.net/u014741977/article/details/136797729
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！