abstract：這篇文章主要為大家詳細(xì)介紹了android輪播圖的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下輪播圖是很常用的一個(gè)效果 核心功能已經(jīng)實(shí)現(xiàn) 沒有什么特殊需求 自己沒事研究的 所以封裝的不太好 一些地方還比較糙 為想要研究輪播圖的同學(xué)提供個(gè)參考目前測試圖片為mipmap中的圖片 沒有寫從網(wǎng)絡(luò)加載圖片 可自行根據(jù)需求在getShowView()方法中修改1.定時(shí)切換通過handle延時(shí)發(fā)送
這篇文章主要為大家詳細(xì)介紹了android輪播圖的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
輪播圖是很常用的一個(gè)效果 核心功能已經(jīng)實(shí)現(xiàn) 沒有什么特殊需求 自己沒事研究的 所以封裝的不太好 一些地方還比較糙 為想要研究輪播圖的同學(xué)提供個(gè)參考
目前測試圖片為mipmap中的圖片 沒有寫從網(wǎng)絡(luò)加載圖片 可自行根據(jù)需求在getShowView()方法中修改
1.定時(shí)切換
通過handle延時(shí)發(fā)送通知改變界面 然后在切換viewpage的界面之后 再次發(fā)送此延時(shí)通知 就ok咯 還可以通過timer定時(shí)器實(shí)現(xiàn)
2.無限輪播效果
如果我們只是在自動(dòng)輪播到最后一頁 然后進(jìn)行判斷讓切換到第一頁 這樣是可以實(shí)現(xiàn)輪播的效果
但是 有兩個(gè)問題
切換從最后一頁切換到第一頁的時(shí)候有一個(gè)很明顯的回滾效果 不是我們想要的
當(dāng)我們手動(dòng)滑動(dòng)的時(shí)候 在第一頁和最后一頁的時(shí)候 無法繼續(xù)左右滑動(dòng) 因?yàn)橐呀?jīng)沒有下一頁了
先看張圖（偷來的）
不得不說這位兄弟的圖p的很形象 簡直完美
雖然看到的是三張圖 實(shí)際上是五張 數(shù)據(jù)多的時(shí)候也按照這種方式添加數(shù)據(jù) 當(dāng)view4的時(shí)候自動(dòng)切換到view5時(shí) 進(jìn)行判斷讓到切換到view2 這樣造成的感覺就是最后一張下來是第一張
我們利用viewpage自帶的方法切換界面立即切換沒有滾動(dòng)效果 當(dāng)圖片一樣的時(shí)候是看不出圖片變化的
setCurrentItem(int item, boolean smoothScroll)
第二個(gè)參數(shù)設(shè)置false 界面切換的時(shí)候無滾動(dòng)效果 默認(rèn)true
好啦 接下來看代碼
public class BannerViewPager extends FrameLayout {
private ViewPager viewPager;
private TextView tvTitle;
private LinearLayout indicatorGroup;
private BannerAdapter adapter;
private List<String> titles;//標(biāo)題集合
private List imageUrls;//圖片數(shù)據(jù)
private List<View> views;//輪播圖顯示
private ImageView [] tips;//保存顯示的小圓點(diǎn)
private int count;//保存imageUrls的總數(shù)
private int bannerTime=2500;//輪播圖的間隔時(shí)間
private int currentItem=0;//輪播圖的當(dāng)前選中項(xiàng)
private long releaseTime = 0;//保存觸發(fā)時(shí)手動(dòng)滑動(dòng)的時(shí)間 進(jìn)行判斷防止滑動(dòng)之后立即輪播
private final int START=10;
private final int STOP=20;
private Context context;
private Handler handler;
private final Runnable runnable=new Runnable() {
@Override
public void run() {
long now=System.currentTimeMillis();
if (now-releaseTime>bannerTime-500){
handler.sendEmptyMessage(START);
}else{
handler.sendEmptyMessage(STOP);
}
}
};
public BannerViewPager(Context context) {
super(context);
}
public BannerViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
this.context=context;
titles=new ArrayList<>();
titles.add("標(biāo)題1");
titles.add("標(biāo)題2");
titles.add("標(biāo)題3");
imageUrls=new ArrayList();
views=new ArrayList<>();
init(context,attrs);
}
private void init(final Context context, AttributeSet attrs){
View view= LayoutInflater.from(context).inflate(R.layout.layout_banner,this);
viewPager= (ViewPager) view.findViewById(R.id.banner_view_pager);
tvTitle= (TextView) view.findViewById(R.id.banner_title);
indicatorGroup= (LinearLayout) view.findViewById(R.id.banner_indicator);
handler=new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what){
case START:
viewPager.setCurrentItem(currentItem+1);
handler.removeCallbacks(runnable);
handler.postDelayed(runnable,bannerTime);
break;
case STOP:
releaseTime=0;
handler.removeCallbacks(runnable);
handler.postDelayed(runnable,bannerTime);
break;
}
}
};
}
/**
* 初始化數(shù)據(jù) 以及拿到數(shù)據(jù)后的各種設(shè)置
* 可以是網(wǎng)絡(luò)地址 也可是項(xiàng)目圖片數(shù)據(jù)
* @param imageUrls
*/
public void setData(List<?> imageUrls){
this.imageUrls.clear();
this.count=imageUrls.size();
this.imageUrls.add(imageUrls.get(count-1));
this.imageUrls.addAll(imageUrls);
this.imageUrls.add(imageUrls.get(0));
initIndicator();
getShowView();
setUI();
}
/**
* 設(shè)置標(biāo)題
* @param titles
*/
public void setTitles(List<String> titles){
this.titles.clear();
this.titles.addAll(titles);
}
/**
* 設(shè)置小圓點(diǎn)指示器
*/
private void initIndicator(){
tips=new ImageView[count];
LinearLayout.LayoutParams layoutParams = new LinearLayout.
LayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
layoutParams.height=10;
layoutParams.width=10;
layoutParams.leftMargin = 5;// 設(shè)置點(diǎn)點(diǎn)點(diǎn)view的左邊距
layoutParams.rightMargin = 5;// 設(shè)置點(diǎn)點(diǎn)點(diǎn)view的右邊距
for (int i=0;i<count;i++){
ImageView imageView=new ImageView(context);
if (i == 0) {
imageView.setBackgroundResource(R.drawable.shape_circle_red);
} else {
imageView.setBackgroundResource(R.drawable.shape_circle_white);
}
tips[i] = imageView;
indicatorGroup.addView(imageView, layoutParams);
}
}
/**
* 獲取顯示圖片view
*/
private void getShowView(){
for (int i=0;i<imageUrls.size();i++){
ImageView imageView=new ImageView(context);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
if (imageUrls.get(i) instanceof String){
}else{
imageView.setImageResource((Integer) imageUrls.get(i));
}
views.add(imageView);
}
}
/**
* 設(shè)置UI
*/
private void setUI(){
adapter=new BannerAdapter();
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(onPageChangeLis);
viewPager.setCurrentItem(1);
handler.postDelayed(runnable,bannerTime);
}
/**
* viewPage改變監(jiān)聽
*/
private ViewPager.OnPageChangeListener onPageChangeLis=new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//計(jì)算當(dāng)前頁的下標(biāo)
int max = views.size() - 1;
int temp = position;
currentItem = position;
if (position == 0) {
currentItem = max - 1;
} else if (position == max) {
currentItem = 1;
}
temp = currentItem - 1;
setIndicatorAndTitle(temp);
}
@Override
public void onPageScrollStateChanged(int state) {
currentItem=viewPager.getCurrentItem();
switch (state) {
case 0:
//Log.e("aaa","=====靜止?fàn)顟B(tài)======");
if (currentItem == 0) {
viewPager.setCurrentItem(count, false);
} else if (currentItem == count + 1) {
viewPager.setCurrentItem(1, false);
}
break;
case 1:
// Log.e("aaa","=======手動(dòng)拖拽滑動(dòng)時(shí)調(diào)用====");
releaseTime = System.currentTimeMillis();
if (currentItem == count + 1) {
viewPager.setCurrentItem(1, false);
} else if (currentItem == 0) {
viewPager.setCurrentItem(count, false);
}
break;
case 2:
// Log.e("aaa","=======自動(dòng)滑動(dòng)時(shí)調(diào)用====");
break;
}
}
};
/**
* 設(shè)置指示器和標(biāo)題切換
* @param position
*/
private void setIndicatorAndTitle(int position){
tvTitle.setText(titles.get(position));
for (int i=0;i<tips.length;i++){
if (i==position){
tips[i].setBackgroundResource(R.drawable.shape_circle_red);
}else{
tips[i].setBackgroundResource(R.drawable.shape_circle_white);
}
}
}
/**
* 適配器
*/
class BannerAdapter extends PagerAdapter{
@Override
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(views.get(position));
return views.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}Activity代碼
BannerViewPager banner= (BannerViewPager) findViewById(R.id.banner); List<Integer> imageUrl=new ArrayList<>(); imageUrl.add(R.mipmap.aiyo); imageUrl.add(R.mipmap.dipang1); imageUrl.add(R.mipmap.ic_launcher); banner.setData(imageUrl);
最后提供兩個(gè)github上大神封裝好的輪播圖
建議不太會(huì)的同學(xué)先搞清楚基本的邏輯在使用第三方庫
https://github.com/youth5201314/banner
https://github.com/bingoogolapple/BGABanner-Android
更多關(guān)于android輪播圖請關(guān)注PHP中文網(wǎng)（m.miracleart.cn）其他文章！