欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android仿京東淘寶自動無限循環(huán)輪播控件思路詳解

 更新時間:2017年04月01日 08:53:52   作者:LTing5505  
在App的開發(fā)中,很多的時候都需要實現(xiàn)類似京東淘寶一樣的自動無限輪播的廣告欄,這里小編寫了一個,分享到腳本之家平臺供大家參考

在App的開發(fā)中,很多的時候都需要實現(xiàn)類似京東淘寶一樣的自動無限輪播的廣告欄,所以就自己寫了一個,下面是我自定義控件的思路和過程。

一、自定義控件屬性

新建自定義控件SliderLayout繼承于RelativeLayout,首先要考慮的就是自定義的控件需要擴展那些屬性,把這些屬性列出來。在這里是要實現(xiàn)類似于京東淘寶的無限輪播廣告欄,那么首先想到的就是輪播的時長、輪播指示器的樣式等等。我在這里列舉了一些并且結(jié)合到了代碼中。

1、擴展屬性

(1)是否開啟自動輪播的功能。
(2)指示器的圖形樣式,一般為圓形和方形兩種。
(3)指示器的位置,一般為底部或者頂部。
(4)指示器被選中和不被選中時的樣式:顏色、高度、寬度、間隔等。
(5)輪播的時長。
(6)加載的如果是網(wǎng)絡圖片的話,需要默認圖片和錯誤圖片等。

2、在attrs.xml文件中添加這些擴展的屬性。

<declare-styleable name="SliderLayout">
  <attr name="sl_is_auto_play" format="boolean"/>
  <attr name="sl_indicator_shape" format="enum">
   <enum name="oval" value="0" />
   <enum name="rect" value="1" />
  </attr>
  <attr name="sl_indicator_position" format="enum">
   <enum name="centerBottom" value="0" />
   <enum name="rightBottom" value="1" />
   <enum name="leftBottom" value="2" />
   <enum name="centerTop" value="3" />
   <enum name="rightTop" value="4" />
   <enum name="leftTop" value="5" />
  </attr>
  <attr name="sl_selected_indicator_color" format="color|reference" />
  <attr name="sl_unselected_indicator_color" format="color|reference" />
  <attr name="sl_selected_indicator_height" format="dimension|reference" />
  <attr name="sl_selected_indicator_width" format="dimension|reference" />
  <attr name="sl_unselected_indicator_height" format="dimension|reference" />
  <attr name="sl_unselected_indicator_width" format="dimension|reference" />
  <attr name="sl_indicator_space" format="dimension|reference" />
  <attr name="sl_indicator_margin" format="dimension|reference" />
  <attr name="sl_auto_play_duration" format="integer|reference" />
  <attr name="sl_default_image" format="reference"/>
  <attr name="sl_error_image" format="reference"/>
 </declare-styleable>

二、自定義輪播控件的初始化

1、獲取到擴展屬性的值

在自定義SliderLayout中獲取到擴展的樣式,然后根據(jù)樣式獲取相應的屬性值,最好是要先設置好默認值。

TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.SliderLayout, defStyleAttr, 0);
  if (array != null) {
   isAutoPlay = array.getBoolean(R.styleable.SliderLayout_sl_is_auto_play, isAutoPlay);
   //get the shape of indicator
   int intShape = array.getInt(R.styleable.SliderLayout_sl_indicator_shape, indicatorShape.ordinal());
   for (IndicatorShape shape : IndicatorShape.values()) {
    if (shape.ordinal() == intShape) {
     indicatorShape = shape;
     break;
    }
   }
   //get the position of indicator
   int intPosition = array.getInt(R.styleable.SliderLayout_sl_indicator_position, IndicatorPosition.centerBottom.ordinal());
   for (IndicatorPosition position : IndicatorPosition.values()) {
    if (position.ordinal() == intPosition) {
     indicatorPosition = position;
     break;
    }
   }
   unSelectedIndicatorColor = array.getColor(R.styleable.SliderLayout_sl_unselected_indicator_color, unSelectedIndicatorColor);
   selectedIndicatorColor = array.getColor(R.styleable.SliderLayout_sl_selected_indicator_color, selectedIndicatorColor);
   unSelectedIndicatorHeight = array.getDimension(R.styleable.SliderLayout_sl_unselected_indicator_height, unSelectedIndicatorHeight);
   unSelectedIndicatorWidth = array.getDimension(R.styleable.SliderLayout_sl_unselected_indicator_width, unSelectedIndicatorWidth);
   selectedIndicatorHeight = array.getDimension(R.styleable.SliderLayout_sl_selected_indicator_height, selectedIndicatorHeight);
   selectedIndicatorWidth = array.getDimension(R.styleable.SliderLayout_sl_selected_indicator_width, selectedIndicatorWidth);
   indicatorSpace = array.getDimension(R.styleable.SliderLayout_sl_indicator_space, indicatorSpace);
   indicatorMargin = array.getDimension(R.styleable.SliderLayout_sl_indicator_margin, indicatorMargin);
   autoPlayDuration = array.getInt(R.styleable.SliderLayout_sl_auto_play_duration, autoPlayDuration);
   defaultImage = array.getResourceId(R.styleable.SliderLayout_sl_default_image, defaultImage);
   errorImage = array.getResourceId(R.styleable.SliderLayout_sl_error_image, errorImage);
  }

2、初始化控件

