前言

今天需要实现如下图所示的布局效果：

第一反应是利用ViewDragHelper写一个自定义布局，然后实现拖拽效果。但是如果这样做，会有很多实现上的问题，例如：

三个Page的布局内容需要在一个类里完成，耦合性太高了。
自定义布局中需要大量处理MotionEvent，解决Touch事件分配和冲突等各种问题。

因此，我考虑一种折中的方法：Pager的滑动通过ViewPager实现，然后再实现一个自定义ViewGroup，用于显示除ViewPager中的前后Page。幸运的是，这种方法是可行的。具体思路如下。

思路

关键函数

首先，介绍一个ViewGroup中的关键函数：

public void setClipChildren(boolean clipChildren)

官方的解释是：

By default, children are clipped to their bounds before drawing. This allows view groups to override this behavior for animations, etc.

翻译：

默认情况下，在ViewGroup绘制前，子View都被限制在它们自己的区域内无法得到绘制。这可以让ViewGroup通过重写该方法来实现一些动画效果。该值默认为true。

注意：setClipChildren(false)在3.0以上版本中，开启了硬件加速后将不能正常工作，所以需要将其设置为软件加速。

自定义PagerContainer

我们可以自定义一个ViewGroup，让它里面包含ViewPager（如果需要显示前后两页的内容，则ViewPager的layout_width不能为match_parent），同时我们设置ViewGroup的setClipChildren为false即可显示前后Page的内容了。

自定义PagerContainer代码如下：

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;
import android.widget.FrameLayout;/*** Created by wzy on 16-1-5.*/
public class AppPagerContainer extends FrameLayout {private ViewPager mViewPager;public AppPagerContainer(Context context) {this(context, null);}public AppPagerContainer(Context context, AttributeSet attrs) {this(context, attrs, 0);}public AppPagerContainer(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initData();}private void initData() {// 允许子View在其区域内进行绘制setClipChildren(false);// child clip功能在Android3.x之后的版本会因为硬件加速而不起作用，所以这里需要关闭硬件加速功能setLayerType(View.LAYER_TYPE_SOFTWARE, null);}@Overrideprotected void onFinishInflate() {super.onFinishInflate();try {mViewPager = (ViewPager) getChildAt(0);} catch (Exception e) {throw new IllegalStateException("The root child of PagerContainer must be a ViewPager");}}public ViewPager getViewPager() {return mViewPager;}
}

布局xml如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><com.android.ui.widget.AppPagerContainer
        android:id="@+id/pager_container"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#000000"><android.support.v4.view.ViewPager
            android:id="@+id/viewpager_layout"android:layout_width="300dp"android:layout_height="300dp"android:layout_gravity="center_horizontal"/></com.android.ui.widget.AppPagerContainer></LinearLayout>

效果如图所示：

ViewPager中呈现前一页和后一页的内容相关推荐

Python+Selenium自动化测试之页码，前一页、后一页、翻页
思路:获取当前的总记录数,每页大小,算出总的页数,然后根据总页数实现翻页,在翻页时,可以获取每一页的内容存在列表中,为后面的模糊匹配做准备. BasePage中封装 # 页面的页码信息,记录总数.分页 ...
Android ViewPager 如何判断当前页面是从前一页还是后一页滑动过来
前言在Android开发中,ViewPager是最常用的控件之一.它提供的左右滑动的功能,可以让我们轻松实现图片查看器.Tab页切换等功能.今天要讲的是使用过程中的一个小收获.当我们在左右滑动时,有 ...
vue中，点击button按钮后，页面上的input框再次自动获取焦点
需求:点击button按钮,录入成功后,页面上的input框自动聚焦,快速进行下一次录入,提高效率开始尝试了几种方法都没有成功一.首先想到的用vue指令 v-focus,然而没有成功 <In ...
js中实现页面跳转（返回前一页、后一页）
一:JS 重载页面,本地刷新,返回上一页代码如下: <a href="javascript:history.go(-1)">返回上一页</a> < ...
java跳转页面后再跳回前一个页面_js中实现页面跳转（返回前一页、后一页）
一:JS 重载页面,本地刷新,返回上一页代码如下: 返回上一页重载页面,本地刷新返回上一页重载页面,本地刷新返回前二页并刷新的JS代码应该怎样写. 代码如下: history.go(-2); ...
SQL 语句从表中选取前5行，后5行的记录，以及%用法
一.如何选取前五行.后五行记录: --前5行:select top 5 * from table --后5行:select top 5 * from table order by id desc 其中 ...
简单步骤：wps如何从一页之后开始定义页眉和页脚
一般以前word都是用分节符分割前一页和后一页的页眉和页脚.而在wps中使用却很方便.步骤入下: 1 光标点击希望添加页眉和页脚的所在页插入-->页眉和页脚,写入要添加的页眉和页脚内容.这时候 ...
Android viewpager+fragment实现无限滚动，左右有前/后一页的部分，并fragment显示的内容是activity传过去的数据
背景:最近在做app的时候碰到一个这样的需求.1,将从网络上获取的json数组数据显示出来,每页显示一个数据源,并且可以左右翻页查看:2,中间显示一个完整页,两边分别还有上下一页的一点,:3,可无限循 ...
python实现字符串中中文在前，数字在后且按从小到大排序
如题:使用python3.x 实现一个包含中文数字的字符串中,输出为中文在前面,数字在后面且按从小到大排序. 思路:先将字符串进行排序,然后通过字符串分割实现中文再前面,数字在后面.(欢迎交流其他思路 ...

ViewPager中呈现前一页和后一页的内容

目录

前言

思路

关键函数

自定义PagerContainer

ViewPager中呈现前一页和后一页的内容相关推荐

最新文章

热门文章