天天看點

android webview 輪播圖檔,Android ViewPager實作圖檔輪播效果

在app中圖檔的輪播顯示可以說是非常常見的實作效果了,其實作原理不過是利用ViewPager,然後利用handler每隔一定的時間将ViewPager的currentItem設定為目前item的position+1即可。先來看看效果圖吧:

android webview 輪播圖檔,Android ViewPager實作圖檔輪播效果

就是實作這樣的一個輪播廣告的效果。

因為這個是自己為了練習仿照某旅遊類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) {

}

}

關鍵的代碼和思路就是這樣的,這裡還有一篇我參照的文章,寫的不錯,下面把連結放在這裡:

以上就是本文的全部内容,希望對大家的學習有所幫助,也希望大家多多支援腳本之家。