HoverView
一直觉得知乎的交互体验是很好的，这次山寨了一把。
这是一个底部抽屉，类似知乎收藏夹。它可以悬停在中间，随着滑动自然过渡到全屏。
它是仿照support包里的DrawLayout和NavigationView设计的。
效果图
知乎收藏夹：
- 可以悬停在中间
- 可以滑动到全屏
- 过渡十分流畅，纵享丝滑
我的 HoverView :
- 可以悬停在中间
- 可以滑动到全屏
- 过渡尚可，没有知乎的流畅
CSDN链接
http://blog.csdn.net/a153614131/article/details/53647831
特点及使用场景
底部抽屉，可以悬停、也可以全屏展示。适用于：
- 淘宝购物车
- 收藏夹
- 分享框
- ...
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:最新版本'
}使用方式
布局结构
类似support包里的DrawLayout和NavigationView的关系。这里有两个View:
HoverViewContainer: 容器，对应DrawLayoutHoverView: 悬停抽屉，对应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); // 切换至 "关闭" 状态类图
最后
使用愉快～
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent