android轮播图片(带标识点)

最新推荐文章于 2021-05-30 15:40:00 发布

weixin_33721344

最新推荐文章于 2021-05-30 15:40:00 发布

阅读量337

点赞数

文章标签：移动开发 java

原文链接：https://my.oschina.net/imeibi/blog/359320

版权

为什么80%的码农都做不了架构师？>>>

实现原理：

界面：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，希望有好的建议和问题欢迎提出）

转载于:https://my.oschina.net/imeibi/blog/359320