android 饿了么 布局,Android仿饿了么详情页可以跟随手指移动 viewpager变详情页
源码地址[https://github.com/githubwing/ZoomHeader]
不是共享元素!不是共享元素!不是共享元素!重要的话说三遍。共享元素不可以随手指移动的。
先吐槽下饿了么。不提示左右可以滑动。我还是无意中发现的。不提示我怎么知道可以滑动??
这是一个模仿饿了么详情页的例子。
并非一个库,并非拿来就可以用,主要讲解思路以及如何实现,可能有一些细节没有处理。 讲述了如何实现。具体祥见源码。
他是一个Activity还是两个?
相信你肯定有这样的疑问,答案是一个。所以这
不是用共享元素实现的,使用共享元素会导致图片无法跟随手指移动。
你看到的中间imageview是viewpager。在Viewpager上面是一个透明的View。当然,这个Activity的背景也是透明的。
实现思路
我使用CoordinatorLayout+Behavior实现的。说实话,Behavior真心强大。。
viewpager+头部
整个实现的思路是这样的。整体布局从上到下依次是:
透明View
viewpager
RecyclerView
其中透明View和Viewpager 合并成一个自定义的Header。当这个Header上移的时候,图片放大,并且RecyclerView联动上衣,从透明转向并且不透明。
所以首先要定制一个透明的可移动的HeaderView。
在onTouchEvent处理一下手势。。
@Override public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
return true;
case MotionEvent.ACTION_MOVE:
if(上下移动到阀值){ 展开为详情()
}else if(上下滑动到阀值,恢复viewpager){
}else if(下滑,则关闭Activity)
将header分为三种状态:
上移。则展开为详情页。
下移,则恢复为viewpager。
再下移,则finish Activity。
在上移的过程中,遇到了一点小挑战,这里分享下:
上移的过程中,图片需要放大。但是在做的过程中,不能使用LayoutParams实现。这里就关系到一些动画的小细节。
动画使用LayoutParams实现是一个禁忌。他会导致不停requestLayout,从而影响UI性能。
所以这里我的一个解法就是,我放大图片,不是真正的改变ImageView大小,而是去Scale图片。即使看起来变大了,他的View真正大小也不会变。
所以,有一句话叫做真亦是假、假亦是真 真真假假,你又何必当真呢?动画效果只要遵循这句话,基本上都是可以实现的。你所看到的效果都是假的。都是障眼法。View变大不是真正的变大。View悬浮不是真正的悬浮(有可能是显隐)。就像变魔术一样。。其实很简单。
接下来又遇到问题了。图片放大了,文字如何对齐? 文字的位置当然也不能真正改变。所以这里使用TranslationX实现。在图片放大的过程中,使用scale的系数,与两个端点值进行一个线性变化计算。主要文字对齐代码如下:
bottom.offsetLeftAndRight( (int) (target.getWidth() / 2 - target.getWidth() * (1 + progress) / 2 + MarginConfig.MARGIN_LEFT_RIGHT - bottom.getX()));
第二个点。就是在图片放大过程中,底部文字和按钮左右padding不能变。这也是我没有封装成一个拿来就用的View的原因(其实还是水平不够)。因为这些空间需要全部按照上方的方法进行动态计算。。所以也是比较坑爹的。。
ViewPager
拿了网上一个画廊的效果。直接
setPageTransformer(true, new ZoomOutPageTransformer());
这里注意,需要改变一下view的绘制顺序,保证当前view是最后绘制处于最上层
/改变系统绘制顺序
@Override protected int getChildDrawingOrder(int childCount, int i) {
int position = getCurrentItem();
if(position<0){
return i;
}else{ if(i == childCount - 1){//这是最后一个需要刷新的item
if(position>i){
position=i; }
return position; }
if(i == position){//这是原本要在最后一个刷新的item return childCount - 1; } }
return i; }}
RecyclerView
RecyclerView最开始是完全透明的。并且跟随HeaderView上移而上移,在上移的过程中渐渐显示出来。 需要监听RecyclerView滚动,当RecyclerView滚动到顶部的时候。告知Header,该恢复最初原样了。
@Override
public boolean onNestedFling(CoordinatorLayout coordinatorLayout, View child, View target, float velocityX, float velocityY, boolean consumed) {
//向下Fling并且到顶部 if (velocityY < 0 && ((RecyclerView) target).getChildAt(0).getY() == 0) { mDependency.restore(mDependency.getY()); }
return super.onNestedFling(coordinatorLayout, child, target, velocityX, velocityY, consumed); }
@Override
public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
//如果在顶部 if (((RecyclerView) target).getChildAt(0).getY() == 0) { //向下滑动
if (dy < 0) { mDependency.setY(mDependency.getY() - dy); //小于阀值
if (mDependency.getY() < 500) { mDependency.restore(mDependency.getY()); } } }
super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed); }}
Behavior
让header和RecyclerView关联起来的就是Behavior了。Behavior之前写过几篇介绍过了,这里就不再啰嗦。
denpendcy为HeaderView。并且监听RecyclerView的滑动。
具体的细节还是看源码吧~
android 饿了么 布局,Android仿饿了么详情页可以跟随手指移动 viewpager变详情页相关推荐
- android 模仿微信布局,【Android初学者】框架布局:仿微信页面制作
学习Android有一段时间了,跟大家分享一下经验吧! 如果有错误的地方,有更好的方法,麻烦大家留言指导! 工具:studio2.2,虚拟机版本:4.3,API 18(感觉比5.1的稳定啊!) 例子是 ...
- vue结合饿了么_vue高仿饿了么APP(一)
在网上找了一个vue的视频教程---高仿饿了么,讲得不错,自己也跟着讲师做了一遍,现在来帮自己整理,总结一下,加深对vue的理解. 一,功能技术分析 1,利用vue-resource实现前后端数据交互 ...
- android获取其他app布局,android - 如何从App的(布局)XML变量中获取Manifest版本号?...
android - 如何从App的(布局)XML变量中获取Manifest版本号? 我想有一种方法在代码的主要部分引用项目的清单版本号. 到目前为止我一直在做的是将String XML文件中的版本号链 ...
- android编程多组件布局,Android把多个控件定义成一个整体的布局类使用
在程序中有时候几个控件要放在一起,想随意放在布局上,而且不仅一个布局要使用,此时就想把这几个控件定义成一个新的View就好了,于是就有了下面这个类新的控件类SeekBarGroup.java,Seek ...
- android获取其他app布局,Android Studio查看其它APP的布局结构
概述 日常使用别家的APP过程中,会遇到一些比较好看的布局,这时候我们就想学习一下别人的布局结构,以便参考. (1)手机连接电脑.设置手机为USB调试模式 (2)运行Android Studio,打开 ...
- android recyclerview流式布局,Android FlexboxLayout流式布局
Android FlexboxLayout流式布局 FlexBoxLayout是为Android带来了与 CSS Flexible Box Layout(CSS 弹性盒子)相似功能的库. 一:添加依赖 ...
- android中九宫格的布局,Android布局--九宫格示例.doc
Android布局--九宫格示例.doc 下载提示(请认真阅读)1.请仔细阅读文档,确保文档完整性,对于不预览.不比对内容而直接下载带来的问题本站不予受理. 2.下载的文档,不会出现我们的网址水印. ...
- android studio制作目录布局,Android Studio:新创建的目录未出现在文件夹Vi中
9个解决方案 136 votes 事实证明,顶部有一个选择器,默认设置为显示Android. 如果您将切换按钮向下拨到"包",您可以看到自己的包. Aggressor answer ...
- Android怎么自定义listview布局,android – 如何将listView标头添加为自定义布局
我想在listView中添加标题我尝试这样我在这里缺少的ids很好. 我在片段中使用它. ListView lv; LinearLayout header = (LinearLayout) rootV ...
- android gdx 放进布局,Android - 将LibGDX项目放入Anroid App项目
我正在使用Android Studio ,我该如何将LibGDX项目放入Android App项目中(不是将Android App项目放入LibGDX项目中)? 这是将libGDX模块导入Androi ...
最新文章
- 关于登录linux时,/etc/profile、~/.bash_profile等几个文件的执行过程
- c语言printf相关函数 格式化字符串攻击 简介
- 炎炎夏日需要一个清凉的地 - 自制水冷系统
- 新项目废弃oracle,oracle 12.2数据库新增参数和废弃参数
- shell 脚本比较字符串相等_shell字符串比较判断是否为数字
- python比较两张图片是否一样_opencv_判断两张图片是否相同
- C++笔记-初步窥探全局函数在Debug、Release的地址
- linux内核工程导论,Linux内核工程导论——内存管理(3)
- Python: Django和Flask关于解析request的参数请求
- 谁负责本单位的各部门计算机,关于加强计算机校园网管理的若干认识
- 8uftp工具,这款工具有什么作用?它的优势在哪里?
- 实现Modbus Rtu 服务端 通过RS485转4G方式 实现远程采集传输串口设备数据
- 什么是QT(轻松的帮你做带界面的软件)
- MySQL技能树学习体验及期望
- Spring Boot 项目参数校验的常见使用场景
- gif软件(ShareX)
- qca9882 qca9880移植
- HTML中<img src=““>中图片路径的用法
- SAE上使用cron定时发微博
- 防止网络钓鱼攻击的10种方法...
热门文章
- 颜色码对照表(英文代码	形像颜色	HEX格式	RGB格式)
- 【谨记】PCB画板子的正确步骤(说多了,都是泪啊!)
- 作为一位爬虫,说说代理IP哪家强?
- 使用腾讯云OCR文字识别
- Nature:阐明肿瘤代谢的脆弱性
- 一个单位球体积理清二三重积分计算与体积的求解方法(含旋转体体积)
- Fiddler 移动端/模拟器安装证书
- 传言阿里P10赵海平,被P11多隆判定3.25离职,如何评价阿里 P10 赵海平对王垠的面试?
- mysql免安装迁移_Mysql 免安装配置并迁移数据库
- 关于AARRR用户增长漏斗模型,你究竟了解多少?