web-dev-qa-db-ja.com

サーキュラープログレスバー（カウントダウンタイマー用）

わかりましたので、15秒のカウントダウンタイマーが完全に正常に機能します。そのタイマー用にカスタムの円形の進行状況バーを作成します。

タイマーがなくなり、円がなくなるまで「パイ（円）のスライス」が取り出される完全な円を作成したいと考えています。

どんな電話でも品質を良くしたいので、事前に作成した画像を使用するよりも、自分で形状を作成したいと思います。これについてどうすればいいですか？ありがとう！

androidxmlandroid-animationcountdowntimer
17
David Baez

私はこの例が非常に良いことがわかりました： http://mrigaen.blogspot.it/2013/12/create-circular-progress-bar-in-Android.html

このようにプログレスバーを作成しました

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

次に、カウントダウン用の関数を作成しました。

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

}

[〜＃〜]更新[〜＃〜]

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

スムーズサークルプログレスバータイマー

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>

描画可能ファイル：

circleshape2_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>

circleshape1_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>

circleshape_timerview

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

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

アクティビティ：

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

カスタムコンポーネントの作成については、 Android APIガイド を確認してください。基本的なアプローチの抜粋：

  1. 既存のViewクラスまたはサブクラスを独自のクラスで拡張します。
  2. スーパークラスの一部のメソッドをオーバーライドします。オーバーライドするスーパークラスメソッドは、onDraw（）、onMeasure（）、onKeyDown（）などの「on」で始まります。これは、ライフサイクルおよびその他の機能フックでオーバーライドするActivityまたはListActivityのon ...イベントに似ています。
  3. 新しい拡張クラスを使用します。完了すると、新しい拡張クラスを、そのベースとなったビューの代わりに使用できます。

また、Todd Daviesのプログレスホイール https://github.com/Todd-Davies/ProgressWheel も確認してください。これで開始できます。

3
Melquiades