快捷導(dǎo)航

Android自定義實(shí)現(xiàn)淘寶下拉刷新效果

更新時(shí)間：2017年12月02日 10:38:23 作者：超級無敵小壞蛋

這篇文章主要為大家詳細(xì)介紹了Android自定義實(shí)現(xiàn)淘寶下拉刷新效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

概述

目前下拉刷新的樣式是多飾多樣，今天我們一起來自定義淘寶下拉刷新，其實(shí)淘寶下拉刷新比較的簡單就是一個(gè)圓環(huán)和一個(gè)小箭頭的顯示和隱藏，那么先看看我們的實(shí)現(xiàn)的效果。

是不是和淘寶有點(diǎn)像呢？那么現(xiàn)在我們來看看如何實(shí)現(xiàn)這個(gè)效果。我們這里為了省事，提供了2張照片第一是“隨時(shí)隨地，想淘就淘”的照片，第二種就是小箭頭照片，這里就自己畫了，主要就是實(shí)現(xiàn)那個(gè)圓弧的繪制和旋轉(zhuǎn)動(dòng)畫了。首先說這里的下拉刷新我用的是比較有名的 https://github.com/chrisbanes/Android-PullToRefresh 這個(gè)大家肯定很熟悉了，這里我修改了這個(gè)庫可以自定義頭部和底部。

步驟：

1、自定義一個(gè)view。（包含圓弧的繪制和箭頭的顯示和隱藏）
2、自定義頭部。

1）、創(chuàng)建attrs文件

<declare-styleable name="TaoBaoView"> 
    <attr name="ringProgressColor" format="color" /> 
    <attr name="ringWidth" format="dimension" /> 
    <attr name="ringImage" format="reference" /> 
    <attr name="ringmax" format="integer" /> 
  </declare-styleable>

2、創(chuàng)建一個(gè)類 TaoBaoView.class

public class TaoBaoView extends View{ 
 
 
  //圓環(huán)進(jìn)度顏色 
  private int ringProgressColor; 
 
  //圓環(huán)的寬度 
  private float ringWidth; 
 
  //最大值 
  private int ringMax; 
 
  //中間的icon 
  private Bitmap ringImage; 
 
  //中間X坐標(biāo) 
  private int centerX; 
 
  //中間Y坐標(biāo) 
  private int centerY; 
 
  //畫筆 
  private Paint mPaint; 
 
  //View寬度 
  private int width; 
 
  //View高度 
  private int height; 
 
  //進(jìn)度 
  private int progress; 
 
  //半徑 
  private int radius; 
 
  //是否顯示圖標(biāo) 
  private boolean isShowIcon=true; 
 
 
  public TaoBaoView(Context context) { 
    this(context,null); 
  } 
 
  public TaoBaoView(Context context, AttributeSet attrs) { 
    this(context, attrs,0); 
  } 
 
  public TaoBaoView(Context context, AttributeSet attrs, int defStyleAttr) { 
    super(context, attrs, defStyleAttr); 
    TypedArray typedArray=context.obtainStyledAttributes(attrs, R.styleable.TaoBaoView); 
    ringProgressColor=typedArray.getColor(R.styleable.TaoBaoView_ringProgressColor, Color.GRAY); 
    ringWidth=typedArray.getDimension(R.styleable.TaoBaoView_ringWidth, 5); 
    ringMax=typedArray.getInteger(R.styleable.TaoBaoView_ringmax, 50); 
    ringImage= BitmapFactory.decodeResource(getResources(), 
        typedArray.getResourceId(R.styleable.TaoBaoView_ringImage,R.mipmap.jiantou)); 
    init(); 
 
  } 
 
  private void init() { 
    mPaint=new Paint(); 
  } 
 
 
  @Override 
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
    super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
 
    int widthMode=MeasureSpec.getMode(widthMeasureSpec); 
    int widthSize=MeasureSpec.getSize(widthMeasureSpec); 
    int heightMode=MeasureSpec.getMode(heightMeasureSpec); 
    int heightSize=MeasureSpec.getSize(heightMeasureSpec); 
 
