iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Mobile Development

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

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

  • 分享至 

  • twitterImage
  •  

現在常常在手機或是電腦網頁中會在頁面中的一部分會看到不同的廣告,
這篇我們運用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
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
QQ0012347
iT邦新手 5 級 ‧ 2023-04-20 17:38:47

您好,請問到第二步放置xml時,com.youth.banner.Banner這個程式區塊就一直紅色,請問是哪裡出錯?

我要留言

立即登入留言