使用BottomSheetBehavior實現美團拖拽效果

weixin_34402408發表於2019-01-23

前幾天看到一片文章，文章的標題是Android 仿美團拖拽效果，抱著好奇心去看了下，效果確實不錯，但實現過程較為複雜。用原生的CoordinatorLayout+BottomSheetBehavior可以快速的實現這一效果，所以心血來潮打算水一篇文章。
demo地址：https://github.com/weibindev/BottomSlide

注：本文demo的所有圖文素材均來自https://www.jianshu.com/p/92180b45aaf7

先來看下成品效果：

效果圖.gif

實現思路分析：

介面上可以分為兩個部分：頂部部分包括一系列的圖片和按鈕控制元件；底部部分是用NestedScrollView包裹實現的介面,並且指定 app:layout_behavior="@string/bottom_sheet_behavior"。介面根佈局採用CoordinatorLayout，與BottomSheetBehavior包裝底部部分的佈局實現拖拽。
當介面初始化時，BottomSheetBehavior以淡入的方式平滑至設定的最小高度。在BottomSheetBehavior拖拽過程中，通過程式碼改變View的layoutParams屬性使其達到所能拖拽的最大高度。
除去底部部分初始化淡入的過程，其餘時間頂部部分都會發生色差值和檢視偏移的變化。

介面佈局：

activity_main.xml

<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

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

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

</android.support.design.widget.CoordinatorLayout>

include_main_top.xml

<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/constraint"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="350dp"
            android:scaleType="centerCrop"
            android:src="@mipmap/icon_tour_background"
            android:transitionName="cardView"/>

    <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginTop="25dp"
            android:padding="10dp"
            android:src="@mipmap/icon_back_white"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginTop="25dp"
            android:padding="10dp"
            android:src="@mipmap/icon_tour_forward"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginTop="25dp"
            android:padding="10dp"
            android:src="@mipmap/icon_tour_loved"
            app:layout_constraintEnd_toStartOf="@+id/imageView2"
            app:layout_constraintTop_toTopOf="parent"/>
    
     <!--這裡為了方便，使用半透明色遮罩的方式來代替色差值的實現-->
    <View
            android:id="@+id/maskView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:alpha="0"
            android:background="#80000000"/>

</android.support.constraint.ConstraintLayout>

include_main_content.xml

