溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

android控件實(shí)現(xiàn)多張圖片漸變切換

發(fā)布時(shí)間:2020-09-24 07:40:39 來(lái)源:腳本之家 閱讀:191 作者:totcw 欄目:移動(dòng)開(kāi)發(fā)

本來(lái)項(xiàng)目是用的viewpager實(shí)現(xiàn)的輪播滾動(dòng),但是客戶覺(jué)得輪播的效果太大眾化了,于是就要我們改成漸變切換的效果。聽(tīng)到這需求,我最先想到是給viewpager設(shè)置切換動(dòng)畫(huà),但是無(wú)論怎么設(shè)置動(dòng)畫(huà),都要手動(dòng)切換的時(shí)候才有效果。于是我就自定義了一個(gè)控件,利用淡入淡出動(dòng)畫(huà)實(shí)現(xiàn)了這效果,還是先上效果圖,沒(méi)效果圖說(shuō)再多也沒(méi)用。

android控件實(shí)現(xiàn)多張圖片漸變切換

public class Gradient extends RelativeLayout {

  private List<ImageView> imageViews;
  private List<Animation> outAnim;//淡出動(dòng)畫(huà)
  private List<Animation> inAnim;//淡入動(dòng)畫(huà)
  private Context mContext;
  private Handler handler = new Handler(Looper.getMainLooper());
  private int couot;
  private int currentIndex;//當(dāng)前的頁(yè)面
  private LinearLayout linearLayout;
  private onClickListner listner;
  private long time=3000;//動(dòng)畫(huà)間隔時(shí)間


  public Gradient(Context context) {
    this(context, null);
  }

  public Gradient(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.mContext = context;
  }

  /**
   * 畫(huà)點(diǎn)
   */
  public void cratePoint() {
    if (null != imageViews && imageViews.size() > 0) {
      int size = imageViews.size();

      linearLayout = new LinearLayout(mContext);
      linearLayout.setOrientation(LinearLayout.HORIZONTAL);
      linearLayout.setGravity(Gravity.CENTER);
      // 添加圖片
      for (int i = 0; i < size; i++) {
        // 設(shè)置圓點(diǎn)
        View viewPoint = new View(mContext);
        viewPoint.setBackgroundResource(R.drawable.point_background);
        int weight = dip2px(mContext, 5);
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(weight, weight);
        lp.leftMargin = weight;
        viewPoint.setLayoutParams(lp);
        viewPoint.setEnabled(false);
        linearLayout.addView(viewPoint);
      }
      View childAt = linearLayout.getChildAt(0);
      if (null != childAt) {
        childAt.setEnabled(true);
      }
      //添加到圖片的下邊
      RelativeLayout.LayoutParams rlp = new RelativeLayout.LayoutParams(-1,-2);
      rlp.bottomMargin = dip2px(mContext, 5);
      rlp.addRule(ALIGN_PARENT_BOTTOM);
      this.addView(linearLayout, rlp);

    }


  }

  /**
   * 根據(jù)手機(jī)的分辨率從 dip 的單位 轉(zhuǎn)成為 px(像素)
   */
  public static int dip2px(Context context, float dpValue) {
    final float scale = context.getResources().getDisplayMetrics().density;
    return (int) (dpValue * scale + 0.5f);
  }

  /**
   * 設(shè)置圖片
   * @param imageViews
   */
  public void setImageViews(List<ImageView> imageViews) {
    this.imageViews = imageViews;
    for (int i = 0; i < imageViews.size(); i++) {
      RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(-1,-1);
      addView(imageViews.get(i),layoutParams);
    }
    setonClick();
    cratePoint();
    createAnim();
    start();

  }

