Wie mache ich benutzerdefinierte gepunktete Fortschrittsbalken in Android?

Question

Angepasster Fortschrittsbalken mit aufgedruckter Animation und gegebenem traversierendem Effekt. Veröffentlichen Sie diesen Code hier, da er Ihnen helfen kann, neue Designs zu verstehen und zu implementieren, und dies als Referenz beizubehalten. Hoffe das hilft dir Menschen.

Answer 1

MainActivity.java:

public class MainActivity extends AppCompatActivity { 
@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
} 
} 

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?> 
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 
    android:orientation="vertical" 
 
    android:layout_width="match_parent" 
 
    android:layout_height="match_parent" 
 
    android:id="@+id/rect" 
 
android:gravity="center" 
 
    > 
 

 

 
    <com.example.horizontal.canvaslearn.HorizontalDottedProgress 
 
     android:layout_width="wrap_content" 
 
     android:layout_height="wrap_content" 
 
     ></com.example.horizontal.canvaslearn.HorizontalDottedProgress> 
 

 

 
</LinearLayout>

HorizontalDottedProgress.java: Dies ist eine benutzerdefinierte Klasse zum Erstellen von Punkten mit angewendeter Animation.

public class HorizontalDottedProgress extends View{ 
//actual dot radius 
private int mDotRadius = 5; 

//Bounced Dot Radius 
private int mBounceDotRadius = 8; 

//to get identified in which position dot has to bounce 
private int mDotPosition; 

//specify how many dots you need in a progressbar 
private int mDotAmount = 10; 

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

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

public HorizontalDottedProgress(Context context, AttributeSet attrs, int defStyleAttr) { 
    super(context, attrs, defStyleAttr); 
} 

//Method to draw your customized dot on the canvas 
@Override 
protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 

    Paint paint = new Paint(); 

    //set the color for the dot that you want to draw 
    paint.setColor(Color.parseColor("#fd583f")); 

    //function to create dot 
    createDot(canvas,paint); 
} 

@Override 
protected void onAttachedToWindow() { 
    super.onAttachedToWindow(); 
    //Animation called when attaching to the window, i.e to your screen 
    startAnimation(); 
} 

private void createDot(Canvas canvas, Paint paint) { 

    //here i have setted progress bar with 10 dots , so repeat and wnen i = mDotPosition then increase the radius of dot i.e mBounceDotRadius 
     for(int i = 0; i < mDotAmount; i++){ 
      if(i == mDotPosition){ 
       canvas.drawCircle(10+(i*20), mBounceDotRadius, mBounceDotRadius, paint); 
      }else { 
       canvas.drawCircle(10+(i*20), mBounceDotRadius, mDotRadius, paint); 
      } 
     } 


} 

@Override 
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
    super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
    int width; 
    int height; 

    //calculate the view width 
    int calculatedWidth = (20*9); 

    width = calculatedWidth; 
    height = (mBounceDotRadius*2); 



    //MUST CALL THIS 
    setMeasuredDimension(width, height); 
} 

private void startAnimation() { 
    BounceAnimation bounceAnimation = new BounceAnimation(); 
    bounceAnimation.setDuration(100); 
    bounceAnimation.setRepeatCount(Animation.INFINITE); 
    bounceAnimation.setInterpolator(new LinearInterpolator()); 
    bounceAnimation.setAnimationListener(new Animation.AnimationListener() { 
     @Override 
     public void onAnimationStart(Animation animation) { 

     } 

     @Override 
     public void onAnimationEnd(Animation animation) { 

     } 

     @Override 
     public void onAnimationRepeat(Animation animation) { 
      mDotPosition++; 
      //when mDotPosition == mDotAmount , then start again applying animation from 0th positon , i.e mDotPosition = 0; 
      if (mDotPosition == mDotAmount) { 
       mDotPosition = 0; 
      } 
      Log.d("INFOMETHOD","----On Animation Repeat----"); 

     } 
    }); 
    startAnimation(bounceAnimation); 
} 


private class BounceAnimation extends Animation { 
    @Override 
    protected void applyTransformation(float interpolatedTime, Transformation t) { 
     super.applyTransformation(interpolatedTime, t); 
     //call invalidate to redraw your view againg. 
     invalidate(); 
    } 
} 
} 

Momentaufnahme:

Answer 2

ich die Klasse HorizontalDottedProgress verwendet haben - das ist eine echte Lösung, aber es zieht manchmal sehr kleine Punkte. Auch dieses Widget reagiert nicht auf setVisibility (Visibility.GONE) und kann nach dem Anzeigen nicht ausgeblendet werden.

Deshalb habe ich diese Klasse leicht modifiziert (und für mich umbenannt). Punktgrößen und Abstände werden jetzt mit der Bildschirmdichte berechnet. Die Funktion onDraw() überprüft isShown() vor dem Zeichnen.

Dann habe ich eine Möglichkeit hinzugefügt, einige Eigenschaften (wie Farbe, Anzahl und Timeout) im Layout anzugeben. In meinem Projekt verwende ich sie auf die folgende Weise:

<my.domain.tools.ToolDotProgress 
    android:id="@+id/dots_progress" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_margin="16dp" 
    app:color="@color/colorAccent" 
    app:count="5" 
    app:timeout="300" /> 

Um diese Eigenschaften zu erklären, ich hinzugefügt haben attrs.xml den folgenden Code res/Werte/Datei:

<declare-styleable name="ToolDotProgress"> 
    <attr name="color" format="color" /> 
    <attr name="count" format="integer" /> 
    <attr name="timeout" format="integer" /> 
</declare-styleable> 

Für weitere Informationen lesen das Handbuch: https://developer.android.com/training/custom-views/create-view.html

Hier ist meine Variante dieser Klasse:

public class ToolDotProgress extends View { 
    // distance between neighbour dot centres 
    private int mDotStep = 20; 

    // actual dot radius 
    private int mDotRadius = 5; 

    // Bounced Dot Radius 
    private int mBigDotRadius = 8; 

    // to get identified in which position dot has to bounce 
    private int mDotPosition; 

    // specify how many dots you need in a progressbar 
    private static final int MIN_COUNT = 1; 
    private static final int DEF_COUNT = 10; 
    private static final int MAX_COUNT = 100; 
    private int mDotCount = DEF_COUNT; 

    private static final int MIN_TIMEOUT = 100; 
    private static final int DEF_TIMEOUT = 500; 
    private static final int MAX_TIMEOUT = 3000; 
    private int mTimeout = DEF_TIMEOUT; 

    private int mDotColor = Color.parseColor("#fd583f"); 

    public ToolDotProgress(Context context) { 
     super(context); 
     initDotSize(); 
    } 

    public ToolDotProgress(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     initDotSize(); 
     applyAttrs(context, attrs); 
    } 

    public ToolDotProgress(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
     initDotSize(); 
     applyAttrs(context, attrs); 
    } 

    private void initDotSize() { 
     final float scale = getResources().getDisplayMetrics().density; 
     mDotStep = (int)(mDotStep * scale); 
     mDotRadius = (int)(mDotRadius * scale); 
     mBigDotRadius = (int)(mBigDotRadius * scale); 
    } 

    private void applyAttrs(Context context, AttributeSet attrs) { 
     TypedArray a = context.getTheme().obtainStyledAttributes(
       attrs, R.styleable.ToolDotProgress, 0, 0); 

     try { 
      mDotColor = a.getColor(R.styleable.ToolDotProgress_color, mDotColor); 
      mDotCount = a.getInteger(R.styleable.ToolDotProgress_count, mDotCount); 
      mDotCount = Math.min(Math.max(mDotCount, MIN_COUNT), MAX_COUNT); 
      mTimeout = a.getInteger(R.styleable.ToolDotProgress_timeout, mTimeout); 
      mTimeout = Math.min(Math.max(mTimeout, MIN_TIMEOUT), MAX_TIMEOUT); 
     } finally { 
      a.recycle(); 
     } 
    } 

    //Method to draw your customized dot on the canvas 
    @Override 
    protected void onDraw(Canvas canvas) { 
     super.onDraw(canvas); 
     if (isShown()) { 
      Paint paint = new Paint(); 
      paint.setColor(mDotColor); 
      createDots(canvas, paint); 
     } 
    } 

    @Override 
    protected void onAttachedToWindow() { 
     super.onAttachedToWindow(); 
     startAnimation(); 
    } 

    private void createDots(Canvas canvas, Paint paint) { 
     for (int i = 0; i < mDotCount; i++) { 
      int radius = (i == mDotPosition) ? mBigDotRadius : mDotRadius; 
      canvas.drawCircle(mDotStep/2 + (i * mDotStep), mBigDotRadius, radius, paint); 
     } 
    } 

    @Override 
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
     super.onMeasure(widthMeasureSpec, heightMeasureSpec); 

     // MUST CALL THIS 
     setMeasuredDimension(mDotStep * mDotCount, mBigDotRadius * 2); 
    } 

    private void startAnimation() { 
     BounceAnimation bounceAnimation = new BounceAnimation(); 
     bounceAnimation.setDuration(mTimeout); 
     bounceAnimation.setRepeatCount(Animation.INFINITE); 
     bounceAnimation.setInterpolator(new LinearInterpolator()); 
     bounceAnimation.setAnimationListener(new Animation.AnimationListener() { 
      @Override 
      public void onAnimationStart(Animation animation) { 
      } 

      @Override 
      public void onAnimationEnd(Animation animation) { 
      } 

      @Override 
      public void onAnimationRepeat(Animation animation) { 
       if (++mDotPosition >= mDotCount) { 
        mDotPosition = 0; 
       } 
      } 
     }); 
     startAnimation(bounceAnimation); 
    } 


    private class BounceAnimation extends Animation { 
     @Override 
     protected void applyTransformation(float interpolatedTime, Transformation t) { 
      super.applyTransformation(interpolatedTime, t); 
      // call invalidate to redraw your view again 
      invalidate(); 
     } 
    } 
}