<android.support.v4.widget.NestedScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_cardview_white_top"
        app:layout_behavior="@string/bottom_sheet_behavior"
        android:overScrollMode="never">

    <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingStart="16dp"
            android:paddingEnd="16dp">

        <android.support.v7.widget.CardView
                android:id="@+id/cardView"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_margin="20dp"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp"
                android:foreground="?attr/selectableItemBackground"
                app:cardCornerRadius="25dp"
                app:cardElevation="1dp"
                app:layout_constraintBottom_toBottomOf="@+id/view"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="@+id/textView">

            <ImageView
                    android:id="@+id/avatar"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:src="#59cebe"
                    android:transitionName="avatar"/>

        </android.support.v7.widget.CardView>

        <TextView
                android:id="@+id/textView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:layout_marginEnd="15dp"
                android:text="一種色彩一座城,多彩摩洛哥自由行、慢行、心靈之旅"
                android:textColor="@color/black"
                android:textSize="16sp"
                android:textStyle="bold"
                app:layout_constrainedWidth="true"
                app:layout_constraintEnd_toStartOf="@id/cardView"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"/>

        <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:alpha="0.8"
                android:drawableStart="@mipmap/icon_tour_location"
                android:drawablePadding="4dp"
                android:text="摩洛哥"
                android:textColor="@color/black"
                android:textSize="12sp"
                app:layout_constraintTop_toBottomOf="@id/textView"/>

        <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:alpha="0.8"
                android:drawableStart="@mipmap/icon_tour_map"
                android:drawablePadding="4dp"
                android:text="線路玩法"
                android:textColor="@color/black"
                android:textSize="12sp"
                app:layout_constraintBottom_toBottomOf="@+id/textView1"
                app:layout_constraintStart_toEndOf="@+id/textView1"
                app:layout_constraintTop_toTopOf="@+id/textView1"/>

        <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:drawableStart="@mipmap/icon_tour_label"
                android:drawablePadding="4dp"
                android:text="心靈之旅"
                android:textColor="@color/gray"
                android:textSize="10sp"
                app:layout_constraintTop_toBottomOf="@+id/textView1"/>


        <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:alpha="0.8"
                android:drawableStart="@mipmap/icon_tour_label"
                android:drawablePadding="4dp"
                android:text="古城"
                android:textColor="@color/gray"
                android:textSize="10sp"
                app:layout_constraintBottom_toBottomOf="@+id/textView3"
                app:layout_constraintStart_toEndOf="@+id/textView3"
                app:layout_constraintTop_toTopOf="@+id/textView3"/>


        <TextView
                android:id="@+id/textView5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:alpha="0.8"
                android:drawableStart="@mipmap/icon_tour_label"
                android:drawablePadding="4dp"
                android:text="清真寺"
                android:textColor="@color/gray"
                android:textSize="10sp"
                app:layout_constraintBottom_toBottomOf="@+id/textView3"
                app:layout_constraintStart_toEndOf="@+id/textView4"
                app:layout_constraintTop_toTopOf="@+id/textView3"/>

        <View
                android:id="@+id/view"
                android:layout_width="match_parent"
                android:layout_height="0.5dp"
                android:layout_marginTop="10dp"
                android:background="@color/background"
                app:layout_constraintTop_toBottomOf="@+id/textView3"/>

        <TextView
                android:id="@+id/textView6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="行程詳情"
                android:textColor="@color/black"
                android:textSize="12sp"
                app:layout_constraintTop_toBottomOf="@+id/view"/>

        <ImageView
                android:id="@+id/imageView1"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_marginTop="10dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/icon_tour_background"
                app:layout_constraintTop_toBottomOf="@+id/textView6"/>

        <TextView
                android:id="@+id/textView7"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="It was a humorously peritous business for both of us.For, before we proceed further,it must be said that the mokey-rope was fast at both ends.fast to Queequeg's broad canvas belt,and fast to my narrow leather one,So tat for better or for worse.所以說這是一場淨化心靈之旅"
                android:textColor="@color/black"
                android:textSize="12sp"
                app:layout_constrainedWidth="true"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView1"/>

        <View
                android:id="@+id/view2"
                android:layout_width="match_parent"
                android:layout_height="0.5dp"
                android:layout_marginTop="8dp"
                android:background="@color/background"
                app:layout_constraintTop_toBottomOf="@+id/textView7"/>

        <android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintTop_toBottomOf="@+id/view2"
                app:tabIndicatorColor="@color/yellow"
                app:tabIndicatorHeight="2dp"
                app:tabMaxWidth="80dp"
                app:tabMinWidth="50dp"
                app:tabPadding="-1dp"
                app:tabSelectedTextColor="@color/black"
                app:tabTextColor="@color/gray"/>

        <FrameLayout
                android:id="@+id/frameLayout"
                android:layout_width="match_parent"
                android:layout_height="420dp"
                android:layout_marginTop="5dp"
                android:background="#aabbcc"
                app:layout_constraintTop_toBottomOf="@+id/tabLayout"/>

    </android.support.constraint.ConstraintLayout>

</android.support.v4.widget.NestedScrollView>

在<android.support.v4.widget.NestedScrollView中加入了app:layout_behavior="@string/bottom_sheet_behavior"。除此之外，還有三個關於BottomSheetBehavior相關的xml屬性：

app:behavior_hideable 設定此底部工作表在向下滑動時是否可以隱藏。

app:behavior_peekHeight 設定摺疊時底部工作表的高度

app:behavior_skipCollapsed  設定此底部工作表在展開一次後是否應在隱藏時跳過摺疊狀態。除非工作表可隱藏，否則將此設定為true無效。

順便附上BottomSheetBehavior的5種狀態：

STATE_COLLAPSED：底部頁面摺疊。
STATE_EXPANDED：底部頁面擴充套件。
STATE_DRAGGING：底部是拖動。
STATE_SETTLING：底層正在沉澱。
STATE_HIDDEN：底部頁面是隱藏的。

更多關於BottomSheetBehavior的介紹，可以前往官方文件檢視：https://developer.android.com/reference/android/support/design/widget/BottomSheetBehavior

程式碼實現：

