使用ConvenientBanner和Universal-Image-Loader加载网络图片实现轮播效果

首先在app-->build.gradle文件添加以下依赖：

（这里使用了2.0.5旧版本，ConvenientBanner项目地址）

implementation 'com.bigkoo:convenientbanner:2.0.5'

下载Universal-Image-Loader的jar文件，并复制粘贴到app-->libs文件下，如果没有libs文件，就创建一个。

粘贴之后鼠标右键，选择 Add as library...

布局文件：activity_main.xml

布局文件这里嵌套使用了RelativeLayout，方便在代码中设置轮播图的高度和宽度。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.bigkoo.convenientbanner.ConvenientBanner
            android:id="@+id/convenientBanner"
            android:layout_width="wrap_content"
            android:layout_height="180dp" />

    </RelativeLayout>

</LinearLayout>

 MainActivity：

public class MainActivity extends AppCompatActivity {

    private ConvenientBanner mConvenientBanner;

    private int mScreenWidth;

    private List<String> paths = new ArrayList<>();

    private List<String> imageLinks = new ArrayList<>();

    protected ImageLoader imageLoader;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化ImageLoader
        imageLoader = ImageLoader.getInstance();
        imageLoader.init(ImageLoaderConfiguration.createDefault(this));


        initView();
        initData();
        getBanner();

    }

    private void initView() {

        mConvenientBanner = (ConvenientBanner) findViewById(R.id.convenientBanner);

        //设置轮播图的宽度和高度
        mScreenWidth = getResources().getDisplayMetrics().widthPixels;
        RelativeLayout.LayoutParams rlp = (RelativeLayout.LayoutParams) mConvenientBanner.getLayoutParams();
        rlp.width = mScreenWidth;
        rlp.height = (int) (mScreenWidth * (460f / 800f));
        mConvenientBanner.setLayoutParams(rlp);

    }

    private void initData() {

        //添加网络图片链接以及点击图片后跳转到对应的链接地址
        /*
         *实际项目中，是从请求服务器成功返回的数据中取出图片链接以及对应的链接
         */
        paths.add("http://p1.so.qhimgs1.com/t015337ecc234eea03d.jpg");
        imageLinks.add("http://bbs.fengniao.com/forum/pic/slide_15_6213741_76500184.html");

        paths.add("http://p4.so.qhmsg.com/t01868177e0ca5cec19.jpg");
        imageLinks.add("http://bbs.fengniao.com/forum/pic/slide_15_6205989_76482785.html");

        paths.add("http://p0.so.qhimgs1.com/t01c49e2fb7ccb571da.jpg");
        imageLinks.add("http://bbs.fengniao.com/forum/pic/slide_125_6075984_76343443.html");

        paths.add("http://p1.so.qhmsg.com/t01614b79a27d1abb26.jpg");
        imageLinks.add("http://bbs.fengniao.com/forum/pic/slide_125_5822404_76017294.html");
    }

    private void getBanner() {

        //调用mConvenientBanner.setPages设置页面和数据
        mConvenientBanner.setPages(new CBViewHolderCreator<NetworkImageHolderView>() {
                    @Override
                    public NetworkImageHolderView createHolder() {
                        return new NetworkImageHolderView();
                    }
                }, paths);

        //设置轮播图的圆点
        mConvenientBanner.setPageIndicator(new int[]{R.drawable.dot_unfocuse, R.drawable.dot_focuse});
    }

    class NetworkImageHolderView implements Holder<String> {

        private ImageView imageView;

        @Override
        public View createView(Context context) {
            imageView = new ImageView(context);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            return imageView;
        }

        @Override
        public void UpdateUI(Context context, final int position, String data) {
            imageView.setImageResource(R.mipmap.ic_launcher);
            imageLoader.displayImage(data, imageView);
            imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view){
                        String link = imageLinks.get(position);
                        Intent mIntent = new Intent();
                        mIntent.setAction(Intent.ACTION_VIEW);
                        mIntent.setData(Uri.parse(link));
                        startActivity(mIntent);
                }
            });
        }
    }

    public void setResume() {
        
        // 开始自动翻页，数字表示翻页的时间间隔
        mConvenientBanner.startTurning(3000);
    }

    public void setPause() {
        // 停止翻页
        mConvenientBanner.stopTurning();
    }

    @Override
    protected void onResume() {
        super.onResume();
        setResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
        setPause();
    }
}

小圆点资源文件：drawable-->dot_focuse.xml

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    
    <solid android:color="#fcfbfb" />
    
    <size android:height="7dp"/>
    
    <size android:width="7dp"/>
    
</shape>

drawable-->dot_unfocuse.xml

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    
    <solid android:color="#F3BC67" />
    
    <size android:height="6dp"/>
    
    <size android:width="6dp"/>
    
</shape>