<commit_before>---
layout: post
title:  "自定义OverlapViewPager"
desc: "拥有三个page页的自定义View"
keywords: "Custom,Viewpage,Overlap"
date: 2016-12-08
categories: [Android]
tags: [android, Customize, ViewPager]
---
# 写在前面
Overlap，顾名思义，是一个page可以重叠的的ViewPager，一共有左中右三页，中间页固定，左右两边的page分别可以划出重叠到中间。话不多说，下面开始。

# 实现思路
自定义一个ViewGroup，往其中添加3个child；按照左中右的顺序，在onLayout中，设置好children的位置；在从左往右划动的时候，找到被drag的child，通过Scroller，根据手指的滑动距离，把对应的child移动相应的位置；有对滑动速度的检测，超过阈值就触发完全覆盖，以及对松手时滑动距离的阈值检测，判断是还原还是覆盖。见下图：

<img src="/static/img/blog/overlapviewpager/layout.png" width="50%" height="50%">


## 1.一些重要的常量
```java
    public static final int PAGE_LEFT = -1; //left page 标识
    
    public static final int PAGE_MIDDLE = 0;//middle page 标识
    
    public static final int PAGE_RIGHT = 1;//right page 标识
    
    private static final int PAGE_COUNT = 3;// page数量
    
    public static final int VIEW_INDEX_LEFT = 0;//left child 下标
    
    public static final int VIEW_INDEX_MIDDLE = 1;//middle child 下标
    
    public static final int VIEW_INDEX_RIGHT = 2;//middle child 下标
    
    private int downX = 0;
    
    private int mCurrentFront = PAGE_MIDDLE;//默认当前页为middle
    
    private int mCurrentMovedItemIndex = Integer.MIN_VALUE;
```

## 2.添加child<commit_msg>commit performance of blog overlapViewpager<commit_after>---
layout: post
title:  "自定义OverlapViewPager"
desc: "拥有三个page页的自定义View"
keywords: "Custom,Viewpage,Overlap"
date: 2016-12-08
categories: [Android]
tags: [android, Customize, ViewPager]
---
# 写在前面
Overlap，顾名思义，是一个page可以重叠的的ViewPager，一共有左中右三页，中间页固定，左右两边的page分别可以划出重叠到中间。话不多说，下面开始。

### 先看效果

##### 向右划
<img src="/static/img/blog/overlapviewpager/right_slide.gif" width="50%" height="50%">

##### 向左划
<img src="/static/img/blog/overlapviewpager/left_slide.gif" width="50%" height="50%">

# 实现思路
自定义一个ViewGroup，往其中添加3个child；按照左中右的顺序，在onLayout中，设置好children的位置；在从左往右划动的时候，找到被drag的child，通过Scroller，根据手指的滑动距离，把对应的child移动相应的位置；有对滑动速度的检测，超过阈值就触发完全覆盖，以及对松手时滑动距离的阈值检测，判断是还原还是覆盖。见下图：

<img src="/static/img/blog/overlapviewpager/layout.png" width="50%" height="50%">


## 1.一些重要的常量
```java
    public static final int PAGE_LEFT = -1; //left page 标识
    
    public static final int PAGE_MIDDLE = 0;//middle page 标识
    
    public static final int PAGE_RIGHT = 1;//right page 标识
    
    private static final int PAGE_COUNT = 3;// page数量
    
    public static final int VIEW_INDEX_LEFT = 0;//left child 下标
    
    public static final int VIEW_INDEX_MIDDLE = 1;//middle child 下标
    
    public static final int VIEW_INDEX_RIGHT = 2;//middle child 下标
    
    private int downX = 0;
    
    private int mCurrentFront = PAGE_MIDDLE;//默认当前页为middle
    
    private int mCurrentMovedItemIndex = Integer.MIN_VALUE;
```

## 2.添加child
{'fraction_non_alphanumeric': 0.11160220994475138, 'fraction_numerical': 0.019889502762430938, 'mean_word_length': 4.367588932806324, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3815205', 'n_tokens_mistral': 1294, 'n_tokens_neox': 1382, 'n_words': 206}