iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Mobile Development

Android Studio 30天自我挑戰系列 第 19

[Android Studio 30天自我挑戰] 透過Banner來輪播廣告資訊

現在常常在手機或是電腦網頁中會在頁面中的一部分會看到不同的廣告,
這篇我們運用banner在畫面中顯示廣告並自動換頁,banner是用來圖片輪播的方式來展示

首先要先在Gradle Scripts/build.gradle(.app)的dependencies下新增banner

implementation 'com.youth.banner:banner:1.4.10'

現在xml檔設定好要將banner位置放在哪裡:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="150dp" />
</RelativeLayout>

因為新增的圖片是由網路上引用的,所以在app/manifests/AndroidManifest.xml裡新增

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

接著回到MainActivity.java裡設定

package com.example.ad;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ImageView;

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

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

public class MainActivity extends AppCompatActivity {
    private Banner banner;
    private List<String> mListImage;

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

        Banner banner = (Banner)findViewById(R.id.banner);
        ArrayList<String> images = new ArrayList<>();
        
        //將想要輪播的廣告圖片網址新增
        images.add("https://i.ytimg.com/vi/HuhkUIYRryA/maxresdefault.jpg");
        images.add("https://mrmad.com.tw/wp-content/uploads/2021/03/apple-iphone-12-cook-and-fumble.jpg");
        banner.setImageLoader(new GlideIamgeLoader());
        banner.setImages(images);
        //想要多久自動換頁
        banner.setDelayTime(3000);
        banner.start();
    }

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

這樣就可以了
https://ithelp.ithome.com.tw/upload/images/20211004/20139258ck6riiN73y.png
https://ithelp.ithome.com.tw/upload/images/20211004/20139258K8chBTHtbI.png


上一篇
[Android Studio 30天自我挑戰] ToggleButton元件介紹
下一篇
[Android Studio 30天自我挑戰] Switch 元件介紹
系列文
Android Studio 30天自我挑戰30

尚未有邦友留言

立即登入留言