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開(kāi)發(fā)實(shí)現(xiàn)繪制淘寶收益圖折線效果示例
這篇文章主要介紹了Android開(kāi)發(fā)實(shí)現(xiàn)繪制淘寶收益圖折線效果,涉及Android canvas圖形繪制及布局控制相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了Android4.X中SIM卡信息初始化過(guò)程,較為詳細(xì)的分析總結(jié)了Android4.X中SIM卡信息初始化的步驟及相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
在我們的qq聊天工具中，經(jīng)常會(huì)使用qq頭像截取功能，基于代碼是怎么實(shí)現(xiàn)的呢？下面小編通過(guò)本文給大家分享android 仿qq頭像自定義截取功能的思路分析及編碼實(shí)現(xiàn)過(guò)程，感興趣的朋友一起學(xué)習(xí)吧2016-10-10
android當(dāng)前apn的狀態(tài)以及獲取方法
在絕大多數(shù)android機(jī)器etc路徑下存放一個(gè)的apns-conf.xml文件，表示當(dāng)前機(jī)器使用的apn信息通過(guò)root機(jī)器可以push出來(lái)看看，具體路徑可以上網(wǎng)搜下,接下來(lái)介紹獲取apn的狀態(tài)的方法2013-01-01
這篇文章主要介紹了AndroidStudio手勢(shì)識(shí)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
ViewPager和SlidingPaneLayout的滑動(dòng)事件沖突解決方法
下面小編就為大家分享一篇ViewPager和SlidingPaneLayout的滑動(dòng)事件沖突解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Android權(quán)限機(jī)制帶來(lái)的一些安全問(wèn)題介紹
這篇文章主要介紹了Android權(quán)限機(jī)制帶來(lái)的一些安全問(wèn)題介紹,本文講解了權(quán)限機(jī)制的缺陷和不足、樹(shù)立權(quán)限意識(shí)、越過(guò)權(quán)限機(jī)制等內(nèi)容,需要的朋友可以參考下2015-04-04
Flutter 實(shí)現(xiàn)下拉刷新上拉加載的示例代碼
這篇文章主要介紹了Flutter 實(shí)現(xiàn)下拉刷新上拉加載的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
實(shí)例講解Android應(yīng)用開(kāi)發(fā)中TabHost的使用要點(diǎn)
這篇文章主要介紹了Android應(yīng)用開(kāi)發(fā)中TabHost的使用要點(diǎn),文中以實(shí)例講解了TabHost與Tab的布局方法,需要的朋友可以參考下2016-04-04
Android 物理游戲之重力系統(tǒng)開(kāi)發(fā)示例代碼
介紹Android 物理游戲之重力系統(tǒng),這里提供了詳細(xì)的資料整理，并附示例代碼和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下2016-08-08