Android 简易悬停抽屉控件 —— 仿知乎收藏夹

5,335 阅读1分钟

写在前面


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

效果图


知乎收藏夹:

  • 可以悬停在中间
  • 可以滑动到全屏
  • 过渡十分流畅,纵享丝滑

这里写图片描述



我的 HoverView :

  • 可以悬停在中间
  • 可以滑动到全屏
  • 过渡尚可,没有知乎的流畅

这里写图片描述

源码


github.com/fashare2015…

特点及使用场景


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

  • 淘宝购物车
  • 收藏夹
  • 分享框


Gradle 依赖


最新版本:1.0.1

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


使用方式


布局结构

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

  • HoverViewContainer: 容器,对应DrawLayout
  • HoverView: 悬停抽屉,对应NavigationView


    // 原本的 rootView
    ...

    

        // HoverView 的内容
        ...

    

 
 


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);   // 切换至 "关闭" 状态


类图


这里写图片描述

最后


使用愉快~