android轮播图之ImageSlideshow

来源：互联网发布：godaddy怎么解析域名编辑：程序博客网时间：2024/05/14 05:00

1.依赖Glide

compile 'com.github.bumptech.glide:glide:4.3.1'

2.在AndroidManifest中加入网络权限

<uses-permission android:name="android.permission.INTERNET"/>

3.轮播图下面圆点

3.1.选中状态圆点dot_selected.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"       android:shape="oval">    <size        android:width="32dp"        android:height="32dp"/>    <solid android:color="#ecf0f1"/></shape>

3.2.非选中状态圆点dot_unselected.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"       android:shape="oval">    <size        android:width="32dp"        android:height="32dp"/>    <solid android:color="#ecf0f1"/></shape

4.ImageSlideshow图片标题布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"                android:layout_width="match_parent"                android:layout_height="match_parent">    <ImageView        android:id="@+id/iv_image"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:scaleType="fitXY"/>    <TextView        android:id="@+id/tv_title"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_marginBottom="20dp"        android:layout_marginLeft="12dp"        android:layout_marginRight="12dp"        android:gravity="center_vertical"        android:padding="4dp"        android:textColor="#ecf0f1"        android:textSize="20sp"/></RelativeLayout>

4.1.ImageSlideshow布局

<?xml version="1.0" encoding="utf-8"?><merge xmlns:android="http://schemas.android.com/apk/res/android"       android:layout_width="match_parent"       android:layout_height="match_parent">    <android.support.v4.view.ViewPager        android:id="@+id/vp_image_title"        android:layout_width="match_parent"        android:layout_height="match_parent"/>    <!--自定义Indicator-->    <LinearLayout        android:id="@+id/ll_dot"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="bottom|center"        android:layout_marginBottom="10dp"        android:gravity="center"        android:orientation="horizontal">    </LinearLayout></merge

5.IImageSlideshow