  /**
   * 開(kāi)啟動(dòng)畫(huà)
   */
  private void start() {
    final int size = imageViews.size();
    handler.post(new Runnable() {
      @Override
      public void run() {
        final int i = couot % size;
        //解決點(diǎn)擊事件的沖突
        for (int j = 0; j < size; j++) {


          if (j == i) {
            imageViews.get(i).setClickable(true);


          } else {
            imageViews.get(i).setClickable(false);
          }
        }
        if (couot < size) {
          if (i == size - 1) {

            ImageView imageView = imageViews.get(0);
            imageView.startAnimation(outAnim.get(0));

            ImageView imageView2 = imageViews.get(size - 1);
            imageView2.startAnimation(inAnim.get(size - 1));


          } else {
            //當(dāng)前的淡出,下一張淡入
            ImageView imageView = imageViews.get(size - 1 - i);
            imageView.startAnimation(outAnim.get(size - 1 - i));



          }
        } else {
          if (i == size - 1) {
            //當(dāng)顯示到最后一張的時(shí)候,要跳到第一張
            ImageView imageView = imageViews.get(0);
            imageView.startAnimation(outAnim.get(0));

            ImageView imageView2 = imageViews.get(size - 1);
            imageView2.startAnimation(inAnim.get(size - 1));


          } else {
            //當(dāng)前的淡出,下一張淡入
            ImageView imageView = imageViews.get(size - 1 - i);
            imageView.startAnimation(outAnim.get(size - 1 - i));

            ImageView imageView2 = imageViews.get(size - 2 - i);
            imageView2.startAnimation(inAnim.get(size - 2 - i));

          }
        }

        currentIndex = i;
        linearLayout.getChildAt(currentIndex % size).setEnabled(false);
        currentIndex++;
        linearLayout.getChildAt(currentIndex % size).setEnabled(true);
        couot++;
        handler.postDelayed(this, time);
      }
    });
  }

  /**
   * 創(chuàng)建動(dòng)畫(huà)
   */
  private void createAnim() {
    outAnim = new ArrayList<>();
    inAnim = new ArrayList<>();
    for (int i = 0; i < imageViews.size(); i++) {
      Animation zoomOutAwayAnim = createZoomOutAwayAnim();
      zoomOutAwayAnim.setFillAfter(true);
      outAnim.add(zoomOutAwayAnim);

      Animation zoomOutNearAnim = createZoomOutNearAnim();
      zoomOutNearAnim.setFillAfter(true);
      inAnim.add(zoomOutNearAnim);

    }
  }

  /**
   * 設(shè)置點(diǎn)擊事件
   */
  public void setonClick() {
    for (int i = 0; i < imageViews.size(); i++) {
      imageViews.get(i).setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
          if (listner != null) {
            listner.setonClick((currentIndex) % imageViews.size());
          }

        }
      });
    }
  }

  public interface onClickListner{

    void setonClick(int position);
  }

  /**
   * 設(shè)置動(dòng)畫(huà)播放和handler延遲時(shí)間
   * @param time
   */
  public void setTime(long time) {
    this.time = time;
  }

  public void setListner(onClickListner listner) {
    this.listner = listner;
  }

  /** 創(chuàng)建一個(gè)淡出縮小的動(dòng)畫(huà) */
  public Animation createZoomOutAwayAnim() {
    AnimationSet ret;
    Animation anim;
    ret = new AnimationSet(false);
    // 創(chuàng)建一個(gè)淡出的動(dòng)畫(huà)
    anim = new AlphaAnimation(1f, 0f);
    anim.setDuration(time);
    anim.setInterpolator(new DecelerateInterpolator());
    ret.addAnimation(anim);
    // 創(chuàng)建一個(gè)縮小的動(dòng)畫(huà)
    /*anim = new ScaleAnimation(1, 0, 1, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    anim.setDuration(MEDIUM);
    anim.setInterpolator(new DecelerateInterpolator());
    ret.addAnimation(anim);*/
    return ret;
  }
  /** 創(chuàng)建一個(gè)淡入縮小的動(dòng)畫(huà) */
  public Animation createZoomOutNearAnim() {
    AnimationSet ret;
    Animation anim;
    ret = new AnimationSet(false);
    // 創(chuàng)建一個(gè)淡入的動(dòng)畫(huà)
    anim = new AlphaAnimation(0f, 1f);
    anim.setDuration(time);
    anim.setInterpolator(new LinearInterpolator());
    ret.addAnimation(anim);
    // 創(chuàng)建一個(gè)縮小的動(dòng)畫(huà)
    /*anim = new ScaleAnimation(3, 1, 3, 1, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    anim.setDuration(MEDIUM);
    anim.setInterpolator(new DecelerateInterpolator());
    ret.addAnimation(anim);*/
    return ret;
  }
}

這個(gè)控件的使用非常簡(jiǎn)單只要在布局文件中使用我們自定義的控件,然后調(diào)用setTime設(shè)置動(dòng)畫(huà)切換的時(shí)間,setListener設(shè)置圖片的點(diǎn)擊事件,setImagevies設(shè)置圖片就可以實(shí)現(xiàn)效果.考慮到內(nèi)存泄漏的問(wèn)題,只要在ondestry方法里面調(diào)用stop方法即可,點(diǎn)擊下載Demo

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI