在app中圖檔的輪播顯示可以說是非常常見的實作效果了,其實作原理不過是利用ViewPager,然後利用handler每隔一定的時間将ViewPager的currentItem設定為目前item的position+1即可。先來看看效果圖吧:
就是實作這樣的一個輪播廣告的效果。
因為這個是自己為了練習仿照某旅遊類App做的,是以這裡的資料是使用抓包工具抓取的,準備資料等工作就不在這裡贅述了,反正資料的添加大體都是相同的。我的思路是這樣的,從網絡上實時的擷取資料(當然你也可以将資料寫死),然後通過網絡工具類和json解析類完成對資料的解析與封裝從List集合。根據集合的長度來決定ViewPager有多少page頁面,下面的小圓點有多少。在函數中首先要設定一個boolean類型的标志位,用來判斷是否停止輪播的(我們要在此頁面不可見(onStop()方法内)的時候結束輪播),定義一個全局變量來記錄目前的小圓點的位置。
private boolean isStop = false; //标志位,判斷是否停止輪播
private int previousPointEnale = 0; //标記上一個小圓點的位置
然後我們就要為ViewPager的輪播做準備了,比如說動态的根據資料條目來生成小圓點,定義擴充卡等,代碼如下:
private void initCycleEvent() {
//根據解析到的圖檔的個數,初始化小圓點
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() {
//因為要實作輪播,是以将數值設定的大一些
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);
//初始化第一個page頁和第一個小圓點
vp_banner.setCurrentItem(0);
ll_dot_group.getChildAt(0).setEnabled(true);
//為viewPager設定監聽
vp_banner.addOnPageChangeListener(new MyPageChangeListener());
}
這裡小圓點我們沒有用圖檔,而是用自定義的和結合來展示出來的。
小圓點擷取焦點的時候顯示的是這個資源檔案:
android:shape="oval" >
失去焦點的時候:
android:shape="oval" >
擴充卡PagerAdapter中的getCount()方法,這個方法是傳回要展示生成的ViewPager的page頁的個數的,instantiateItem()方法(加載page頁)的執行次數是根據getCount()的傳回值來決定的,是以我們這裡因為要"無限"循環,是以将其設定的大一些,使用INTEGER.MAX整數的最大值來表示。imageViewList是存儲我們要展示的imageView的集合,正常情況下不需要輪播的時候,我們直接根據position來addView()即可,但是因為要實作輪播,是以我們利用position和imageViewList集合的長度使用求餘的方法來确定圖檔的下标
position % imageViewList.size()
下面是定義擴充卡和動态生成辨別圖檔位置的小圓點的代碼:
private void initCycleEvent() {
//根據解析到的圖檔的個數,初始化小圓點
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() {
//因為要實作輪播,是以将數值設定的大一些
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);
//初始化第一個page頁和第一個小圓點
vp_banner.setCurrentItem(0);
ll_dot_group.getChildAt(0).setEnabled(true);
//為viewPager設定監聽
vp_banner.addOnPageChangeListener(new MyPageChangeListener());
}
記住在addView()和removeView()的時候都是要根據求餘的值來找到對應位置的應該展示的imageView。初始化工作完成,下面應該是完成對輪播的操作了,這裡我們開啟一個線程來每相隔一定的時間,擷取目前ViewPager的page頁的position,然後+1,再設定目前page頁下标為這個新的值即可:
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();
}
當然,因為每個圖檔展示給我們的時候,在圖檔下方的訓示性小圓點要有相應的變化,是以在ViewPager中我們還要處理它的滑動事件,是以我們自定義了一個類,實作了ViewPager.OnPageChangeListener接口,在onPageSelected()方法中處理相應的事件:
class MyPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//擷取新的一頁的位置
int newPosition = position % imageViewList.size();
//将上一個小圓點的背景設為預設那個
ll_dot_group.getChildAt(previousPointEnale).setEnabled(false);
//設定目前page頁的小圓點樣式
ll_dot_group.getChildAt(newPosition).setEnabled(true);
//把新的位置指派給previousPointEnale
previousPointEnale = newPosition;
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
關鍵的代碼和思路就是這樣的,這裡還有一篇我參照的文章,寫的不錯,下面把連結放在這裡:
以上就是本文的全部内容,希望對大家的學習有所幫助,也希望大家多多支援腳本之家。