1.主布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RadioGroup
android:id="@+id/rg_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal" />
<com.hbwj.a06viewpager.MyViewPager
android:id="@+id/myviewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/rg_main" />
</RelativeLayout>
2.代码中实例化MyScrollerView,并且添加页面
private MyViewPager myviewpager;
private int[] ids = {R.drawable.a1, R.drawable.a2, R.drawable.a3, R.drawable.a4, R.drawable.a5, R.drawable.a6};
private RadioGroup rg_main;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
myviewpager = (MyViewPager) findViewById(R.id.myviewpager);
rg_main = (RadioGroup) findViewById(R.id.rg_main);
//添加6页面
for (int i = 0; i < ids.length; i++) {
ImageView imageView = new ImageView(this);
imageView.setBackgroundResource(ids[i]);
//添加到MyViewPager这个View中
myviewpager.addView(imageView);
}
}
}
3.onLayout方法实现:指定6个图片的位置
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
//遍历孩子,给每个孩子指定在屏幕的坐标位置
for (int i = 0; i < getChildCount(); i++) {
View childView = getChildAt(i);
childView.layout(i * getWidth(), 0, (i + 1) * getWidth(), getHeight());
}
}
画图分析
4.对自定义的viewpager进行滑动,此时想到的便是手势识别器,手势识别器分为3步走:
- 1.定义出来
- 2.实例化-把想要的方法给重新
- 3.在onTouchEvent()把事件传递给手势识别器
private GestureDetector detector;
private void initView(final Context context) {
//2.实例化手势识别器
detector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() {
@Override
public void onLongPress(MotionEvent e) {
super.onLongPress(e);
Toast.makeText(context, "长按", Toast.LENGTH_SHORT).show();
}
/**
*
* @param e1
* @param e2
* @param distanceX 在X轴滑动了的距离
* @param distanceY 在Y轴滑动了的距离
* @return
*/
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
/**
*x:要在X轴移动的距离
*y:要在Y轴移动的距离
*/
scrollBy((int) distanceX, 0);
return true;
}
@Override
public boolean onDoubleTap(MotionEvent e) {
Toast.makeText(context, "双击", Toast.LENGTH_SHORT).show();
return super.onDoubleTap(e);
}
});
}
//3.把事件传递给手势识别器:onTouchEvent方法中
detector.onTouchEvent(event);
5.滑动到某个位置后自动到合适的位置下标停留
private float startX;
@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
//3.把事件传递给手势识别器
detector.onTouchEvent(event);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//1.记录坐标
startX = event.getX();
System.out.println("onTouchEvent==ACTION_DOWN");
break;
case MotionEvent.ACTION_MOVE:
System.out.println("onTouchEvent==ACTION_MOVE");
break;
case MotionEvent.ACTION_UP:
System.out.println("onTouchEvent==ACTION_UP");
//2.来到新的坐标
float endX = event.getX();
//下标位置
int tempIndex = currentIndex;
if ((startX - endX) > getWidth() / 2) {
//显示下一个页面
tempIndex++;
} else if ((endX - startX) > getWidth() / 2) {
//显示上一个页面
tempIndex--;
}
//根据下标位置移动到指定的页面
scrollToPager(tempIndex);
break;
}
return true;
}
/**
* 屏蔽非法值,根据位置移动到指定页面
*
* @param tempIndex
*/
public void scrollToPager(int tempIndex) {
if (tempIndex < 0) {
tempIndex = 0;
}
if (tempIndex > getChildCount() - 1) {
tempIndex = getChildCount() - 1;
}
//当前页面的下标位置
currentIndex = tempIndex;
//总距离计算出来
int distanceX = currentIndex * getWidth() - getScrollX();
// int distanceX = 目标 - getScrollX();
//移动到指定的位置
scrollTo(currentIndex*getWidth(),getScrollY());
}
滑动到某一个页面的算法
6.解决仿viewpager回弹时的生硬问题:使用系统自带的Scroller
private Scroller scroller;
//初始化
scroller = new Scroller(context);
/**
* 屏蔽非法值,根据位置移动到指定页面
*
* @param tempIndex
*/
public void scrollToPager(int tempIndex) {
if (tempIndex < 0) {
tempIndex = 0;
}
if (tempIndex > getChildCount() - 1) {
tempIndex = getChildCount() - 1;
}
//当前页面的下标位置
currentIndex = tempIndex;
if (onPagerChangeListener != null) {
onPagerChangeListener.onScrollToPager(tempIndex);
}
//总距离计算出来
int distanceX = currentIndex * getWidth() - getScrollX();
// int distanceX = 目标 - getScrollX();
//移动到指定的位置
//scrollTo(currentIndex*getWidth(),getScrollY());
//scroller.startScroll(getScrollX(),getScrollY(),distanceX,0);
scroller.startScroll(getScrollX(), getScrollY(), distanceX, 0, Math.abs(distanceX));
invalidate();//强制绘制;//onDraw();computeScroll();
}
@Override
public void computeScroll() {
// super.computeScroll();
if (scroller.computeScrollOffset()) {
//得到移动这个一小段对应的坐标
float currX = scroller.getCurrX();
scrollTo((int) currX, 0);
invalidate();
}
}
添加RadioGroup点击并实现双向跳转
for (int i = 0; i < myviewpager.getChildCount(); i++) {
RadioButton button = new RadioButton(getApplicationContext());
button.setId(i);
if (i == 0) {
button.setChecked(true);
}
rg_main.addView(button);
}
rg_main.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
myviewpager.scrollToPager(checkedId);
}
});
定义接口PagerChangeListener监听页面变化
/**
* 监听页面变化
*/
interface OnPagerChangeListener {
void onScrollToPager(int position);
}
OnPagerChangeListener onPagerChangeListener;
public void setOnPagerChangeListener(OnPagerChangeListener onPagerChangeListener) {
this.onPagerChangeListener = onPagerChangeListener;
}
//scrollToPager中添加代码
if (onPagerChangeListener != null) {
onPagerChangeListener.onScrollToPager(tempIndex);
}
使用接口
myviewpager.setOnPagerChangeListener(new MyViewPager.OnPagerChangeListener() {
@Override
public void onScrollToPager(int position) {
rg_main.check(position);
}
});
7.添加测试页面
布局如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#55ff0000"
android:weightSum="1">
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="136dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
<ProgressBar
android:id="@+id/progressBar2"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="372dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
<ProgressBar
android:id="@+id/progressBar3"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
<ScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</ScrollView>
</LinearLayout>
MainActivity中添加布局
//指定页面添加布局
View view=View.inflate(getApplicationContext(),R.layout.test,null);
myviewpager.addView(view,2);
8.解决无法看到效果,在MyScrollView中重写OnMeasure
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
for (int i = 0; i < getChildCount(); i++) {
View childView = getChildAt(i);
childView.measure(widthMeasureSpec, heightMeasureSpec);
}
}
9.解决事件拦截问题
MyViewPager中添加拦截事件
/**
* 拦截事件
*/
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
boolean result = false;
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
detector.onTouchEvent(ev);
//第一次按下的坐标
downX = ev.getX();
downY = ev.getY();
break;
case MotionEvent.ACTION_MOVE:
float newdownX = ev.getX();
float newdownY = ev.getY();
int distanceX = (int) Math.abs(newdownX - downX);
int distanceY = (int) Math.abs(newdownY - downY);
//防止抖动为1的情况
if(distanceX>distanceY&&distanceX>10){
result=true;
}
break;
case MotionEvent.ACTION_UP:
break;
}
return result;
}