import android.content.Context;import android.animation.Animator;import android.animation.AnimatorInflater;import android.os.Handler;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import android.util.Log;import android.util.SparseBooleanArray;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.FrameLayout;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import com.bumptech.glide.Glide;import com.example.imageslideshow.R;import java.util.ArrayList;import java.util.List;public class ImageSlideshow extends FrameLayout {    private static final String TAG = "ImageSlideshow";    private Context context;    private View contentView;    private ViewPager vpImageTitle;    private LinearLayout llDot;    private int count;    private List<View> viewList;    private boolean isAutoPlay;    private Handler handler;    private int currentItem;    private Animator animatorToLarge;    private Animator animatorToSmall;    private SparseBooleanArray isLarge;    private List<ImageTitleBean> imageTitleBeanList;    private int dotSize = 12;    private int dotSpace = 12;    private int delay = 3000;    public ImageSlideshow(Context context) {        this(context, null);    }    public ImageSlideshow(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public ImageSlideshow(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        this.context = context;        // 初始化View        initView();        // 初始化Animator        initAnimator();        // 初始化数据        initData();    }    private void initData() {        imageTitleBeanList = new ArrayList<>();    }    private void initAnimator() {        animatorToLarge = AnimatorInflater.loadAnimator(context, R.animator.scale_to_large);        animatorToSmall = AnimatorInflater.loadAnimator(context, R.animator.scale_to_small);    }    /**     * 初始化View     */    private void initView() {        contentView = LayoutInflater.from(context).inflate(R.layout.is_main_layout, this, true);        vpImageTitle = (ViewPager) findViewById(R.id.vp_image_title);        llDot = (LinearLayout) findViewById(R.id.ll_dot);    }    // 设置小圆点的大小    public void setDotSize(int dotSize) {        this.dotSize = dotSize;    }    // 设置小圆点的间距    public void setDotSpace(int dotSpace) {        this.dotSpace = dotSpace;    }    // 设置图片轮播间隔时间    public void setDelay(int delay) {        this.delay = delay;    }    // 添加图片    public void addImageUrl(String imageUrl) {        ImageTitleBean imageTitleBean = new ImageTitleBean();        imageTitleBean.setImageUrl(imageUrl);        imageTitleBeanList.add(imageTitleBean);    }    // 添加图片和标题    public void addImageTitle(String imageUrl, String title) {        ImageTitleBean imageTitleBean = new ImageTitleBean();        imageTitleBean.setImageUrl(imageUrl);        imageTitleBean.setTitle(title);        imageTitleBeanList.add(imageTitleBean);    }    // 添加图片和标题的JavaBean    public void addImageTitleBean(ImageTitleBean imageTitleBean) {        imageTitleBeanList.add(imageTitleBean);    }    // 设置图片和标题的JavaBean数据列表    public void setImageTitleBeanList(List<ImageTitleBean> imageTitleBeanList) {        this.imageTitleBeanList = imageTitleBeanList;    }    // 设置完后最终提交    public void commit() {        if (imageTitleBeanList != null) {            count = imageTitleBeanList.size();            // 设置ViewPager            setViewPager(imageTitleBeanList);            // 设置指示器            setIndicator();            // 开始播放            starPlay();        } else {            Log.e(TAG, "数据为空");        }    }    /**     * 设置指示器     */    private void setIndicator() {        isLarge = new SparseBooleanArray();        // 记得创建前先清空数据，否则会受遗留数据的影响。        llDot.removeAllViews();        for (int i = 0; i < count; i++) {            View view = new View(context);            view.setBackgroundResource(R.drawable.dot_unselected);            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(dotSize, dotSize);            layoutParams.leftMargin = dotSpace / 2;            layoutParams.rightMargin = dotSpace / 2;            layoutParams.topMargin = dotSpace / 2;            layoutParams.bottomMargin = dotSpace / 2;            llDot.addView(view, layoutParams);            isLarge.put(i, false);        }        llDot.getChildAt(0).setBackgroundResource(R.drawable.dot_selected);        animatorToLarge.setTarget(llDot.getChildAt(0));        animatorToLarge.start();        isLarge.put(0, true);    }    /**     * 开始自动播放图片     */    private void starPlay() {        // 如果少于2张就不用自动播放了        if (count < 2) {            isAutoPlay = false;        } else {            isAutoPlay = true;            handler = new Handler();            handler.postDelayed(task, delay);        }    }    private Runnable task = new Runnable() {        @Override        public void run() {            if (isAutoPlay) {                // 位置循环                currentItem = currentItem % (count + 1) + 1;                // 正常每隔3秒播放一张图片                vpImageTitle.setCurrentItem(currentItem);                handler.postDelayed(task, delay);            } else {                // 如果处于拖拽状态停止自动播放，会每隔5秒检查一次是否可以正常自动播放。                handler.postDelayed(task, 5000);            }        }    };    // 创建监听器接口    public interface OnItemClickListener {        void onItemClick(View view, int position);    }    // 声明监听器    private OnItemClickListener onItemClickListener;    // 提供设置监听器的公共方法    public void setOnItemClickListener(OnItemClickListener listener) {        onItemClickListener = listener;    }    class ImageTitlePagerAdapter extends PagerAdapter {        @Override        public int getCount() {            return viewList.size();        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view == object;        }        @Override        public Object instantiateItem(ViewGroup container, final int position) {            View view = viewList.get(position);            // 设置Item的点击监听器            view.setOnClickListener(new OnClickListener() {                @Override                public void onClick(View v) {                    // 注意：位置是position-1                    onItemClickListener.onItemClick(v, position - 1);                }            });            container.addView(view);            return view;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView(viewList.get(position));        }    }    /**     * 设置ViewPager     *     * @param imageTitleBeanList     */    private void setViewPager(List<ImageTitleBean> imageTitleBeanList) {        // 设置View列表        setViewList(imageTitleBeanList);        vpImageTitle.setAdapter(new ImageTitlePagerAdapter());        // 从第1张图片开始（位置刚好也是1，注意：0位置现在是最后一张图片）        currentItem = 1;        vpImageTitle.setCurrentItem(1);        vpImageTitle.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                // 遍历一遍子View，设置相应的背景。                for (int i = 0; i < llDot.getChildCount(); i++) {                    if (i == position - 1) {// 被选中                        llDot.getChildAt(i).setBackgroundResource(R.drawable.dot_selected);                        if (!isLarge.get(i)) {                            animatorToLarge.setTarget(llDot.getChildAt(i));                            animatorToLarge.start();                            isLarge.put(i, true);                        }                    } else {// 未被选中                        llDot.getChildAt(i).setBackgroundResource(R.drawable.dot_unselected);                        if (isLarge.get(i)) {                            animatorToSmall.setTarget(llDot.getChildAt(i));                            animatorToSmall.start();                            isLarge.put(i, false);                        }                    }                }            }            @Override            public void onPageScrollStateChanged(int state) {                switch (state) {                    // 闲置中                    case ViewPager.SCROLL_STATE_IDLE:                        // “偷梁换柱”                        if (vpImageTitle.getCurrentItem() == 0) {                            vpImageTitle.setCurrentItem(count, false);                        } else if (vpImageTitle.getCurrentItem() == count + 1) {                            vpImageTitle.setCurrentItem(1, false);                        }                        currentItem = vpImageTitle.getCurrentItem();                        isAutoPlay = true;                        break;                    // 拖动中                    case ViewPager.SCROLL_STATE_DRAGGING:                        isAutoPlay = false;                        break;                    // 设置中                    case ViewPager.SCROLL_STATE_SETTLING:                        isAutoPlay = true;                        break;                }            }        });    }    /**     * 根据出入的数据设置View列表     *     * @param imageTitleBeanList     */    private void setViewList(List<ImageTitleBean> imageTitleBeanList) {        viewList = new ArrayList<>();        for (int i = 0; i < count + 2; i++) {            View view = LayoutInflater.from(context).inflate(R.layout.is_image_title_layout, null);            ImageView ivImage = (ImageView) view.findViewById(R.id.iv_image);            TextView tvTitle = (TextView) view.findViewById(R.id.tv_title);            if (i == 0) {// 将最前面一页设置成本来最后的那页                Glide.with(context).                        load(imageTitleBeanList.get(count - 1).getImageUrl()).into(ivImage);                tvTitle.setText(imageTitleBeanList.get(count - 1).getTitle());            } else if (i == count + 1) {// 将最后面一页设置成本来最前的那页                Glide.with(context).                        load(imageTitleBeanList.get(0).getImageUrl()).into(ivImage);                tvTitle.setText(imageTitleBeanList.get(0).getTitle());            } else {                Glide.with(context).                        load(imageTitleBeanList.get(i - 1).getImageUrl()).into(ivImage);                tvTitle.setText(imageTitleBeanList.get(i - 1).getTitle());            }            // 将设置好的View添加到View列表中            viewList.add(view);        }    }    /**     * 释放资源     */    public void releaseResource() {        handler.removeCallbacksAndMessages(null);        context = null;    }}

6.使用

6.1.MainActivity布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.imageslideshow.activity.MainActivity">    <com.example.imageslideshow.view.ImageSlideshow        android:id="@+id/imageslideshow"        android:layout_width="match_parent"        android:layout_height="160dp">    </com.example.imageslideshow.view.ImageSlideshow></LinearLayout>

6.2.MainActivity实现

package com.example.imageslideshow.activity;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Toast;import com.example.imageslideshow.R;import com.example.imageslideshow.view.ImageSlideshow;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity {    private ImageSlideshow imageslideshow;    //图片URL集合    private ArrayList<String> arrayList=new ArrayList<String>();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();    }    private void initView(){        imageslideshow=findViewById(R.id.imageslideshow);        //轮播图点击事件        imageslideshow.setOnItemClickListener(new ImageSlideshow.OnItemClickListener() {            @Override            public void onItemClick(View view, int position) {                Toast.makeText(MainActivity.this, "img"+(position+1), Toast.LENGTH_SHORT).show();            }        });        addData();        //添加图片至imageslideshow        for (int i=0;i<arrayList.size();i++){            imageslideshow.addImageUrl(arrayList.get(i));        }        // 为ImageSlideshow设置数据        imageslideshow.setDotSpace(12);//小圆点间距        imageslideshow.setDotSize(12);//小圆点大小        imageslideshow.setDelay(3000);//循环时间        //提交数据        imageslideshow.commit();    }    //添加数据    private void addData(){        //网络图片        arrayList.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510202040480&di=a2959abd4b452b694c1338f6999c4e4b&imgtype=0&src=http%3A%2F%2Fimg.tuku.cn%2Ffile_big%2F201503%2F55b7341dbe084fa6b995a33f2407c0e0.jpg");        //资源图片        arrayList.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510201956899&di=0ee683018b9eee071479f47f346557fa&imgtype=0&src=http%3A%2F%2Fatt.x2.hiapk.com%2Fforum%2F201405%2F21%2F100404w5ny0i34xrpv3pi8.jpg");    }}

阅读全文

0 0