图片轮播可以说时最常用的效果之一了。实现起来算是比较简单，当然没有前端那么简单。这里让我大声赞美一声swiper，十几行代码搞定一个幻灯片除了swiper还有谁？
可是Android上没有swiper。/(ㄒoㄒ)/~~
就暂且忘掉swiper，来看看Android怎么实现图片轮播？先定一个小目标：
目标
理一下思路，首先这是一个viewpager，需要自动滑动，那么我就写一个timer调用viewpager的setCurrentItem（）方法使其滑动。然后添加小圆点。
三步走：
1、创建viewpager。
2、创建timer控制viewpager。
4、根据viewpager的状态改变圆点的view。
布局文件
创建一个viewlist，将生成的view放入其中。
viewList=newArrayList<>();
for(inti=0;i<4;i++){
view=getActivity().getLayoutInflater().inflate(R.layout.view_image,null);
ImageView img= (ImageView)view.findViewById(R.id.large_image);
img.setImageResource(R.drawable.back);
TextView txt=(TextView)view.findViewById(R.id.text);
txt.setText("今天你吃饭了吗");
viewList.add(view);
}
创建一个pageradapter，根据position从viewlist中取出view加载。
PagerAdapterpagerAdapter=newPagerAdapter() {
@Override
public booleanisViewFromObject(View arg0, Object arg1) {
//TODO Auto-generated method stub
returnarg0 == arg1;
}
@Override
public intgetCount() {
//TODO Auto-generated method stub
returnviewList.size();
}
@Override
public voiddestroyItem(ViewGroup container,intposition,
Object object) {
//TODO Auto-generated method stub
container.removeView(viewList.get(position));
}
@Override
publicObject instantiateItem(ViewGroup container,intposition) {
//TODO Auto-generated method stub
container.addView(viewList.get(position));
returnviewList.get(position);
}
};
将viewpager于这个adapter绑定。
viewPager= (ViewPager)getActivity(). findViewById(R.id.viewpager);
viewPager.setAdapter(pagerAdapter);
然后是创建一个timer，指定时间间隔切换图片，到了最后一张返回首张。
private voidTimerTask() {
itimer=newTimer();
itimer.scheduleAtFixedRate(newTimerTask() {
@Override
public voidrun() {
if(now<3){
now=now+1;}
else{now=0;}//到最大值复位
handler.post(newRunnable() {
@Override
public voidrun() {
if(now!=0){
viewPager.setCurrentItem(now);}
else{viewPager.setCurrentItem(now,false);}//复位不要动画
}
});
}
},0,5000);//立即执行，间隔5000ms
}
创建多个imageview放入布局中。
Images=newImageView[4];
for(inti=0;i<4;i++) {
LinearLayout circle=(LinearLayout)getActivity().findViewById(R.id.circle);
ImageView imageView =newImageView(getActivity());
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
LinearLayout.LayoutParams params =newLinearLayout.LayoutParams(20,20);
params.setMargins(5,0,5,0);
imageView.setLayoutParams(params);
if(i ==0) {
imageView.setBackgroundResource(R.drawable.select);//默认首张选中
}else{
imageView.setBackgroundResource(R.drawable.unselect);
}
Images[i] = imageView;
circle.addView(Images[i]);
}
监听图片切换动作，改变对应的imageview。
viewPager.addOnPageChangeListener(newViewPager.OnPageChangeListener() {
@Override
public voidonPageScrolled(intposition,floatpositionOffset,intpositionOffsetPixels) {
}
@Override
public voidonPageSelected(intposition) {
inttotal =mBottomImages.length;
for(inti=0;i
if(i==position) {
mBottomImages[i].setBackgroundResource(R.drawable.select);//选中为红
}
else{mBottomImages[i].setBackgroundResource(R.drawable.unselect);}//未选中为白
now=position;//改变timer里的值。
}
}
@Override
public voidonPageScrollStateChanged(intstate) {
}
});
值得注意的是，当我们手动切换图片的时候，timer里的位置还没有变化，可能出现图片跳跃。必须要在viewpager的position变化后，将now的值改变。
最后，再次赞美swiper。
网友评论