实现如下的ViewPager效果
一:明确ViewPager是高级控件,所以高级控件怎么来,viewPagar就怎么来
①声明viewpager
②findViewById
③添加数据源
④设置适配器
⑤展示
二:设计底部小圆,用shape设计
①未点击的时候,小圆点为灰色,代码如下
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="#787878"/>
<size android:width="30dp" android:height="30sp"/>
</shape>
②点击的时候,小圆点为粉色,代码如下
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="@color/colorAccent"/>
<size android:height="30dp" android:width="30dp"/>
</shape>
三:activity_main.xml设计布局,代码如下
<?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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.administrator.nightday0509.MainActivity">
//让ViewPager充满整个父布局,注意别导错了是v4包下的
<android.support.v4.view.ViewPager
android:id="@+id/vp_show"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
//给小圆点布局
<LinearLayout
//让小圆点居中
android:gravity="center"
android:id="@+id/ll_dotList"
android:layout_alignParentBottom="true"
android:layout_marginBottom="50dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"></LinearLayout>
</RelativeLayout>
四:在MainActivity.class中实现代码
public class Text06 extends AppCompatActivity {
private ViewPager vp_show06;
private LinearLayout ll_dotList;
//声明一个List<ImageView> ,是viewPager的数据源集合
private List<ImageView> imgList = new ArrayList<>();
//声明一个int类型的数组,给viewpager添加数据源
private int [] imgRes = {R.mipmap.item01,R.mipmap.item02,R.mipmap.item03,R.mipmap.item04,R.mipmap.item05,R.mipmap.item06,R.mipmap.item07,R.mipmap.item08};
//声明小圆点的图片ImageView[]数组
private ImageView [] dotList;
//设置处于轮播的状态
private boolean isLoof = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_text06);
vp_show06 = (ViewPager) findViewById(R.id.vp_show06);
//给viewpager增加数据源
addVpData();
MyAdapter06 adapter = new MyAdapter06();
vp_show06.setAdapter(adapter);
//给viewPager设置左右两边分别的数量,默认为1
vp_show06.setOffscreenPageLimit(1);
ll_dotList = (LinearLayout) findViewById(R.id.ll_dotList06);
//viewpager中的imageView的图片个数与小圆点个数保持一致
dotList = new ImageView[imgRes.length];
//给小圆点的布局增加小圆点数据
addDotData();
//设置viewpager的监听事件
setListener();
}
private void setListener() {
//注意是.addOnPageChangeListener
vp_show06.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
//滑动时
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//(滑动后)选中时
@Override
public void onPageSelected(int position) {
//先设置每一个小圆点为灰
for(int i=0;i<imgRes.length;i++){
dotList[i].setImageResource(R.drawable.dot_shape_no);
}
//选中的那个小圆点设置为亮粉,也就是滑动到那一个,就让那一个小圆点设置为亮分,其他的小圆点,设置为灰色
dotList[position].setImageResource(R.drawable.dot_shape_sel);
}
//状态 分为 0前 1时 2后
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void addDotData() {
//循环每一个小圆点
for(int i=0;i<imgRes.length;i++){
ImageView iv = new ImageView(this);
//设置一个宽高为30,30的layoutParams
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(30, 30);
//设置小圆点iv的左边局
layoutParams.leftMargin = 10;
//给小圆点设置宽高
iv.setLayoutParams(layoutParams);
//设置小圆点的图片资源
iv.setImageResource(R.drawable.dot_shape_no);
//把iv添加到父布局中
ll_dotList.addView(iv);
//把iv添加到小圆点数组中
dotList[i] = iv;
//给当前的小圆点iv一个标签(位置)
iv.setTag(i);
//设置当前小圆点的点击时间
iv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//当前的视图v也就是iv,得到标签(得到位置)
int position = (int)v.getTag();
//点击当前小圆点的时候,让viewpager跳转到位置position的条目(关于跳转改变小圆点状态的思想,见最后说明)
vp_show06.setCurrentItem(position);
}
});
}
//给第一个小圆点设置默认为亮粉
dotList[0].setImageResource(R.drawable.dot_shape_sel);
//创建一个子线程,进行延时操作
new Thread(new Runnable() {
@Override
public void run() {
isLoof = true;
while(isLoof){
try {
//子线程sleep2秒
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//sleep结束后,打开一个Ui进程
runOnUiThread(new Runnable() {
@Override
public void run() {
//首先得到当前viewPager的条目的位置
int position = vp_show06.getCurrentItem();
//进行判断,如果position==最大值(长度length-1),viewpager设置当前条目为第一个(跳转到第一个)
if(position == imgRes.length-1){
vp_show06.setCurrentItem(0);
//如果不是position不是最后一个,则跳转到下一个position(++position)
}else{
vp_show06.setCurrentItem(++position);
}
}
});
}
}
}).start();
}
private void addVpData() {
//循环添加ImageView到viewPager的数据集合中
for(int i=0;i<imgRes.length;i++){
ImageView iv = new ImageView(this);
//设置iv的布局宽高,填充父布局
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
//将layoutParams set进iv中
iv.setLayoutParams(layoutParams);
//当前iv设置ImageResource资源
iv.setImageResource(imgRes[i]);
//添加到数据源中
imgList.add(iv);
}
}
//写一个adapter继承自PagerAdapter
class MyAdapter06 extends PagerAdapter{
//得到数据源的size
@Override
public int getCount() {
return imgList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
//viewpag加载当前可见视图以及当前视图左右的两边的视图
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(imgList.get(position));
return imgList.get(position);
}
//销毁视图(只可意会,不可言传)
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(imgList.get(position));
}
}
}
此时就实现了效果,总结如下:
①明确需求,明确需要用什么知识点解决
②viewPager视图改变分两种情况
1:通过小圆点的单机事件,改变视图:让viewPager.setCurrentItem到选择位置position的条目中,然后通过viewPager的addOnPageChangeListener设置监听,其中就会调用onPageSelected方法,先让使用的小圆点变灰,然后再将当前position的小圆点设置为亮粉
2:通过viewPager的左右滑动,改变视图 :通过viewPager的addOnPageChangeListener设置监听,其中就会调用onPageSelected方法,先让使用的小圆点变灰,然后再将当前position的小圆点设置为亮粉
通过这两种情况对比可知,最终都是通过改变viewPager.setCurrentItem然后改变小圆点的ImageResouce是灰或者亮粉
对于PagerAdapter中的加载视图,和销毁视图的个人见解
以viewPager.setOffscreenPageLimit(1)为例子
①:首次加载视图的时候
②:当我们向左边滑动的时候
加载视图2,不会销毁视图
③:当我们继续向左边滑动的时候
④:此时我们向右边滑动的时候