Android ViewPager實(shí)現(xiàn)Banner循環(huán)播放
問(wèn)題的起源
在項(xiàng)目里,有時(shí)候需要實(shí)現(xiàn)一個(gè)圖片輪播的效果,用來(lái)展示Banner。同時(shí),圖片能循環(huán)播放,下面還有一排小圓點(diǎn)來(lái)指示當(dāng)前輪播到哪一頁(yè)了。
如下圖:

分析
· 圖片的個(gè)數(shù)是會(huì)變化的,同時(shí)小圓點(diǎn)的個(gè)數(shù)也會(huì)跟著圖片個(gè)數(shù)變化
· 每一個(gè)page的布局是一樣的。變化的就是小圓點(diǎn)的個(gè)數(shù),所以需要用代碼來(lái)動(dòng)態(tài)生成小圓點(diǎn)
編碼
布局
首先完成 MainActivity 的布局 activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" > <!-- ViewPager --> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="fill_parent" android:layout_height="180dip" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignBottom="@id/viewpager" android:background="#44000000" android:gravity="center" android:orientation="vertical" android:padding="5dip" > <!-- Banner的文字描述 --> <TextView android:id="@+id/tv_banner_text_desc" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@android:color/white" /> <!-- 小圓點(diǎn)的父控件 --> <LinearLayout android:id="@+id/ll_dot_group" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="5dip" android:gravity="center_horizontal" android:orientation="horizontal" > </LinearLayout> </LinearLayout> </RelativeLayout>
因?yàn)樾A點(diǎn)共有兩種狀態(tài),一個(gè)是 enable 為 true 的狀態(tài),和 enable 為 false 的狀態(tài)。所以需要為小圓點(diǎn)編寫一個(gè) selector 的 xml 配置文件,放在 drawable 文件夾中。這里,為它命名為 dot_bg_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/point_bg_enable" android:state_enabled="true"></item> <item android:drawable="@drawable/point_bg_normal" android:state_enabled="false"></item> </selector>
還需要再寫兩個(gè) xml 文件,作為小圓點(diǎn)在不同狀態(tài)下的樣式
point_bg_enable.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <corners android:radius="0.5dip" /> <solid android:color="#aaFFFFFF" /> </shape>
point_bg_normal.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <corners android:radius="0.5dip" /> <solid android:color="#55000000" /> </shape>
準(zhǔn)備圖片資源
我在 res\drawable-hdpi 文件夾中放置了幾張圖片,以演示用

