内容简介:相关代码请参阅:美工同学指定了一个进度条样式这斑斓的进度条,如果要自己画实在是劳民伤财。于是请美工切了一张素材(样例)。
- Android
- 自定义UI
- custom view
相关代码请参阅: github.com/RustFisher/…
美工同学指定了一个进度条样式
这斑斓的进度条,如果要自己画实在是劳民伤财。于是请美工切了一张素材(样例)。
如果用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并传入进度,就可以看到效果了。
这只是实现效果的一种方法,如果有更多的想法,欢迎和我交流~
以上所述就是小编给大家介绍的《Android - 条纹进度条实现,调整view宽度仿进度条》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 周鸿祎:人脸识别也有缺陷,会被一种奇怪条纹“屏蔽掉” |CEO说
- 小谢第37问:关于websocket推送进度,本地保存进度条,然后跳出页面进入后再显示的问题
- iOS- 音频进度条
- imchenwen进度:优化
- golang 进度条功能实现
- iOS 实现步骤进度条
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Data Structures and Algorithms in Java
Michael T. Goodrich、Roberto Tamassia / Wiley / 2010-01-26 / USD 177.41
* This newest edition examines fundamental data structures by following a consistent object-oriented framework that builds intuition and analysis skills of data structures and algorithms * Presents ne......一起来看看 《Data Structures and Algorithms in Java》 这本书的介绍吧!