假設為了適配不同的機型，我們需要把底部佈局的最小高度設為屏高的一半，所以初始化控制元件之前，先初始化相關高度的引數

    //獲取螢幕高度
    heightPixels = resources.displayMetrics.heightPixels
    Log.i(TAG, "heightPixels: $heightPixels")
    
    val behaviorHeight = DensityUtils.px2dp(this, (heightPixels / 2).toFloat())
    peekHeight =TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, behaviorHeight, resources.displayMetrics).toInt()
    Log.i(TAG, "peekHeight: $peekHeight")

最小高度已經搞定了，使用setPeekHeight生效。那麼最大高度該如何實現呢，我檢視文件，發現api並沒有提供相關的函式來實現這一功能。這樣的話，我們可以改變佈局控制元件自身的高度來實現，也就是layoutParams.heigth。

說是這麼說，我們還是得取一個參照物的高度值套進layoutParams.heigth。這裡我就採用返回按鈕做為參照物，即底部的最大高度不遮擋返回按鈕。

imageView.post {
     val lp = imageView.layoutParams as ConstraintLayout.LayoutParams

     //獲取狀態列高度
     var statusBarHeight = 0
     val resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android")
     if (resourceId > 0) {
         statusBarHeight = resources.getDimensionPixelSize(resourceId)
     }
     //返回按鈕至螢幕頂部的高度
     marginTop = imageView.height + lp.topMargin + lp.bottomMargin / 2 + statusBarHeight
     //返回按鈕至根佈局的距離
     offsetDistance = lp.topMargin
}

獲取到marginTop後在BottomSheetBehavior.BottomSheetCallback()回撥監聽有底部工作的事件。

BottomSheetBehavior.BottomSheetCallback()有兩個事件

//在拖動時呼叫
void onSlide (View bottomSheet, float slideOffset) 
//在改變狀態時呼叫
void onStateChanged (View bottomSheet, int newState)

只要底部進行拖拽，其狀態就會發生變化，所以在onStateChanged (View bottomSheet, int newState)做處理

behavior.setBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {

    override fun onStateChanged(bottomSheet: View, newState: Int) {
        val layoutParams = bottomSheet.layoutParams
        //如果控制元件本身的Height值就小於返回按鈕的高度，就不用做處理
        if (bottomSheet.height > heightPixels - marginTop) {
            //螢幕高度減去marinTop作為控制元件的Height
            layoutParams.height = heightPixels - marginTop
            bottomSheet.layoutParams = layoutParams
        }
    }

    override fun onSlide(bottomSheet: View, slideOffset: Float) {
       
    }

})

相應的頂部色差值和偏移值的變化在另一個回撥事件void onSlide (View bottomSheet, float slideOffset)中處理。

behavior.setBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {

     override fun onStateChanged(bottomSheet: View, newState: Int) {
       
     }

     override fun onSlide(bottomSheet: View, slideOffset: Float) {
         var distance: Float = 0F;
         /**
          * slideOffset為底部的新偏移量，值在[-1,1]範圍內。當BottomSheetBehavior處於摺疊(STATE_COLLAPSED)和
          * 展開(STATE_EXPANDED)狀態之間時,它的值始終在[0,1]範圍內，向上移動趨近於1，向下區間於0。[-1,0]處於
          * 隱藏狀態(STATE_HIDDEN)和摺疊狀態(STATE_COLLAPSED)之間。
          */

         //這裡的BottomSheetBehavior初始化完成後，介面設定始終可見，所以不用考慮[-1,0]區間
         //色差值變化->其實是遮罩的透明度變化，拖拽至最高，頂部成半透明色
         maskView.alpha = slideOffset
         //offsetDistance是initSystem()中獲得的，是返回按鈕至根佈局的距離
         distance = offsetDistance * slideOffset
         //當BottomSheetBehavior由隱藏狀態變為摺疊狀態(即gif圖開始的由底部滑出至設定的最小高度)
         //slide在[-1,0]的區間內，不加判斷會出現頂部佈局向下偏移的情況。
         if (distance > 0) {
             constraint.translationY = -distance
         }
     }
})

最後還有BottomSheetBehavior的滑出效果：先設定BottomSheetBehavior的狀態為隱藏，然後呼叫Handler的postDelayed()方法設定狀態為摺疊以及最小高度，當然再加一個屬性動畫，起到錦上添花的作用。

