自学内容网 自学内容网
自学内容网 > 正文

Android仿智联详情

🕗 发布于 2024-03-18 14:06 android  

很久没有发文章了，这一年多一直在卷。最近由于疫情的原因，很多公司都在给员工发“毕业证”，我也很荣幸拿到了“毕业证”。不知道是应该开心还是桑心，北京最近因为疫情基本都居家办公，而我也开始了做简历，刷面试题的道路。😭

最近在投简历的时候发现智联招聘的公司详情页设计的很有意思，虽然很简单，但是也忍不住仿一下，

智联的效果
zhilian.gif

仿的效果（基本效果一致）
custom.gif

效果需求分析：
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）！

相关文章

自学内容网
Copyright © 2015-2024