web-dev-qa-db-fra.com

Barre de progression circulaire (pour un compte à rebours)

D'accord, j'ai un compte à rebours de 15 secondes qui fonctionne parfaitement et j'aimerais créer une barre de progression circulaire personnalisée pour ce minuteur.

Je veux créer un cercle complet qui supprime les "tranches de tarte (cercle)" lorsque la minuterie descend jusqu'à ce qu'il n'y ait plus de cercle.

Je préfère créer les formes moi-même que d'utiliser des images prédéfinies car j'aimerais que la qualité soit bonne sur n'importe quel téléphone. Comment pourrais-je m'y prendre? Merci!

androidxmlandroid-animationcountdowntimer
17
David Baez

J'ai trouvé cet exemple très bon: http://mrigaen.blogspot.it/2013/12/create-circular-progress-bar-in-Android.html

J'ai donc créé ma barre de progression de cette façon

<ProgressBar
    Android:id="@+id/barTimer"
    style="?android:attr/progressBarStyleHorizontal"
    Android:layout_width="200dp"
    Android:layout_height="200dp"
    Android:layout_centerInParent="true"
    Android:progressDrawable="@drawable/circular_progress_bar" />

Ensuite, j'ai fait une fonction pour le compte à rebours où:

private void startTimer(final int minuti) {
    countDownTimer = new CountDownTimer(60 * minuti * 1000, 500) {
        // 500 means, onTick function will be called at every 500 milliseconds

        @Override
        public void onTick(long leftTimeInMilliseconds) {
            long seconds = leftTimeInMilliseconds / 1000;
            int barVal= (barMax) - ((int)(seconds/60*100)+(int)(seconds%60));
            barTimer.setProgress(barVal);
            textTimer.setText(String.format("%02d", seconds/60) + ":" + String.format("%02d", seconds%60));
            // format the textview to show the easily readable format

        }
        @Override
        public void onFinish() {
            if(textTimer.getText().equals("00:00")){
                textTimer.setText("STOP");          
            }
            else{
                textTimer.setText("2:00");
            }
        }
    }.start();

}