根據(jù)這里所需要實現(xiàn)的功能,首先需要一個圖像切換器ImageSwticher,還要指示器,這里就用ImageView了。

switcherImage = new ImageSwitcher(context);
  switcherImage.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
for (int i = 0; i < itemCount; i++) {
   ImageView indicator = new ImageView(context);
   indicator.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
   indicator.setPadding((int) (indicatorSpace), (int) (indicatorSpace), (int) (indicatorSpace), (int) (indicatorSpace));
   indicator.setImageDrawable(unSelectedDrawable);
   indicatorContainer.addView(indicator);
   final int finalI = i;
   indicator.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
     stopAutoPlay();
     switchIndicator(finalI);
     pictureIndex = finalI;
     handler.sendEmptyMessageDelayed(START_AUTO_PLAY,autoPlayDuration);
    }
   });
  }

3、初始化選中第一張圖片

專門寫一個針對指示器切換的函數(shù),然后在初始化的時候直接調(diào)用,選中第一個指示器,就是選中第一張圖片了。

函數(shù)代碼如下。

private void switchIndicator(int index) {
  for (int i = 0; i < indicatorContainer.getChildCount(); i++) {
   ((ImageView) indicatorContainer.getChildAt(i)).setImageDrawable(i == index ? selectedDrawable : unSelectedDrawable);
  }
  loadImage(index);
 }

調(diào)用選中第一張圖。

switchIndicator(0);

三、圖片的加載

1、網(wǎng)路圖片的加載

在這里使用Picasso框架來加載圖片,根據(jù)url來加載顯示圖片,同時也要顯示圖片的加載進度,這里就需要一個Dialog提示框了,Dialog的樣式最好是可以自定義的。

private void loadNetImage(int pictureIndex) {
  if (list != null && list.size() != 0) {
   Picasso.with(context)
     .load((String) list.get(pictureIndex))
     .placeholder(defaultImage)
     .error(errorImage)
     .tag(context)
     .into(mTarget);
  }
 }

下面是圖片的加載提示過程。

private Target mTarget = new Target() {
  @Override
  public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
   dismissDialog();
   ((ImageView) switcherImage.getCurrentView()).setScaleType(ImageView.ScaleType.CENTER_CROP);
   ((ImageView) switcherImage.getCurrentView()).setLayoutParams(new ImageSwitcher.LayoutParams(ImageSwitcher.LayoutParams.MATCH_PARENT, ImageSwitcher.LayoutParams.MATCH_PARENT));
   ((ImageView) switcherImage.getCurrentView()).setImageBitmap(bitmap);
  }
  @Override
  public void onBitmapFailed(Drawable errorDrawable) {
   dismissDialog();
   ((ImageView) switcherImage.getCurrentView()).setImageDrawable(errorDrawable);
  }
  @Override
  public void onPrepareLoad(Drawable placeHolderDrawable) {
   showDialog();
  }
 };

2、資源圖片的加載

只能加載網(wǎng)絡圖片是不夠的呢,還需要可以加載資源圖片,加載資源圖片的辦法就更加簡單了。

private void loadFileImage(int pictureIndex) {
   if (list != null && list.size() != 0) {
    switcherImage.setImageResource((Integer) list.get(pictureIndex));
   }
  }

四、設置圖片切換的動畫

設置圖片從左往右以及從右往左的動畫效果,并且當滑動到該圖片時,指示器也要一起變化,這里就簡單說下從左往右的動畫了。

private void SliderLeftToRight() {
  // get current index
  pictureIndex = pictureIndex == 0 ? itemCount - 1
    : pictureIndex - 1;
  // set Animation
  switcherImage.setInAnimation(AnimationUtils.loadAnimation(context,
    android.R.anim.slide_in_left));
  switcherImage.setOutAnimation(AnimationUtils.loadAnimation(context,
    android.R.anim.slide_out_right));
  switchIndicator(pictureIndex);
 }

從右往左滑動時的代碼和這個是一樣的,就是換了下方向,需要自己定義下。

五、定義圖片的點擊事件

1、定義interface來監(jiān)聽事件

在自定義控件中自定義一個interface來監(jiān)聽事件就可以了。

public interface IOnClickListener {
  void onItemClick(View view, int position);
 }

2、在onTouch中調(diào)用點擊事件。

這里需要說明下為什么在onTouch中處理,因為onTouch是觸摸事件,在滑動的過程中,用戶是觸摸了屏幕的,所以根據(jù)用戶觸摸屏幕時點擊下的X坐標和點擊起來時的X坐標的對比來判斷是左滑還是右滑了,這樣的話,就會和onClick事件相沖了,所以就想到了一個辦法,那就是在范圍內(nèi)的話,就默認為點擊事件,范圍外就是滑動事件了。

if (0==(Math.abs(touchUpX - touchDownX))||(Math.abs(touchUpX - touchDownX))<50) {
    if (listener != null) {
     stopAutoPlay();
     listener.onItemClick(view, pictureIndex);
     handler.sendEmptyMessageDelayed(START_AUTO_PLAY,autoPlayDuration);
    }
}

六、效果圖

說到了這里,應該有所思路了吧,現(xiàn)在就來看下效果吧。

這里寫圖片描述

源代碼目前已經(jīng)開放了,放在Github上面,歡迎指導建議。http://www.github.com/LT5505/SliderLayout

以上所述是小編給大家介紹的Android仿京東淘寶自動無限循環(huán)輪播控件思路詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關文章

最新評論