輪播圖是很常用的一個效果 核心功能已經實現 沒有什麼特殊需求 自己沒事研究的 所以封裝的不太好 一些地方還比較糙 為想要研究輪播圖的同學提供個參考 目前測試圖片為mipmap中的圖片 沒有寫從網路載入圖片 可自行根據需求在getShowView()方法中修改 1.定時切換 通過handle延時發送通 ...
輪播圖是很常用的一個效果 核心功能已經實現 沒有什麼特殊需求 自己沒事研究的 所以封裝的不太好 一些地方還比較糙 為想要研究輪播圖的同學提供個參考
目前測試圖片為mipmap中的圖片 沒有寫從網路載入圖片 可自行根據需求在getShowView()方法中修改
1.定時切換
通過handle延時發送通知改變界面 然後在切換viewpage的界面之後 再次發送此延時通知 就ok咯 還可以通過timer定時器實現
2.無限輪播效果
如果我們只是在自動輪播到最後一頁 然後進行判斷讓切換到第一頁 這樣是可以實現輪播的效果
但是 有兩個問題
- 切換從最後一頁切換到第一頁的時候有一個很明顯的回滾效果 不是我們想要的
- 當我們手動滑動的時候 在第一頁和最後一頁的時候 無法繼續左右滑動 因為已經沒有下一頁了
先看張圖（偷來的）
不得不說這位兄弟的圖p的很形象 簡直完美
雖然看到的是三張圖 實際上是五張 數據多的時候也按照這種方式添加數據 當view4的時候自動切換到view5時 進行判斷讓到切換到view2 這樣造成的感覺就是最後一張下來是第一張
我們利用viewpage自帶的方法切換界面立即切換沒有滾動效果 當圖片一樣的時候是看不出圖片變化的
setCurrentItem(int item, boolean smoothScroll)
第二個參數設置false 界面切換的時候無滾動效果 預設true
好啦 接下來看代碼
public class BannerViewPager extends FrameLayout {
private ViewPager viewPager;
private TextView tvTitle;
private LinearLayout indicatorGroup;
private BannerAdapter adapter;
private List<String> titles;//標題集合
private List imageUrls;//圖片數據
private List<View> views;//輪播圖顯示
private ImageView [] tips;//保存顯示的小圓點
private int count;//保存imageUrls的總數
private int bannerTime=2500;//輪播圖的間隔時間
private int currentItem=0;//輪播圖的當前選中項
private long releaseTime = 0;//保存觸發時手動滑動的時間 進行判斷防止滑動之後立即輪播
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("標題1");
titles.add("標題2");
titles.add("標題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;
}
}
};
}
/**
* 初始化數據 以及拿到數據後的各種設置
* 可以是網路地址 也可是項目圖片數據
* @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();
}
/**
* 設置標題
* @param titles
*/
public void setTitles(List<String> titles){
this.titles.clear();
this.titles.addAll(titles);
}
/**
* 設置小圓點指示器
*/
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;// 設置點點點view的左邊距
layoutParams.rightMargin = 5;// 設置點點點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);
}
}
/**
* 設置UI
*/
private void setUI(){
adapter=new BannerAdapter();
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(onPageChangeLis);
viewPager.setCurrentItem(1);
handler.postDelayed(runnable,bannerTime);
}
/**
* viewPage改變監聽
*/
private ViewPager.OnPageChangeListener onPageChangeLis=new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//計算當前頁的下標
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","=====靜止狀態======");
if (currentItem == 0) {
viewPager.setCurrentItem(count, false);
} else if (currentItem == count + 1) {
viewPager.setCurrentItem(1, false);
}
break;
case 1:
// Log.e("aaa","=======手動拖拽滑動時調用====");
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","=======自動滑動時調用====");
break;
}
}
};
/**
* 設置指示器和標題切換
* @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);最後提供兩個github上大神封裝好的輪播圖
建議不太會的同學先搞清楚基本的邏輯在使用第三方庫
https://github.com/youth5201314/banner
https://github.com/bingoogolapple/BGABanner-Android
