仿格瓦拉双层拖拽布局，格瓦拉电影详情界面

2024-02-03 18:40
文章标签 布局 界面 拖拽 详情 电影 双层 格瓦拉

本文主要是介绍仿格瓦拉双层拖拽布局，格瓦拉电影详情界面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这是一个复杂的控件，双层布局，可滑动，可拖拽

Demo下载：我的Github DoublePull

格瓦拉实际效果图：

简单分析：

  1. 根部局使用了RelativeLayout，有两个子布局：外层布局与内层布局。
  2. 外层布局。根布局为自定义ScrollView，有两子布局：HeaderFrameLayout与PullRelativeLayout
  3. 内层布局。根部局为RelativeLayout，有两子布局：RecyclerView与ImageButton

外层布局如图：

内层布局如图：

实现难点：

  1. 初始化，事件由ScrollView处理和消耗。当滚动到顶部，若继续往下滑动，事件由子View PullRelativeLayout处理和消耗
  2. 若PullRelativeLayout处理和消耗事件，拖拽距离过小，移动到原来位置。反之，则向下滑动隐藏布局
  3. HeaderFrameLayout随着PullRelativeLayout的变化而变化。隐藏则一起隐藏，打开则一起打开
  4. PullRelativeLayout隐藏后，ScrollView将不能处理和消耗事件，事件应由RecyclerView处理和消耗
  5. RecyclerView头布局滚动高度超过，头的70%，PullRelativeLayout做动画。HeaderFrameLayout做打开动画
  6. HeaderFrameLayout自定义View内部需要有打开功能，可使用Scroller来完成
  7. PullRelativeLayout自定义View内部需要有打开和隐藏功能，可使用Scroller来完成
  8. View的滑动也可使用动画的形式，但是由于需要设置一些Visibility属性，这里就使用Scroller来完成滑动
  9. 自定义View之间的状态获取和数据交互，使用了对外提供回调接口的形式和对象直接注入的形式
  10. 调试布局效果会花掉一些时间

自定义View分析：

OutScrollView

public class OutScrollView extends ScrollView {private int mPullRelativeLayoutState = PullRelativeLayout.SHOW;private int mDownY;private int mMoveY;private OnScrollStateChangeListener mOnScrollStateChangeListener;public OutScrollView(Context context) {super(context);}public OutScrollView(Context context, AttributeSet attrs) {super(context, attrs);}public OutScrollView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}public void setPullRelativeLayoutState(int state) {mPullRelativeLayoutState = state;}@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {super.onScrollChanged(l, t, oldl, oldt);if (mOnScrollStateChangeListener != null) {mOnScrollStateChangeListener.onScrollChange(l, t, oldl, oldt);}}@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {switch (ev.getAction()) {case MotionEvent.ACTION_DOWN:mDownY = (int) ev.getRawY();break;case MotionEvent.ACTION_MOVE:mMoveY = (int) ev.getRawY();break;case MotionEvent.ACTION_CANCEL:case MotionEvent.ACTION_UP:mDownY = 0;mMoveY = 0;break;}if(mMoveY - mDownY < 0) {return super.onInterceptTouchEvent(ev);}if (getScrollY() == 0) {if (mPullRelativeLayoutState == PullRelativeLayout.SHOW) {return false;}if (mPullRelativeLayoutState == PullRelativeLayout.MOVE) {return false;}}return super.onInterceptTouchEvent(ev);}@Overridepublic boolean onTouchEvent(MotionEvent ev) {if (mPullRelativeLayoutState == PullRelativeLayout.HIDE) {return false;}return super.onTouchEvent(ev);}public interface OnScrollStateChangeListener {void onScrollChange(int l, int t, int oldl, int oldt);}public void setOnScrollStateChangeListener(OnScrollStateChangeListener listener) {mOnScrollStateChangeListener = listener;}}
  1. 获取PullRelativeLayoutState的状态值，根据它来判断是否处理事件：自己处理，子View处理，不处理等
  2. OnScrollStateChangeListener把ScrollView滚动高度状态回调出去，给外面使用