附上MainActivity.kt的全部程式碼

    /**
 * @author vico
 * @date 2019/1/23
 * email: 1005078384@qq.com
 */
class MainActivity : AppCompatActivity() {

    private var heightPixels: Int = 0
    private var peekHeight: Int = 0
    private var marginTop: Int = 0
    private var offsetDistance: Int = 0
    private lateinit var mHandler: Handler

    companion object {
        const val TAG = "MainActivity.class"
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //初始螢幕相關的引數
        initSystem()
        initView()
        initBehavior()
    }

    private fun initBehavior() {
        val behavior = BottomSheetBehavior.from(nestedScrollView)
        behavior.isHideable = true
        behavior.state = BottomSheetBehavior.STATE_HIDDEN
        behavior.setBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {

            override fun onStateChanged(bottomSheet: View, newState: Int) {
                val layoutParams = bottomSheet.layoutParams
                //如果控制元件本身的Height值就小於返回按鈕的高度，就不用做處理
                if (bottomSheet.height > heightPixels - marginTop) {
                    //螢幕高度減去marinTop作為控制元件的Height
                    layoutParams.height = heightPixels - marginTop
                    bottomSheet.layoutParams = layoutParams
                }
            }

            override fun onSlide(bottomSheet: View, slideOffset: Float) {
                var distance: Float = 0F;
                /**
                 * slideOffset為底部的新偏移量，值在[-1,1]範圍內。當BottomSheetBehavior處於摺疊(STATE_COLLAPSED)和
                 * 展開(STATE_EXPANDED)狀態之間時,它的值始終在[0,1]範圍內，向上移動趨近於1，向下區間於0。[-1,0]處於
                 * 隱藏狀態(STATE_HIDDEN)和摺疊狀態(STATE_COLLAPSED)之間。
                 */

                //這裡的BottomSheetBehavior初始化完成後，介面設定始終可見，所以不用考慮[-1,0]區間
                //色差值變化->其實是遮罩的透明度變化，拖拽至最高，頂部成半透明色
                maskView.alpha = slideOffset
                //offsetDistance是initSystem()中獲得的，是返回按鈕至根佈局的距離
                distance = offsetDistance * slideOffset
                //當BottomSheetBehavior由隱藏狀態變為摺疊狀態(即gif圖開始的由底部滑出至設定的最小高度)
                //slide在[-1,0]的區間內，不加判斷會出現頂部佈局向下偏移的情況。
                if (distance > 0) {
                    constraint.translationY = -distance
                }

                Log.i(
                    TAG,
                    String.format(
                        "slideOffset -->>> %s bottomSheet.getHeight() -->>> %s heightPixels -->>> %s",
                        slideOffset,
                        bottomSheet.height,
                        heightPixels
                    )
                )
                Log.i(TAG, String.format("distance -->>> %s", distance))
            }

        })
        mHandler.postDelayed({
            behavior.isHideable = false
            behavior.state = BottomSheetBehavior.STATE_COLLAPSED
            behavior.peekHeight = peekHeight
            ObjectAnimator.ofFloat(nestedScrollView, "alpha", 0f, 1f).setDuration(500).start()
        }, 200)
    }

    private fun initView() {
        tabLayout.tabMode = TabLayout.MODE_SCROLLABLE
        tabLayout.addTab(tabLayout.newTab().setText("費用說明"))
        tabLayout.addTab(tabLayout.newTab().setText("預定須知"))
        tabLayout.addTab(tabLayout.newTab().setText("退款政策"))
        tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabReselected(tab: TabLayout.Tab) {

            }

            override fun onTabUnselected(tab: TabLayout.Tab) {

            }

            override fun onTabSelected(tab: TabLayout.Tab) {
                when (tab.position) {
                    0 -> frameLayout.setBackgroundColor(Color.parseColor("#ff0000"))
                    1 -> frameLayout.setBackgroundColor(Color.parseColor("#0000ff"))
                    2 -> frameLayout.setBackgroundColor(Color.parseColor("#00ff00"))
                }
            }
        })
        imageView.setOnClickListener { finish() }
        imageView2.setOnClickListener { Toast.makeText(this, "轉發", Toast.LENGTH_SHORT).show() }
        imageView3.setOnClickListener { Toast.makeText(this, "收藏", Toast.LENGTH_SHORT).show() }
        mHandler = Handler()
    }

    private fun initSystem() {
        //獲取螢幕高度
        heightPixels = resources.displayMetrics.heightPixels
        Log.i(TAG, "heightPixels: $heightPixels")

        val behaviorHeight = DensityUtils.px2dp(this, (heightPixels / 2).toFloat())
        peekHeight =
                TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, behaviorHeight, resources.displayMetrics).toInt()
        Log.i(TAG, "peekHeight: $peekHeight")

        imageView.post {
            val lp = imageView.layoutParams as ConstraintLayout.LayoutParams

            //獲取狀態列高度
            var statusBarHeight = 0
            val resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android")
            if (resourceId > 0) {
                statusBarHeight = resources.getDimensionPixelSize(resourceId)
            }
            //返回按鈕至螢幕頂部的高度
            marginTop = imageView.height + lp.topMargin + lp.bottomMargin / 2 + statusBarHeight
            //返回按鈕至根佈局的距離
            offsetDistance = lp.topMargin
        }
    }
}