    if(widthMode==MeasureSpec.AT_MOST)width=dp2px(30); 
    else width=widthSize; 
    if(heightMode==MeasureSpec.AT_MOST)height=dp2px(30); 
    else height=heightSize; 
    setMeasuredDimension(width,height); 
  } 
 
  @Override 
  protected void onLayout(boolean changed, int left, int top, int right, int bottom) { 
    super.onLayout(changed, left, top, right, bottom); 
    //獲取中心點(diǎn)的位置 
    centerX=getWidth()/2; 
    centerY=getHeight()/2; 
    radius=(int) (centerX - ringWidth / 2); 
  } 
 
 
  @Override 
  protected void onSizeChanged(int w, int h, int oldw, int oldh) { 
    super.onSizeChanged(w, h, oldw, oldh); 
    //確定View的寬高 
    width = w; 
    height = h; 
  } 
 
  @Override 
  public void draw(Canvas canvas) { 
    super.draw(canvas); 
 
    drawProgress(canvas); 
    drawImage(canvas); 
  } 
 
  /** 
   * 繪制圖片 
   * @param canvas 
   */ 
  private void drawImage(Canvas canvas) { 
    if(isShowIcon) 
    canvas.drawBitmap(ringImage,centerX-ringImage.getWidth()/2,centerY-ringImage.getHeight()/2,mPaint); 
  } 
 
  /** 
   * 繪制進(jìn)度條 
   * @param canvas 
   */ 
  private void drawProgress(Canvas canvas) { 
 
    mPaint.setAntiAlias(true); 
    mPaint.setColor(ringProgressColor); 
    mPaint.setStrokeWidth(ringWidth); 
    //設(shè)置畫筆樣式 
    mPaint.setStyle(Paint.Style.STROKE); 
    RectF rectF=new RectF(centerX-radius,centerY-radius,centerX+radius,centerY+radius); 
    //繪制圓弧 
    canvas.drawArc(rectF,-110,-360*progress/ringMax,false,mPaint); 
  } 
 
 
  /** 
   * dp轉(zhuǎn)px 
   * @param dp 
   * @return 
   */ 
  public int dp2px(int dp){ 
    float density = getContext().getResources().getDisplayMetrics().density; 
    return (int) (dp * density + 0.5f); 
  } 
 
 
  /** 
   * 設(shè)置進(jìn)度 
   * @param progress 
   */ 
  public synchronized void setProgress(int progress){ 
    if(progress<0){ 
      progress=0; 
    } 
    if(progress>=ringMax){ 
      progress=ringMax; 
    } 
    this.progress=progress; 
    postInvalidate(); 
  } 
 
 
  /** 
   * 設(shè)置是否顯示圖標(biāo) 
   * @param isShow 
   */ 
  public synchronized void setIsShowIcon(boolean isShow){ 
    this.isShowIcon=isShow; 
  } 
}

3、創(chuàng)建一個(gè)headerLayout 下拉刷新頭部

public class HeaderLayout extends LoadingLayoutBase { 
 
  private Context mContext; 
  private RotateAnimation refreshingAnimation; 
  private TextView ring_refresh_status; 
  private TaoBaoView mTaoBaoView; 
  private LinearLayout header_base; 
  private LinearLayout header_layout; 
 
  public HeaderLayout(Context context) { 
    this(context, PullToRefreshBase.Mode.PULL_FROM_START); 
  } 
 
  public HeaderLayout(Context context, PullToRefreshBase.Mode mode) { 
    super(context); 
    init(context,mode); 
  } 
 
  private void init(Context mContext,PullToRefreshBase.Mode mode) { 
    this.mContext=mContext; 
    LayoutInflater.from(mContext).inflate(R.layout.taobao_view, this); 
    header_base=(LinearLayout)findViewById(R.id.header_base); 
    header_layout=(LinearLayout)findViewById(R.id.refresh_header_content); 
    mTaoBaoView=(TaoBaoView)findViewById(R.id.taobao_view); 
    ring_refresh_status=(TextView)findViewById(R.id.taobao_tv); 
    refreshingAnimation = (RotateAnimation) AnimationUtils.loadAnimation(mContext, R.anim.rotating); 
    LinearInterpolator lir = new LinearInterpolator(); 
    refreshingAnimation.setInterpolator(lir); 
    mTaoBaoView.setProgress(90); 
    LayoutParams lp = (LayoutParams) header_base.getLayoutParams(); 
    lp.gravity = mode == PullToRefreshBase.Mode.PULL_FROM_END ? Gravity.TOP : Gravity.BOTTOM; 
    reset(); 
  } 
 
  @Override 
  public int getContentSize() { 
    return header_layout.getHeight(); 
  } 
 
  /** 
   * 下拉可以刷新 
   */ 
  @Override 
  public void pullToRefresh() { 
    ring_refresh_status.setText("下拉刷新"); 
    mTaoBaoView.setIsShowIcon(true); 
  } 
 
  /** 
   * 松開后刷新 
   */ 
  @Override 
  public void releaseToRefresh() { 
    ring_refresh_status.setText("松開刷新"); 
    mTaoBaoView.setIsShowIcon(false); 
  } 
 
  /** 
   * 下拉中 
   * @param scaleOfLayout scaleOfLayout 
   */ 
  @Override 
  public void onPull(float scaleOfLayout) { 
    scaleOfLayout = scaleOfLayout > 1.0f ? 1.0f : scaleOfLayout; 
    int progress=(int) ((scaleOfLayout)*100); 
    mTaoBaoView.setProgress(progress>90?90:progress); 
 
  } 
 
  /** 
   * 正在刷新 
   */ 
  @Override 
  public void refreshing() { 
    mTaoBaoView.setIsShowIcon(false); 
    ring_refresh_status.setText("正在刷新"); 
    mTaoBaoView.startAnimation(refreshingAnimation); 
  } 
 
  @Override 
  public void reset() { 
    mTaoBaoView.clearAnimation(); 
  } 
 
  @Override 
  public void setPullLabel(CharSequence pullLabel) { 
 
  } 
 
  @Override 
  public void setRefreshingLabel(CharSequence refreshingLabel) { 
 
  } 
 
  @Override 
  public void setReleaseLabel(CharSequence releaseLabel) { 
 
  } 
}

4、在mainactivity中：

mPullToRefreshListView=(PullToRefreshListView)findViewById(R.id.list); 
mPullToRefreshListView.setHeaderLayout(new HeaderLayout(this));

附上github：https://github.com/dalong982242260/TaoBaoRefresh2

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Android仿美團(tuán)淘寶實(shí)現(xiàn)多級下拉列表菜單功能

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

Android自定義實(shí)現(xiàn)淘寶下拉刷新效果

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具