网站制作用什么语言,搜狐新闻手机网,外包做网站,杭州公司注销网站备案效果图#xff1a;demo效果演示演示Demo特性与原生Progress相比#xff0c;感觉更漂亮一点#xff0c;可以显示进度值#xff0c;背景凹凸感明显#xff0c;进度条效果更加立体。原理说明额#xff0c;挺简单的。不过感觉我的做法有点复杂了#xff0c;我先自定义了一个…效果图demo效果演示演示Demo特性与原生Progress相比感觉更漂亮一点可以显示进度值背景凹凸感明显进度条效果更加立体。原理说明额挺简单的。不过感觉我的做法有点复杂了我先自定义了一个View专门作为进度条的显示图层,如下所示将其布局在高度不超过20dp的ColorfulProgressBar父布局中设置Y方向的偏移量然后动画循环改变Y坐标实现斜条滚动的动画效果当你调用setProgress方法时则改变其在父布局的X坐标实现进度显示的功能进度文字同样原理添加到了父布局中。项目地址相关代码ColorfulProgressbar.javapackage com.capton.colorfulprogressbar;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.util.AttributeSet;import android.util.Log;import android.view.Gravity;import android.view.ViewGroup;import android.view.animation.LinearInterpolator;import android.view.animation.TranslateAnimation;import android.widget.TextView;/*** Created by capton on 2017/8/10.*/public class ColorfulProgressbar extends ViewGroup {public static final String STYLE_NORMALnormal; //正常单色样式public static final String STYLE_COLORFULcolorful; //双色样式public String stylecolorful;private ColorfulView colofulView; //双色Viewprivate TextView progressView; // 第二进度条private TextView maskView; // 季度条白色渐变图层private TextView percentView; //文字显示进度层private Paint progressPaintnew Paint(); //颜色一画笔private Paint progressPaint2new Paint(); //颜色二画笔private Paint backgroundPaintnew Paint(); //背景画笔private int maxHeight; //ColorfulProgressbar高度最大值private int mHeight; //ColorfulProgressbar高度private int mWidth; //ColorfulProgressbar宽度private long progress; //进度值private long secondProgress; //第二进度值private long maxProgress100; //默然最大进度100private int backgroundColorgetResources().getColor(R.color.progressBg); //背景颜色private int secondProgressColorgetResources().getColor(R.color.secondProgressColor); //第二进度条颜色private int progressColorgetResources().getColor(R.color.colorAccent); //进度条颜色一private int progressColor2getResources().getColor(R.color.ltcolorAccent); //进度条颜色二private int percentColorColor.DKGRAY; //进度文字的颜色默认暗灰色private int percentShadeColorColor.WHITE; //进度文字的阴影颜色默认白色private TranslateAnimation translateAnimation; //双色进度条的动画private boolean animationOntrue; //动画开启的标志位private boolean animationCancle; //动画取消的标志位private boolean showPercenttrue; // 是否显示进度文字的标志位private boolean setBackgroudColor; // 是否改变背景颜色的标志位public ColorfulProgressbar(Context context) {this(context,null);}public ColorfulProgressbar(Context context, AttributeSet attrs) {this(context, attrs,0);}public ColorfulProgressbar(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);setWillNotDraw(false); //自定义ViewGroup默认不调用onDraw方法而这里有很多步骤需要在ondraw中操作所以调用setWillNotDraw(false)mHeightDisplayUtil.dip2px(context,4); //默认进度条高度为4dpgetParameter(context,attrs);}/*** 从xml中获取各个属性* param context* param attrs*/private void getParameter(Context context, AttributeSet attrs){if(attrs!null) {TypedArray ta context.obtainStyledAttributes(attrs, R.styleable.ColorfulProgressbar);style ta.getString(R.styleable.ColorfulProgressbar_style);if (!STYLE_NORMAL.equals(style) !STYLE_COLORFUL.equals(style)) {style STYLE_COLORFUL; //如果没有在xml中显示设置style默认使用双色进度条}progress ta.getInteger(R.styleable.ColorfulProgressbar_progress, (int)progress);secondProgress ta.getInteger(R.styleable.ColorfulProgressbar_secondProgress,(int)secondProgress);maxProgress ta.getInteger(R.styleable.ColorfulProgressbar_max, (int) maxProgress);backgroundColor ta.getColor(R.styleable.ColorfulProgressbar_backgroundColor, backgroundColor);progressColor ta.getColor(R.styleable.ColorfulProgressbar_progressColor1, progressColor);progressColor2 ta.getColor(R.styleable.ColorfulProgressbar_progressColor2, progressColor2);ta.recycle();partition2 (float)this.progress/maxProgress; //进度条百分比partition (float)this.secondProgress/maxProgress; //第二进度条百分比}}Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int widthSizeMeasureSpec.getSize(widthMeasureSpec);int widthModeMeasureSpec.getMode(widthMeasureSpec);int heightSizeMeasureSpec.getSize(heightMeasureSpec);int heightModeMeasureSpec.getMode(heightMeasureSpec);widthSizewidthModeMeasureSpec.EXACTLY?widthSize:DisplayUtil.dip2px(getContext(),200);heightSizeheightModeMeasureSpec.EXACTLY?heightSize:DisplayUtil.dip2px(getContext(),4);/** 当你设置高度大于20dp时强制高度变为20dp,太高了不美观。* */maxHeightDisplayUtil.dip2px(getContext(),20);if(mHeightmaxHeight) {mHeight maxHeight;}/** 设置高度* */if(mHeight0){heightSizemHeight;}/** 在高度小于10dp时强制不能使用文字显示进度因为高度实在是太小了在这个高度下字体看不清楚放在进度条外又不美观只好折中设计了。* */if(mHeightshowPercentfalse;}/** 设置宽度* */if(mWidth0){widthSizemWidth;}setMeasuredDimension(widthSize,heightSize); //确定主视图宽高}boolean once;Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {if(!once) {progressPaint.setColor(progressColor);progressPaint2.setColor(progressColor2);progressPaint.setAntiAlias(true);progressPaint2.setAntiAlias(true);progressView new TextView(getContext());progressView.setWidth(getMeasuredWidth());progressView.setHeight(getMeasuredHeight());progressView.setBackgroundColor(secondProgressColor);switch (style) {case STYLE_COLORFUL:colofulView new ColorfulView(getContext(), getMeasuredWidth(), progressPaint, progressPaint2);break;case STYLE_NORMAL:colofulView new ColorfulView(getContext(), getMeasuredWidth(), progressPaint, progressPaint);break;}percentView new TextView(getContext());percentView.setText((int)((float)partition2*100)%);percentView.setTextSize(DisplayUtil.px2sp(getContext(), (float) (getMeasuredHeight()*0.8)));percentView.setGravity(Gravity.CENTER);percentView.setShadowLayer(2,1,2,percentShadeColor);percentView.setTextColor(percentColor);percentView.measure(0,0);int textWidth percentView.getMeasuredHeight()*2;int textHeight percentView.getMeasuredHeight();maskView new TextView(getContext());maskView.setWidth(getMeasuredWidth());maskView.setHeight(getMeasuredHeight() * 2 / 3);maskView.setBackgroundResource(R.drawable.progress_mask);/** 依次添加第二进度条双色进度条(第一进度条)白色渐变层百分比文字显示层等四个子View* */addView(progressView);addView(colofulView);addView(maskView);addView(percentView);getChildAt(0).layout(0, 0, getMeasuredWidth(), getMeasuredHeight()); //布局第二进度条位置int ChildHeight getMeasuredWidth();getChildAt(1).layout(0, -ChildHeight getMeasuredHeight(), getMeasuredWidth(), getMeasuredWidth()); //布局双色进度条/** 根据标识位为双色进度条设置位移动画(无限向上移动视觉上达到斜条向右移动的效果)* */if (animationOn) {translateAnimation new TranslateAnimation(0, 0, 0, ChildHeight - getMeasuredHeight());translateAnimation.setDuration((long) (8000 * (float) getMeasuredWidth() / DisplayUtil.getScreenWidthPx(getContext())));translateAnimation.setRepeatCount(-1);translateAnimation.setInterpolator(new LinearInterpolator());getChildAt(1).setAnimation(translateAnimation);translateAnimation.start();}getChildAt(2).layout(0, 0, getMeasuredWidth(), getMeasuredHeight() * 2 / 3); //布局白色渐变层getChildAt(3).layout(0, 0, textWidth,textHeight); //布局百分比文字显示层/** 根据标志位确定是否显示百分比文字显示层。* */if(showPercent){getChildAt(3).setVisibility(VISIBLE);}else {getChildAt(3).setVisibility(GONE);}/** 设置默认背景图你当然也可以使用纯色的资源。这里我用了一个黑色透明渐变的背景呈现一个由阴影效果的凹槽* */setBackgroundResource(R.drawable.background);oncetrue;}}public void showPercentText(boolean showPercent){this.showPercentshowPercent;}public int getSecondProgressColor() {return secondProgressColor;}public void setSecondProgressColor(int secondProgressColor) {this.secondProgressColor secondProgressColor;}public void setSecondProgressColorRes(int secondProgressColorRes) {this.secondProgressColor getResources().getColor(secondProgressColorRes);}public int getPercentColor() {return percentColor;}public void setPercentColorRes(int percentColorRes) {this.percentColor getResources().getColor(percentColorRes);}public int getPercentShadeColor() {return percentShadeColor;}public void setPercentShadeColor(int percentShadeColor) {this.percentShadeColor percentShadeColor;}public void setPercentShadeColorRes(int percentShadeColorRes) {this.percentShadeColor getResources().getColor(percentShadeColorRes);}public String getStyle() {return style;}public void setStyle(String style) {this.style style;}public int getProgressColor() {return progressColor;}public void setProgressColor(int progressColor) {this.progressColor progressColor;}public void setProgressColorRes(int progressColorRes) {this.progressColor getResources().getColor(progressColorRes);}public int getProgressColor2() {return progressColor2;}public void setProgressColor2(int progressColor2) {this.progressColor2 progressColor2;}public void setProgressColor2Res(int progressColor2Res) {this.progressColor2 getResources().getColor(progressColor2Res);}public void setAnimation(boolean animationOn){this.animationOnanimationOn;}public long getSecondProgress() {return secondProgress;}private float partition;public void setSecondProgress(long secondProgress) {this.secondProgress secondProgress;partition (float)this.secondProgress/maxProgress;}public int getBackgroundColor() {return backgroundColor;}public void setBackgroundColor(int backgroundColor) {this.backgroundColor backgroundColor;setBackgroudColortrue;}public void setBackgroundColorRes(int backgroundColorRes) {this.backgroundColor getResources().getColor(backgroundColorRes);setBackgroudColortrue;}public void setHeight(int height){mHeightheight;}public void setWidth(int width){mWidthwidth;}public void setMaxProgress(long progress){maxProgressprogress;}public long getMaxProgress(){return maxProgress;}private float partition2;public void setProgress(long progress){this.progressprogress;partition2 (float)this.progress/maxProgress;}public long getProgress(){return this.progress;}Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);if (getChildAt(0) ! null) {int moveX getMeasuredWidth() - (int) (partition * getMeasuredWidth());getChildAt(0).setX(-moveX);}if (getChildAt(1) ! null) {int moveX getMeasuredWidth() - (int) (partition2 * getMeasuredWidth());getChildAt(1).setX(-moveX);}if (getChildAt(2) ! null) {int moveX getMeasuredWidth() - (int) (partition2 * getMeasuredWidth());getChildAt(2).setX(-moveX);}if (getChildAt(3) ! null) {if(getChildAt(1).getX()getMeasuredWidth()getChildAt(3).getMeasuredHeight()*2) {getChildAt(3).setX(getChildAt(1).getX()getMeasuredWidth()-getChildAt(3).getMeasuredHeight()*2);}percentView.setText((int) ((float) partition2 * 100) %);/** 根据标志位确定是否显示百分比文字显示层。* */if(showPercent){getChildAt(3).setVisibility(VISIBLE);}else {getChildAt(3).setVisibility(GONE);}}if (!animationOn) {if (translateAnimation ! null) {translateAnimation.cancel();animationCancle true;}} else {if (animationCancle) {Log.w(onDraw, translateAnimation animationCancle);translateAnimation.reset();getChildAt(1).setAnimation(translateAnimation);translateAnimation.startNow();animationCancle false;}}if(setBackgroudColor) {backgroundPaint.setAntiAlias(true);backgroundPaint.setColor(backgroundColor);canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), backgroundPaint);}}}也是挺简单的欢迎大家来踩呀