안드로이드에서 점진적 진행 표시 줄을 만드는 방법은 무엇입니까?

Question

도트가 적용된 애니메이션 및 가로 효과가있는 시각적 효과가있는 사용자 정의 진행률 막대. 여기에이 코드를 게시하면 참조로 유지하면서 새로운 디자인을 이해하고 구현하는 데 도움이 될 수 있습니다. 희망이 당신을 도와줍니다.

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 :,617,이것은 애니메이션이 적용된 도트를 만드는 맞춤 클래스입니다.

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(); 
    } 
} 
} 

스냅 촬영 :

내가 클래스 HorizontalDottedProgress을 사용했다

Answer 2

이 - 이것이 진정한 해결책이지만, 때로는 아주 작은 점을 그립니다. 또한이 위젯은 setVisibility (Visibility.GONE)에 반응하지 않으며 표시 후에 숨길 수 없습니다.

그래서이 클래스를 약간 수정 (자신의 이름이 바뀌 었습니다)했습니다. 도트 크기 및 거리는 화면 밀도를 사용하여 계산됩니다. 기능 onDraw()는 그리기 전에 isShown()을 검사합니다.

그런 다음 레이아웃에서 몇 가지 속성 (예 : 색상, 개수 및 시간 초과)을 지정할 가능성을 추가했습니다. 내 프로젝트에서 나는 다음과 같은 방법을 사용 : 자세한 내용은

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

읽기 :

<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" /> 

나는 입술/값/다음 코드 attrs.xml이 파일에 추가 한 다음 속성을 선언하려면 수동 : 여기 https://developer.android.com/training/custom-views/create-view.html

이 클래스의 내 변종 :

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(); 
     } 
    } 
}