iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
Mobile Development

android studio 30天初學筆記系列 第 23

Android Studio初學筆記-Day23-Banner

Banner

現在因為網路發達加上疫情,網購變得很稀鬆平常,而在這些購物網站中一定會出現廣告的部分,今天要介紹的Banner就是一個能簡單放置廣告圖的其中一種方法,可以說是廣告欄的入門款。

  • 在使用Banner之前需要先引用幾個套件
implementation 'com.youth.banner:banner:1.4.9'
implementation "com.github.bumptech.glide:glide:3.7.0"

這兩個套件分別是banner和之後在banner中輪播的功能

  • 接著就可以使用banner了

佈局程式碼

<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

    <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteX="-70dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

先把banner寫進介面裡,取好id方便等一下使用,接著去MainActivity.java中設定banner的功能,首先寫一個繼承ImageLoader的class,並覆寫函式displayImage,如下。

public class GlideImageLoader extends ImageLoader {
       @Override
       public void displayImage(Context context, Object path, ImageView imageView) {
           Glide.with(context).load(path).into(imageView);
       }
   }

這樣就設定好輪播的功能了,這也是上面引用套件說會運用到的方法,這裡提供的Glide也只是其中一種輪播的方法,還有許多其他的方法,有興趣可以再深入了解。以下是加入圖片及啟動banner的程式碼。

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ArrayList<String> images = new ArrayList<>();
        ArrayList<String> title = new ArrayList<>();
        Banner banner = (Banner) findViewById(R.id.banner);

        images.add("https://www.asus.com/tw/events/eventES/epic/1185.jpg");
        images.add("https://www.i-spotmedia.com/Blog/wp-content/uploads/2018/06/youtube-ads-
                    part1-cover-0706-1024x518.png");
        images.add("https://encrypted-tbn0.gstatic.com/images?
                    q=tbn:ANd9GcQvV_0xWbMC1jBpcBukePRC34c9mklb_dDJuw&usqp=CAU");
        images.add("https://imjaylin.com/wp-content/uploads/2020/08/
                  Instagram%E5%BB%A3%E5%91%8A%E6%8A%95%E6%94%BE%E6%AD%A5%E9%A9%9F-740x389.jpg");
        title.add("天天向上");
        title.add("日行一善");
        title.add("每日任務");
        title.add("好好學習");
        //設置圖片輪播的撥放器
        banner.setImageLoader(new GlideImageLoader());
        //設置圖片得集合
        banner.setImages(images);
        //設置標題集合(當banner樣式有顯示title時)
        banner.setBannerTitles(title);
        //設置banner的樣式,此樣式可以包含title
        banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);
        //設置下方點的位置
        //banner.setIndicatorGravity(BannerConfig.CENTER);
        //設置自動輪播,默認為true
        banner.isAutoPlay(true);
        //設置輪播的時間,單位毫秒
        banner.setDelayTime(3000);
        //啟動banner,放在最後
        banner.start();
    }
  • 可以先建一個ArrayList來儲存圖片的URL,也就是裝圖片的容器,以及Title的ArrayList。

最後,最重要的,因為我使用URL會需要用到網路,所以需要到AndroidManifest.xml中增加用網路的權限,如下。

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

這樣的幾個設定就能完成一個簡單的banner拉。

成果

https://ithelp.ithome.com.tw/upload/images/20210908/20139136oPMIEuVXvg.png
今天Banner就介紹到這邊,謝謝大家~!/images/emoticon/emoticon41.gif


上一篇
Android Studio初學筆記-Day22-ToolBar
下一篇
Android Studio初學筆記-Day24-FloatButton和SnackBar
系列文
android studio 30天初學筆記30

尚未有邦友留言

立即登入留言