.

參考界面 : 攜程app首頁的廣告欄, 使用ViewPager實(shí)現(xiàn)

? ? ??

自制頁面效果圖 :?

源碼下載地址:?http://download.csdn.net/detail/han1202012/6835401

.

作者?:萬境絕塵?

轉(zhuǎn)載請注明出處?:?http://blog.csdn.net/shulianghan/article/details/18964835

.

.

一. ViewPager適配頁面問題

1. ViewPager出現(xiàn)的問題

ViewPager占滿全屏問題 : ViewPager在XML中定義了android:layout_height 和 android:layout_width 之后, 不論這兩個(gè)屬性的值是 fill_parent 還是 wrap_content, 都會出現(xiàn)ViewPager占滿全屏的問題;

不使用固定值定義寬高: 為了使ViewPager能適配各種類型的手機(jī), 如果給ViewPager定義了高度和寬度, 與各種手機(jī)的界面兼容性肯定要大大的降低, 因此出現(xiàn)了下面的解決方案;

2. 解決方案?

代碼中添加組件 : 不在XML界面定義該組件, 可以在布局文件中,定義一個(gè)LinearLayout容器, 然后在代碼中動態(tài)添加ViewPager;

好處 : 這樣的好處是可以在代碼中獲取屏幕的寬高, 我們可以根據(jù)比例設(shè)定ViewPager的大小, 這樣就解決了屏幕適配的問題;

3. 代碼實(shí)現(xiàn)

//從布局文件中獲取ViewPager父容器pagerLayout = (LinearLayout) findViewById(R.id.view_pager_content);//創(chuàng)建ViewPageradViewPager = new ViewPager(this);//獲取屏幕像素相關(guān)信息DisplayMetrics dm = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);//根據(jù)屏幕信息設(shè)置ViewPager廣告容器的寬高adViewPager.setLayoutParams(new LayoutParams(dm.widthPixels, dm.heightPixels * 2 / 5));//將ViewPager容器設(shè)置到布局文件父容器中pagerLayout.addView(adViewPager);

二. ViewPager廣告欄基本解決方案

1. ViewPager適配器PagerAdapter

自定義PagerAdapter類 : 我們需要自定義一個(gè)類, 去繼承PageAdapter, 至少實(shí)現(xiàn)下面四個(gè)方法 :?

destroyItem(View container, int position, Object object) :?

作用 :刪除container中指定位置position的頁面;?

參數(shù) : container 就是容器, 這里指的是ViewPager對象, position就是刪除的頁面索引;

int getCount() :?

作用 :獲取ViewPager頁面的個(gè)數(shù);

返回值 : ViewPager頁面?zhèn)€數(shù);

Object instantiateItem(View container, int position) :?

作用 :在給定的位置創(chuàng)建頁面, PageAdapter負(fù)責(zé)向指定的position位置添加View頁面;

參數(shù) : container容器就是ViewPager, position指的是ViewPager的索引;

返回值 : 返回代表新的一頁的對象;

boolean isViewFromObject(View view, Object object) :?

作用 :決定instantiateItem()方法返回的Object對象是不是需要顯示的頁面關(guān)聯(lián), 這個(gè)方法必須要有;

參數(shù) : view 要關(guān)聯(lián)的頁面, object?instantiateItem()方法返回的對象;

返回值 : 是否要關(guān)聯(lián)顯示頁面與?instantiateItem()返回值;

為PageAdapter關(guān)聯(lián)數(shù)據(jù)源 : 可以將一個(gè)數(shù)組或者集合與PageAdapter關(guān)聯(lián),集合的索引與ViewPager的索引對應(yīng),?destroyItem()方法中刪除集合中對應(yīng)索引的元素對象,?instantiateItem 添加對應(yīng)索引的元素對象;

PageAdapter 代碼示例 :

