Android条纹进度条的实现(调整view宽度仿进度条)

 更新时间:2018年09月12日 16:01:44   作者:RustFisher  
这篇文章主要给大家介绍了关于Android实现条纹进度条的方法,主要是通过调整view宽度仿进度条,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起看看吧

前言

本文主要给大家介绍了关于Android条纹进度条(调整view宽度仿进度条)的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧

方法如下:

美工同学指定了一个进度条样式

进度条样式

这斑斓的进度条,如果要自己画实在是劳民伤财。于是请美工切了一张素材。

素材样例

如果用shape或者.9图片不太好处理这个条纹。转变思路,放置2张图片。一张作为背景(底,bottom),一张作为进度条图片(cover)。

进度改变时,改变上面图片的宽度。

这就要求上面的图片是圆角的。自定义ImageView,调用canvas.clipPath来切割画布。

public class RoundCornerImageView extends android.support.v7.widget.AppCompatImageView {
 private float mRadius = 18;
 private Path mClipPath = new Path();
 private RectF mRect = new RectF();

 public RoundCornerImageView(Context context) {
 super(context);
 }

 public RoundCornerImageView(Context context, AttributeSet attrs) {
 super(context, attrs);
 }

 public RoundCornerImageView(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 }

 public void setRadiusDp(float dp) {
 mRadius = dp2px(dp, getResources());
 postInvalidate();
 }

 public void setRadiusPx(int px) {
 mRadius = px;
 postInvalidate();
 }

 @Override
 protected void onDraw(Canvas canvas) {
 mRect.set(0, 0, this.getWidth(), this.getHeight());
 mClipPath.reset(); // remember to reset path
 mClipPath.addRoundRect(mRect, mRadius, mRadius, Path.Direction.CW);
 canvas.clipPath(mClipPath);
 super.onDraw(canvas);
 }

 private float dp2px(float value, Resources resources) {
 return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value, resources.getDisplayMetrics());
 }
}

每次绘制都切割一次圆角。记得调用Path.reset()方法。

回到我们要的进度条。布局文件中放置好层叠的图片。

 <RelativeLayout
 android:id="@+id/progress_layout"
 android:layout_width="190dp"
 android:layout_height="10dp"
 android:layout_centerInParent="true">

 <ImageView
  android:id="@+id/p_bot_iv"
  android:layout_width="190dp"
  android:layout_height="10dp"
  android:src="@drawable/shape_round_corner_bottom" />

 <com.rustfisher.view.RoundCornerImageView
  android:id="@+id/p_cover_iv"
  android:layout_width="100dp"
  android:layout_height="10dp"
  android:scaleType="centerCrop"
  android:src="@drawable/pic_cover_blue_white" />

 </RelativeLayout>

需要在代码中动态地改变cover的宽度;dialog中提供如下方法改变LayoutParams

 public void updatePercent(int percent) {
 mPercent = percent;
 mPercentTv.setText(String.format(Locale.CHINA, "%2d%%", mPercent));
 float percentFloat = mPercent / 100.0f;
 final int ivWidth = mBotIv.getWidth();
 RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) mProgressIv.getLayoutParams();
 int marginEnd = (int) ((1 - percentFloat) * ivWidth);
 lp.width = ivWidth - marginEnd;
 mProgressIv.setLayoutParams(lp);
 mProgressIv.postInvalidate();
 }

显示出dialog并传入进度,就可以看到效果了。

这只是实现效果的一种方法,如果有更多的想法,欢迎和我交流~

相关代码请参阅:

https://github.com/RustFisher/aboutView/blob/master/app/src/main/java/com/rust/aboutview/activity/RoundCornerActivity.java

package com.rust.aboutview.activity;

import android.os.Bundle;
import android.os.Handler;
import android.os.Looper;
import android.support.annotation.Nullable;
import android.support.v4.app.DialogFragment;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

import com.rust.aboutview.R;
import com.rust.aboutview.widget.RoundCornerProgressDialog;
import com.rustfisher.view.RoundCornerImageView;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

/**
 * 圆角图片示例
 * Created by Rust on 2018/5/23.
 */
public class RoundCornerActivity extends AppCompatActivity implements View.OnClickListener {

 @BindView(R.id.r_iv_1)
 RoundCornerImageView mRIv1;
 @BindView(R.id.r_iv_2)
 RoundCornerImageView mRIv2;
 @BindView(R.id.r_iv_3)
 RoundCornerImageView mRIv3;
 @BindView(R.id.r_iv_4)
 RoundCornerImageView mRIv4;

