Android之ViewPager 第二课

时间:2024-04-30 03:48:42

在这里只粘贴部分代码

在第一课中,只有View滑动完毕,才触发动画效果,令滑块移动,在第二课中,将实现滑块与View同步运行。

SecondActivity.java

package com.android3;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.DisplayMetrics;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View; import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView; import java.util.ArrayList;
import java.util.List; public class SecondActivity extends AppCompatActivity implements View.OnClickListener, ViewPager.OnPageChangeListener {
private ArrayList<View> viewList;
private ImageView cursor;
private float offset = 0;
private float screenW = 0;
private float eCurrentX = 0;
private Matrix matrix;
private float fScreenW = 0;
private int currentIndex = 0;
private int temp = 1;
private float sCurrentX;
private int len; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
initToolbar();
initViewPager();
} /**
* ViewPager 保证 缓存中存在三个视图,即 左边 右边 和中间 隔一个的灰被destroy,
*/
@SuppressLint("InflateParams")
private void initViewPager() {
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
LinearLayout titleBar = (LinearLayout) findViewById(R.id.titleBar);
LayoutInflater inflater = getLayoutInflater();
//创建四个View
View view1 = inflater.inflate(R.layout.viewpage_01, null);
View view2 = inflater.inflate(R.layout.viewpage_02, null);
View view3 = inflater.inflate(R.layout.viewpage_03, null);
View view4 = inflater.inflate(R.layout.viewpage_04, null); viewList = new ArrayList<>();// 将要分页显示的View装入数组中
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);
viewList.add(view4);
len = viewList.size();
MyPagerAdapter adapter = new MyPagerAdapter(viewList);
List<String> titleList = new ArrayList<>();
titleList.add("第一页面");
titleList.add("第二页面");
titleList.add("第三页面");
titleList.add("第四页面");
for (int i = 0; i < titleList.size(); i++) {
TextView textView = new TextView(this);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.weight = 1;
params.setMargins(5, 3, 5, 3);
textView.setLayoutParams(params);
textView.setText(titleList.get(i));
textView.setTextSize(15);
textView.setGravity(Gravity.CENTER);
titleBar.addView(textView);
} initCursorPos(); //初始化指示器位置 viewPager.setAdapter(adapter);//绑定适配器
viewPager.addOnPageChangeListener(this); //注 : setOnPageChangeListener 过时
} /**
* 单位px
*/
public void initCursorPos() {
// 初始化动画
cursor = (ImageView) findViewById(R.id.cursor);
float cursorW = BitmapFactory.decodeResource(getResources(), R.mipmap.cursor).getWidth();
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
screenW = dm.widthPixels;// 获取分辨率宽度
fScreenW = screenW / viewList.size();
offset = (fScreenW - cursorW) / 2;// 计算偏移量
matrix = new Matrix();
matrix.postTranslate(offset, 0);
cursor.setImageMatrix(matrix);// 设置动画初始位置 ###原始位置
} private void initToolbar() {
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbar.setTitle("");
mToolbar.setNavigationIcon(R.mipmap.back);
setSupportActionBar(mToolbar);
mToolbar.setNavigationOnClickListener(this);
} @Override
public void onClick(View view) {
switch (view.getId()) {
case -1:
finish();
break;
}
} @Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
sCurrentX = positionOffset * fScreenW;
if(position!=currentIndex){
temp=1;
currentIndex=position;
return;
}
if (temp == 0) {
matrix.postTranslate((sCurrentX - eCurrentX), 0);
cursor.setImageMatrix(matrix);
eCurrentX = sCurrentX; } else {
if (positionOffset > 0.5) {
eCurrentX = fScreenW;
} else {
eCurrentX = 0;
}
temp--;
}
currentIndex=position; } @Override
public void onPageSelected(int position) {
} @Override
public void onPageScrollStateChanged(int state) { }
}

下面详细介绍ViewPager.OnPageChangeListener监听器的三个重写方法:

当从手指按下,到页面滑动停止的过程:

首先系统调用onPageScrollStateChanged(int state)方法,其中state=1,表示开始滑动;

然后系统调用onPageScrolled(int position, float positionOffset, int positionOffsetPixels)方法,

position是当前页面的编号,positionOffset滑动百分比,取值范围[0,1],positionOffsetPixels滑动长度,取值[0,手机宽度(px)]

/*********************************************************************************/

在滑动过程中有这几个因素需要强调:

1、从左向右滑动   positionOffset和positionOffsetPixels初始值为0,并根据滑动距离增大;

2、从右向左滑动   positionOffset初始值为1,并根据滑动距离减小,positionOffsetPixels初始值为手机宽度,并根据滑动距离减小;

3、当position=0时,从右向左滑动,positionOffset和positionOffsetPixels始终为0;

4、当(position=页面总数-1)时,从左向右滑动,positionOffset和positionOffsetPixels始终为0;

/*********************************************************************************/
  可能在滑动过程中手指离开屏幕,这时系统再次调用onPageScrollStateChanged(int state)方法 state=2,当滑动肯定能到下一个页面时,

positionOffset和positionOffsetPixels都到达最大值,然后再次调用onPageScrolled(int position, float positionOffset, int positionOffsetPixels)方法,

这时position为新页面的编号,positionOffset和positionOffsetPixels置零;

最后再调用onPageScrollStateChanged(int state)方法 state=0;表示滑动停止;

所以onPageScrolled()方法中代码就解释的通了,

 sCurrentX = positionOffset * fScreenW;

fScreenW是滑块从一个标题滑向另一个标题的距离,sCurrentX是滑动页面时,滑块相对走的距离,

成员变量temp是区分滑动页面时是否是第一次调用onPageScrolled();并在第一次调用该方法时,判断是向左滑动还是向右滑动:

               if (positionOffset > 0.5) {
eCurrentX = fScreenW;
} else {
eCurrentX = 0;
}

滑动停止时,重置temp为1;

游标滑动采用 matrix.postTranslate((sCurrentX - eCurrentX), 0); cursor.setImageMatrix(matrix); 这两句代码,相对位移。

谢谢

可能在滑动过程中手指离开屏幕,这时系统再次调用onPageScrollStateChanged(int state)方法 state=2,

当滑动肯定能到下一个页面时,positionOffset和positionOffsetPixels都到达最大值,

然后再次调用onPageScrolled(int position, float positionOffset, int positionOffsetPixels)方法,

这时position为新页面的编号,positionOffset和positionOffsetPixels置零;

代码下载    http://download.****.net/detail/qq_25059501/9664066

作者: 小淘气儿

出处: http://www.cnblogs.com/xiaotaoqi/p/5998845.html/>

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出.