![1563442819594.gif](https://upload-images.jianshu.io/upload_images/5223818-9c2c23f816c650af.gif?imageMogr2/auto-orient/strip)
### 设计思路
1.自定义个组件类似RelativeLayout
2.可以内部放子View,然后就是滑动主体在前,小程序View在后
3.重写dispatchTouchEvent 控制这两个子View的位置
4.加上临界点回弹动画
5.手势判断(惯性效果)
#### 1.继承RelativeLayout
如果要从新写一个GroupView组件需要measure → layout → draw 很多细节要处理也不一定处理的好。所以直接用系统提供的RelativeLayout
```java
public class MoreHeadLayout extends RelativeLayout {
...
}
```
#### 2.内部子View 结构
就两个,如下图
![image.png](https://upload-images.jianshu.io/upload_images/5223818-bf0fc1a6f6038790.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
```java
private View mHeadView;
private NewNestedScrollView mBodyView;
void init(){
mHeadView = findViewById(R.id.head_layout);//view为head
mBodyView = findViewById(R.id.body_layout);
}
```
xml中的代码
![image.png](https://upload-images.jianshu.io/upload_images/5223818-3c5c92e31e53d823.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
#### 3.重写dispatchTouchEvent
这一步主要是做控制手指滑动跟随,就是bodyView跟随你的手指滑动
先写一个方法,就是控制bodyView纵坐标的位置
```java
private void setMarginTop(int offY) {
RelativeLayout.LayoutParams paramsBody = (LayoutParams) mBodyView.getLayoutParams();
int marginTop = paramsBody.topMargin - offY;
if (marginTop < 0) {
marginTop = 0;
} else if (marginTop > mHeadView.getHeight()) {
marginTop = mHeadView.getHeight();
}
paramsBody.topMargin = marginTop;
mBodyView.setLayoutParams(paramsBody);
}
```
再计算滑动距离,然后调用setMarginTop 方法
```java
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
int y = (int) ev.getRawY();
int offY = lastY - y;
lastY = y;
switch (ev.getAction()) {
...
case MotionEvent.ACTION_MOVE:
if (isBodyTop && headViewVisible()) {
setMarginTop((int) (offY * damp));
return true;
}
if (isBodyTop && offY < 0) {
setMarginTop((int) (offY * damp));
return true;
}
break;
...
}
```
这样bodyView 就可以跟随手指动了,若需要一些阻尼效果可以添加系数damp,就是bodyView移动的距离等于手指滑动的距离乘以系数damp。
#### 4.临界点与回弹
先写一个动画方法,该动画方法就是bodyView 从开始的高度移动到结束的高度。
```java
private ValueAnimator mAnim;
/**
* 收起或打开动画
*
* @param start 开始高度
* @param end 结束高度
* @param time 动画时间
*/
public void startAnimator(int start, int end, long time) {
if (mAnim != null && mAnim.isRunning()) {
mAnim.cancel();
}
mAnim = ValueAnimator.ofInt(start, end);
mAnim.setDuration(time);
mAnim.setTarget(mBodyView);
mAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int currentValue = (Integer) animation.getAnimatedValue();
RelativeLayout.LayoutParams params = (LayoutParams) mBodyView.getLayoutParams();
params.topMargin = currentValue;
mBodyView.setLayoutParams(params);
}
});
mAnim.start();
}
```
然后设置一个触发的临界点
```java
private float closeOrOpen = 0.4f;//动画关闭还是打开的点(相对于头部高度的比例)
```
触发时机例如手指抬起事件
```java
case MotionEvent.ACTION_UP:
...
if (mBodyView.getTop() < mHeadView.getHeight() * closeOrOpen) {
startAnimator(mBodyView.getTop(), 0);//收起动画
} else {
startAnimator(mBodyView.getTop(), mHeadView.getMeasuredHeight());//打开动画
}
```
#### 5.手势判断(惯性效果)
添加手势判断会有更好的使用体验效果,方法如下
```java
private GestureDetector mGestureDetector;
mGestureDetector = new GestureDetector(getContext(), new MoreGestureListener());
class MoreGestureListener implements GestureDetector.OnGestureListener {
@Override
public boolean onDown(MotionEvent e) {
mIsHaveScrolled = false;
return false;
}
@Override
public void onShowPress(MotionEvent e) {
}
@Override
public boolean onSingleTapUp(MotionEvent e) {
return false;
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
mIsHaveScrolled = true;
return false;
}
@Override
public void onLongPress(MotionEvent e) {
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
//当头部显示并且向上fling时候关闭头部(惯性视觉)
if (mBodyView.getTop() > 0 && velocityY < 0) {
startAnimator(mBodyView.getTop(), 0);
}
return false;
}
}
```
在dispatchTouchEvent 方法里每个事件下面把事件传进去
```java
mGestureDetector.onTouchEvent(ev);//为什么不放在最前面,因为会比关闭/打开动画先触发
```
#### 其他
大概的雏形就是这样可以扩展其他功能如,三个小点或者震动、headView跟随bodyView 移动等
附上用例地址
[https://github.com/collinWong/wx_drawer](https://github.com/collinWong/wx_drawer)
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
如果您下载了本程序,但是该程序存在问题无法运行,那么您可以选择退款或者寻求我们的帮助(如果找我们帮助的话,是需要追加额外费用的)。另外,您不会使用资源的话(这种情况不支持退款),也可以找我们帮助(需要追加额外费用) 微信小程序是腾讯公司基于微信平台推出的一种轻量级应用形态,它无需用户下载安装即可在微信内直接使用。自2017年正式上线以来,小程序凭借其便捷性、易获取性和出色的用户体验迅速获得市场认可,并成为连接线上线下服务的重要桥梁。 小程序的核心特点包括: 零安装:用户只需通过微信扫一扫或搜索功能,即可打开和使用小程序,大大降低了用户的使用门槛和手机存储空间压力。 速度快:加载速度相较于传统的HTML5网页更快,依托于微信强大的基础设施,能够实现近乎原生应用的流畅体验。 跨平台兼容:开发者一次开发,即可在多种终端设备上运行,免除了复杂的适配工作,大大提高了开发效率。 社交属性强:小程序可以无缝嵌入微信生态,支持分享至聊天窗口、朋友圈等社交场景,有利于用户间的传播和裂变增长。 丰富接口能力:提供丰富的API接口,可调用微信支付、位置服务、用户身份识别等多种功能,方便企业进行商业服务的集成与拓展。 目前,微信小程序已经覆盖了电商购物、生活服务、娱乐休闲、教育学习、工具助手等多个领域,为数以亿计的用户提供便捷的服务入口,也为众多商家和开发者提供了新的商业模式和创业机会。随着技术的不断升级和完善,小程序已成为现代移动互联网生态中不可或缺的一部分。
资源推荐
资源详情
资源评论
收起资源包目录
仿微信小程序拉下组件.zip (40个子文件)
SJT-code
gradle.properties 728B
gradle
wrapper
gradle-wrapper.jar 53KB
gradle-wrapper.properties 232B
app
src
androidTest
java
wong
colin
wx_drawer
ExampleInstrumentedTest.java 724B
test
java
wong
colin
wx_drawer
ExampleUnitTest.java 381B
main
java
wong
colin
wx_drawer
morehead
MoreHeadLayout.java 8KB
NewNestedScrollView.java 1KB
MainActivity.java 333B
res
mipmap-xxhdpi
ic_launcher_round.png 10KB
ic_launcher.png 6KB
mipmap-hdpi
ic_launcher_round.png 5KB
ic_launcher.png 3KB
drawable-v24
ic_launcher_foreground.xml 2KB
mipmap-anydpi-v26
ic_launcher.xml 272B
ic_launcher_round.xml 272B
mipmap-mdpi
ic_launcher_round.png 3KB
ic_launcher.png 2KB
mipmap-xxxhdpi
ic_launcher_round.png 15KB
ic_launcher.png 9KB
mipmap-xhdpi
ic_launcher_round.png 7KB
ic_launcher.png 4KB
values
colors.xml 208B
strings.xml 72B
styles.xml 383B
layout
activity_main.xml 2KB
drawable
ic_launcher_background.xml 5KB
AndroidManifest.xml 780B
proguard-rules.pro 751B
build.gradle 934B
.gitignore 7B
gradlew.bat 2KB
build.gradle 558B
.idea
runConfigurations.xml 564B
misc.xml 357B
gradle.xml 580B
settings.gradle 15B
gradlew 5KB
.gitignore 203B
1563442819594.gif 571KB
README.md 6KB
共 40 条
- 1
资源评论
JJJ69
- 粉丝: 6216
- 资源: 5782
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Picasso_v3.1 2.ipa
- chromedriver-mac-arm64.zip
- 蓝zapro.apk
- chromedriver-linux64.zip
- UCAS研一深度学习实验-MNIST手写数字识别python源码+详细注释(高分项目)
- 基于Python和PyTorch框架完成的一个手写数字识别实验源码(带MINIST手写数字数据集)+详细注释(高分项目)
- 基于Matlab在MNIST数据集上利用CNN完成手写体数字识别任务,并实现单层CNN反向传播算法+源代码+文档说明(高分项目)
- NVIDIA驱动、CUDA和Pytorch及其依赖
- 基于SVM多特征融合的微表情识别python源码+项目说明+详细注释(高分课程设计)
- html动态爱心代码一(附源码)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功