Android自定义实现淘宝下拉刷新效果

 更新时间:2017年12月02日 10:38:23   作者:超级无敌小坏蛋  
这篇文章主要为大家详细介绍了Android自定义实现淘宝下拉刷新效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

概述

目前下拉刷新的样式是多饰多样,今天我们一起来自定义淘宝下拉刷新,其实淘宝下拉刷新比较的简单就是一个圆环和一个小箭头的显示和隐藏,那么先看看我们的实现的效果。


是不是和淘宝有点像呢?那么现在我们来看看如何实现这个效果。我们这里为了省事,提供了2张照片  第一是“随时随地,想淘就淘”的照片,第二种就是小箭头照片,这里就自己画了,主要就是实现那个圆弧的绘制和旋转动画了。首先说这里的下拉刷新我用的是比较有名的 https://github.com/chrisbanes/Android-PullToRefresh 这个大家肯定很熟悉了,这里我修改了这个库可以自定义头部和底部。

步骤:

1、自定义一个view。(包含圆弧的绘制和箭头的显示和隐藏)
2、自定义头部。

1)、创建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、创建一个类 TaoBaoView.class

public class TaoBaoView extends View{ 
 
 
  //圆环进度颜色 
  private int ringProgressColor; 
 
  //圆环的宽度 
  private float ringWidth; 
 
  //最大值 
  private int ringMax; 
 
  //中间的icon 
  private Bitmap ringImage; 
 
  //中间X坐标 
  private int centerX; 
 
  //中间Y坐标 
  private int centerY; 
 
  //画笔 
  private Paint mPaint; 
 
  //View宽度 
  private int width; 
 
  //View高度 
  private int height; 
 
  //进度 
  private int progress; 
 
  //半径 
  private int radius; 
 
  //是否显示图标 
  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); 
    //获取中心点的位置 
    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); 
  } 
 
  /** 
   * 绘制进度条 
   * @param canvas 
   */ 
  private void drawProgress(Canvas canvas) { 
 
    mPaint.setAntiAlias(true); 
    mPaint.setColor(ringProgressColor); 
    mPaint.setStrokeWidth(ringWidth); 
    //设置画笔样式 
    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转px 
   * @param dp 
   * @return 
   */ 
  public int dp2px(int dp){ 
    float density = getContext().getResources().getDisplayMetrics().density; 
    return (int) (dp * density + 0.5f); 
  } 
 
 
  /** 
   * 设置进度 
   * @param progress 
   */ 
  public synchronized void setProgress(int progress){ 
    if(progress<0){ 
      progress=0; 
    } 
    if(progress>=ringMax){ 
      progress=ringMax; 
    } 
    this.progress=progress; 
    postInvalidate(); 
  } 
 
 
  /** 
   * 设置是否显示图标 
   * @param isShow 
   */ 
  public synchronized void setIsShowIcon(boolean isShow){ 
    this.isShowIcon=isShow; 
  } 
} 

3、创建一个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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • logcat命令使用方法和查看android系统日志缓冲区内容的方法

    logcat命令使用方法和查看android系统日志缓冲区内容的方法

    这篇文章主要介绍了logcat命令使用方法和查看android系统日志缓冲区内容的方法,需要的朋友可以参考下
    2014-02-02
  • Android中CheckBox复选框控件使用方法详解

    Android中CheckBox复选框控件使用方法详解

    这篇文章主要为大家详细介绍了Android中CheckBox复选框控件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 如何利用adb卸载手机预装软件(系统软件)

    如何利用adb卸载手机预装软件(系统软件)

    对于Android手机通常有很多不必要的预置软件,但是又无法卸载,占用桌面有很难受,所以本次使用adb工具来实现从电脑命令来卸载或停用软件,下面这篇文章主要给大家介绍了关于如何利用adb卸载手机预装软件(系统软件)的相关资料,需要的朋友可以参考下
    2022-09-09
  • Android实现全局悬浮框

    Android实现全局悬浮框

    这篇文章主要为大家详细介绍了Android实现全局悬浮框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • Android使用观察者模式Observer实现网络状态监听

    Android使用观察者模式Observer实现网络状态监听

    这篇文章主要为大家详细介绍了Android使用观察者模式Observer实现网络状态监听,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • 浅谈Android添加快捷方式ShortCut

    浅谈Android添加快捷方式ShortCut

    这篇文章主要介绍了浅谈Android添加快捷方式ShortCut,对添加快捷方式感兴趣的同学,可以参考下
    2021-04-04
  • 一文详解Android中Okio输入输出流

    一文详解Android中Okio输入输出流

    在 OkHttp 的源码中,我们经常能看到 Okio 的身影,所以这篇文章文章我们将对Okio进行一个详细的讲解,文中有详细的代码示例供大家参考,需要的朋友可以参考下
    2023-07-07
  • Android中常用的XML生成方法实例分析

    Android中常用的XML生成方法实例分析

    这篇文章主要介绍了Android中常用的XML生成方法,以实例形式较为详细的分析了Android生成XML的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • Android System fastboot 介绍和使用教程

    Android System fastboot 介绍和使用教程

    Fastboot是Android快速升级的一种方法,Fastboot的协议fastboot_protocol.txt在源码目录./bootable/bootloader/legacy下可以找到,本文给大家介绍Android System fastboot 介绍和使用教程,感兴趣的朋友一起看看吧
    2024-01-01
  • Android开发自学笔记(二):工程文件剖析

    Android开发自学笔记(二):工程文件剖析

    这篇文章主要介绍了Android开发自学笔记(二):工程文件剖析,本文讲解了AndroidManifest.xml、src文件夹、res文件夹等文件的作用,需要的朋友可以参考下
    2015-04-04

最新评论