Android UI 實現廣告 Banner 輪播效果

編寫acitivity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
<p>    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" ></p>
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="210dp" >

        <android.support.v4.view.ViewPager
            android:id="@+id/vp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="210dp"
            android:background="@drawable/shadow_article"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="26dp"
                android:text="爲什麼在北極出現“世紀暖冬”同時我們遭遇嚴寒"
                android:textColor="@color/white" />
        </RelativeLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dip"
            android:gravity="center" >

            <View
                android:id="@+id/v_dot0"
                style="@style/dot_style"
                android:background="@drawable/dot_focused"
                android:visibility="invisible" />

            <View
                android:id="@+id/v_dot1"
                style="@style/dot_style"
                android:visibility="invisible" />

            <View
                android:id="@+id/v_dot2"
                style="@style/dot_style"
                android:visibility="invisible" />

            <View
                android:id="@+id/v_dot3"
                style="@style/dot_style"
                android:visibility="invisible" />

            <View
                android:id="@+id/v_dot4"
                style="@style/dot_style"
                android:visibility="invisible" />
        </LinearLayout>
    </FrameLayout>

</LinearLayout>

一個ViewPager,下面五個指示點，注意每個點都有同樣的樣式，我們在style.xml中定義樣式：

<style name="dot_style">
        <item name="android:layout_width">5dip</item>
        <item name="android:layout_height">5dip</item>
        <item name="android:background">@drawable/dot_normal</item>
        <item name="android:layout_marginLeft">1.5dip</item>
        <item name="android:layout_marginRight">1.5dip</item>
    </style>

定義圓點圖形資源 dot_normal.xml,dot_focused.xml

<p><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"</p>    android:shape="oval" >
    <solid android:color="#33000000" />
    <corners android:radius="5dip" />
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <solid android:color="#aaFFFFFF" />
    <corners android:radius="5dip" />
</shape>

定義廣告實體 AdDome.java

public class AdDome {
	private String id;
	private String title;
	private String imgUrl;
	private boolean isAd;
	private String startTime;
	private String endTime;
	private String targetUrl;
	private int width;
	private int height;
	private boolean available;

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getImgUrl() {
		return imgUrl;
	}

	public void setImgUrl(String imgUrl) {
		this.imgUrl = imgUrl;
	}

	public boolean isAd() {
		return isAd;
	}

	public void setAd(boolean isAd) {
		this.isAd = isAd;
	}

	public String getStartTime() {
		return startTime;
	}

	public void setStartTime(String startTime) {
		this.startTime = startTime;
	}

	public String getEndTime() {
		return endTime;
	}

	public void setEndTime(String endTime) {
		this.endTime = endTime;
	}

	public String getTargetUrl() {
		return targetUrl;
	}

	public void setTargetUrl(String targetUrl) {
		this.targetUrl = targetUrl;
	}

	public int getWidth() {
		return width;
	}

	public void setWidth(int width) {
		this.width = width;
	}

	public int getHeight() {
		return height;
	}

	public void setHeight(int height) {
		this.height = height;
	}

	public boolean isAvailable() {
		return available;
	}

	public void setAvailable(boolean available) {
		this.available = available;
	}

}

實現切換邏輯

1. 定時切換

2. 切換圖片

3. 切換標題

4. 切換指示器

定時切換用到一個類：ScheduledExecutorService

作用是定時執行任務，我們這裏要做的定時任務是，2秒執行一次圖片切換

<span style="white-space:pre">	</span>private void startAd() {
		scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
		// 當Activity顯示出來後，每兩秒切換一次圖片顯示
		scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2,
				TimeUnit.SECONDS);
	}

定義子線程

<span style="white-space:pre">	</span>private class ScrollTask implements Runnable {

		@Override
		public void run() {
			synchronized (adViewPager) {
				currentItem = (currentItem + 1) % imageViews.size();
				handler.obtainMessage().sendToTarget();
			}
		}
	}

通過handle來通知ViewPager進行視圖切換

<span style="white-space:pre">	</span>private Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			adViewPager.setCurrentItem(currentItem);
		};
	};

提供模擬數據來進行測試

