好的,我有一个完美运作的15秒倒计时定时器,并且我想为该计时器创建自定义的圆形进度条。
我想创建一个完整的圆形,在计时器倒计时时逐渐减少圆饼(圆形)的“片”,直到没有圆形为止。
我希望自己制作形状而不是使用预制图像,因为我希望在任何手机上都能获得良好的质量。我该怎么做呢?谢谢!
好的,我有一个完美运作的15秒倒计时定时器,并且我想为该计时器创建自定义的圆形进度条。
我想创建一个完整的圆形,在计时器倒计时时逐渐减少圆饼(圆形)的“片”,直到没有圆形为止。
我希望自己制作形状而不是使用预制图像,因为我希望在任何手机上都能获得良好的质量。我该怎么做呢?谢谢!
我发现这个例子非常好: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();
}
平滑圆形进度条计时器
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>
Activity:
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();
}
}
如果要创建自定义组件,请参考Android API指南。基本方法摘录如下:
- 使用现有的View类或子类扩展你自己的类。
- 重写超类中的一些方法。需要重写的超类方法以'on'开头,例如onDraw()、onMeasure()和onKeyDown()。这类似于在Activity或ListActivity中为生命周期和其他功能挂钩覆盖的on...事件。
- 使用新的扩展类。完成后,可以将新的扩展类用于其基础上的视图。
此外,请查看Todd Davies的进度轮https://github.com/Todd-Davies/ProgressWheel,这应该能帮助您入门。
Handler(Looper.getMainLooper()).postDelayed(object : Runnable { override fun run() {
Handler(Looper.getMainLooper()).postDelayed(object : Runnable { override fun run() {
Handler(Looper.getMainLooper()).removeCallbacks(this)
if (i >= 0) {
if (i == 0) {
time.text = "0"
showOrHideTimeOutScreen(isShowTimeoutScreen = true, viewBinding)
}
progressBar.progress = i
time.text = i.toString()
i--
Handler(Looper.getMainLooper()).postDelayed(this, 1000)
} else
Handler(Looper.getMainLooper()).removeCallbacks(this)
}
}, 1000)
startTimer(2)
启动了计时器,TextView 的值已经开始改变,但进度条没有改变。 - Anshul Tyagi