实现原理:
界面: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,希望有好的建议和问题欢迎提出)