您的位置:首页 > 其它

轮播图

2016-07-08 09:30 337 查看
忙的太久啦,也没有写一篇博客,最近闲下来啦,准备写我的处女做。轮播图在常见不过啦,如果你是一个程序员宝宝的话,网上也有很多demo,也是五花八门的,让人看起来头疼,下面我来写一个我自己的思路分享给大家。宝宝们,你们准备好走进我的套路里面啦吗?哈哈哈。。。。。

主要思路

ViewPager加线程,利用Handler通知ViewPager滑动。

布局文件(废话太多啦,我决定上代码啦宝宝们)

<span style="font-size:14px;"></span><pre style="background-color: rgb(255, 255, 255); font-family: Menlo;"><pre name="code" class="java"><!--放轮播图的-->
<android.support.v4.view.ViewPager
android:id="@+id/carousel_view_page"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@mipmap/ic_launcher"
android:layout_marginRight="50dp"
android:layout_marginLeft="50dp"
android:clipChildren="false" />
<!--放与轮播图联动的圆点-->
<LinearLayout
android:id="@+id/carousel_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="-25dp"
android:orientation="horizontal" />




android:clipChildren="false"这里我设置了false,默认是true

核心代码

<span style="font-size:14px;">public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private ViewGroup viewGroup;//里面放与轮播图联动的线性布局,(小圆点)
private ImageView[] imgCircles;//放小圆点的集合
private boolean userTouch = false;//判断用户是否触摸
private Handler handler;//刷新UI
private boolean threadAlive = true;//用来销毁线程的
private CarouselAdapter carouselAdapter;
//轮播图中的图片来源,只是一个例子,也可以是从网络拉取的图片
private int photos[] = {R.mipmap.page_one, R.mipmap.page_two, R.mipmap.page_three,};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewGroup = (ViewGroup) findViewById(R.id.carousel_layout);
viewPager = (ViewPager) findViewById(R.id.carousel_view_page);
carouselAdapter = new CarouselAdapter();
carouselAdapter.setImageViews(photos, this);
viewPager.setAdapter(carouselAdapter);
getCircle();

}

//添加联动的圆点
public void getCircle() {
final int size = photos.length;//应该添加的小圆点数量
imgCircles = new ImageView[size];//初始化放小圆点的集合
for (int i = 0; i < imgCircles.length; i++) {
ImageView iv = new ImageView(this);
//设置小圆点的大小
iv.setLayoutParams(new ViewGroup.LayoutParams(10, 10));
//设置进去
imgCircles[i] = iv;
//设置默认第一个圆点为蓝色,其他为黑色
if (i == 0) {
imgCircles[i].setImageResource(R.mipmap.blue_view);
} else {
imgCircles[i].setImageResource(R.mipmap.black_view);
}
//设置放小圆点的线性布局的大小
LinearLayout.LayoutParams layoutparams = new LinearLayout.LayoutParams(
new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT));
//圆点左右相距为10
layoutparams.leftMargin = 10;
layoutparams.rightMargin = 10;
viewGroup.addView(iv, layoutparams);
}
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/*
onPageScrolled(int arg0,float arg1,int arg2),当页面在滑动的时候会调用此方法,
在滑动被停止之前,此方法回一直得到调用。其中三个参数的含义分别为:
arg0 :当前页面,及你点击滑动的页面
arg1:当前页面偏移的百分比
arg2:当前页面偏移的像素位置
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

/*
onPageSelected(int position):此方法是页面跳转完后得到调用,
position是你当前选中的页面的Position(位置编号)
*/
@Override
public void onPageSelected(int position) {
for (int i = 0; i < size; i++) {
if (i == position % size) {
imgCircles[i].setImageResource(R.mipmap.blue_view);
} else {
imgCircles[i].setImageResource(R.mipmap.black_view);
}
}

}

/*
onPageScrollStateChanged(int arg0)   ,此方法是在状态改变的时候调用,其中arg0这个参数

有三种状态(0,1,2)。arg0 ==1的时辰默示正在滑动,arg0==2的时辰默示滑动完毕了,arg0==0的时辰默示什么都没做。
*/
@Override
public void onPageScrollStateChanged(int state) {

}
});
viewPager.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//当用户触摸轮播图的时候
userTouch = true;
break;
case MotionEvent.ACTION_UP:
//用户手离开手机
userTouch = false;
break;
}

return false;
}
});
new Thread(new Runnable() {
@Override
public void run() {
while (threadAlive) {
//每隔3秒自动滑动一次
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
if (!userTouch) {
handler.sendEmptyMessage(0);
}
}
}
}).start();
handler = new Handler(new Handler.Callback() {
@Override
public boolean handleMessage(Message msg) {
//获取当前的位置,再将ViewPager刷新到下一页
int current = viewPager.getCurrentItem();
//刷新轮播
viewPager.setCurrentItem(current + 1);
return false;
}
});
}

//记得把线程杀死
@Override
protected void onDestroy() {
super.onDestroy();
threadAlive = false;
}
}</span>

适配器[/code]
<span style="font-size:14px;">public class CarouselAdapter extends PagerAdapter {
//PagerAdapter 的Item 是View
private List<ImageView> imageViews;

public void setImageViews(int[] photos, Context context) {
imageViews = new ArrayList<>();
for (int photo : photos) {
ImageView imageView = new ImageView(context);
imageView.setImageResource(photo);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageViews.add(imageView);
}
notifyDataSetChanged();
}

@Override
public int getCount() {
//设置成无上限的数量,可以无限的滑动
return imageViews != null ? Integer.MAX_VALUE : 0;//返回Integer的最大值
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
//取出指定位置的图片,对集合取余
ImageView imageView = imageViews.get(position % imageViews.size());
/*
当图片少的时候,不会触发destroyItem
这个时候去向container中addView会报错
手动捕获这个异常
*/
try {
container.addView(imageView);
} catch (IllegalStateException e) {
container.removeView(imageView);//先移除
container.addView(imageView);//然后添加进去
}

return imageView;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
if (container.getChildAt(position % imageViews.size()) == object) {
//销毁指定位置的ImageView,回收内存
container.removeViewAt(position % imageViews.size());
}
}
}</span>

代码写到这啦,轮播图就Ok啦,注解写的挺详细的,我相信你们能看懂,代码写起来很随意,只要你讲道理。[/code]
demo下载地址https://github.com/liujingdong/CarouselImage.git


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: