实现原理:
界面:android.support.v4.view.ViewPager(ViewPager:存放视图的容器,可以滑动或点击跳转)
轮播:定时器Timer 、 TimerTask
效果图:(截图)
实现步骤:
1) xml(图片 + 标识点)
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="130dp">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="30dp"
android:layout_marginBottom="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/point1"
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/carouesl_point_bg" />
<ImageView
android:id="@+id/point2"
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/carouesl_point_bg" />
<ImageView
android:id="@+id/point3"
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/carouesl_point_bg" />
<ImageView
android:id="@+id/point4"
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/carouesl_point_bg" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
2) java(具体实现看代码注释)
/**
* Created by mb on 2014/12/19.
* 轮播界面
*/
public class CarouselView extends BaseActivity implements View.OnClickListener {
private List<View> carouselViews;
private ViewPager carouselViewPager;
private ImageView point1, point2, point3, point4;
private boolean first = true;
private int originalIndex = 0;
private CarouselAdapter carouselAdapter;
private static final int CAROUSEL_TIMER = 100;//用于自动轮播
private static final int CAROUSEL_IMAGES = 101;//用于获取网络图片
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what) {
case CAROUSEL_TIMER:
//自动轮播
if (originalIndex >= 4) {
originalIndex = 0;
}
carouselViewPager.setScrollbarFadingEnabled(true);
carouselViewPager.setCurrentItem(originalIndex);
originalIndex++;
break;
case CAROUSEL_IMAGES:
//获取网络图片(先从缓存中取)
carouselViews = new ArrayList<View>();
DisplayImageOptions options = new DisplayImageOptions.Builder()
.showImageOnLoading(R.drawable.test_pic)
.showImageForEmptyUri(R.drawable.test_pic)
.showImageOnFail(R.drawable.test_pic)
.cacheInMemory(true)
.cacheOnDisk(true)
.considerExifParams(true)
.displayer(new RoundedBitmapDisplayer(10))
.build();
for (int i = 1; i <= 4; i++) {
ImageView image = new ImageView(getApplicationContext());
ImageLoader.getInstance().displayImage(RequestURL.CAROUSEL_IMAGES + "show" + i + ".jpg", image, options);
carouselViews.add(image);
}
if (carouselViews.size() == 4) {
carouselAdapter.refresh(carouselViews);
}
break;
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.carousel_view);
initView();
timer.schedule(task, 0, 2000);//启动每隔3s自动轮播
}
private void initView() {
carouselViewPager = (CustomViewPager2) findViewById(R.id.carousel_viewpager);
point1 = (ImageView) findViewById(R.id.point1);
point2 = (ImageView) findViewById(R.id.point2);
point3 = (ImageView) findViewById(R.id.point3);
point4 = (ImageView) findViewById(R.id.point4);
point1.setOnClickListener(this);
point2.setOnClickListener(this);
point3.setOnClickListener(this);
point4.setOnClickListener(this);
point1.setSelected(true);
carouselViews = new ArrayList<View>();
carouselAdapter = new CarouselAdapter(carouselViews);
carouselViewPager.setOnPageChangeListener(new CarouselPageChangeListener());//监听手势界面变化
carouselViewPager.setAdapter(carouselAdapter);
carouselViews = getImages();//获取轮播视图
carouselAdapter.refresh(carouselViews);//显示默认图片
}
/**
* 定时器2s自动播放
*/
private Timer timer = new Timer(true);
//任务
private TimerTask task = new TimerTask() {
public void run() {
//判断闹钟开关
Message msg = handler.obtainMessage(CAROUSEL_TIMER);
handler.sendMessage(msg);
}
};
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.point1:
carouselViewPager.setScrollbarFadingEnabled(true);
carouselViewPager.setCurrentItem(0);
break;
case R.id.point2:
carouselViewPager.setScrollbarFadingEnabled(true);
carouselViewPager.setCurrentItem(1);
break;
case R.id.point3:
carouselViewPager.setScrollbarFadingEnabled(true);
carouselViewPager.setCurrentItem(2);
break;
case R.id.point4:
carouselViewPager.setScrollbarFadingEnabled(true);
carouselViewPager.setCurrentItem(3);
break;
}
}
/**
* 用于存放界面
*/
private class CarouselAdapter extends PagerAdapter {
private List<View> views;
public void refresh(List<View> views) {
this.views = views;
notifyDataSetChanged();
}
public CarouselAdapter(List<View> views) {
super();
this.views = views;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return views.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}
@Override
public void destroyItem(View container, int position, Object object) {
// TODO Auto-generated method stub
if (position == 0) {
return;
}
((ViewPager) container).removeView(views.get(position));
}
@Override
public int getItemPosition(Object object) {
// TODO Auto-generated method stub
return super.getItemPosition(object);
}
@Override
public Object instantiateItem(View container, int position) {
// TODO Auto-generated method stub
if (position == 0 && first) {
((ViewPager) container).addView(views.get(position));
first = false;
}
if (position != 0)
((ViewPager) container).addView(views.get(position));
return views.get(position);
}
}
/**
* 滑动改变标识圆点
*/
public class CarouselPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
switch (arg0) {
case 0:
point1.setSelected(true);
point2.setSelected(false);
point3.setSelected(false);
point4.setSelected(false);
break;
case 1:
point1.setSelected(false);
point2.setSelected(true);
point3.setSelected(false);
point4.setSelected(false);
break;
case 2:
point1.setSelected(false);
point2.setSelected(false);
point3.setSelected(true);
point4.setSelected(false);
break;
case 3:
point1.setSelected(false);
point2.setSelected(false);
point3.setSelected(false);
point4.setSelected(true);
break;
}
originalIndex = arg0;
}
}
/**
* 得到轮播图片
*
* @return
*/
private List<View> getImages() {
//先显示加载图片
for (int i = 1; i <= 4; i++) {
ImageView image1 = new ImageView(this);
image1.setBackgroundResource(R.drawable.test_pic);
carouselViews.add(image1);
}
Message msg = handler.obtainMessage(CAROUSEL_IMAGES);
handler.sendMessage(msg);
return carouselViews;
}
}
3.加上权限基本ok
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
注意:代码2中获取网络图片用的是 ImageLoader图片框架 这个网络上有下载 自己可以研究研究,当然你也可以用其他的框架 或者自己写也行 大概思路就这样(刚学android,希望有好的建议和问题欢迎提出)