Home

Awesome

HoverView

一直觉得知乎的交互体验是很好的,这次山寨了一把。 这是一个底部抽屉,类似知乎收藏夹。它可以悬停在中间,随着滑动自然过渡到全屏。 它是仿照support包里的DrawLayoutNavigationView设计的。 <br/>

效果图

知乎收藏夹:

这里写图片描述

<br/> 我的 HoverView :

这里写图片描述 <br/>

CSDN链接

http://blog.csdn.net/a153614131/article/details/53647831 <br/>

特点及使用场景

底部抽屉,可以悬停、也可以全屏展示。适用于:

<br/>

Gradle 依赖

最新版本:1.0.2

// 1. Add it in your root build.gradle at the end of repositories:
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

// 2. Add the dependency in your app/build.gradle
dependencies {
    compile 'com.github.fashare2015:HoverView:最新版本'
}
<br/>

使用方式

布局结构

类似support包里的DrawLayoutNavigationView的关系。这里有两个View:

<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> 
<br/>

HoverView 属性

它有两个属性,描述 HoverView.getTop()占父容器的比例(Height 为父容器高度):

状态(高度)切换

// 状态定义
public enum ViewState {
    FILL,       // 全屏
    HOVER,      // 半空悬停
    CLOSE;      // 关闭: 完全藏在屏幕底部
}

// 状态切换 —— 类似 View.setVisibility();
mHoverView.changeState(ViewState.HOVER);   // 打开至 "悬停" 状态
mHoverView.changeState(ViewState.FILL);    // 打开至 "全屏" 状态
mHoverView.changeState(ViewState.CLOSE);   // 切换至 "关闭" 状态
<br/>

类图

这里写图片描述 <br/>

最后

使用愉快~