效果圖
一侨嘀、ViewPager填充圖片
1.1 布局中申明
-
由于是顯示廣告條强衡，所以高度要固定住
<android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="120dp"/>
1.2 代碼中設(shè)置頁(yè)面數(shù)據(jù)
-
準(zhǔn)備顯示圖片控件的集合
// 準(zhǔn)備顯示的圖片集合 mList = new ArrayList<>(); for (int i = 0; i < mImages.length; i++) { ImageView imageView = new ImageView(this); // 將圖片設(shè)置到ImageView控件上 imageView.setImageResource(mImages[i]); // 將ImageView控件添加到集合 mList.add(imageView); } -
自定義類書寫適配器
@Override public Object instantiateItem(ViewGroup container, int position) { // return super.instantiateItem(container, position); // 將圖片控件添加到容器 container.addView(mList.get(position)); // 返回 return mList.get(position); }
二嫉拐、底部小圓點(diǎn)顯示邏輯
原理分析：底部的小圓點(diǎn)時(shí)浮動(dòng)在ViewPager上面的的迅耘，所以應(yīng)該是一個(gè)RelativeLayout布局绽诚。
ViewPager頁(yè)面切換時(shí)小圓點(diǎn)的顏色不一樣，所以需要對(duì)小圓點(diǎn)做選擇器内列，并且對(duì)ViewPager進(jìn)行監(jiān)聽撵术。
2.1 布局申明
- 需要用一個(gè)RelativeLayout將ViewPager和包裹圓點(diǎn)的LinearLayout包裹起來(lái)
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="120dp">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="120dp"/>
<LinearLayout
android:id="@+id/pointgroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="3dp"
android:orientation="horizontal">
</LinearLayout>
</RelativeLayout>
2.2 制作小圓點(diǎn)顏色選擇器
-
選擇器的選中狀態(tài)應(yīng)該設(shè)置為selected，因?yàn)閷?duì)ViewPager監(jiān)聽時(shí)可以設(shè)置selected的屬性
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/shape_point_normal" android:state_selected="false"/> <item android:drawable="@drawable/shape_point_selected" android:state_selected="true"/> </selector> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#66000000"/> </shape <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#FFFFFF"/> </shape>
2.3 將小圓點(diǎn)添加到LinearLayout容器
小圓點(diǎn)其實(shí)就是一個(gè)ImageView话瞧，所以在做出ViewPager的頁(yè)面圖片時(shí)嫩与，一起把小圓點(diǎn)也做了
-
初始化ImageView添加到LinearLayout之前，需要設(shè)置小圓點(diǎn)的布局參數(shù)交排，包括位置和大小
LinearLayout pointGroup = (LinearLayout) findViewById(R.id.pointgroup); for (int i = 0; i < mImages.length; i++) { // 制作底部小圓點(diǎn) ImageView pointImage = new ImageView(this); pointImage.setImageResource(R.drawable.shape_point_selector); // 設(shè)置小圓點(diǎn)的布局參數(shù) int PointSize = getResources().getDimensionPixelSize(R.dimen.point_size); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(PointSize, PointSize); if (i > 0) { params.leftMargin = getResources().getDimensionPixelSize(R.dimen.point_margin); pointImage.setSelected(false); } else { pointImage.setSelected(true); } pointImage.setLayoutParams(params); // 添加到容器里 pointGroup.addView(pointImage); }
三划滋、小圓點(diǎn)隨著ViewPager切換移動(dòng)
-
其實(shí)就是對(duì)ViewPager設(shè)置滑動(dòng)監(jiān)聽，當(dāng)滑動(dòng)到每一頁(yè)時(shí)就設(shè)置小圓點(diǎn)為選中狀態(tài)埃篓，這樣小圓點(diǎn)就顯示白色处坪，其他頁(yè)面就設(shè)置為未選中狀態(tài)顯示灰色。
// 對(duì)ViewPager設(shè)置滑動(dòng)監(jiān)聽 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } int lastPosition; @Override public void onPageSelected(int position) { // 頁(yè)面被選中 // 設(shè)置當(dāng)前頁(yè)面選中 pointGroup.getChildAt(position).setSelected(true); // 設(shè)置前一頁(yè)不選中 pointGroup.getChildAt(lastPosition).setSelected(false); // 替換位置 lastPosition = position; } @Override public void onPageScrollStateChanged(int state) { } }); 這里設(shè)置選中和未選中除了可以用替換position的方法之外架专，還可以再定義一個(gè)ImageView來(lái)記錄選中的ImageView同窘，然后在監(jiān)聽里替換，思想都是一樣的胶征。
經(jīng)過(guò)前面的三步設(shè)置后就能顯示一個(gè)簡(jiǎn)單的廣告條了塞椎，這里再對(duì)其添加一個(gè)滑動(dòng)到最后一頁(yè)后再滑還能滑動(dòng)到首頁(yè)的功能。
四睛低、無(wú)限滑動(dòng)的ViewPager
實(shí)現(xiàn)原理： ViewPager之所以滑動(dòng)到左右能顯示頁(yè)面案狠，其實(shí)是因?yàn)樽笥叶即嬖诩磳⒁@示的頁(yè)面服傍。當(dāng)左右有很多頁(yè)面時(shí)我們就能一直滑動(dòng)，沒(méi)有時(shí)就不能滑動(dòng)骂铁。所以原理就是讓ViewPager的左右都有很多的頁(yè)面吹零。
4.1 修改getCount方法
-
ViewPager能顯示多少個(gè)頁(yè)面全由getCount方法說(shuō)了算，所以我們首先要改造它拉庵。
@Override public int getCount() { // 返回整數(shù)的最大值 return Integer.MAX_VALUE; }
4.2 修改instantiateItem方法
-
因?yàn)閜osition變了灿椅，所以顯示的位置也變了，這里需要進(jìn)行取%運(yùn)算钞支，來(lái)還原position茫蛹。
// 修改position position = position % mList.size();
4.3 修改ViewPager監(jiān)聽器里的onPageSelected
-
用到了position就要修改。
position = position % mList.size();
修改之后烁挟，ViewPager當(dāng)前頁(yè)的右邊就有了無(wú)數(shù)的頁(yè)面婴洼，但是因?yàn)?了mList.size()，就只會(huì)顯示mList.size()的大小撼嗓，這樣就實(shí)現(xiàn)了無(wú)限滑動(dòng)輪播
五柬采、無(wú)限自動(dòng)輪播的廣告圖
實(shí)現(xiàn)原理：在前面四步的基礎(chǔ)上，在代碼里添加一個(gè)Handler且警，不斷的給自己發(fā)消息就好了粉捻。
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
int currentPosition = viewPager.getCurrentItem();
if(currentPosition == viewPager.getAdapter().getCount() - 1){
// 最后一頁(yè)
viewPager.setCurrentItem(0);
}else{
viewPager.setCurrentItem(currentPosition + 1);
}
// 一直給自己發(fā)消息
mHandler.postDelayed(this,5000);
}
},5000);
自定義帶動(dòng)畫無(wú)限自動(dòng)輪播的Banner控件
