banner轮播

图片轮播可以说时最常用的效果之一了。实现起来算是比较简单,当然没有前端那么简单。这里让我大声赞美一声swiper,十几行代码搞定一个幻灯片除了swiper还有谁?

可是Android上没有swiper。/(ㄒoㄒ)/~~

就暂且忘掉swiper,来看看Android怎么实现图片轮播?先定一个小目标:

banner轮播_第1张图片

目标

理一下思路,首先这是一个viewpager,需要自动滑动,那么我就写一个timer调用viewpager的setCurrentItem()方法使其滑动。然后添加小圆点。

三步走:

1、创建viewpager。

2、创建timer控制viewpager。

4、根据viewpager的状态改变圆点的view。

banner轮播_第2张图片

布局文件

创建一个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的值改变。

banner轮播_第3张图片

最后,再次赞美swiper。

你可能感兴趣的:(banner轮播)