關(guān)于Banner
很多的項(xiàng)目中都需要實(shí)現(xiàn)Banner位滾動(dòng)展示圖片的效果，我這里使用了ViewPager和RadioGroup封裝了一個(gè)帶指示器功能的Banner視圖，大家一起交流學(xué)習(xí)。
先上效果圖
banner.gif
自定義Banner視圖
自定義視圖的方法一般來(lái)說(shuō)有三種，這里使用了繼承ViewGroup(Relativelayout)的方法封裝ViewPager和RadioGroup
Banner布局文件的設(shè)置
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RadioGroup
android:id="@+id/radiogroup"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
android:gravity="center"
android:orientation="horizontal"></RadioGroup>
</RelativeLayout>
</merge>
在構(gòu)造方法中應(yīng)用布局文件，初始化布局控件
View view = LayoutInflater.from(context).inflate(R.layout.banner_layout, this, true);
//滾動(dòng)顯示ViewPager
viewPager = (ViewPager) view.findViewById(R.id.viewpager);
radioGroup = (RadioGroup) view.findViewById(R.id.radiogroup);
ViewPager的設(shè)置
適配器的設(shè)置
ViewPager本身支持視圖的左右滑動(dòng)，如果想實(shí)現(xiàn)無(wú)限輪播的效果需要在適配器中做一些設(shè)置。
ViewPager從最后一位切換到首位會(huì)有一個(gè)快速滑動(dòng)中間視圖的效果，這樣在顯示效果上并不是太好。這里的處理方式是將適配器的數(shù)據(jù)源設(shè)置成一個(gè)最大值。
/**
* ViewPager的適配器
*/
class BannerAdapter extends PagerAdapter {
@Override
public int getCount() {
//將count設(shè)置成整數(shù)最大值，虛擬實(shí)現(xiàn)無(wú)線(xiàn)輪播
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(views.get(position % views.size()));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = views.get(position % views.size());
ViewGroup parent = (ViewGroup) view.getParent();
//如果當(dāng)前要顯示的view有父布局先將父布局移除（view只能有一個(gè)父布局）
if (parent != null) {
parent.removeView(view);
}
container.addView(view);
return view;
}
}
輪播效果的實(shí)現(xiàn)
通過(guò)Handler嵌套發(fā)送消息實(shí)現(xiàn)視圖的切換效果
/**
* 通過(guò)嵌套發(fā)送消息循環(huán)滾動(dòng)viewpager
*
* @param delayMillis 輪播圖片的時(shí)間
*/
public void bannerPlay(final long delayMillis) {
// 設(shè)置顯示的初始位置，模擬向左無(wú)限滑動(dòng)（設(shè)置合適的值就行，一般人也不會(huì)滑動(dòng)很多）
pagerPosition = views.size() * 100;
if (handler == null) {
handler = new Handler() {
@Override
public void handleMessage(Message msg) {
handler.post(new Runnable() {
@Override
public void run() {
viewPager.setCurrentItem(++pagerPosition);
}
});
Message message = handler.obtainMessage(0);
handler.sendMessageDelayed(message, delayMillis);
}
};
Message message = handler.obtainMessage(0);
handler.sendMessageDelayed(message, delayMillis);
}
}
數(shù)據(jù)源的設(shè)置和指示器的聯(lián)動(dòng)
數(shù)據(jù)源的設(shè)置
這里通過(guò)setData(Object ...data)來(lái)設(shè)置數(shù)據(jù)源，參數(shù)類(lèi)型是Object的可變數(shù)組，可以傳遞圖片的ID或者圖片的鏈接等來(lái)設(shè)置數(shù)據(jù)源。
/**
* 設(shè)置顯示的資源
*
* @param data
*/
public void setData(Object... data) {
int id[] = new int[data.length];
for (int i = 0; i < id.length; i++) {
id[i] = i;
}
for (int i = 0; i < data.length; i++) {
View view = LayoutInflater.from(getContext()).inflate(R.layout.banner_item_layout, viewPager, false);
ImageView imageView = (ImageView) view.findViewById(R.id.iv_banner_item);
if (data[i] instanceof Integer) {
imageView.setImageResource((Integer) data[i]);
} else {
// TODO 如果設(shè)置的數(shù)據(jù)源為圖片地址或者其他類(lèi)型，根據(jù)具體情況為imageView設(shè)置圖片源
}
views.add(view);
//指示器小圓點(diǎn)的設(shè)置
View indicator = LayoutInflater.from(getContext()).inflate(R.layout.indicator_item_layout, viewPager, false);
radioButton = (RadioButton) indicator.findViewById(R.id.radioButton);
radioButton.setId(id[i]);// 為radioButton設(shè)置一個(gè)id,不設(shè)置的話(huà)第一個(gè)radiobutton總是沒(méi)法設(shè)置成選中中狀態(tài)（不太清楚好像是個(gè)bug）
if (i == 0) {
radioButton.setChecked(true); //將第一個(gè)指示器設(shè)置為選中
}
RadioGroup.LayoutParams layoutParams = new RadioGroup.LayoutParams(dip2px(getContext(), 10f), dip2px(getContext(), 10f));
layoutParams.leftMargin = dip2px(getContext(), 20);
radioGroup.addView(radioButton, layoutParams);
}
bannerAdapter.notifyDataSetChanged();
}
設(shè)置ViewPager和指示器的聯(lián)動(dòng)效果
//設(shè)置viewpager的滾動(dòng)監(jiān)聽(tīng)
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//改變當(dāng)前顯示的pager的位置
pagerPosition = position;
position = position % views.size();
//改變被選中的指示器的狀態(tài)
for (int i = 0; i < radioGroup.getChildCount(); i++) {
((RadioButton) radioGroup.getChildAt(i)).setChecked(i == position);
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