最後：

文章demo地址：https://github.com/weibindev/BottomSlide

demo引用素材：
Android 仿美團拖拽效果

參考文章：
Material Design系列-嚴振杰

div實現拖拽效果，同時包含iframe
2016-03-04
短視訊軟體開發，RecyclerView實現拖拽效果
2022-07-18
View
動畫-CAShapeLayer實現QQ訊息紅點拖拽效果
2018-06-11
動畫
Android中ScrollView實現拖拽反彈效果動畫
2015-01-30
AndroidView動畫
JavaScript拖拽效果
2020-03-16
JavaScript
Cypress實現拖拽
2024-10-26
原生JS拖拽效果
2019-09-20
JS
自定義拖拽效果
2017-07-01
canvas矩形拖拽效果
2018-07-09
Canvas
reactnative實現qq聊天訊息氣泡拖拽消失效果
2021-10-29
React
==Presto實現原理和美團的使用實踐 -
2016-12-07
REST
react中使用dnd-kit實現拖拽排序
2024-07-31
React排序
使用 CSS 實現透明效果
2024-07-16
CSS
原生js實現拖拽功能
2017-04-21
JS
原生實現元素的拖拽
2017-12-25
Flutter 實現類似美團外賣店鋪頁面滑動效果
2020-02-09
Flutter
iOS 類似美團外賣 app 兩個 tableView 聯動效果實現
2016-06-02
iOSAPPView
使用DWM實現Aero Glass效果
2011-06-16
使用 CSS 實現漸變效果
2024-07-11
CSS
jQuery div拖拽效果詳解
2017-10-21
jQuery
基於Vue實現拖拽升級（九宮格拖拽）
2021-09-09
Vue
HTML5拖拽API實現vue樹形拖拽元件
2018-05-10
HTMLAPIVue元件
重寫ViewGroup並藉助ViewDragHelper實現各種拖拽互動效果（二）
2018-01-30
View
實現小程式canvas拖拽功能
2018-09-03
Canvas
Grid 拖拽佈局實現
2023-12-02
Ext實現資料拖拽功能
2011-07-29
Flutter互動實戰－即刻App探索頁下拉＆拖拽效果
2019-03-04
FlutterAPP
「實戰」純React實現的拖拽元件
2017-09-23
React元件
JavaScript 限定範圍的拖拽效果
2019-01-18
JavaScript
JavaScript元素拖拽路徑回放效果
2018-12-01
JavaScript
jQuery拖拽的彈出層效果
2018-01-09
jQuery
vuejs2.0使用Sortable.js實現的拖拽功能
2018-08-27
VueJS
使用TypeScript給Vue 3.0寫一個指令實現元件拖拽
2020-10-27
TypeScriptVue元件
使用 Fresco 實現大圖瀏覽（支援手勢放大、拖拽）
2017-04-08
Jquery實現拖拽式繪圖工具
2019-04-02
jQuery繪圖
實現QQ的TabBar拖拽動效
2019-03-04
tabBar
angualr實現滑鼠拖拽排序功能
2018-08-28
排序
教你如何使用MvcPager實現分頁效果
2022-04-07
MVC

使用BottomSheetBehavior實現美團拖拽效果

實現思路分析：

介面佈局：

程式碼實現：

最後：

相關文章