private final class AdvAdapter extends PagerAdapter { private List<View> views = null; /*** 初始化數(shù)據(jù)源, 即View數(shù)組*/public AdvAdapter(List<View> views) { this.views = views; } /*** 從ViewPager中刪除集合中對應(yīng)索引的View對象*/@Override public void destroyItem(View container, int position, Object object) { ((ViewPager) container).removeView(views.get(position)); } /*** 獲取ViewPager的個(gè)數(shù)*/@Override public int getCount() { return views.size(); } /*** 從View集合中獲取對應(yīng)索引的元素, 并添加到ViewPager中*/@Override public Object instantiateItem(View container, int position) { ((ViewPager) container).addView(views.get(position), 0); return views.get(position); } /*** 是否將顯示的ViewPager頁面與instantiateItem返回的對象進(jìn)行關(guān)聯(lián)* 這個(gè)方法是必須實(shí)現(xiàn)的*/@Override public boolean isViewFromObject(View view, Object object) { return view == object; } }
創(chuàng)建PageAdapter代碼 :?

private void initPageAdapter() {pageViews = new ArrayList<View>();ImageView img1 = new ImageView(this); img1.setBackgroundResource(R.drawable.view_add_1); pageViews.add(img1); ImageView img2 = new ImageView(this); img2.setBackgroundResource(R.drawable.view_add_2); pageViews.add(img2); ImageView img3 = new ImageView(this); img3.setBackgroundResource(R.drawable.view_add_3); pageViews.add(img3); ImageView img4 = new ImageView(this); img4.setBackgroundResource(R.drawable.view_add_4); pageViews.add(img4); ImageView img5 = new ImageView(this); img5.setBackgroundResource(R.drawable.view_add_5); pageViews.add(img5); ImageView img6 = new ImageView(this); img6.setBackgroundResource(R.drawable.view_add_6); pageViews.add(img6); adapter = new AdPageAdapter(pageViews);}

2. 小圓點(diǎn)導(dǎo)航策略

圓點(diǎn)存放策略 : 所有的小圓點(diǎn)都放在一個(gè)ViewGroup中, 有兩種圓點(diǎn), 一種是當(dāng)前顯示的, 一種是沒激活的, 這里我們將一組圓點(diǎn)分別放入ImageView中, 并且將這些ImageView組裝起來放到ViewGroup中即可;

圓點(diǎn)導(dǎo)航初始化 : 最初默認(rèn)顯示第一個(gè)頁面, 第一個(gè)圓點(diǎn)激活, 根據(jù)ViewPager個(gè)數(shù)初始化圓點(diǎn)的個(gè)數(shù), 組裝圓點(diǎn)的時(shí)候, 第一個(gè)圓點(diǎn)狀態(tài)激活;

代碼如下 :?