private List<AdDome> getBannerAd() {
		List<AdDome> adList = new ArrayList<AdDome>();

		AdDome adDome0 = new AdDome();
		adDome0.setId("108078");
		adDome0.setTitle("爲什麼在北極出現“世紀暖冬”同時我們遭遇嚴寒");
		adDome0.setImgUrl("http://img1.gtimg.com/news/pics/hv1/175/13/2009/130638715.jpg");
		adDome0.setAd(false);
		adList.add(adDome0);

		AdDome adDome1 = new AdDome();
		adDome1.setId("108078");
		adDome1.setTitle("青海門源發生6.4級地震 網友：西寧蘭州震感強烈");
		adDome1.setImgUrl("http://img1.gtimg.com/news/pics/hv1/168/20/2009/130640493.png");
		adDome1.setAd(false);
		adList.add(adDome1);

		AdDome adDome2 = new AdDome();
		adDome2.setId("108078");
		adDome2.setTitle("小學生考卷上留言老師 求給80分過好年");
		adDome2.setImgUrl("http://img1.gtimg.com/news/pics/hv1/225/96/2009/130659930.jpg");
		adDome2.setAd(false);
		adList.add(adDome2);

		AdDome adDome3 = new AdDome();
		adDome3.setId("108078");
		adDome3.setTitle("雷軍：不允許內部再講第一 用戶比第一重要");
		adDome3.setImgUrl("http://img1.gtimg.com/tech/pics/hv1/202/67/2009/130652512.jpg");
		adDome3.setAd(false);
		adList.add(adDome3);

		AdDome adDome4 = new AdDome();
		adDome4.setId("108078");
		adDome4.setTitle("政府免費WiFi遭吐槽 信號不穩體驗差");
		adDome4.setImgUrl("http://img1.gtimg.com/tech/pics/hv1/65/52/2009/130648550.jpg");
		adDome4.setAd(true);// 代表是廣告
		adList.add(adDome4);

		return adList;
	}

ViewPager邏輯處理

1. 填充數據（自定義Adapter)

2. 設置頁面切換監聽事件

3. 在自定義adapter中的instantiateItem方法設置ViewPager點擊事件

圖片是從網上下載的，用到了universal-image-loader-1.8.6-with-sources.jar這個類庫，可以實現異步加載圖片，編寫MainActivity.java。

public class MainActivity extends Activity {
	public static String IMAGE_CACHE_PATH = "imageloader/Cache";// 圖片緩存路徑
	private ViewPager adViewPager;
	private List<ImageView> imageViews;// 滑動的圖片集合

	private List<View> dots;// 圖片標題正文的點
	private List<View> dotList;

	private TextView tv_title;
	private int currentItem = 0;// 當前圖片的號
	// 定義5個指示點
	private View dot0;
	private View dot1;
	private View dot2;
	private View dot3;
	private View dot4;

	private ScheduledExecutorService scheduledExecutorService;

	// 異步加載圖片
	private ImageLoader mImageLoader;
	private DisplayImageOptions options;

