https://github.com/fashare2015/HoverView

一个底部抽屉。它可以悬停在中间，随着滑动自然过度到全屏
https://github.com/fashare2015/HoverView

Last synced: about 1 month ago
JSON representation

一个底部抽屉。它可以悬停在中间，随着滑动自然过度到全屏

• Host: GitHub
• URL: https://github.com/fashare2015/HoverView
• Owner: fashare2015
• Created: 2016-12-12T17:23:21.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-02-02T10:37:41.000Z (almost 7 years ago)
• Last Synced: 2024-08-02T01:25:35.885Z (4 months ago)
• Language: Java
• Size: 111 KB
• Stars: 196
• Watchers: 4
• Forks: 22
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-github-android-ui - HoverView - 仿知乎的底部抽屉 (其他)

README

        
# HoverView

一直觉得知乎的交互体验是很好的，这次山寨了一把。

这是一个底部抽屉，类似知乎收藏夹。它可以悬停在中间，随着滑动自然过渡到全屏。

它是仿照`support`包里的`DrawLayout`和`NavigationView`设计的。




# 效果图

知乎收藏夹：

- 可以悬停在中间

- 可以滑动到全屏

- 过渡十分流畅，纵享丝滑

![这里写图片描述](http://img.blog.csdn.net/20161214212420754?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTE1MzYxNDEzMQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)




我的 HoverView :

- 可以悬停在中间

- 可以滑动到全屏

- 过渡尚可，没有知乎的流畅

![这里写图片描述](http://img.blog.csdn.net/20161214213925928?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTE1MzYxNDEzMQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)




# CSDN链接

http://blog.csdn.net/a153614131/article/details/53647831




# 特点及使用场景

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

- 淘宝购物车

- 收藏夹

- 分享框

- ...




# Gradle 依赖

最新版本：1.0.2

```gradle

// 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:最新版本'

}

```




# 使用方式

## 布局结构

类似`support`包里的`DrawLayout`和`NavigationView`的关系。这里有两个`View`:

- `HoverViewContainer`: 容器，对应`DrawLayout`

- `HoverView`: 悬停抽屉，对应`NavigationView`

```xml

    // 原本的 rootView

    ...

    

        // HoverView 的内容

        ...

    

 

```




## HoverView 属性

它有两个属性，描述 `HoverView.getTop()`占父容器的比例（Height 为父容器高度）：

- app:mTopFill="0.0" 全屏时，距顶部 0.0Height（默认）

- app:mTopHover="0.5" 悬停时，距顶部 0.5Height




## 状态（高度）切换

```java

// 状态定义

public enum ViewState {

    FILL,       // 全屏

    HOVER,      // 半空悬停

    CLOSE;      // 关闭: 完全藏在屏幕底部

}

// 状态切换 —— 类似 View.setVisibility();

mHoverView.changeState(ViewState.HOVER);   // 打开至 "悬停" 状态

mHoverView.changeState(ViewState.FILL);    // 打开至 "全屏" 状态

mHoverView.changeState(ViewState.CLOSE);   // 切换至 "关闭" 状态

```




# 类图

![这里写图片描述](http://img.blog.csdn.net/20161214221551601?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTE1MzYxNDEzMQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)




# 最后

使用愉快～