效果如图：
首先说下方的这几个点，这个点不是图片效果，而是Android自带的shape画的椭圆，使椭圆的宽高一样，就变成原型，然后设置颜色即可。
这2个点的代码如下：
红色点的代码
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <size android:width="8dp" android:height="8dp"/> <solid android:color="#ff00"/> </shape>
灰色点的代码
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <size android:width="8dp" android:height="8dp"/> <solid android:color="#44000000"/> </shape>
整体思路：
1、要展示viewpager,就要先把图片获取，图片是放在drawable-hdpi里的5张图片。
2、把图片放到一个list里，这个类似listview
3、利用viewpager的适配器，展示图片
4、在图片的适配器里根据位置加载每个图片资源，同时把图片下方的文字和选中的点显示
5、同时在适配器里要销毁已经隐藏的图片占用的资源
6、截止上一步，已经可以滑动图片了，但是图片滑动时，文字和点没有跟着变化，此时需要利用viewpage人的滑动监听，来处理文字变化和点的变化
7、viewpager有一个
viewpager.addOnPageChangeListener(new MyOnPageChangeListener());
监听，就new一个内部类，在内部类里通过图片滑动时的回调方法来实现。具体代码如下
MainActivity.java
package com.yuanlp.viewpager;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private static final String TAG = "MainActivity";
private ViewPager viewpager;
private TextView tv_title;
private LinearLayout ll_point_group;
private List<ImageView> p_w_picpathviews; //存放p_w_picpathview的集合，以便后期放入pageadapter中
//图片资源ID
private final int[] p_w_picpathIDs={
R.drawable.a,
R.drawable.b,
R.drawable.c,
R.drawable.d,
R.drawable.e
};
//图片标题集合
private final String[] p_w_picpathDescriptions={
"硅谷拔河比赛",
"凝聚你我，放飞梦想",
"抱歉，满座了",
"七月热浪滔天",
"加油努力学习"
};
//上一次点位高亮显示的位置
private int prePosition=0;
//为了使广告隔段时间自动切换下一张图片，需要在此用到Handler
private Handler handler=new Handler(){
@Override
public void handleMessage(Message msg) {
int item=viewpager.getCurrentItem()+1;
viewpager.setCurrentItem(item);
//延迟发消息
handler.sendEmptyMessageDelayed(0,4000);
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewpager= (ViewPager) findViewById(R.id.viewpager);
tv_title= (TextView) findViewById(R.id.tv_title);
ll_point_group= (LinearLayout) findViewById(R.id.ll_point_group);
p_w_picpathviews=new ArrayList<ImageView>();
MyPagerAdapter pagerAdapter=new MyPagerAdapter();
for (int i=0;i<p_w_picpathIDs.length;i++){
//在这里把p_w_picpath一个一个new出来
ImageView p_w_picpathView=new ImageView(this);
//这里引用图片设置为背景而不是src，是因为src可能会导致填充不完全
p_w_picpathView.setBackgroundResource(p_w_picpathIDs[i]);
//添加到集合
p_w_picpathviews.add(p_w_picpathView);
//添加点
ImageView point=new ImageView(this);
point.setBackgroundResource(R.drawable.selectors);
LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(8,8); //2个参数是宽和高
if (i==0){
point.setEnabled(true); //默认第0个显示红色选中
}else{
point.setEnabled(false); //其他为灰色
params.leftMargin=8; //设置和左边的为8个像素的间距
}
point.setLayoutParams(params);
//添加到线性布局里
ll_point_group.addView(point);
}
viewpager.setAdapter(pagerAdapter);
//设置viewpage页面滑动的监听
viewpager.addOnPageChangeListener(new MyOnPageChangeListener());
//设置中间位置,保证页面刚开始时，可以从左向右滑动
int item= Integer.MAX_VALUE/2- Integer.MAX_VALUE/2%p_w_picpathviews.size(); //保证是p_w_picpathviews的长度的整数倍
viewpager.setCurrentItem(item);
//设置默认文本时第0个文本内容
tv_title.setText(p_w_picpathDescriptions[prePosition]);
//延迟发消息，触发上面的handler内部类，来自动切换图片
handler.sendEmptyMessageDelayed(0,4000);
}
/**
* 页面滑动监听类
*/
class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{
/**
* 页面滚动时，回调该方法
* @param position 当前的页面位置
* @param positionOffset 滑动了页面的百分之多少
* @param positionOffsetPixels //屏幕上滑动了多少个像素
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
/**
* 当某个页面被选中了的时候回调，即焦点图片
* @param position 焦点图片的位置
*/
@Override
public void onPageSelected(int position) {
int realPosition=position%(p_w_picpathviews.size()); //这是因为在下方的适配器里，把数量无限大了，左右滑动时，会超出list数组的范围，报越界错误
//设置文本变化
tv_title.setText(p_w_picpathDescriptions[position]);
//把上一个高亮的为灰色，把当前的设置为红色
ll_point_group.getChildAt(prePosition).setEnabled(false);
ll_point_group.getChildAt(position).setEnabled(true);
prePosition=position;
}
/**
* 滑动的过程中回调,状态的变化
* 静止到滑动，滑动到静止，静止到拖拽
* @param state
*/
@Override
public void onPageScrollStateChanged(int state) {
}
}
class MyPagerAdapter extends PagerAdapter{
@Override
/**
* 得导图片总数
*/
public int getCount() {
return Integer.MAX_VALUE; //设置无限多，方便左右无限滑动
}
/**
* 相当于getview方法，
* @param container 本质上是viewpage人自身
* @param position 当前实例化页面的位置
* @return
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
int realPosition=position%(p_w_picpathviews.size()); //获取真正的位置
ImageView p_w_picpathView = p_w_picpathviews.get(position);
Log.e(TAG, "instantiateItem: 当前的位置"+position+"--------"+p_w_picpathView);
container.addView(p_w_picpathView); //添加到viewpager中
return p_w_picpathView;
}
/**
* 比较view和object是否是同一个实例
* @param view 页面
* @param object 是上面的方法instantiateItem返回的结果
* @return
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
/**
* 释放资源
* @param container 是viewpager
* @param position 要释放的位置
* @param object 要释放的页面
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
Log.e(TAG, "destroyItem: 释放资源的位置"+position+"-------object");
}
}
}免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
