安卓開發筆記（三十二）:banner輪播圖的實現

一.activity.xml

我這裡主要爬取的愛奇藝首頁的圖片進行輪播，應用了兩個github上的開源庫，一個banner的庫，一個載入網路圖片的庫，用開源庫能夠極大地節省我們編寫代碼的時間。

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <com.youth.banner.Banner
            android:id="@+id/banner"
            android:layout_width="match_parent"
            android:layout_height="170dp"



            />

</LinearLayout>
    </ScrollView>

</LinearLayout>

二.添加相關的庫以及網路許可權

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

 implementation'com.youth.banner:banner:1.4.10'
 implementation "com.github.bumptech.glide:glide:4.6.1"

三.activity.java

import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.Transformer;
import com.youth.banner.listener.OnBannerListener;
import com.youth.banner.loader.ImageLoader;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    Banner banner;//banner組件
    List mlist;//圖片資源
    List<String> mlist1;//輪播標題
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ActionBar actionBar=getSupportActionBar();
        if(actionBar !=null)
        {
            actionBar.hide();
        }



        mlist = new ArrayList<>();
        mlist.add("http://pic0.iqiyipic.com/common/lego/20190504/5c7c889174894cd7aed96218320e1945.jpg");
        mlist.add("http://pic3.iqiyipic.com/common/lego/20190504/902898f2117c41ccaea5fa36eb4d0545.jpg");
        mlist.add("http://pic3.iqiyipic.com/common/lego/20190504/8245013abf2b44ce8736d7435d4567dc.jpg");
        mlist.add("http://pic2.iqiyipic.com/common/lego/20190501/9cdcc1a900a34c1497aeff9c5af610f2.jpg");
        mlist1 = new ArrayList<>();
        mlist1.add("這是一個美好的早晨");
        mlist1.add("但我們並不美好");
        mlist1.add("因為我是學人工智慧的");
        mlist1.add("已經被學金融的虐得頭破血流");

        banner = findViewById(R.id.banner);

        banner.setImageLoader(new GlideImageLoader());   //設置圖片載入器
        banner.setImages(mlist);//設置圖片源
        banner.setBannerTitles(mlist1);//設置標題源
        banner.setDelayTime(2000);//設置輪播事件，單位毫秒
        banner.setBannerAnimation(Transformer.ZoomOutSlide);//設置輪播動畫，動畫種類很多，有興趣的去試試吧，我在這裡用的是預設
//stack

/**
 *  輪播圖的點擊事件
 */
        banner.setOnBannerListener(new OnBannerListener() {
            @Override
            public void OnBannerClick(int position) {
                Toast.makeText(MainActivity.this, "這是第" + position +"個效果", Toast.LENGTH_SHORT).show();
            }
        });
        banner.setIndicatorGravity(BannerConfig.CENTER);//設置指示器的位置

        banner.start();//開始輪播，一定要調用此方法。



    }


//下麵的代碼可寫可不寫，用於提升控制項的載入效率
    protected void onResume() {
        super.onResume();
        banner.start();
    }

    @Override
    protected void onStop() {
        super.onStop();
        banner.stopAutoPlay();
    }

}

四.網路圖片載入的新類

import android.content.Context;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.youth.banner.loader.ImageLoader;

public class GlideImageLoader extends ImageLoader {


    public void displayImage(Context context, Object path, ImageView imageView) {

        Glide.with(context).load(path).into(imageView);

    }

    @Override
    public ImageView createImageView(Context context) {

        ImageView imageView = new ImageView(context);
        return imageView;
    }

}

代碼一共就這些，全部照抄不誤就可以得到我們的banner效果了，十分簡單。