HeaderFrameLayout

public class HeaderFrameLayout extends FrameLayout {private Scroller mScroller;private int mHeight;private boolean isOpen;public HeaderFrameLayout(Context context) {super(context);init();}public HeaderFrameLayout(Context context, AttributeSet attrs) {super(context, attrs);init();}public HeaderFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}private void init() {mScroller = new Scroller(getContext());}@Overridepublic void computeScroll() {if (mScroller.computeScrollOffset()) {scrollTo(mScroller.getCurrX(), mScroller.getCurrY());postInvalidate();}}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);mHeight = getMeasuredHeight();}public void setOpen(boolean flag) {isOpen = flag;}public boolean isOpen() {return isOpen;}public void open() {if (!isOpen) {return;}smoothScrollTo(0, mHeight, 0, -mHeight, 800);isOpen = false;}private void smoothScrollTo(int startX, int startY,int dx, int dy, int duration) {mScroller.startScroll(startX, startY, dx, dy, duration);invalidate();}}
  1. 使用Scroller来滑动，让自己拥有打开滑动的效果，初始化位移高度等
  2. 一个boolean值来限制是否做打开滑动的效果

PullRelativeLayout

public class PullRelativeLayout extends RelativeLayout {public static final int SHOW = 1000;public static final int HIDE = 2000;public static final int MOVE = 3000;public static final int OPEN_START = 4000;public static final int OPEN_FINISH = 5000;private static final int NORMAL_TIME = 600;private int mMaxOffset;private int mState = SHOW;private float mLastY;private int mMoveY;private Scroller mScroller;private OnStateChangeListener mOnStateChangeListener;public PullRelativeLayout(Context context) {super(context);init();}public PullRelativeLayout(Context context, AttributeSet attrs) {super(context, attrs);init();}public PullRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}private void init() {mScroller = new Scroller(getContext());}@Overridepublic void computeScroll() {if (mScroller.computeScrollOffset()) {scrollTo(mScroller.getCurrX(), mScroller.getCurrY());postInvalidate();}}public void setMaxOffset(int offset) {mMaxOffset = offset;}public void setState(int state) {mState = state;}public int getState() {return mState;}@Overridepublic boolean onTouchEvent(MotionEvent event) {if (mState == HIDE) {return false;}float y = event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:mLastY = y;break;case MotionEvent.ACTION_MOVE:int moveY = (int) (y - mLastY);if (getScrollY() <= 0 && moveY > 0) {int offset = moveY / 2;move(offset);}mLastY = y;break;case MotionEvent.ACTION_CANCEL:case MotionEvent.ACTION_UP:changeState();break;}return true;}private void move(int offset) {mState = MOVE;if (mOnStateChangeListener != null) {mOnStateChangeListener.pullViewMove(mState, -offset);}scrollBy(0, -offset);}private void hide() {mState = HIDE;if (mOnStateChangeListener != null) {mOnStateChangeListener.pullViewHide(mState);}mMoveY = getMeasuredHeight() + Math.abs(getScrollY());smoothScrollTo(0, getScrollY(), 0, -mMoveY, NORMAL_TIME * 3);}public void hide(int time) {mState = HIDE;if (mOnStateChangeListener != null) {mOnStateChangeListener.pullViewHide(mState);}mMoveY = getMeasuredHeight() + Math.abs(getScrollY());smoothScrollTo(0, getScrollY(), 0, -mMoveY, time);}private void show() {mState = SHOW;if (mOnStateChangeListener != null) {mOnStateChangeListener.pullViewShow(mState);}smoothScrollTo(0, getScrollY(), 0, -getScrollY(), getScrollY());}private void changeState() {if (Math.abs(getScrollY()) > mMaxOffset + 50) {hide();} else {show();}}public void open() {mState = OPEN_START;if (mOnStateChangeListener != null) {mOnStateChangeListener.pullViewOpenStart();}smoothScrollTo(0, -mMoveY, 0, mMoveY, NORMAL_TIME);postDelayed(new Runnable() {@Overridepublic void run() {mState = OPEN_FINISH;if (mOnStateChangeListener != null) {mOnStateChangeListener.pullViewOpenFinish();}}}, NORMAL_TIME);}private void smoothScrollTo(int startX, int startY,int dx, int dy, int duration) {mScroller.startScroll(startX, startY, dx, dy, duration);invalidate();}public interface OnStateChangeListener {void pullViewShow(int state);void pullViewHide(int state);void pullViewMove(int state, int offset);void pullViewOpenStart();void pullViewOpenFinish();}public void setOnStateChangeListener(OnStateChangeListener listener) {mOnStateChangeListener = listener;}}
  1. 使用Scroller来滑动，设置打开，隐藏，手指拖拽的方法。将View的各种状态回调出去，用于同步其他View的状态
  2. 设置状态监听器