	// 輪播banner的數據
	private List<AdDome> adList;
	private Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			adViewPager.setCurrentItem(currentItem);
		};
	};

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		// 使用ImageLoader前初始化
		initImageLoader();
		// 獲取圖片加載實例
		mImageLoader = ImageLoader.getInstance();
		options = new DisplayImageOptions.Builder()
				.showStubImage(R.drawable.top_banner_android)
				.showImageForEmptyUri(R.drawable.top_banner_android)
				.showImageOnFail(R.drawable.top_banner_android)
				.cacheInMemory(true).cacheOnDisc(true)
				.bitmapConfig(Bitmap.Config.RGB_565)
				.imageScaleType(ImageScaleType.EXACTLY).build();
		initAdData();
		startAd();
	}

	private void initImageLoader() {
		File cacheDir = com.nostra13.universalimageloader.utils.StorageUtils
				.getOwnCacheDirectory(getApplicationContext(), IMAGE_CACHE_PATH);

		DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder()
				.cacheInMemory(true).cacheOnDisc(true).build();

		ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
				this).defaultDisplayImageOptions(defaultOptions)
				.memoryCache(new LruMemoryCache(12 * 1024 * 1024))
				.memoryCacheSize(12 * 1024 * 1024)
				.discCacheSize(32 * 1024 * 1024).discCacheFileCount(100)
				.discCache(new UnlimitedDiscCache(cacheDir))
				.threadPriority(Thread.NORM_PRIORITY - 2)
				.tasksProcessingOrder(QueueProcessingType.LIFO).build();

		ImageLoader.getInstance().init(config);
	}

	private void initAdData() {
		// 廣告數據
		adList = getBannerAd();
		imageViews = new ArrayList<ImageView>();
		// 點
		dots = new ArrayList<View>();
		dotList = new ArrayList<View>();
		dot0 = findViewById(R.id.v_dot0);
		dot1 = findViewById(R.id.v_dot1);
		dot2 = findViewById(R.id.v_dot2);
		dot3 = findViewById(R.id.v_dot3);
		dot4 = findViewById(R.id.v_dot4);
		dots.add(dot0);
		dots.add(dot1);
		dots.add(dot2);
		dots.add(dot3);
		dots.add(dot4);

		tv_title = (TextView) findViewById(R.id.tv_title);

		adViewPager = (ViewPager) findViewById(R.id.vp);
		adViewPager.setAdapter(new BannerAdapter());// 設置填充ViewPager頁面的適配器
		// 設置一個監聽器，當ViewPager中的頁面改變時調用
		adViewPager.setOnPageChangeListener(new MyPageChangeListener());
		addDynamicView();
	}

	private void addDynamicView() {
		// 動態添加圖片和下面指示的圓點
		// 初始化圖片資源
		for (int i = 0; i < adList.size(); i++) {
			ImageView imageView = new ImageView(this);
			// 異步加載圖片
			mImageLoader.displayImage(adList.get(i).getImgUrl(), imageView,
					options);
			imageView.setScaleType(ScaleType.CENTER_CROP);
			imageViews.add(imageView);
			dots.get(i).setVisibility(View.VISIBLE);
			dotList.add(dots.get(i));
		}
	}

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

	private void startAd() {
		scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
		// 當Activity顯示出來後，每兩秒切換一次圖片顯示
		scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2,
				TimeUnit.SECONDS);
	}

	public class ScrollTask implements Runnable {

		@Override
		public void run() {
			synchronized (adViewPager) {
				currentItem = (currentItem + 1) % imageViews.size();
				handler.obtainMessage().sendToTarget();

			}

		}
	}

	@Override
	protected void onStop() {
		super.onStop();
		// 當Activity不可見的時候停止切換
		scheduledExecutorService.shutdown();
	}

	// 適配器
	private class BannerAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			return adList.size();
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			ImageView iv = imageViews.get(position);
			((ViewPager) container).addView(iv);
			final AdDome adDome = adList.get(position);
			// 在這個方法裏面設置圖片的點擊事件
			iv.setOnClickListener(new OnClickListener() {

				@Override
				public void onClick(View v) {
					// 處理跳轉邏輯
				}
			});
			return iv;
		}

		@Override
		public void destroyItem(View arg0, int arg1, Object arg2) {
			((ViewPager) arg0).removeView((View) arg2);
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		@Override
		public void restoreState(Parcelable arg0, ClassLoader arg1) {

		}

		@Override
		public Parcelable saveState() {
			return null;
		}

		@Override
		public void startUpdate(View arg0) {

		}

		@Override
		public void finishUpdate(View arg0) {

		}

	}

	private class MyPageChangeListener implements OnPageChangeListener {

		private int oldPosition = 0;

		public void onPageScrollStateChanged(int arg0) {

		}

		public void onPageScrolled(int arg0, float arg1, int arg2) {

		}

		public void onPageSelected(int position) {
			currentItem = position;
			AdDome adDome = adList.get(position);
			tv_title.setText(adDome.getTitle()); // 設置標題

			dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);
			dots.get(position).setBackgroundResource(R.drawable.dot_focused);
			oldPosition = position;
		}

	}

	// 輪播廣播模擬數據
	private List<AdDome> getBannerAd() {
		List<AdDome> adList = new ArrayList<AdDome>();

		AdDome adDome0 = new AdDome();
		adDome0.setId("108078");
		adDome0.setTitle("爲什麼在北極出現“世紀暖冬”同時我們遭遇嚴寒");
		adDome0.setImgUrl("http://img1.gtimg.com/news/pics/hv1/175/13/2009/130638715.jpg");
		adDome0.setAd(false);
		adList.add(adDome0);

		AdDome adDome1 = new AdDome();
		adDome1.setId("108078");
		adDome1.setTitle("青海門源發生6.4級地震 網友：西寧蘭州震感強烈");
		adDome1.setImgUrl("http://img1.gtimg.com/news/pics/hv1/168/20/2009/130640493.png");
		adDome1.setAd(false);
		adList.add(adDome1);

		AdDome adDome2 = new AdDome();
		adDome2.setId("108078");
		adDome2.setTitle("小學生考卷上留言老師 求給80分過好年");
		adDome2.setImgUrl("http://img1.gtimg.com/news/pics/hv1/225/96/2009/130659930.jpg");
		adDome2.setAd(false);
		adList.add(adDome2);

		AdDome adDome3 = new AdDome();
		adDome3.setId("108078");
		adDome3.setTitle("雷軍：不允許內部再講第一 用戶比第一重要");
		adDome3.setImgUrl("http://img1.gtimg.com/tech/pics/hv1/202/67/2009/130652512.jpg");
		adDome3.setAd(false);
		adList.add(adDome3);

		AdDome adDome4 = new AdDome();
		adDome4.setId("108078");
		adDome4.setTitle("政府免費WiFi遭吐槽 信號不穩體驗差");
		adDome4.setImgUrl("http://img1.gtimg.com/tech/pics/hv1/65/52/2009/130648550.jpg");
		adDome4.setAd(true);// 代表是廣告
		adList.add(adDome4);

		return adList;
	}

}

Android UI 實現廣告 Banner 輪播效果

定義圓點圖形資源 dot_normal.xml,dot_focused.xml

定義廣告實體 AdDome.java

實現切換邏輯

.Net 8.0 下的新RPC，IceRPC之試試的新玩法"打洞"

完美替代postman的軟件

Vue mockjs mock.js

關於遊戲付費的一點想法

我通過CKA和CKS啦！

安裝chromadb注意事項

《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer

大數據怎麼學？對大數據開發領域及崗位的詳細解讀，完整理解大數據開發領域技術體系

Kotlin 的 Array 轉 List

Android Studio遇到Error:Failed to find: com.android.support:appcompat-v7:21.+

自定義TopBar

與UI線程通訊

利用AsyncTask模擬進度條

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結