android 輪播圖
輪播圖是很經常使用的一個效果 核心功能已經實現 沒有什麼特殊需求 本身沒事研究的 因此封裝的不太好 一些地方還比較糙 爲想要研究輪播圖的同窗提供個參考
目前測試圖片爲mipmap中的圖片 沒有寫從網絡加載圖片 可自行根據需求在getShowView()方法中修改git
1.定時切換
經過handle延時發送通知改變界面 而後在切換viewpage的界面以後 再次發送此延時通知 就ok咯 還能夠經過timer定時器實現github
2.無限輪播效果
若是咱們只是在自動輪播到最後一頁 而後進行判斷讓切換到第一頁 這樣是能夠實現輪播的效果
可是 有兩個問題網絡
- 切換從最後一頁切換到第一頁的時候有一個很明顯的回滾效果 不是咱們想要的
- 當咱們手動滑動的時候 在第一頁和最後一頁的時候 沒法繼續左右滑動 由於已經沒有下一頁了
先看張圖（偷來的）
app
不得不說這位兄弟的圖p的很形象 簡直完美ide
雖然看到的是三張圖 其實是五張 數據多的時候也按照這種方式添加數據 當view4的時候自動切換到view5時 進行判斷讓到切換到view2 這樣形成的感受就是最後一張下來是第一張
咱們利用viewpage自帶的方法切換界面當即切換沒有滾動效果 當圖片同樣的時候是看不出圖片變化的
setCurrentItem(int item, boolean smoothScroll)
第二個參數設置false 界面切換的時候無滾動效果 默認truepost
好啦 接下來看代碼測試
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代碼this
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上大神封裝好的輪播圖
建議不太會的同窗先搞清楚基本的邏輯在使用第三方庫code
https://github.com/youth5201314/banner
https://github.com/bingoogolapple/BGABanner-Androidblog
相關文章
- 1. Android——圖片輪播
- 2. Android 圖片輪播
- 3. Android ViewPager輪播圖
- 4. android 圖片輪播
- 5. Android --- 輪播視圖
- 6. android 圖片輪播（banner）無限輪播
- 7. 【Android】android圖片輪播
- 8. Android--圖片輪播（banner）
- 9. Android開發輪播圖Demo
- 10. Android之Banner輪播圖
- 更多相關文章...
- • Kotlin Android 環境搭建 - Kotlin 教程
- • R 繪圖 - 餅圖 - R 語言教程
- • Flink 數據傳輸及反壓詳解
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章