 private Handler mMainHandler = new Handler(Looper.getMainLooper());
 private RoundCornerProgressDialog mRoundCornerProgressDialog;
 private ProgressThread mProgressThread;

 @Override
 protected void onCreate(@Nullable Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.act_round_corner);
  initUI();
 }

 private void initUI() {
  ButterKnife.bind(this);
  mRIv1.setRadiusDp(12);
  mRIv2.setRadiusDp(23);
  mRIv3.setRadiusPx(40);
  mRIv4.setRadiusPx(200);
 }

 @OnClick(R.id.pop_dialog_btn)
 @Override
 public void onClick(View v) {
  switch (v.getId()) {
   case R.id.pop_dialog_btn:
    popRoundProgressDialog();
    break;
  }
 }

 private void popRoundProgressDialog() {
  if (null == mRoundCornerProgressDialog) {
   mRoundCornerProgressDialog = new RoundCornerProgressDialog();
  }
  mRoundCornerProgressDialog.setStyle(DialogFragment.STYLE_NORMAL, R.style.AppTranslucentOrigin);
  mRoundCornerProgressDialog.show(getSupportFragmentManager(), RoundCornerProgressDialog.F_TAG);
  if (null != mProgressThread) {
   mProgressThread.interrupt();
   try {
    mProgressThread.join(400);
   } catch (InterruptedException e) {
    e.printStackTrace();
   }
   mProgressThread = null;
  }
  mProgressThread = new ProgressThread();
  mProgressThread.start();
 }

 private class ProgressThread extends Thread {

  private int progress = 0;

  @Override
  public void run() {
   super.run();
   while (!isInterrupted()) {
    progress++;
    try {
     Thread.sleep(50);
    } catch (InterruptedException e) {
     e.printStackTrace();
     break;
    }
    if (progress > 100) {
     progress = 0;
    }
    final int p = progress;
    mMainHandler.post(new Runnable() {
     @Override
     public void run() {
      mRoundCornerProgressDialog.updatePercent(p);
     }
    });
   }
  }
 }

}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • Android编程实现获得手机屏幕真实宽高的方法

    Android编程实现获得手机屏幕真实宽高的方法

    这篇文章主要介绍了Android编程实现获得手机屏幕真实宽高的方法,以两个实例形式分析了获取手机屏幕信息的相关技巧,需要的朋友可以参考下
    2015-10-10
  • ListView异步加载图片实现思路

    ListView异步加载图片实现思路

    用到ListView去加载数据,加载图片和文字是比较常见的,文字还好,图片从网络请求加载速度比较慢,以下是一个我在项目中使用到的异步加载图片的解决方案
    2013-04-04
  • View Controller Transition实现京东加购物车效果

    View Controller Transition实现京东加购物车效果

    这篇文章主要介绍了View Controller Transition实现京东加购物车效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • Android编程获取控件宽和高的方法总结分析

    Android编程获取控件宽和高的方法总结分析

    这篇文章主要介绍了Android编程获取控件宽和高的方法,结合实例形式对比总结并分析了Android控件属性的相关操作技巧,需要的朋友可以参考下
    2016-01-01
  • Android基于opencv实现多通道分离与合并

    Android基于opencv实现多通道分离与合并

    针对图像多通道的分离与混合,OpenCV 4中提供了split()函数和merge()函数用于解决这些需求。本文讲解一下Android如何调用这些函数实现多通道分离与合并
    2021-06-06
  • Android Studio 配置国内镜像源的实现步骤

    Android Studio 配置国内镜像源的实现步骤

    本文主要介绍了Android Studio 配置国内镜像源的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-04-04
  • android实现一个图片验证码倒计时功能

    android实现一个图片验证码倒计时功能

    本文通过实例代码给大家介绍了android实现一个图片验证码倒计时功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-11-11
  • android中暂停背景音乐

    android中暂停背景音乐

    本文给大家分享的是在Android中暂停背景音乐的方法的示例,以及度娘上其他网友的实现方法,感觉非常不错,这里全部推荐给大家,有需要的小伙伴可以参考下。
    2015-05-05
  • android实现多图文分享朋友圈功能

    android实现多图文分享朋友圈功能

    本文主要介绍android调用系统分享实现朋友圈同时分享文字和图片,图片还可以多图添加分享的功能。
    2017-11-11
  • Android实现WebView点击拦截跳转原生

    Android实现WebView点击拦截跳转原生

    这篇文章主要介绍了Android实现WebView点击拦截跳转原生,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-03-03

最新评论