State progressbar android
Szukam płynnego sposobu na zaimplementowanie paska postępu "state" W Android , Jak pokazano w trzech poniższych przykładach. Ponieważ nie jestem fanem wymyślania koła, chciałbym zapytać, czy jest dostępna jakaś biblioteka, o której Nie wiem.
Sprawdziłem to i nie mogłem znaleźć żadnej lib więc chyba muszę to wdrożyć sam. Jakie byłoby najprostsze rozwiązanie, aby to zrobić? Czy powinienem przedłużyć ProgressBar czy zrobić to od podstaw? Czy masz jakieś sugestie lub tutoriale, które mógłbym / align = "left" /
6
2 answers
Update
Proszę zobaczyć ten przykładowy projekt , również GIF jest załączony, aby dać przegląd.
Możesz dostosować następujące elementy do swoich wymagań.
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Bundle;
import android.os.Parcelable;
import android.util.AttributeSet;
import android.view.View;
public class NumberProgressBar extends View {
private Context mContext;
/**
* The max progress, default is 100
*/
private int mMax = 100;
/**
* current progress, can not exceed the max progress.
*/
private int mProgress = 0;
/**
* the progress area bar color
*/
private int mReachedBarColor;
/**
* the bar unreached area color.
*/
private int mUnreachedBarColor;
/**
* the progress text color.
*/
private int mTextColor;
/**
* the progress text size
*/
private float mTextSize;
/**
* the height of the reached area
*/
private float mReachedBarHeight;
/**
* the height of the unreached area
*/
private float mUnreachedBarHeight;
/**
* the suffix of the number.
*/
private String mSuffix = "%";
/**
* the prefix.
*/
private String mPrefix = "";
private final int default_text_color = Color.rgb(66, 145, 241);
private final int default_reached_color = Color.rgb(66,145,241);
private final int default_unreached_color = Color.rgb(204, 204, 204);
private final float default_progress_text_offset;
private final float default_text_size;
private final float default_reached_bar_height;
private final float default_unreached_bar_height;
/**
* for save and restore instance of progressbar.
*/
private static final String INSTANCE_STATE = "saved_instance";
private static final String INSTANCE_TEXT_COLOR = "text_color";
private static final String INSTANCE_TEXT_SIZE = "text_size";
private static final String INSTANCE_REACHED_BAR_HEIGHT = "reached_bar_height";
private static final String INSTANCE_REACHED_BAR_COLOR = "reached_bar_color";
private static final String INSTANCE_UNREACHED_BAR_HEIGHT = "unreached_bar_height";
private static final String INSTANCE_UNREACHED_BAR_COLOR = "unreached_bar_color";
private static final String INSTANCE_MAX = "max";
private static final String INSTANCE_PROGRESS = "progress";
private static final String INSTANCE_SUFFIX = "suffix";
private static final String INSTANCE_PREFIX = "prefix";
private static final String INSTANCE_TEXT_VISBILITY = "text_visibility";
private static final int PROGRESS_TEXT_VISIBLE = 0;
private static final int PROGRESS_TEXT_INVISIBLE = 1;
/**
* the width of the text that to be drawn
*/
private float mDrawTextWidth;
/**
* the drawn text start
*/
private float mDrawTextStart;
/**
*the drawn text end
*/
private float mDrawTextEnd;
/**
* the text that to be drawn in onDraw()
*/
private String mCurrentDrawText;
/**
* the Paint of the reached area.
*/
private Paint mReachedBarPaint;
/**
* the Painter of the unreached area.
*/
private Paint mUnreachedBarPaint;
/**
* the Painter of the progress text.
*/
private Paint mTextPaint;
/**
* Unreached Bar area to draw rect.
*/
private RectF mUnreachedRectF = new RectF(0,0,0,0);
/**
* reached bar area rect.
*/
private RectF mReachedRectF = new RectF(0,0,0,0);
/**
* the progress text offset.
*/
private float mOffset;
/**
* determine if need to draw unreached area
*/
private boolean mDrawUnreachedBar = true;
private boolean mDrawReachedBar = true;
private boolean mIfDrawText = true;
public enum ProgressTextVisibility{
Visible,Invisible
};
public NumberProgressBar(Context context) {
this(context, null);
}
public NumberProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, R.attr.numberProgressBarStyle);
}
public NumberProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext = context;
default_reached_bar_height = dp2px(1.5f);
default_unreached_bar_height = dp2px(1.0f);
default_text_size = sp2px(10);
default_progress_text_offset = dp2px(3.0f);
//load styled attributes.
final TypedArray attributes = context.getTheme().obtainStyledAttributes(attrs, R.styleable.NumberProgressBar,
defStyleAttr, 0);
mReachedBarColor = attributes.getColor(R.styleable.NumberProgressBar_progress_reached_color, default_reached_color);
mUnreachedBarColor = attributes.getColor(R.styleable.NumberProgressBar_progress_unreached_color,default_unreached_color);
mTextColor = attributes.getColor(R.styleable.NumberProgressBar_progress_text_color,default_text_color);
mTextSize = attributes.getDimension(R.styleable.NumberProgressBar_progress_text_size, default_text_size);
mReachedBarHeight = attributes.getDimension(R.styleable.NumberProgressBar_progress_reached_bar_height,default_reached_bar_height);
mUnreachedBarHeight = attributes.getDimension(R.styleable.NumberProgressBar_progress_unreached_bar_height,default_unreached_bar_height);
mOffset = attributes.getDimension(R.styleable.NumberProgressBar_progress_text_offset,default_progress_text_offset);
int textVisible = attributes.getInt(R.styleable.NumberProgressBar_progress_text_visibility,PROGRESS_TEXT_VISIBLE);
if(textVisible != PROGRESS_TEXT_VISIBLE){
mIfDrawText = false;
}
setProgress(attributes.getInt(R.styleable.NumberProgressBar_progress,0));
setMax(attributes.getInt(R.styleable.NumberProgressBar_max, 100));
//
attributes.recycle();
initializePainters();
}
@Override
protected int getSuggestedMinimumWidth() {
return (int)mTextSize;
}
@Override
protected int getSuggestedMinimumHeight() {
return Math.max((int)mTextSize,Math.max((int)mReachedBarHeight,(int)mUnreachedBarHeight));
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(measure(widthMeasureSpec,true), measure(heightMeasureSpec,false));
}
private int measure(int measureSpec,boolean isWidth){
int result;
int mode = MeasureSpec.getMode(measureSpec);
int size = MeasureSpec.getSize(measureSpec);
int padding = isWidth?getPaddingLeft()+getPaddingRight():getPaddingTop()+getPaddingBottom();
if(mode == MeasureSpec.EXACTLY){
result = size;
}else{
result = isWidth ? getSuggestedMinimumWidth() : getSuggestedMinimumHeight();
result += padding;
if(mode == MeasureSpec.AT_MOST){
if(isWidth) {
result = Math.max(result, size);
}
else{
result = Math.min(result, size);
}
}
}
return result;
}
@Override
protected void onDraw(Canvas canvas) {
if(mIfDrawText){
calculateDrawRectF();
}else{
calculateDrawRectFWithoutProgressText();
}
if(mDrawReachedBar){
canvas.drawRect(mReachedRectF,mReachedBarPaint);
}
if(mDrawUnreachedBar) {
canvas.drawRect(mUnreachedRectF, mUnreachedBarPaint);
}
if(mIfDrawText)
canvas.drawText(mCurrentDrawText,mDrawTextStart,mDrawTextEnd,mTextPaint);
}
private void initializePainters(){
mReachedBarPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mReachedBarPaint.setColor(mReachedBarColor);
mUnreachedBarPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mUnreachedBarPaint.setColor(mUnreachedBarColor);
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setColor(mTextColor);
mTextPaint.setTextSize(mTextSize);
}
private void calculateDrawRectFWithoutProgressText(){
mReachedRectF.left = getPaddingLeft();
mReachedRectF.top = getHeight()/2.0f - mReachedBarHeight / 2.0f;
mReachedRectF.right = (getWidth() - getPaddingLeft() - getPaddingRight() )/(getMax()*1.0f) * getProgress() + getPaddingLeft();
mReachedRectF.bottom = getHeight()/2.0f + mReachedBarHeight / 2.0f;
mUnreachedRectF.left = mReachedRectF.right;
mUnreachedRectF.right = getWidth() - getPaddingRight();
mUnreachedRectF.top = getHeight()/2.0f + - mUnreachedBarHeight / 2.0f;
mUnreachedRectF.bottom = getHeight()/2.0f + mUnreachedBarHeight / 2.0f;
}
private void calculateDrawRectF(){
mCurrentDrawText = String.format("%d" ,getProgress()*100/getMax());
mCurrentDrawText = mPrefix + mCurrentDrawText + mSuffix;
mDrawTextWidth = mTextPaint.measureText(mCurrentDrawText);
if(getProgress() == 0){
mDrawReachedBar = false;
mDrawTextStart = getPaddingLeft();
}else{
mDrawReachedBar = true;
mReachedRectF.left = getPaddingLeft();
mReachedRectF.top = getHeight()/2.0f - mReachedBarHeight / 2.0f;
mReachedRectF.right = (getWidth() - getPaddingLeft() - getPaddingRight() )/(getMax()*1.0f) * getProgress() - mOffset + getPaddingLeft();
mReachedRectF.bottom = getHeight()/2.0f + mReachedBarHeight / 2.0f;
mDrawTextStart = (mReachedRectF.right + mOffset);
}
mDrawTextEnd = (int) ((getHeight() / 2.0f) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2.0f)) ;
if((mDrawTextStart + mDrawTextWidth )>= getWidth() - getPaddingRight()){
mDrawTextStart = getWidth() - getPaddingRight() - mDrawTextWidth;
mReachedRectF.right = mDrawTextStart - mOffset;
}
float unreachedBarStart = mDrawTextStart + mDrawTextWidth + mOffset;
if(unreachedBarStart >= getWidth() - getPaddingRight()){
mDrawUnreachedBar = false;
}else{
mDrawUnreachedBar = true;
mUnreachedRectF.left = unreachedBarStart;
mUnreachedRectF.right = getWidth() - getPaddingRight();
mUnreachedRectF.top = getHeight()/2.0f + - mUnreachedBarHeight / 2.0f;
mUnreachedRectF.bottom = getHeight()/2.0f + mUnreachedBarHeight / 2.0f;
}
}
/**
* get progress text color
* @return progress text color
*/
public int getTextColor() {
return mTextColor;
}
/**
* get progress text size
* @return progress text size
*/
public float getProgressTextSize() {
return mTextSize;
}
public int getUnreachedBarColor() {
return mUnreachedBarColor;
}
public int getReachedBarColor() {
return mReachedBarColor;
}
public int getProgress() {
return mProgress;
}
public int getMax() {
return mMax;
}
public float getReachedBarHeight(){
return mReachedBarHeight;
}
public float getUnreachedBarHeight(){
return mUnreachedBarHeight;
}
public void setProgressTextSize(float TextSize) {
this.mTextSize = TextSize;
mTextPaint.setTextSize(mTextSize);
invalidate();
}
public void setProgressTextColor(int TextColor) {
this.mTextColor = TextColor;
mTextPaint.setColor(mTextColor);
invalidate();
}
public void setUnreachedBarColor(int BarColor) {
this.mUnreachedBarColor = BarColor;
mUnreachedBarPaint.setColor(mReachedBarColor);
invalidate();
}
public void setReachedBarColor(int ProgressColor) {
this.mReachedBarColor = ProgressColor;
mReachedBarPaint.setColor(mReachedBarColor);
invalidate();
}
public void setReachedBarHeight(float height){
mReachedBarHeight = height;
}
public void setUnreachedBarHeight(float height){
mUnreachedBarHeight = height;
}
public void setMax(int Max) {
if(Max > 0){
this.mMax = Max;
invalidate();
}
}
public void setSuffix(String suffix){
if(suffix == null){
mSuffix = "";
}else{
mSuffix = suffix;
}
}
public String getSuffix(){
return mSuffix;
}
public void setPrefix(String prefix){
if(prefix == null)
mPrefix = "";
else{
mPrefix = prefix;
}
}
public String getPrefix(){
return mPrefix;
}
public void incrementProgressBy(int by){
if(by > 0){
setProgress(getProgress() + by);
}
}
public void setProgress(int Progress) {
if(Progress <= getMax() && Progress >= 0){
this.mProgress = Progress;
invalidate();
}
}
@Override
protected Parcelable onSaveInstanceState() {
final Bundle bundle = new Bundle();
bundle.putParcelable(INSTANCE_STATE,super.onSaveInstanceState());
bundle.putInt(INSTANCE_TEXT_COLOR,getTextColor());
bundle.putFloat(INSTANCE_TEXT_SIZE, getProgressTextSize());
bundle.putFloat(INSTANCE_REACHED_BAR_HEIGHT,getReachedBarHeight());
bundle.putFloat(INSTANCE_UNREACHED_BAR_HEIGHT,getUnreachedBarHeight());
bundle.putInt(INSTANCE_REACHED_BAR_COLOR,getReachedBarColor());
bundle.putInt(INSTANCE_UNREACHED_BAR_COLOR,getUnreachedBarColor());
bundle.putInt(INSTANCE_MAX,getMax());
bundle.putInt(INSTANCE_PROGRESS,getProgress());
bundle.putString(INSTANCE_SUFFIX,getSuffix());
bundle.putString(INSTANCE_PREFIX,getPrefix());
bundle.putBoolean(INSTANCE_TEXT_VISBILITY, getProgressTextVisibility());
return bundle;
}
@Override
protected void onRestoreInstanceState(Parcelable state) {
if(state instanceof Bundle){
final Bundle bundle = (Bundle)state;
mTextColor = bundle.getInt(INSTANCE_TEXT_COLOR);
mTextSize = bundle.getFloat(INSTANCE_TEXT_SIZE);
mReachedBarHeight = bundle.getFloat(INSTANCE_REACHED_BAR_HEIGHT);
mUnreachedBarHeight = bundle.getFloat(INSTANCE_UNREACHED_BAR_HEIGHT);
mReachedBarColor = bundle.getInt(INSTANCE_REACHED_BAR_COLOR);
mUnreachedBarColor = bundle.getInt(INSTANCE_UNREACHED_BAR_COLOR);
initializePainters();
setMax(bundle.getInt(INSTANCE_MAX));
setProgress(bundle.getInt(INSTANCE_PROGRESS));
setPrefix(bundle.getString(INSTANCE_PREFIX));
setSuffix(bundle.getString(INSTANCE_SUFFIX));
setProgressTextVisibility(bundle.getBoolean(INSTANCE_TEXT_VISBILITY) ? ProgressTextVisibility.Visible : ProgressTextVisibility.Invisible);
super.onRestoreInstanceState(bundle.getParcelable(INSTANCE_STATE));
return;
}
super.onRestoreInstanceState(state);
}
public float dp2px(float dp) {
final float scale = getResources().getDisplayMetrics().density;
return dp * scale + 0.5f;
}
public float sp2px(float sp){
final float scale = getResources().getDisplayMetrics().scaledDensity;
return sp * scale;
}
public void setProgressTextVisibility(ProgressTextVisibility visibility){
mIfDrawText = visibility == ProgressTextVisibility.Visible;
invalidate();
}
public boolean getProgressTextVisibility() {
return mIfDrawText;
}
}
Można to również zrobić z układem liniowym. Zrobiłem prosty przykład, po prostu prosty przykład.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/ll_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="@drawable/layout" >
<ImageView
android:id="@+id/ImageView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="14dp"
android:src="@drawable/bg_1" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="38dp"
android:layout_marginTop="14dp"
android:src="@drawable/bg_1" />
<ImageView
android:id="@+id/imageView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="35dp"
android:layout_marginTop="14dp"
android:src="@drawable/bg_1" />
</LinearLayout>
</RelativeLayout>
Główna aktywność.java
import java.util.concurrent.TimeUnit;
import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.TransitionDrawable;
import android.os.Bundle;
import android.os.Handler;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends Activity {
LinearLayout llProgress;
Handler handler;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
llProgress = (LinearLayout) findViewById(R.id.ll_progress);
handler = new Handler(getMainLooper());
startTransition();
}
int prevChild = 0;
private void startTransition() {
// create the transition layers
Drawable[] layers = new Drawable[2];
layers[0] = new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.bg));
layers[1] = new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.bg_1));
final TransitionDrawable[] transitionDrawable = new TransitionDrawable[llProgress.getChildCount()];
for (int i = 0; i < llProgress.getChildCount(); i++) {
transitionDrawable[i] = new TransitionDrawable(layers);
((ImageView) llProgress.getChildAt(i)).setImageDrawable(transitionDrawable[i]);
}
handler.postDelayed(new Runnable() {
@Override
public void run() {
transitionDrawable[prevChild++].startTransition(1000);
if(prevChild > llProgress.getChildCount() - 1){
prevChild = 0;
}
handler.postDelayed(this, 1000 * 3);
}
}, 1000 * 3);
}
12
Author: AZ_,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:25:02
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:25:02
Widżet ProgressBar przekazuje rysowanie postępu do przypisanego postępu Drawable, ustawiając na nim odpowiedni poziom. Default* progress Drawable jest layer-list** zawiera trzy warstwy: tło, postęp i postęp wtórny. Dwa ostatnie są pakowane w pojemniki clip lub scale, które są automatycznie przycinane lub skalowane do ich wartości procentowej w zależności od ich poziomów. Są również przypisane specjalne identyfikatory, które ProgressBar wyszukują i obsługują specjalnie zamiast całości Drawable Jeśli Drawable jest layer-list.
W Twoim przypadku, ponieważ przyrosty postępu nie są równe, możesz użyć kontenera z możliwością rysowania jako warstwy postępu i dostarczyć do niego zasoby dla wszystkich przyrostów postępu. Alternatywnie, jeśli chcesz, aby była dynamiczna, możesz utworzyć niestandardową podklasę Drawable z odpowiednią logiką rysowania opartą na jej poziomie.
Oto przykładowy XML dla progress Drawable zasobu wykorzystującego level-list:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background"
android:drawable="@drawable/progress_bg" />
<item android:id="@android:id/progress">
<level-list>
<item android:drawable="@android:color/transparent" />
<item android:drawable="@drawable/progress_1" />
<item android:drawable="@drawable/progress_2" />
<item android:drawable="@drawable/progress_3" />
</level-list>
</item>
</layer-list>
* możesz znaleźć oryginalną wersję Nie Holo tutaj , a wersje Holo tutaj i tutaj.
** listę standardowych frameworków Drawable S, które można zdefiniować w XML znajdziesz tutaj .
-1
Author: corsair992,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-31 12:53:37
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-31 12:53:37