Мне нужно разработать этот «красный» процент круг динамически

Question

Как создать этот дизайн в Android App. Пожалуйста, помогите мне .. Мне нужно спроектировать этот «красный» процентный круг динамически.

Answer 1

Вы должны иметь два прогресс баров один над другим, один с цветом фона и один красный. Получить их из XML в вытяжке и передать их в circle_progress_background.xml android:progressDrawable

в вытяжке папке выглядит следующим образом

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item android:id="@android:id/progress"> 
     <shape 
      android:innerRadius="@dimen/sixty_dp" 
      android:shape="ring" 
      android:thickness="@dimen/seven_dp"> 

      <gradient 
       android:startColor="@color/light_gray" 
       android:endColor="@color/light_gray" 
       android:type="sweep" /> 
     </shape> 
    </item> 
</layer-list> 

circle_progress_foreground.xml в вытяжке папке выглядит следующим образом

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item android:id="@android:id/progress"> 
      <shape 
       android:innerRadius="@dimen/sixty_dp" 
       android:shape="ring" 
       android:thickness="@dimen/seven_dp"> 

       <gradient 
        android:startColor="@android:color/holo_blue_bright" 
        android:endColor="@android:color/holo_blue_light" 
        android:type="sweep" /> 
      </shape> 
    </item> 
</layer-list> 

и ваш layout_main.xml в папке макета выглядит следующим образом:

<FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" > 

     <ProgressBar 
      style="?android:attr/progressBarStyleHorizontal" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:indeterminate="false" 
      android:max="100" 
      android:progress="100" 
      android:progressDrawable="@drawable/circle_progress_background" 
      android:rotation="-90" /> 

     <ProgressBar 
      android:id="@+id/circle_progress_bar" 
      style="?android:attr/progressBarStyleHorizontal" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:indeterminate="false" 
      android:max="100" 
      android:progressDrawable="@drawable/circle_progress_foreground" 
      android:rotation="-90" /> 
    </FrameLayout> 

Теперь использовать макет в деятельности следующим образом

package com.example.usingcircletimer; 

import android.app.Activity; 
import android.content.Intent; 
import android.os.Bundle; 
import android.os.Handler; 
import android.util.Log; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.widget.Button; 
import android.widget.ProgressBar; 

public class MainActivity extends Activity { 

    private ProgressBar mProgressBar; 
    private Handler handler = new Handler(); 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.layout_main); 
     mProgressBar = (ProgressBar) findViewById(R.id.circle_progress_bar); 
     Button btn = (Button) findViewById(R.id.btn); 

     btn.setOnClickListener(new OnClickListener() { 

      @Override 
      public void onClick(View v) { 
       new Thread(new Runnable() { 
        int i = 0; 
        int progressStatus = 0; 

        public void run() { 
         while (progressStatus < 100) { 
          progressStatus += 5; 
          try { 
           Thread.sleep(200); 
          } catch (InterruptedException e) { 
           e.printStackTrace(); 
          } 

          // Update the progress bar 
          handler.post(new Runnable() { 
           public void run() { 
             mProgressBar 
               .setProgress(progressStatus); 
            i++; 
           } 
          }); 
         } 
        } 
       }).start(); 
      } 
     }); 
    } 
} 

Answer 2

Для этого вам необходимо создать пользовательский вид и переопределить метод onDraw.

Вот план, который должен помочь вам начать работу:

@Override 
protected void onDraw(Canvas canvas) 
{ 
    super.onDraw(canvas); 

    // define mOvalRect to be the rectangle which will contain the circle. 
    // define mPaint to the paint with which the circle will be drawn, setting the proper colour 

    // define mAnimationPhase to be between 0 & 1, depending on the completion of the circle. 0 means empty circle, 1 means full circle. 

    // define START_ANGLE to be the angle at which the circle will start. 

    canvas.drawArc(mOvalRect, START_ANGLE, 360f * mAnimationPhase, false, mPaint); 
}