開始編碼
代碼都加上詳細(xì)注釋了,大家可以看看。有不明白的歡迎指出來(lái)
package com.owen.adbanner;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.os.SystemClock;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;
/**
* ViewPager實(shí)現(xiàn)Banner循環(huán)滾動(dòng)
*
* @author owen
*/
public class MainActivity extends Activity {
/** ViewPager中ImageView的容器 */
private List<ImageView> imageViewContainer = null;
/** 上一個(gè)被選中的小圓點(diǎn)的索引,默認(rèn)值為0 */
private int preDotPosition = 0;
/** Banner文字描述數(shù)組 */
private String[] bannerTextDescArray = {
"鞏俐不低俗,我就不能低俗",
"樸樹又回來(lái)了,再唱經(jīng)典老歌引萬(wàn)人大合唱",
"揭秘北京電影如何升級(jí)",
"樂視網(wǎng)TV版大派送", "熱血屌絲的反殺"
};
/** Banner滾動(dòng)線程是否銷毀的標(biāo)志,默認(rèn)不銷毀 */
private boolean isStop = false;
/** Banner的切換下一個(gè)page的間隔時(shí)間 */
private long scrollTimeOffset = 5000;
private ViewPager viewPager;
/** Banner的文字描述顯示控件 */
private TextView tvBannerTextDesc;
/** 小圓點(diǎn)的父控件 */
private LinearLayout llDotGroup;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
startBannerScrollThread();
}
/**
* 開啟Banner滾動(dòng)線程
*/
private void startBannerScrollThread() {
new Thread(new Runnable() {
@Override
public void run() {
while (!isStop) {
//每個(gè)兩秒鐘發(fā)一條消息到主線程,更新viewpager界面
SystemClock.sleep(scrollTimeOffset);
runOnUiThread(new Runnable() {
public void run() {
int newindex = viewPager.getCurrentItem() + 1;
viewPager.setCurrentItem(newindex);
}
});
}
}
}).start();
}
@Override
protected void onDestroy() {
// 銷毀線程
isStop = true;
super.onDestroy();
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewpager);
llDotGroup = (LinearLayout) findViewById(R.id.ll_dot_group);
tvBannerTextDesc = (TextView) findViewById(R.id.tv_banner_text_desc);
imageViewContainer = new ArrayList<ImageView>();
int[] imageIDs = new int[] {
R.drawable.a,
R.drawable.b,
R.drawable.c,
R.drawable.d,
R.drawable.e,
};
ImageView imageView = null;
View dot = null;
LayoutParams params = null;
for (int id : imageIDs) {
imageView = new ImageView(this);
imageView.setBackgroundResource(id);
imageViewContainer.add(imageView);
// 每循環(huán)一次添加一個(gè)點(diǎn)到線行布局中
dot = new View(this);
dot.setBackgroundResource(R.drawable.dot_bg_selector);
params = new LayoutParams(5, 5);
params.leftMargin = 10;
dot.setEnabled(false);
dot.setLayoutParams(params);
llDotGroup.addView(dot); // 向線性布局中添加"點(diǎn)"
}
viewPager.setAdapter(new BannerAdapter());
viewPager.setOnPageChangeListener(new BannerPageChangeListener());
// 選中第一個(gè)圖片、文字描述
tvBannerTextDesc.setText(bannerTextDescArray[0]);
llDotGroup.getChildAt(0).setEnabled(true);
viewPager.setCurrentItem(0);
}
/**
* ViewPager的適配器
*/
private class BannerAdapter extends PagerAdapter {
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(imageViewContainer.get(position % imageViewContainer.size()));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = imageViewContainer.get(position % imageViewContainer.size());
// 為每一個(gè)page添加點(diǎn)擊事件
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Page 被點(diǎn)擊了", Toast.LENGTH_SHORT).show();
}
});
container.addView(view);
return view;
}
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
}
/**
* Banner的Page切換監(jiān)聽器
*/
private class BannerPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int arg0) {
// Nothing to do
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// Nothing to do
}
@Override
public void onPageSelected(int position) {
// 取余后的索引,得到新的page的索引
int newPositon = position % imageViewContainer.size();
// 根據(jù)索引設(shè)置圖片的描述
tvBannerTextDesc.setText(bannerTextDescArray[newPositon]);
// 把上一個(gè)點(diǎn)設(shè)置為被選中
llDotGroup.getChildAt(preDotPosition).setEnabled(false);
// 根據(jù)索引設(shè)置那個(gè)點(diǎn)被選中
llDotGroup.getChildAt(newPositon).setEnabled(true);
// 新索引賦值給上一個(gè)索引的位置
preDotPosition = newPositon;
}
}
}
參考來(lái)源
http://blog.csdn.net/allen315410/article/details/39294343
https://github.com/331637495/BannerDemo
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android ViewPager實(shí)現(xiàn)無(wú)限循環(huán)輪播廣告位Banner效果
- Android自定義封裝banner組件
- Android中banner的使用步驟
- Android 中Banner的使用詳解
- Android convinientbanner頂部廣告輪播控件使用詳解
- Android UI實(shí)現(xiàn)廣告Banner輪播效果
- Android組件banner實(shí)現(xiàn)左右滑屏效果
- Android自動(dòng)播放Banner圖片輪播效果
- Android實(shí)現(xiàn)Banner界面廣告圖片循環(huán)輪播(包括實(shí)現(xiàn)手動(dòng)滑動(dòng)循環(huán))
- android實(shí)現(xiàn)banner輪播圖無(wú)限輪播效果
相關(guān)文章
Android?RecyclerLineChart實(shí)現(xiàn)圖表繪制教程
這篇文章主要為大家介紹了Android?RecyclerLineChart實(shí)現(xiàn)圖表繪制教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
Android RecyclerView的刷新分頁(yè)的實(shí)現(xiàn)
這篇文章主要介紹了Android RecyclerView的刷新分頁(yè)的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
android獲取圖片尺寸的兩種方式及bitmap的縮放操作
這篇文章主要介紹了android獲取圖片尺寸的兩種方式及bitmap的縮放操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Android實(shí)現(xiàn)雙向滑動(dòng)特效的實(shí)例代碼
這篇文章主要介紹了Android實(shí)現(xiàn)雙向滑動(dòng)特效的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Android開發(fā)實(shí)現(xiàn)廣告無(wú)限循環(huán)功能示例
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)廣告無(wú)限循環(huán)功能,結(jié)合完整實(shí)例形式分析了Android廣告圖片輪播功能的具體實(shí)現(xiàn)步驟與相關(guān)功能、布局等操作技巧,需要的朋友可以參考下2017-11-11
android自定義view用path畫長(zhǎng)方形
這篇文章主要為大家詳細(xì)介紹了android自定義view用path畫長(zhǎng)方形,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-04-04
Android 使用volley過(guò)程中遇到的問(wèn)題解決辦法
這篇文章主要介紹了Android 使用volley過(guò)程中遇到的問(wèn)題解決辦法的相關(guān)資料,需要的朋友可以參考下2017-06-06
Android實(shí)現(xiàn)應(yīng)用內(nèi)置語(yǔ)言切換功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)應(yīng)用內(nèi)置語(yǔ)言切換功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
android操作SQLite增刪改減實(shí)現(xiàn)代碼
android操作SQLite增刪改減實(shí)現(xiàn)代碼,學(xué)習(xí)android的朋友可以參考下。2010-11-11
Android 日常開發(fā)總結(jié)的60條技術(shù)經(jīng)驗(yàn)
這篇文章主要介紹了Android日常開發(fā)總結(jié)的技術(shù)經(jīng)驗(yàn)60條,需要的朋友可以參考下2016-03-03

