Android 簡易懸停抽屜控件 —— 仿知乎收藏夾

寫在前面

一直覺得知乎的互動體驗是很好的，這次山寨了一把。

這是一個底部抽屜，類似知乎收藏夾。它可以懸停在中間，随着滑動自然過渡到全屏。

它是仿照

support

包裡的

DrawLayout

和

NavigationView

設計的。

效果圖

知乎收藏夾：

• 可以懸停在中間
• 可以滑動到全屏
• 過渡十分流暢，縱享絲滑

我的 HoverView :

• 可以懸停在中間
• 可以滑動到全屏
• 過渡尚可，沒有知乎的流暢

源碼

https://github.com/fashare2015/HoverView

特點及使用場景

底部抽屜，可以懸停、也可以全屏展示。适用于：

• 淘寶購物車
• 收藏夾
• 分享框
• …

Gradle 依賴

最新版本：1.0.1

dependencies {
    compile 'com.fashare2015:HoverView:最新版本'
}
           

使用方式

布局結構

類似

support

包裡的

DrawLayout

和

NavigationView

的關系。這裡有兩個

View

:

• HoverViewContainer

  : 容器，對應

  DrawLayout

• HoverView

  : 懸停抽屜，對應

  NavigationView

<com.fashare.hover_view.HoverViewContainer
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/darker_gray">

    // 原本的 rootView
    ...

    <com.fashare.hover_view.HoverView
        android:id="@+id/hv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:mTopFill="0.0"
        app:mTopHover="0.5">

        // HoverView 的内容
        ...

    </com.fashare.hover_view.HoverView>

</com.fashare.hover_view.HoverViewContainer> 
           

HoverView 屬性

它有兩個屬性，描述

HoverView.getTop()

占父容器的比例（Height 為父容器高度）：

• app:mTopFill=”0.0” 全屏時，距頂部 0.0Height（預設）
• app:mTopHover=”0.5” 懸停時，距頂部 0.5Height

狀态（高度）切換

// 狀态定義
public enum ViewState {
    FILL,       // 全屏
    HOVER,      // 半空懸停
    CLOSE;      // 關閉: 完全藏在螢幕底部
}

// 狀态切換 —— 類似 View.setVisibility();
mHoverView.changeState(ViewState.HOVER);   // 打開至 "懸停" 狀态
mHoverView.changeState(ViewState.FILL);    // 打開至 "全屏" 狀态
mHoverView.changeState(ViewState.CLOSE);   // 切換至 "關閉" 狀态
           

類圖

最後

使用愉快～