再来看一次效果图：

Demo下载：我的Github DoublePull

2016年7月09日 03:57:12

这篇关于仿格瓦拉双层拖拽布局，格瓦拉电影详情界面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/675038。

相关文章

前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
Python中的可视化设计与UI界面实现

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面（UI）,包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面：python带你玩转UI设计示例：使用Tkinter创建一个简单的窗口绘图魔法：用
阅读更多...
Python中构建终端应用界面利器Blessed模块的使用

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置：简单、快速、无障碍二、基本功能：从彩色文本到动态交互1. 显示基本内容2. 创建链
阅读更多...
HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

在使用 LVGL 8.3.6 创建一个垂直布局，其中 label 控件位于 image 控件下方，你可以使用 lv_obj_set_flex_flow 来设置布局为垂直，并确保 label 控件在 image 控件后添加。这里是如何步骤性地实现它的一个基本示例： 创建父容器：首先创建一个容器对象，该对象将作为布局的基础。设置容器为垂直布局：使用 lv_obj_set_flex_flow 设置容器
阅读更多...
Python：豆瓣电影商业数据分析-爬取全数据【附带爬虫豆瓣，数据处理过程，数据分析，可视化，以及完整PPT报告】

Python：豆瓣电影商业数据分析-爬取全数据【附带爬虫豆瓣，数据处理过程，数据分析，可视化，以及完整PPT报告】

**爬取豆瓣电影信息，分析近年电影行业的发展情况** 本文是完整的数据分析展现，代码有完整版，包含豆瓣电影爬取的具体方式【附带爬虫豆瓣，数据处理过程，数据分析，可视化，以及完整PPT报告】   最近MBA在学习《商业数据分析》，大实训作业给了数据要进行数据分析，所以先拿豆瓣电影练练手，网络上爬取豆瓣电影TOP250较多，但对于豆瓣电影全数据的爬取教程很少，所以我自己做一版。 目
阅读更多...
Apache Tiles 布局管理器

Apache Tiles 布局管理器

陈科肇 =========== 1.简介 一个免费的开源模板框架现代Java应用程序。  基于该复合图案它是建立以简化的用户界面的开发。 对于复杂的网站，它仍然最简单，最优雅的方式来一起工作的任何MVC技术。 Tiles允许作者定义页面片段可被组装成在运行一个完整的网页。  这些片段，或Tiles，可以用于为了降低公共页面元素的重复，简单地包括或嵌入在其它瓦片，制定了一系列可重复使用
阅读更多...
一款支持同一个屏幕界面同时播放多个视频的视频播放软件

一款支持同一个屏幕界面同时播放多个视频的视频播放软件

GridPlayer 是一款基于 VLC 的免费开源跨平台多视频同步播放工具，支持在一块屏幕上同时播放多个视频。其主要功能包括： 多视频播放：用户可以在一个窗口中同时播放任意数量的视频，数量仅受硬件性能限制。支持多种格式和流媒体：GridPlayer 支持所有由 VLC 支持的视频格式以及流媒体 URL（如 m3u8 链接）。自定义网格布局：用户可以配置播放器的网格布局，以适应不同的观看需求。硬
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2