private void initCirclePoint(){ViewGroup group = (ViewGroup) findViewById(R.id.viewGroup); imageViews = new ImageView[pageViews.size()]; //廣告欄的小圓點(diǎn)圖標(biāo)for (int i = 0; i < pageViews.size(); i++) { //創(chuàng)建一個(gè)ImageView, 并設(shè)置寬高. 將該對象放入到數(shù)組中imageView = new ImageView(this); imageView.setLayoutParams(new LayoutParams(20,20)); imageViews[i] = imageView; //初始值, 默認(rèn)第0個(gè)選中if (i == 0) { imageViews[i] .setBackgroundResource(R.drawable.point_focused); } else { imageViews[i] .setBackgroundResource(R.drawable.point_unfocused); } //將小圓點(diǎn)放入到布局中g(shù)roup.addView(imageViews[i]); } }

ViewPager頁面改變時(shí)圓點(diǎn)導(dǎo)航隨之改變 : 獲取ViewPager當(dāng)前顯示頁面索引,重新組裝ViewGroup中的圓點(diǎn)排列順序, 這個(gè)方法在ViewPager頁面改變監(jiān)聽器中實(shí)現(xiàn);

代碼如下 :?

/*** ViewPager 頁面改變監(jiān)聽器 */private final class AdPageChangeListener implements OnPageChangeListener { /*** 頁面滾動狀態(tài)發(fā)生改變的時(shí)候觸發(fā)*/@Override public void onPageScrollStateChanged(int arg0) { } /*** 頁面滾動的時(shí)候觸發(fā)*/@Override public void onPageScrolled(int arg0, float arg1, int arg2) { } /*** 頁面選中的時(shí)候觸發(fā)*/@Override public void onPageSelected(int arg0) { //獲取當(dāng)前顯示的頁面是哪個(gè)頁面atomicInteger.getAndSet(arg0); //重新設(shè)置原點(diǎn)布局集合for (int i = 0; i < imageViews.length; i++) { imageViews[arg0] .setBackgroundResource(R.drawable.point_focused); if (arg0 != i) { imageViews[i] .setBackgroundResource(R.drawable.point_unfocused); } } } }

3. 自動翻頁導(dǎo)航策略

線程中處理自動翻頁 : 啟動一個(gè)線程, 獲取當(dāng)前頁面顯示索引, 計(jì)算出下一個(gè)顯示位置, 顯示下一個(gè)頁面;

.

相關(guān)代碼 :?

線程代碼 :?

new Thread(new Runnable() { @Override public void run() { while (true) { if (isContinue) { viewHandler.sendEmptyMessage(atomicInteger.get()); atomicOption(); } } } }).start();
handler代碼 :?

private void atomicOption() { atomicInteger.incrementAndGet(); if (atomicInteger.get() > imageViews.length - 1) { atomicInteger.getAndAdd(-5); } try { Thread.sleep(3000); } catch (InterruptedException e) { } } /** 每隔固定時(shí)間切換廣告欄圖片*/private final Handler viewHandler = new Handler() { @Override public void handleMessage(Message msg) { adViewPager.setCurrentItem(msg.what); super.handleMessage(msg); } };

.

作者?:萬境絕塵?

轉(zhuǎn)載請注明出處?:?http://blog.csdn.net/shulianghan/article/details/18964835

.

三. 程序所有代碼 和 資源文件

XML布局文件 :?

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="5"android:orientation="vertical" > <LinearLayout android:id="@+id/view_pager_content"android:layout_height="wrap_content"android:layout_width="wrap_content"android:orientation="vertical"/><LinearLayout android:id="@+id/viewGroup" android:layout_below="@id/view_pager_content" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="-25px" android:gravity="right" android:orientation="horizontal" > </LinearLayout> </RelativeLayout> <LinearLayout android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="2"android:orientation="vertical"android:background="#BBFFBB"></LinearLayout></LinearLayout>

主Activity源碼 :?

package shuliang.han.myviewpager;import java.util.ArrayList; import java.util.List; import java.util.concurrent.atomic.AtomicInteger;import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.DisplayMetrics; import android.view.View; import android.view.ViewGroup; import android.view.ViewGroup.LayoutParams; import android.widget.ImageView; import android.widget.LinearLayout;public class MainActivity extends Activity {private ViewPager adViewPager;private LinearLayout pagerLayout;private List<View> pageViews;private ImageView[] imageViews;private ImageView imageView; private AdPageAdapter adapter;private AtomicInteger atomicInteger = new AtomicInteger(0); private boolean isContinue = true; @Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initViewPager();}private void initViewPager() {//從布局文件中獲取ViewPager父容器pagerLayout = (LinearLayout) findViewById(R.id.view_pager_content);//創(chuàng)建ViewPageradViewPager = new ViewPager(this);//獲取屏幕像素相關(guān)信息DisplayMetrics dm = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);//根據(jù)屏幕信息設(shè)置ViewPager廣告容器的寬高adViewPager.setLayoutParams(new LayoutParams(dm.widthPixels, dm.heightPixels * 2 / 5));//將ViewPager容器設(shè)置到布局文件父容器中pagerLayout.addView(adViewPager);initPageAdapter();initCirclePoint();adViewPager.setAdapter(adapter);adViewPager.setOnPageChangeListener(new AdPageChangeListener());new Thread(new Runnable() { @Override public void run() { while (true) { if (isContinue) { viewHandler.sendEmptyMessage(atomicInteger.get()); atomicOption(); } } } }).start(); }private void atomicOption() { atomicInteger.incrementAndGet(); if (atomicInteger.get() > imageViews.length - 1) { atomicInteger.getAndAdd(-5); } try { Thread.sleep(3000); } catch (InterruptedException e) { } } /** 每隔固定時(shí)間切換廣告欄圖片*/private final Handler viewHandler = new Handler() { @Override public void handleMessage(Message msg) { adViewPager.setCurrentItem(msg.what); super.handleMessage(msg); } }; private void initPageAdapter() {pageViews = new ArrayList<View>();ImageView img1 = new ImageView(this); img1.setBackgroundResource(R.drawable.view_add_1); pageViews.add(img1); ImageView img2 = new ImageView(this); img2.setBackgroundResource(R.drawable.view_add_2); pageViews.add(img2); ImageView img3 = new ImageView(this); img3.setBackgroundResource(R.drawable.view_add_3); pageViews.add(img3); ImageView img4 = new ImageView(this); img4.setBackgroundResource(R.drawable.view_add_4); pageViews.add(img4); ImageView img5 = new ImageView(this); img5.setBackgroundResource(R.drawable.view_add_5); pageViews.add(img5); ImageView img6 = new ImageView(this); img6.setBackgroundResource(R.drawable.view_add_6); pageViews.add(img6); adapter = new AdPageAdapter(pageViews);}private void initCirclePoint(){ViewGroup group = (ViewGroup) findViewById(R.id.viewGroup); imageViews = new ImageView[pageViews.size()]; //廣告欄的小圓點(diǎn)圖標(biāo)for (int i = 0; i < pageViews.size(); i++) { //創(chuàng)建一個(gè)ImageView, 并設(shè)置寬高. 將該對象放入到數(shù)組中imageView = new ImageView(this); imageView.setLayoutParams(new LayoutParams(10,10)); imageViews[i] = imageView; //初始值, 默認(rèn)第0個(gè)選中if (i == 0) { imageViews[i] .setBackgroundResource(R.drawable.point_focused); } else { imageViews[i] .setBackgroundResource(R.drawable.point_unfocused); } //將小圓點(diǎn)放入到布局中g(shù)roup.addView(imageViews[i]); } }/*** ViewPager 頁面改變監(jiān)聽器 */private final class AdPageChangeListener implements OnPageChangeListener { /*** 頁面滾動狀態(tài)發(fā)生改變的時(shí)候觸發(fā)*/@Override public void onPageScrollStateChanged(int arg0) { } /*** 頁面滾動的時(shí)候觸發(fā)*/@Override public void onPageScrolled(int arg0, float arg1, int arg2) { } /*** 頁面選中的時(shí)候觸發(fā)*/@Override public void onPageSelected(int arg0) { //獲取當(dāng)前顯示的頁面是哪個(gè)頁面atomicInteger.getAndSet(arg0); //重新設(shè)置原點(diǎn)布局集合for (int i = 0; i < imageViews.length; i++) { imageViews[arg0] .setBackgroundResource(R.drawable.point_focused); if (arg0 != i) { imageViews[i] .setBackgroundResource(R.drawable.point_unfocused); } } } } private final class AdPageAdapter extends PagerAdapter { private List<View> views = null; /*** 初始化數(shù)據(jù)源, 即View數(shù)組*/public AdPageAdapter(List<View> views) { this.views = views; } /*** 從ViewPager中刪除集合中對應(yīng)索引的View對象*/@Override public void destroyItem(View container, int position, Object object) { ((ViewPager) container).removeView(views.get(position)); } /*** 獲取ViewPager的個(gè)數(shù)*/@Override public int getCount() { return views.size(); } /*** 從View集合中獲取對應(yīng)索引的元素, 并添加到ViewPager中*/@Override public Object instantiateItem(View container, int position) { ((ViewPager) container).addView(views.get(position), 0); return views.get(position); } /*** 是否將顯示的ViewPager頁面與instantiateItem返回的對象進(jìn)行關(guān)聯(lián)* 這個(gè)方法是必須實(shí)現(xiàn)的*/@Override public boolean isViewFromObject(View view, Object object) { return view == object; } } }

.

作者?:萬境絕塵?

轉(zhuǎn)載請注明出處?:?http://blog.csdn.net/shulianghan/article/details/18964835

.

效果圖 :?

源碼下載地址 :?http://download.csdn.net/detail/han1202012/6835401

.

總結(jié)

以上是生活随笔為你收集整理的【Android 应用开发】Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。