效果图：
代码实现：
布局文件
<?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"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<!--存放图片的ViewPager-->
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#66000000"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="5dp">
<!--标题-->
<TextView
android:id="@+id/tv_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="标题"
android:textColor="@android:color/white" />
<!--存放小圆点的容器-->
<LinearLayout
android:id="@+id/ll_point_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>MainActivity.java
public class Main2Activity extends Activity implements ViewPager.OnPageChangeListener {
private ViewPager viewPager;
private int[] imageResIds;
private ArrayList<ImageView> imageViewList;
private LinearLayout ll_point_container;
private String[] contentDescs;
private TextView tv_desc;
private int previousSelectedPosition = 0;
boolean isRunning = false;
private Timer timer;
private @SuppressLint("HandlerLeak")
Handler handler;
MyRunnable runnable = new MyRunnable();
@RequiresApi(api = Build.VERSION_CODES.M)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
viewPager = (ViewPager) findViewById(R.id.viewpager);
// 设置页面更新监听
viewPager.addOnPageChangeListener(this);
ll_point_container = (LinearLayout) findViewById(R.id.ll_point_container);
tv_desc = (TextView) findViewById(R.id.tv_desc);
// Model数据
initData();
// Controller 控制器
initAdapter();
// 开启轮询
startLooper2();
}
@SuppressLint("HandlerLeak")
private void startLooper2() {
handler = new Handler();
handler.postDelayed(runnable,3000);
}
class MyRunnable implements Runnable{
@Override
public void run() {
viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
handler.postDelayed(runnable,3000);
}
}
private void startLooper() {
new Thread() {
@Override
public void run() {
isRunning = true;
while (isRunning) {
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
// 往下跳一位
runOnUiThread(new Runnable() {
@Override
public void run() {
viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
}
});
}
}
}.start();
}
/**
* 初始化要显示的数据
*/
private void initData() {
// 图片资源id数组
imageResIds = new int[]{R.drawable.aa, R.drawable.bb, R.drawable.cc, R.drawable.dd, R.drawable.ee};
// 文本描述
contentDescs = new String[]{
"我是第零张图片",
"我是第一张图片",
"我是第二张图片",
"我是第三张图片",
"我是第四张图片"
};
// 初始化要展示的5个ImageView
imageViewList = new ArrayList<ImageView>();
ImageView imageView;
View pointView;
LinearLayout.LayoutParams layoutParams;
for (int i = 0; i < imageResIds.length; i++) {
// 初始化要显示的图片对象
imageView = new ImageView(this);
imageView.setBackgroundResource(imageResIds[i]);
imageViewList.add(imageView);
// 加小白点, 指示器
pointView = new View(this);
pointView.setBackgroundResource(R.drawable.ic_launcher_background);
layoutParams = new LinearLayout.LayoutParams(5, 5);
if (i != 0) {
layoutParams.leftMargin = 10;
}
// 设置默认所有都不可用
pointView.setEnabled(false);
ll_point_container.addView(pointView, layoutParams);
}
}
@RequiresApi(api = Build.VERSION_CODES.M)
private void initAdapter() {
ll_point_container.getChildAt(0).setEnabled(true);
ll_point_container.getChildAt(previousSelectedPosition).setBackgroundColor(Color.WHITE);
tv_desc.setText(contentDescs[0]);
previousSelectedPosition = 0;
// 设置适配器
viewPager.setAdapter(new MyAdapter());
//设置界面切换动画
viewPager.setPageTransformer(true, (ViewPager.PageTransformer) new DepthPageTransformer());
// 默认设置到中间的某个位置
int pos = Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % imageViewList.size());
// 2147483647 / 2 = 1073741823 - (1073741823 % 5)
// 设置到某个位置
viewPager.setCurrentItem(pos);
}
class MyAdapter extends PagerAdapter {
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
// 3. 指定复用的判断逻辑, 固定写法
@Override
public boolean isViewFromObject(View view, Object object) {
// 当划到新的条目, 又返回来, view是否可以被复用.
// 返回判断规则
return view == object;
}
// 1. 返回要显示的条目内容, 创建条目
@Override
public Object instantiateItem(ViewGroup container, int position) {
System.out.println("instantiateItem初始化: " + position);
// container: 容器: ViewPager
// position: 当前要显示条目的位置 0 -> 4
// newPosition = position % 5
int newPosition = position % imageViewList.size();
ImageView imageView = imageViewList.get(newPosition);
// a. 把View对象添加到container中
container.addView(imageView);
// b. 把View对象返回给框架, 适配器
// 必须重写, 否则报异常
return imageView;
}
// 2. 销毁条目
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// object 要销毁的对象
container.removeView((View) object);
}
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
// 滚动时调用
}
@Override
public void onPageSelected(int position) {
// 新的条目被选中时调用
int newPosition = position % imageViewList.size();
//设置文本
tv_desc.setText(contentDescs[newPosition]);
// 把之前的禁用, 把最新的启用, 更新指示器
ll_point_container.getChildAt(previousSelectedPosition).setEnabled(false);
ll_point_container.getChildAt(previousSelectedPosition).setBackgroundResource(R.drawable.ic_launcher_background);
ll_point_container.getChildAt(newPosition).setEnabled(true);
ll_point_container.getChildAt(newPosition).setBackgroundColor(Color.WHITE);
// 记录之前的位置
previousSelectedPosition = newPosition;
}
@Override
public void onPageScrollStateChanged(int state) {
// 滚动状态变化时调用
}
@Override
protected void onDestroy() {
super.onDestroy();
isRunning = false;
}
}- 切换动画
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
@Override
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}其它
小红点的移动
引言
当我们滑动页面时，小红点也是随着滑动的。如何控制小红点的移动呢？
此时，同样要监听ViewPager的滑动了。我们知道，ViewPager的滑动监听，有三个
回调方法，监听哪个方法呢？在哪个方法中，来控制小红点的移动距离呢？
好! 这里我们通过监听:
onPageScrolled(int position, float positionOffset,int positionOffsetPixels)参数说明：
Position：页面滑动的索引
positionOffset：页面滑动的百分比
positionOffsetPixels： 页面滑动的像素
实现思路
计算小红点的移动距离，首先监听ViewPager的滑动事件：
setOnPageChangeListener
onPageScrolled(int position, float positionOffset,int positionOffsetPixels)
计算当前小红点根据移动的百分百，更改它的位置
小红点移动原理：
- 获取第一个小灰点的左边距离
containerGrayPoint.getChildAt(0).getLeft() - 获取第二个小灰点的左边距离
containerGrayPoint.getChildAt(1).getLeft() - 两点之间的距离 = 第二点的左边距离 - 第一个点的左边距离
containerGrayPoint.getChildAt(1).getLeft()- llContainer.getChildAt(0).getLeft(); - 根据移动的百分百，计算小红点当前移动之后的左边距
根据当前的ViewPager移动的索引*小红点移动的距离 + 小红点移动距离 * 滑动百分比
代码实现：
布局中：
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp">
<LinearLayout
android:id="@+id/container_gray_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!--在代码中动态的添加灰色的点-->
</LinearLayout>
<!--红色的点-->
<View
android:id="@+id/red_point"
android:layout_width="10dp"
android:layout_height="10dp"
android:background="@drawable/point_red_bg"/>
</RelativeLayout>Java中：
//动态的创建灰色的点
private void initGrayPoint() {
for (int resId : imgs) {
View view = new View(this);
view.setBackgroundResource(R.drawable.point_gray_bg);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10,10);
params.rightMargin = 20;//设置右边距
containerGrayPoint.addView(view,params);
}
}
//小灰点之间的宽度
private int width;
//position:当前滑动页面的下标 positionOffset：页面的滑动比率 positionOffsetPixels：页面滑动的实际像素
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
MyLogger.i(TAG,"position:"+position+",positionOffset:"+positionOffset+",positionOffsetPixels:"+positionOffsetPixels);
if(width == 0){
width = containerGrayPoint.getChildAt(1).getLeft() - containerGrayPoint.getChildAt(0).getLeft();
MyLogger.i(TAG,"width:"+width);
}
//修改小红点与相对布局的左边距
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) redPoint.getLayoutParams();
params.leftMargin = (int)(position*width + width*positionOffset);
redPoint.setLayoutParams(params);
}shape：
<?xml version="1.0" encoding="UTF-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#666"/>
</shape>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
