先上效果圖:
本項目是用到兩種輪播圖,參考了網上一些大神的代碼,自己做了一點點修改,一種是自定義視圖輪播。還有一種是常見的APP首頁廣告圖檔輪播。
下面貼上關鍵類的代碼:
實作自定義視圖輪播的類:CycleMyViewPager
package cn.cnpp.cycleviewpager;
import android.app.Fragment;
import android.os.Bundle;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import java.util.ArrayList;
import java.util.List;
/**
* @author dyl
* 實作可循環,可輪播的viewpager
*/
public class CycleMyViewPager extends Fragment implements OnPageChangeListener {
private List<View> viewList = new ArrayList<>();
private ImageView[] indicators;
private FrameLayout viewPagerFragmentLayout;
/**
* 訓示器
*/
private LinearLayout indicatorLayout;
private BaseViewPager viewPager;
private ViewPagerAdapter adapter;
private CycleViewPagerHandler handler;
/**
* 預設輪播時間
*/
private int time = 5000;
/**
* 輪播目前位置
*/
private int currentPosition = 0;
/**
* 卷軸欄是否滾動着
*/
private boolean isScrolling = false;
/**
* 是否循環
*/
private boolean isCycle = false;
/**
* 是否輪播
*/
private boolean isWheel = false;
/**
* 手指松開、頁面不滾動時間,防止手機松開後短時間進行切換
*/
private long releaseTime = 0;
/**
* 轉動
*/
private int WHEEL = 100;
/**
* 等待
*/
private int WHEEL_WAIT = 101;
private ItemCycleViewListener mImageCycleViewListener;
private ItemScrollCycleViewListener itemScrollCycleViewListener;
private int[] intInfos;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = LayoutInflater.from(getActivity()).inflate(R.layout.view_cycle_viewpager_contet, null);
viewPager = view.findViewById(R.id.viewPager);
indicatorLayout = view.findViewById(R.id.layout_viewpager_indicator);
viewPagerFragmentLayout = view.findViewById(R.id.layout_viewager_content);
handler = new CycleViewPagerHandler(getActivity()) {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (msg.what == WHEEL && viewList.size() != 0) {
if (!isScrolling) {
int max = viewList.size() + 1;
int position = (currentPosition + 1) % viewList.size();
viewPager.setCurrentItem(position, true);
// 最後一頁時回到第一頁
if (position == max) {
viewPager.setCurrentItem(1, false);
}
}
releaseTime = System.currentTimeMillis();
handler.removeCallbacks(runnable);
handler.postDelayed(runnable, time);
return;
}
if (msg.what == WHEEL_WAIT && viewList.size() != 0) {
handler.removeCallbacks(runnable);
handler.postDelayed(runnable, time);
}
}
};
return view;
}
public void setCycleViewData(List<View> views, int[] list, ItemCycleViewListener listener, ItemScrollCycleViewListener scrollListener) {
setData(views, list, listener, 0, scrollListener);
}
/**
* 初始化viewpager
*
* @param views 要顯示的views
* @param showPosition 預設顯示位置
*/
public void setData(List<View> views, int[] list, ItemCycleViewListener listener, int showPosition, ItemScrollCycleViewListener scrollListener) {
mImageCycleViewListener = listener;
itemScrollCycleViewListener = scrollListener;
intInfos = list;
this.viewList.clear();
if (views.size() == 0) {
viewPagerFragmentLayout.setVisibility(View.GONE);
return;
}
for (View item : views) {
this.viewList.add(item);
}
int ivSize = views.size();
// 設定訓示器
indicators = new ImageView[ivSize - 2];
indicatorLayout.removeAllViews();
for (int i = 0; i < indicators.length; i++) {
View view = LayoutInflater.from(getActivity()).inflate(R.layout.view_cycle_viewpager_indicator, null);
indicators[i] = view.findViewById(R.id.image_indicator);
indicatorLayout.addView(view);
}
adapter = new ViewPagerAdapter();
// 預設指向第一項,下方viewPager.setCurrentItem将觸發重新計算訓示器指向
setIndicator(0);
viewPager.setOffscreenPageLimit(3);
viewPager.setOnPageChangeListener(this);
viewPager.setAdapter(adapter);
if (showPosition < 0 || showPosition >= views.size()) {
showPosition = 0;
}
if (isCycle) {
showPosition = showPosition + 1;
}
viewPager.setCurrentItem(showPosition);
}
/**
* 設定訓示器居中,預設訓示器在右方
*/
public void setIndicatorCenter() {
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
params.addRule(RelativeLayout.CENTER_HORIZONTAL);
indicatorLayout.setLayoutParams(params);
}
/**
* 是否循環,預設不開啟,開啟前,請将views的最前面與最後面各加入一個視圖,用于循環
*
* @param isCycle 是否循環
*/
public void setCycle(boolean isCycle) {
this.isCycle = isCycle;
}
/**
* 設定是否輪播,預設不輪播,輪播一定是循環的
*
* @param isWheel
*/
public void setWheel(boolean isWheel) {
this.isWheel = isWheel;
isCycle = true;
if (isWheel) {
handler.postDelayed(runnable, time);
}
}
final Runnable runnable = new Runnable() {
@Override
public void run() {
if (getActivity() != null && !getActivity().isFinishing() && isWheel) {
long now = System.currentTimeMillis();
// 檢測上一次滑動時間與本次之間是否有觸擊(手滑動)操作,有的話等待下次輪播
if (now - releaseTime > time - 500) {
handler.sendEmptyMessage(WHEEL);
} else {
handler.sendEmptyMessage(WHEEL_WAIT);
}
}
}
};
/**
* 設定輪播暫停時間,即沒多少秒切換到下一張視圖.預設5000ms
*
* @param time 毫秒為機關
*/
public void setTime(int time) {
this.time = time;
}
/**
* 設定viewpager是否可以滾動
*
* @param enable
*/
public void setScrollable(boolean enable) {
viewPager.setScrollable(enable);
}
/**
* 重新整理資料,當外部視圖更新後,通知重新整理資料
*/
public void refreshData() {
if (adapter != null) {
adapter.notifyDataSetChanged();
}
}
/**
* 頁面擴充卡 傳回對應的view
*
* @author Yuedong Li
*/
private class ViewPagerAdapter extends PagerAdapter {
@Override
public int getCount() {
return viewList.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public View instantiateItem(ViewGroup container, final int position) {
View v = viewList.get(position);
if (mImageCycleViewListener != null) {
v.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mImageCycleViewListener.onItemClick(intInfos[currentPosition - 1], currentPosition, v);
}
});
}
container.addView(v);
return v;
}
@Override
public int getItemPosition(Object object) {
return POSITION_NONE;
}
}
@Override
public void onPageScrollStateChanged(int state) {
// viewPager滾動狀态
if (state == 1) {
isScrolling = true;
return;
} else if (state == 0) {
releaseTime = System.currentTimeMillis();
viewPager.setCurrentItem(currentPosition, false);
}
isScrolling = false;
}
@Override
public void onPageScrolled(int position, float offset, int offsetPixels) {
}
@Override
public void onPageSelected(int pos) {
int max = viewList.size() - 1;
int position = pos;
currentPosition = pos;
if (isCycle) {
if (pos == 0) {
currentPosition = max - 1;
} else if (pos == max) {
currentPosition = 1;
}
position = currentPosition - 1;
}
setIndicator(position);
itemScrollCycleViewListener.onScrollListener(position + 1);
}
/**
* 設定訓示器
*
* @param selectedPosition 預設訓示器位置
*/
private void setIndicator(int selectedPosition) {
for (int i = 0; i < indicators.length; i++) {
indicators[i].setBackgroundResource(R.mipmap.dot_grey);
}
if (indicators.length > selectedPosition) {
indicators[selectedPosition].setBackgroundResource(R.mipmap.dot_yellow);
}
}
/**
* 輪播控件的監聽事件
*
* @author minking
*/
public interface ItemCycleViewListener {
/**
* 單擊圖檔事件
*
* @param info
* @param position
* @param imageView
*/
void onItemClick(int info, int position, View imageView);
}
/**
* 輪播控件的滾動監聽事件
*
* @author minking
*/
public interface ItemScrollCycleViewListener {
/**
* 單擊圖檔事件
*
* @param position
*/
void onScrollListener(int position);
}
}
MainActivity初始化頁面
package cn.cnpp.cycleviewpager;
import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private CycleMyViewPager cycleViewPager;
private List<View> viewArrayList = new ArrayList<>();
private CycleImageViewPager cycleImageViewPager;
private List<ImageView> imageViewList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initMyViewPager();
initImageViewPager();
}
private void initMyViewPager() {
cycleViewPager = (CycleMyViewPager) getFragmentManager().findFragmentById(R.id.fragment_cycle_viewpager);
viewArrayList.clear();
//測試所用資料源
int[] imgs = {R.mipmap.cate_test1, R.mipmap.cate_test2, R.mipmap.cate_test3, R.mipmap.cate_test4, R.mipmap.cate_test5, R.mipmap.cate_test6,
R.mipmap.cate_test7, R.mipmap.cate_test8};
viewArrayList.add(cycleViewItem(imgs[imgs.length - 1]));
for (int i = 0; i < imgs.length; i++) {
viewArrayList.add(cycleViewItem(imgs[i]));
}
// 将第一個ImageView添加進來
viewArrayList.add(cycleViewItem(imgs[0]));
//循環
cycleViewPager.setCycle(true);
//設定訓示器居中顯示
cycleViewPager.setIndicatorCenter();
//開啟輪播
cycleViewPager.setWheel(true);
//設定可滑動
cycleViewPager.setScrollable(true);
cycleViewPager.setCycleViewData(viewArrayList, imgs, mAdCycleViewListener, mScrollListener);
}
private View cycleViewItem(int date) {
View view = LayoutInflater.from(this).inflate(R.layout.view_cycleview_item, null);
ImageView iv = view.findViewById(R.id.img_address);
TextView tv = view.findViewById(R.id.tv_name);
iv.setImageResource(date);
tv.setText("cnpp" + date);
return view;
}
private CycleMyViewPager.ItemCycleViewListener mAdCycleViewListener = new CycleMyViewPager.ItemCycleViewListener() {
@Override
public void onItemClick(int info, int position, View imageView) {
showToastShort(MainActivity.this, "您點選了" + position);
}
};
private CycleMyViewPager.ItemScrollCycleViewListener mScrollListener = new CycleMyViewPager.ItemScrollCycleViewListener() {
@Override
public void onScrollListener(int position) {
showToastShort(MainActivity.this, "您滑動到了" + position);
}
};
private void initImageViewPager() {
cycleImageViewPager = (CycleImageViewPager) getFragmentManager().findFragmentById(R.id.fragment_image_viewpager);
// 将最後一個ImageView添加進來
imageViewList.clear();
int[] imgs = {R.mipmap.ad_img1, R.mipmap.ad_img2, R.mipmap.ad_img3};
imageViewList.add(setImageResource(imgs[imgs.length - 1]));
for (int i = 0; i < imgs.length; i++) {
imageViewList.add(setImageResource(imgs[i]));
}
// 将第一個ImageView添加進來
imageViewList.add(setImageResource(imgs[0]));
// 設定循環,在調用setData方法前調用
cycleImageViewPager.setCycle(true);
// 在加載資料前設定是否循環
cycleImageViewPager.setIntData(imageViewList, imgs, mCycleViewListener);
// 設定輪播
cycleImageViewPager.setWheel(true);
// 設定輪播時間,預設5000ms
cycleImageViewPager.setTime(3000);
// 設定圓點訓示圖示組居中顯示,預設靠右
cycleImageViewPager.setIndicatorCenter();
}
private CycleImageViewPager.ImageCycleViewListener mCycleViewListener = new CycleImageViewPager.ImageCycleViewListener() {
@Override
public void onImageClick(int info, int position, View imageView) {
if (cycleImageViewPager.isCycle()) {
}
}
};
private ImageView setImageResource(int img) {
ImageView imageView = (ImageView) LayoutInflater.from(this).inflate(R.layout.view_imageview, null);
imageView.setImageResource(img);
return imageView;
}
private void showToastShort(Context context, String str) {
Toast toast = Toast.makeText(context, str, Toast.LENGTH_SHORT);
toast.setGravity(Gravity.CENTER, 0, 0);
toast.show();
}
}
布局檔案activity_main.xml.
這裡有一點要注意的是,fragment這裡的name屬性是自定義ViewPager的類名,如果用到自己的項目中去需要修改這個包名。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="cn.cnpp.cycleviewpager.MainActivity">
<fragment
android:id="@+id/fragment_cycle_viewpager"
android:name="cn.cnpp.cycleviewpager.CycleMyViewPager"
android:layout_width="match_parent"
android:layout_height="150dp" />
<fragment
android:id="@+id/fragment_image_viewpager"
android:name="cn.cnpp.cycleviewpager.CycleImageViewPager"
android:layout_width="match_parent"
android:layout_marginTop="20dp"
android:layout_height="100dp" />
</LinearLayout>
主要的類就是這些了,需要檢視完整的代碼可以下載下傳demo。