Android的banner（輪播圖）的實現
阿新 • • 發佈：2018-12-22
本文使用了ViewPager來實現輪播圖的功能，輪播的圖片資源來源於網上。
一、思路
1、就是使得ViewPager實現啟動頁來無限的輪播圖片
2、啟動一個定時器來完成自動的輪播效果。
二、寫佈局程式碼
1、我們先是來看一下效果圖，如何，還是可以的吧。
注意點：這一節對於上一節，有幾處是不相同的。相對於ViewPager來實現啟動頁
1、上一節的指示器是固定在xml檔案中寫的，此一節，我們動態來實現。
2、主介面佈局準備。
先把佈局檔案畫好。在layout檔案中的activity.xml檔案。
<?xml version="1.0" encoding="utf-8"?> 注意點：
1、使用相對佈局，可以是重疊效果更好的實現。
2、一共有三個部分，ViewPager，TextVeiw和指示器的LinearLayout
3、指示器動態生成
3、指示器佈局程式碼
①實現點選效果佈局程式碼drawable檔案中point_selector.xml檔案
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/v_point_up" android:state_enabled="true"></item>
<item android:drawable="@drawable/v_point_down" android:state_enabled="false"></item>
</selector>②點選效果檔案drawable檔案中v_point_down.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="0.5dp" />
<solid android:color="#55000000" />
</shape>③未點選效果檔案drawable檔案中v_point_up.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="0.5dp" />
<solid android:color="#AAFFFFFF" />
</shape>三、寫Activity程式碼
思路：主要分為四個部分，我分別寫在了四個方法裡，
initView();初始化主佈局中的控制元件，ViewPager，TextView，LinearLayout
initDate();初始化一些資料，包含：ViewPager的資源，根據輪播圖的數量來動態生成指示器的數量
initAction();將ViewPager和指示器進行連線起來，這樣子ViewPager滾動的時候才能帶動指示器
initThread();開啟一個執行緒來自動迴圈輪播圖，在onDestory()方法中，關閉這個執行緒
我就直接上程式碼了，程式碼中註釋也是非常清楚了。BannerActivity.java檔案
public class BannerActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener, View.OnClickListener {
//設定資料來源集合
private List<BannerBean> listBannerBean;
//設定檢視的集合
private List<ImageView> listImageView;
//ViewPager的宣告
private ViewPager viewPager;
private TextView textView;
private LinearLayout linearLayout;
//設定圓點View
private View view;
LinearLayout.LayoutParams layoutParams;
//圓圈標誌位置
private int pointIndex = 0;
// 執行緒標誌
private boolean isStop = false;
//設定ViewPager介面卡
private BannerAdapter bannerAdapter;
//Volley載入網路圖片
private RequestQueue mQueue;
private ImageLoader mImageLoader;
private ImageLoader.ImageListener imageListener;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_banner);
initView();
initDate();
initAction();
initThread();
}
private void initThread() {
// 開啟新執行緒，2秒一次更新Banner
new Thread(new Runnable() {
@Override
public void run() {
while (!isStop) {
SystemClock.sleep(3000);
runOnUiThread(new Runnable() {
@Override
public void run() {
viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
}
});
}
}
}).start();
}
private void initAction() {
//取中間數來作為起始位置
int index = (Integer.MAX_VALUE / 2) - (Integer.MAX_VALUE / 2 % listImageView.size());
//用來出發監聽器
viewPager.setCurrentItem(index);
linearLayout.getChildAt(pointIndex).setEnabled(true);
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewpager);
textView = (TextView) findViewById(R.id.tv_bannertext);
linearLayout = (LinearLayout) findViewById(R.id.points);
mQueue = Volley.newRequestQueue(this);
}
private void initDate() {
BannerBean bannerBean1 = new BannerBean("http://image.tianjimedia.com/uploadImages/2012/236/L1Q2D11EJEUR.jpg", "田野和藍天");
BannerBean bannerBean2 = new BannerBean("http://image.tianjimedia.com/uploadImages/2012/236/ZU667K72270N.jpg", "海洋和帆船");
BannerBean bannerBean3 = new BannerBean("http://image.tianjimedia.com/uploadImages/2012/236/6477R0H2JBTU.jpg", "雪景");
BannerBean bannerBean4 = new BannerBean("http://image.tianjimedia.com/uploadImages/2012/236/1327ORB0XR68.jpg", "古堡");
BannerBean bannerBean5 = new BannerBean("http://image.tianjimedia.com/uploadImages/2012/236/2Q682OB9JGG8.jpg", "園林風景");
BannerBean bannerBean6 = new BannerBean("http://image.tianjimedia.com/uploadImages/2012/236/2V5E4MEHVT8L.jpg", "春夏秋冬");
listBannerBean = new ArrayList<>();
listBannerBean.add(bannerBean1);
listBannerBean.add(bannerBean2);
listBannerBean.add(bannerBean3);
listBannerBean.add(bannerBean4);
listBannerBean.add(bannerBean5);
listBannerBean.add(bannerBean6);
listImageView = new ArrayList<>();
for (int i = 0; i < listBannerBean.size(); i++) {
//設定廣告圖
ImageView imageView = new ImageView(this);
imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
imageView.setScaleType(ImageView.ScaleType.FIT_XY);//設定縮放樣式
mImageLoader = new ImageLoader(mQueue, new ImageLoader.ImageCache() {
@Override
public Bitmap getBitmap(String s) {
return null;
}
@Override
public void putBitmap(String s, Bitmap bitmap) {
}
});
imageListener = ImageLoader.getImageListener(imageView, R.mipmap.ic_launcher, R.mipmap.ic_launcher);
mImageLoader.get(listBannerBean.get(i).getImageUrl(), imageListener);
listImageView.add(imageView);
//設定圓點
view = new View(this);
layoutParams = new LinearLayout.LayoutParams(20, 20);
layoutParams.leftMargin = 10;
view.setBackgroundResource(R.drawable.point_selector);
view.setLayoutParams(layoutParams);
view.setEnabled(false);
linearLayout.addView(view);
}
bannerAdapter = new BannerAdapter(listImageView, this, listBannerBean);
viewPager.setAdapter(bannerAdapter);
viewPager.setOnPageChangeListener(this);
}
@Override
public void onClick(View v) {
//此處實現點選指示器，來顯示第幾個輪播圖，但我覺得一般輪播圖裡的點太小，可能會產出誤觸，不建議
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
int newPosition = position % listBannerBean.size();
textView.setText(listBannerBean.get(newPosition).getText());
linearLayout.getChildAt(newPosition).setEnabled(true);
linearLayout.getChildAt(pointIndex).setEnabled(false);
pointIndex = newPosition;
}
@Override
public void onPageScrollStateChanged(int state) {
}
@Override
protected void onDestroy() {
// 關閉定時器
isStop = true;
super.onDestroy();
}注意點：
1、
private void initAction() {
//取中間數來作為起始位置
int index = (Integer.MAX_VALUE / 2) - (Integer.MAX_VALUE / 2 % listImageView.size());
//用來出發監聽器
viewPager.setCurrentItem(index);
linearLayout.getChildAt(pointIndex).setEnabled(true);
}
這一段程式碼要好好注意，因為起始位置不能為0，為0的話，當滑動到第一張時，就不能再向左滑動了，所以我們選取一箇中間值得位置作為起始位置，這樣就不用擔心兩邊會滑到頭了。
四、ViewPager的介面卡
直接上程式碼：BannerAdapter.java
public class BannerAdapter extends PagerAdapter {
private List<ImageView> list;
private Context context;
private List<BannerBean> bannerBeanList;
public BannerAdapter(List<ImageView> list, Context context, List<BannerBean> bannerBeanList) {
this.list = list;
this.context = context;
this.bannerBeanList = bannerBeanList;
}
@Override
public int getCount() {
//取超大的數，實現無線迴圈效果
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(list.get(position % list.size()));
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
//這邊有一個很大的問題待解決，當圖片數量小於3的時候，不會呼叫destroyItem(ViewGroup container, int position, Object object)這個方法，則會出現問題。
//如果是多餘三張的時候，是會呼叫，然後進行移除。
container.addView(list.get(position % list.size()));
list.get(position % list.size()).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context, bannerBeanList.get(position % list.size()).getText(), Toast.LENGTH_SHORT).show();
}
});
return list.get(position % list.size());
}
}注意：
1、在getCount（）方法中返回的是Integer.MAX_VALUE；因為想要實現無限次的輪播效果，所以不能返回輪播圖的數量。
2、然後之前的position就要用position % list.size()來取代，這樣就不會出現越界的現象。
3、這裡還有一個問題沒有解決，就是當輪播圖的圖片少於三張的時候，會出現空白的問題。因為少於3張圖的時候，不會呼叫destroyItem（）這個方法，就不會銷燬之前的圖。以後再解決吧！希望大家也能夠給點意見。