[~ # ~] mise à jour [~ # ~] 

private void startTimer(final int minuti) {
    countDownTimer = new CountDownTimer(60 * minuti * 1000, 500) {
        // 500 means, onTick function will be called at every 500 milliseconds

        @Override
        public void onTick(long leftTimeInMilliseconds) {
            long seconds = leftTimeInMilliseconds / 1000;
            barTimer.setProgress((int)seconds);
            textTimer.setText(String.format("%02d", seconds/60) + ":" + String.format("%02d", seconds%60));
            // format the textview to show the easily readable format

        }
        @Override
        public void onFinish() {
            if(textTimer.getText().equals("00:00")){
                textTimer.setText("STOP"); 
            }
            else{
                textTimer.setText("2:00");
                barTimer.setProgress(60*minuti);
            }
        }
    }.start();

}
27
Grancein

Minuterie de la barre de progression du cercle lisse

Disposition XML:

activity_main

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
 xmlns:app="http://schemas.Android.com/apk/res-auto"
 Android:id="@+id/reativelayout"
 Android:layout_width="match_parent"
 Android:layout_height="match_parent"
 Android:fitsSystemWindows="true">

<ProgressBar
    Android:id="@+id/progressbar_timerview"
    style="?android:attr/progressBarStyleHorizontal"
    Android:layout_width="260dp"
    Android:layout_height="260dp"
    Android:layout_centerHorizontal="true"
    Android:layout_centerVertical="true"
    Android:layout_gravity="center_horizontal|bottom"
    Android:indeterminate="false"
    Android:progressDrawable="@drawable/circleshape2_timerview" />

 <TextView
    Android:id="@+id/textView_timerview_time"
    Android:layout_width="80dp"
    Android:layout_height="80dp"
    Android:layout_centerHorizontal="true"
    Android:layout_centerVertical="true"
    Android:alpha="0.6"
    Android:background="@drawable/circleshape_timerview"
    Android:gravity="center"
    Android:text="00:00"
    Android:textColor="@Android:color/black"
    Android:textSize="20sp"
    Android:textStyle="bold" />

 <ProgressBar
    Android:id="@+id/progressbar1_timerview"
    style="?android:attr/progressBarStyleHorizontal"
    Android:layout_width="260dp"
    Android:layout_height="260dp"
    Android:layout_centerHorizontal="true"
    Android:layout_centerVertical="true"
    Android:layout_gravity="center_horizontal|center"
    Android:indeterminate="false"
    Android:progressDrawable="@drawable/circleshape1_timerview"
    Android:visibility="gone" />

<Button
    Android:id="@+id/button_timerview_start"
    Android:layout_width="match_parent"
    Android:layout_height="40dp"
    Android:layout_centerHorizontal="true"
    Android:background="@Android:color/transparent"
    Android:text="Start !"
    Android:textAllCaps="false"
    Android:textSize="20sp"
    Android:textStyle="italic" />


 <Button
    Android:id="@+id/button_timerview_stop"
    Android:layout_width="match_parent"
    Android:layout_height="40dp"
    Android:layout_centerHorizontal="true"
    Android:background="@Android:color/transparent"
    Android:text="Stop !"
    Android:layout_marginTop="30dp"
    Android:textAllCaps="false"
    Android:textSize="20sp"
    Android:visibility="invisible"
    Android:textStyle="italic"
    />

<EditText
    Android:id="@+id/textview_timerview_back"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_alignParentBottom="true"
    Android:gravity="center"
    Android:padding="5dp"
    Android:layout_marginBottom="30dp"
    Android:textSize="35sp"
    Android:hint=""/>
  </RelativeLayout>

Fichier dessinable:

cercleshape2_timerview

<?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:innerRadiusRatio="5"
            Android:shape="ring"
            Android:thicknessRatio="20.0"

            Android:useLevel="false"
            Android:visible="true">
            <gradient
                Android:centerColor="#FF00"
                Android:endColor="#FF00"
                Android:startColor="#FF00ff"
                Android:type="sweep" />
        </shape>
    </item>
</layer-list>

cercleshape1_timerview

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:id="@Android:id/progress">
        <rotate
            Android:fromDegrees="270"
            Android:toDegrees="-90">
            <shape
                Android:innerRadiusRatio="5"
                Android:shape="ring"
                Android:thicknessRatio="20.0"

                Android:useLevel="true"
                Android:visible="true">
                <gradient
                    Android:centerColor="#FF00"
                    Android:endColor="#FF00"
                    Android:startColor="#FF00ff"
                    Android:type="sweep" />
            </shape>
        </rotate>

    </item>
</layer-list>

cercleshape_timerview

 <selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
 <item>
    <shape Android:shape="oval">

        <solid Android:color="#bbb"/>
    </shape>
 </item>
 </selector>

Activité:

MainActivity

 import Android.app.Activity;
 import Android.os.Bundle;
 import Android.os.CountDownTimer;
 import Android.view.View;
 import Android.view.View.OnClickListener;
 import Android.widget.Button;
 import Android.widget.EditText;
 import Android.widget.ProgressBar;
 import Android.widget.TextView;
 import Android.widget.Toast;

 public class MainActivity extends Activity implements OnClickListener {

int i = -1;
ProgressBar mProgressBar, mProgressBar1;

private Button buttonStartTime, buttonStopTime;
private EditText edtTimerValue;
private TextView textViewShowTime;
private CountDownTimer countDownTimer;
private long totalTimeCountInMilliseconds;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);


    buttonStartTime = (Button) findViewById(R.id.button_timerview_start);
    buttonStopTime = (Button) findViewById(R.id.button_timerview_stop);

    textViewShowTime = (TextView)  
    findViewById(R.id.textView_timerview_time);
    edtTimerValue = (EditText) findViewById(R.id.textview_timerview_back);

    buttonStartTime.setOnClickListener(this);
    buttonStopTime.setOnClickListener(this);

    mProgressBar = (ProgressBar) findViewById(R.id.progressbar_timerview);
    mProgressBar1 = (ProgressBar) findViewById(R.id.progressbar1_timerview);

  }
  @Override
  public void onClick(View v) {
    if (v.getId() == R.id.button_timerview_start) {

        setTimer();

        buttonStartTime.setVisibility(View.INVISIBLE);
        buttonStopTime.setVisibility(View.VISIBLE);
        mProgressBar.setVisibility(View.INVISIBLE);

        startTimer();
        mProgressBar1.setVisibility(View.VISIBLE);


    } else if (v.getId() == R.id.button_timerview_stop) {
        countDownTimer.cancel();
        countDownTimer.onFinish();
        mProgressBar1.setVisibility(View.GONE);
        mProgressBar.setVisibility(View.VISIBLE);
        edtTimerValue.setVisibility(View.VISIBLE);
        buttonStartTime.setVisibility(View.VISIBLE);
        buttonStopTime.setVisibility(View.INVISIBLE);
    }
 }
  private void setTimer(){
    int time = 0;
    if (!edtTimerValue.getText().toString().equals("")) {
        time = Integer.parseInt(edtTimerValue.getText().toString());
    } else
        Toast.makeText(MainActivity.this, "Please Enter Minutes...",  
  Toast.LENGTH_LONG).show();
    totalTimeCountInMilliseconds =  time * 1000;
    mProgressBar1.setMax( time * 1000);
   }
   private void startTimer() {
    countDownTimer = new CountDownTimer(totalTimeCountInMilliseconds, 1) {
        @Override
        public void onTick(long leftTimeInMilliseconds) {
            long seconds = leftTimeInMilliseconds / 1000;
            mProgressBar1.setProgress((int) (leftTimeInMilliseconds));

            textViewShowTime.setText(String.format("%02d", seconds / 60)
                    + ":" + String.format("%02d", seconds % 60));
        }
        @Override
        public void onFinish() {
            textViewShowTime.setText("00:00");
            textViewShowTime.setVisibility(View.VISIBLE);
            buttonStartTime.setVisibility(View.VISIBLE);
            buttonStopTime.setVisibility(View.VISIBLE);
            mProgressBar.setVisibility(View.VISIBLE);
            mProgressBar1.setVisibility(View.GONE);

        }
    }.start();
 }
 }
3
suresh madaparthi

Pour créer des composants personnalisés, veuillez vérifier Android API Guide . Extrait de l'approche de base:

  1. Étendez une classe ou une sous-classe View existante avec votre propre classe.
  2. Remplacez certaines des méthodes de la superclasse. Les méthodes de superclasse pour remplacer commencent par "on", par exemple, onDraw (), onMeasure () et onKeyDown (). Ceci est similaire aux événements on ... dans Activity ou ListActivity que vous remplacez pour le cycle de vie et d'autres hooks de fonctionnalités.
  3. Utilisez votre nouvelle classe d'extension. Une fois terminée, votre nouvelle classe d'extension peut être utilisée à la place de la vue sur laquelle elle était basée.

Vérifiez également la roue de progression de Todd Davies sur https://github.com/Todd-Davies/ProgressWheel , cela devrait vous aider à démarrer.

3
Melquiades