Android ViewPager實(shí)現(xiàn)圖片輪播效果
在app中圖片的輪播顯示可以說(shuō)是非常常見(jiàn)的實(shí)現(xiàn)效果了，其實(shí)現(xiàn)原理不過(guò)是利用ViewPager，然后利用handler每隔一定的時(shí)間將ViewPager的currentItem設(shè)置為當(dāng)前item的position+1即可。先來(lái)看看效果圖吧：
就是實(shí)現(xiàn)這樣的一個(gè)輪播廣告的效果。
因?yàn)檫@個(gè)是自己為了練習(xí)仿照某旅游類(lèi)App做的，所以這里的數(shù)據(jù)是使用抓包工具抓取的，準(zhǔn)備數(shù)據(jù)等工作就不在這里贅述了，反正數(shù)據(jù)的添加大體都是相同的。我的思路是這樣的，從網(wǎng)絡(luò)上實(shí)時(shí)的獲取數(shù)據(jù)(當(dāng)然你也可以將數(shù)據(jù)寫(xiě)死)，然后通過(guò)網(wǎng)絡(luò)工具類(lèi)和json解析類(lèi)完成對(duì)數(shù)據(jù)的解析與封裝從List集合。根據(jù)集合的長(zhǎng)度來(lái)決定ViewPager有多少page頁(yè)面，下面的小圓點(diǎn)有多少。在函數(shù)中首先要設(shè)置一個(gè)boolean類(lèi)型的標(biāo)志位，用來(lái)判斷是否停止輪播的（我們要在此頁(yè)面不可見(jiàn)（onStop()方法內(nèi)）的時(shí)候結(jié)束輪播），定義一個(gè)全局變量來(lái)記錄當(dāng)前的小圓點(diǎn)的位置。
private boolean isStop = false; //標(biāo)志位，判斷是否停止輪播
private int previousPointEnale = 0; //標(biāo)記上一個(gè)小圓點(diǎn)的位置
然后我們就要為ViewPager的輪播做準(zhǔn)備了，比如說(shuō)動(dòng)態(tài)的根據(jù)數(shù)據(jù)條目來(lái)生成小圓點(diǎn)，定義適配器等，代碼如下：
/**
* banner的圖片輪播事件初始化
*/
private void initCycleEvent() {
//根據(jù)解析到的圖片的個(gè)數(shù)，初始化小圓點(diǎn)
LinearLayout.LayoutParams params;
for (int i = 0; i < imageViewList.size(); i++) {
View dot = new View(getActivity());
dot.setBackgroundResource(R.drawable.point_background);
params = new LinearLayout.LayoutParams(15, 15);
params.leftMargin = 10;
dot.setLayoutParams(params);
dot.setEnabled(false);
ll_dot_group.addView(dot);
}
//定義匿名適配器
adapter = new PagerAdapter() {
@Override
public int getCount() {
//因?yàn)橐獙?shí)現(xiàn)輪播，所以將數(shù)值設(shè)置的大一些
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
imageViewList.get(position % imageViewList.size()).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(getActivity(), WebViewActivity.class);
intent.putExtra("url", bannerList.get(position % imageViewList.size()).getUrl());
startActivity(intent);
}
});
container.addView(imageViewList.get(position % imageViewList.size()));
return imageViewList.get(position % imageViewList.size());
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(imageViewList.get(position % imageViewList.size()));
}
};
vp_banner.setAdapter(adapter);
//初始化第一個(gè)page頁(yè)和第一個(gè)小圓點(diǎn)
vp_banner.setCurrentItem(0);
ll_dot_group.getChildAt(0).setEnabled(true);
//為viewPager設(shè)置監(jiān)聽(tīng)
vp_banner.addOnPageChangeListener(new MyPageChangeListener());
}
這里小圓點(diǎn)我們沒(méi)有用圖片，而是用自定義的<selector>和<shape>結(jié)合來(lái)展示出來(lái)的。
<?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 android:drawable="@drawable/point_bg_normal" android:state_enabled="false"/> </selector>
小圓點(diǎn)獲取焦點(diǎn)的時(shí)候顯示的是這個(gè)<shape>資源文件：
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <corners android:radius="3dp" /> <solid android:color="#AAFFFFFF" /> </shape>
失去焦點(diǎn)的時(shí)候：
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <corners android:radius="3dp" /> <solid android:color="#55000000" /> </shape>
適配器PagerAdapter中的getCount()方法，這個(gè)方法是返回要展示生成的ViewPager的page頁(yè)的個(gè)數(shù)的，instantiateItem()方法(加載page頁(yè))的執(zhí)行次數(shù)是根據(jù)getCount()的返回值來(lái)決定的，所以我們這里因?yàn)橐?無(wú)限"循環(huán)，所以將其設(shè)置的大一些，使用INTEGER.MAX整數(shù)的最大值來(lái)表示。imageViewList是存儲(chǔ)我們要展示的imageView的集合，正常情況下不需要輪播的時(shí)候，我們直接根據(jù)position來(lái)addView()即可，但是因?yàn)橐獙?shí)現(xiàn)輪播，所以我們利用position和imageViewList集合的長(zhǎng)度使用求余的方法來(lái)確定圖片的下標(biāo)
position % imageViewList.size()
下面是定義適配器和動(dòng)態(tài)生成標(biāo)識(shí)圖片位置的小圓點(diǎn)的代碼：
/**
* banner的圖片輪播事件初始化
*/
private void initCycleEvent() {
//根據(jù)解析到的圖片的個(gè)數(shù)，初始化小圓點(diǎn)
LinearLayout.LayoutParams params;
for (int i = 0; i < imageViewList.size(); i++) {
View dot = new View(getActivity());
dot.setBackgroundResource(R.drawable.point_background);
params = new LinearLayout.LayoutParams(15, 15);
params.leftMargin = 10;
dot.setLayoutParams(params);
dot.setEnabled(false);
ll_dot_group.addView(dot);
}
//定義匿名適配器
adapter = new PagerAdapter() {
@Override
public int getCount() {
//因?yàn)橐獙?shí)現(xiàn)輪播，所以將數(shù)值設(shè)置的大一些
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
imageViewList.get(position % imageViewList.size()).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(getActivity(), WebViewActivity.class);
intent.putExtra("url", bannerList.get(position % imageViewList.size()).getUrl());
startActivity(intent);
}
});
container.addView(imageViewList.get(position % imageViewList.size()));
return imageViewList.get(position % imageViewList.size());
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(imageViewList.get(position % imageViewList.size()));
}
};
vp_banner.setAdapter(adapter);
//初始化第一個(gè)page頁(yè)和第一個(gè)小圓點(diǎn)
vp_banner.setCurrentItem(0);
ll_dot_group.getChildAt(0).setEnabled(true);
//為viewPager設(shè)置監(jiān)聽(tīng)
vp_banner.addOnPageChangeListener(new MyPageChangeListener());
}
記住在addView()和removeView()的時(shí)候都是要根據(jù)求余的值來(lái)找到對(duì)應(yīng)位置的應(yīng)該展示的imageView。初始化工作完成，下面應(yīng)該是完成對(duì)輪播的操作了，這里我們開(kāi)啟一個(gè)線程來(lái)每相隔一定的時(shí)間，獲取當(dāng)前ViewPager的page頁(yè)的position，然后+1，再設(shè)置當(dāng)前page頁(yè)下標(biāo)為這個(gè)新的值即可：
/**
* 開(kāi)啟輪播線程的方法
*/
private void startBannerScrollThread() {
new Thread(new Runnable() {
@Override
public void run() {
//先判斷是否停止輪播
while (!isStop) {
SystemClock.sleep(2000);
handler.post(new Runnable() {
@Override
public void run() {
int newindex = vp_banner.getCurrentItem() + 1;
vp_banner.setCurrentItem(newindex);
}
});
}
}
}).start();
}
當(dāng)然，因?yàn)槊總€(gè)圖片展示給我們的時(shí)候，在圖片下方的指示性小圓點(diǎn)要有相應(yīng)的變化，所以在ViewPager中我們還要處理它的滑動(dòng)事件，所以我們自定義了一個(gè)類(lèi)，實(shí)現(xiàn)了ViewPager.OnPageChangeListener接口，在onPageSelected()方法中處理相應(yīng)的事件：
/**
* viewPager滑動(dòng)監(jiān)聽(tīng)事件
*/
class MyPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//獲取新的一頁(yè)的位置
int newPosition = position % imageViewList.size();
//將上一個(gè)小圓點(diǎn)的背景設(shè)為默認(rèn)那個(gè)
ll_dot_group.getChildAt(previousPointEnale).setEnabled(false);
//設(shè)置當(dāng)前page頁(yè)的小圓點(diǎn)樣式
ll_dot_group.getChildAt(newPosition).setEnabled(true);
//把新的位置賦值給previousPointEnale
previousPointEnale = newPosition;
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
關(guān)鍵的代碼和思路就是這樣的，這里還有一篇我參照的文章，寫(xiě)的不錯(cuò)，下面把鏈接放在這里：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Android使用ViewPager加載圖片和輪播視頻
- Android 使用ViewPager自動(dòng)滾動(dòng)循環(huán)輪播效果
- Android 中使用 ViewPager實(shí)現(xiàn)屏幕頁(yè)面切換和頁(yè)面輪播效果
- Android使用viewpager實(shí)現(xiàn)自動(dòng)無(wú)限輪播圖
- Android ViewPager實(shí)現(xiàn)輪播圖效果
- Android實(shí)現(xiàn)基于ViewPager的無(wú)限循環(huán)自動(dòng)播放帶指示器的輪播圖CarouselFigureView控件
- Android ViewPager實(shí)現(xiàn)無(wú)限循環(huán)輪播廣告位Banner效果
- Android使用ViewPager實(shí)現(xiàn)自動(dòng)輪播
- Android Viewpager實(shí)現(xiàn)無(wú)限循環(huán)輪播圖
- android?viewpager實(shí)現(xiàn)輪播效果
相關(guān)文章
淺談Android RecyclerView UI的滾動(dòng)控件示例
本篇文章主要介紹了淺談Android RecyclerView UI的滾動(dòng)控件示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Android studio 4.1打包失敗和插件錯(cuò)誤提示的解決
這篇文章主要介紹了Android studio 4.1打包失敗和插件錯(cuò)誤提示的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
今天小編就為大家分享一篇關(guān)于Android面試題問(wèn)答整理，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2018-12-12
Android實(shí)現(xiàn)狀態(tài)欄和虛擬按鍵背景顏色的變化實(shí)例代碼詳解
今天介紹一下，我在項(xiàng)目開(kāi)發(fā)過(guò)程中，實(shí)現(xiàn)狀態(tài)欄和虛擬按鍵背景顏色變化的方法，實(shí)現(xiàn)方式是，通過(guò)隱藏系統(tǒng)的狀態(tài)欄和虛擬按鍵的背景，實(shí)現(xiàn)圖片和背景顯示到狀態(tài)欄和虛擬按鍵下方,需要的朋友可以參考下2019-05-05
Android應(yīng)用中使用及實(shí)現(xiàn)系統(tǒng)“分享”接口實(shí)例
為了應(yīng)用的推廣、傳播，很多的應(yīng)用中都有“分享”功能，這篇文章主要介紹了Android應(yīng)用中使用及實(shí)現(xiàn)系統(tǒng)“分享”接口實(shí)例，有興趣的可以了解一下。2016-12-12
Android車(chē)載多媒體開(kāi)發(fā)MediaSession框架示例詳解
這篇文章主要為大家介紹了Android車(chē)載多媒體開(kāi)發(fā)MediaSession框架示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
部分網(wǎng)友會(huì)發(fā)現(xiàn)Activity在切換到后臺(tái)或布局從橫屏LANDSCAPE切換到PORTRAIT，會(huì)重新切換Activity會(huì)觸發(fā)一次onCreate方法,使用其他的方法同樣可以實(shí)現(xiàn)2012-11-11
Android應(yīng)用開(kāi)發(fā)中RecyclerView組件使用入門(mén)教程
這篇文章主要介紹了Android應(yīng)用開(kāi)發(fā)中RecyclerView組件使用的入門(mén)教程,RecyclerView主要針對(duì)安卓5.0以上的material design開(kāi)發(fā)提供支持,需要的朋友可以參考下2016-02-02
這篇文章主要為大家介紹了libmp3lame及API介紹和使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
本篇文章主要介紹了Android路由框架Router分析詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02