我正在开发一个应用程序，想显示一个进度条ProgressBar，但我想替换默认的Android ProgressBar。
那么，我该如何自定义ProgressBar呢？
需要使用一些图形和动画吗？
我阅读了以下帖子，但无法使其工作：
如何在Android中自定义进度条
188
- user2446494
1
1尝试使用这个自定义进度条 ProgressWheel。 - neeraj kirola
10个回答
329
自定义一个ProgressBar需要定义进度条背景和进度的属性或属性。
在您的res->drawable文件夹中创建一个名为customprogressbar.xml的XML文件：
custom_progressbar.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Define the background properties like color etc -->
<item android:id="@android:id/background">
<shape>
<gradient
android:startColor="#000001"
android:centerColor="#0b131e"
android:centerY="1.0"
android:endColor="#0d1522"
android:angle="270"
/>
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="@android:id/progress">
<clip>
<shape>
<gradient
android:startColor="#007A00"
android:centerColor="#007A00"
android:centerY="1.0"
android:endColor="#06101d"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
现在您需要在customprogressbar.xml（drawable）中设置progressDrawable属性。
您可以在XML文件或Activity（运行时）中完成此操作。
请在您的XML中执行以下操作：
<ProgressBar
android:id="@+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="@drawable/custom_progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
在运行时执行以下操作
// Get the Drawable custom_progressbar
Drawable draw=res.getDrawable(R.drawable.custom_progressbar);
// set the drawable as progress drawable
progressBar.setProgressDrawable(draw);
编辑：已更正 XML 布局
- user2446474
8
6什么是res？res.getDrawable未找到。回答：res是Android开发中的资源文件夹。res.getDrawable未找到可能是由于代码中引用了不存在的drawable资源文件。 - hiren gamit
1@hirengamit res 是“资源”的意思。你的错误可能是指文件找不到了。“C:/whereYourProjectFolderIs/res/drawable/customprogressbar.xml” <-- 找不到。如果它在那里，请尝试“清理”你的项目，它会重新制作资源文件。 - basickarl
5@Johnson，“res”代表资源（Resource）。如果将该行替换为“Drawable draw = getResources().getDrawable(R.drawable.custom_progressbar);”，它应该可以正常工作。 - Erwin Lengkeek
9为什么需要在运行时设置进度可绘制对象，而不是在XML文件中进行设置？ - Nicolás Arias
1@NicolásArias 也许您想改变它的外观，出于任何可能的原因（例如，从“等待响应”的绿色更改为“等待错误处理”的红色）。 - ocramot
显示剩余3条评论
42
如果需要像这样的复杂的 ProgressBar，请使用 ClipDrawable。
注意：在此示例中，我没有使用
ProgressBar。我通过使用 ClipDrawable将图像剪切为Animation来实现此效果。
Drawable 可以基于该 Drawable 的当前级别值剪切另一 Drawable。您可以控制子 Drawable 被剪切的宽度和高度取决于级别，以及重力来控制其在整个容器中的位置。最常用于实现进度条等功能，通过使用 setLevel() 增加可绘制对象的级别。
注意：当级别为 0 时，可绘制对象被完全剪切并且不可见，而当级别为 10,000 时完全显示。
我使用了这两个图像来创建此 CustomProgressBar。
scall.png
ballon_progress.png
MainActivity.java
public class MainActivity extends ActionBarActivity {
private EditText etPercent;
private ClipDrawable mImageDrawable;
// a field in your class
private int mLevel = 0;
private int fromLevel = 0;
private int toLevel = 0;
public static final int MAX_LEVEL = 10000;
public static final int LEVEL_DIFF = 100;
public static final int DELAY = 30;
private Handler mUpHandler = new Handler();
private Runnable animateUpImage = new Runnable() {
@Override
public void run() {
doTheUpAnimation(fromLevel, toLevel);
}
};
private Handler mDownHandler = new Handler();
private Runnable animateDownImage = new Runnable() {
@Override
public void run() {
doTheDownAnimation(fromLevel, toLevel);
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
etPercent = (EditText) findViewById(R.id.etPercent);
ImageView img = (ImageView) findViewById(R.id.imageView1);
mImageDrawable = (ClipDrawable) img.getDrawable();
mImageDrawable.setLevel(0);
}
private void doTheUpAnimation(int fromLevel, int toLevel) {
mLevel += LEVEL_DIFF;
mImageDrawable.setLevel(mLevel);
if (mLevel <= toLevel) {
mUpHandler.postDelayed(animateUpImage, DELAY);
} else {
mUpHandler.removeCallbacks(animateUpImage);
MainActivity.this.fromLevel = toLevel;
}
}
private void doTheDownAnimation(int fromLevel, int toLevel) {
mLevel -= LEVEL_DIFF;
mImageDrawable.setLevel(mLevel);
if (mLevel >= toLevel) {
mDownHandler.postDelayed(animateDownImage, DELAY);
} else {
mDownHandler.removeCallbacks(animateDownImage);
MainActivity.this.fromLevel = toLevel;
}
}
public void onClickOk(View v) {
int temp_level = ((Integer.parseInt(etPercent.getText().toString())) * MAX_LEVEL) / 100;
if (toLevel == temp_level || temp_level > MAX_LEVEL) {
return;
}
toLevel = (temp_level <= MAX_LEVEL) ? temp_level : toLevel;
if (toLevel > fromLevel) {
// cancel previous process first
mDownHandler.removeCallbacks(animateDownImage);
MainActivity.this.fromLevel = toLevel;
mUpHandler.post(animateUpImage);
} else {
// cancel previous process first
mUpHandler.removeCallbacks(animateUpImage);
MainActivity.this.fromLevel = toLevel;
mDownHandler.post(animateDownImage);
}
}
}
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="@+id/etPercent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="number"
android:maxLength="3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ok"
android:onClick="onClickOk" />
</LinearLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:id="@+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/scall" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/clip_source" />
</FrameLayout>
clip_source.xml
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:clipOrientation="vertical"
android:drawable="@drawable/ballon_progress"
android:gravity="bottom" />
如果遇到复杂的HorizontalProgressBar，只需按照以下方式在clip_source.xml中更改cliporientation即可：
android:clipOrientation="horizontal"
你可以从这里下载完整的演示文稿。
- Jaydipsinh Zala
2
代码真的很有趣，但是在img对象上它给了我一个空指针异常。 - Parth Anjaria
找到小部件的ID，你的异常就会解决。 - Vikash Sharma
38
在你的XML中
<ProgressBar
android:id="@+id/progressBar1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="@style/CustomProgressBar"
android:layout_margin="5dip" />
在 res/values/styles.xml 文件中：
<resources>
<style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">@drawable/custom_progress_bar_horizontal</item>
<item name="android:minHeight">10dip</item>
<item name="android:maxHeight">20dip</item>
</style>
<style name="AppTheme" parent="android:Theme.Light" />
</resources>
而 custom_progress_bar_horizontal 是存储在drawable文件夹中定义自定义进度条的xml。如需更多详细信息，请参见此博客。
希望这可以帮助您。
- Gunaseelan
11
有两种进度条，分别称为确定进度条（固定时间）和不确定进度条（未知时间）。
这两种进度条的可绘制图形都可以通过定义xml资源来自定义。你可以在http://www.zoftino.com/android-progressbar-and-custom-progressbar-examples找到更多关于进度条样式和自定义的信息。
自定义水平进度条：
下面的xml是用于自定义水平进度条的可绘制资源。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background"
android:gravity="center_vertical|fill_horizontal">
<shape android:shape="rectangle"
android:tint="?attr/colorControlNormal">
<corners android:radius="8dp"/>
<size android:height="20dp" />
<solid android:color="#90caf9" />
</shape>
</item>
<item android:id="@android:id/progress"
android:gravity="center_vertical|fill_horizontal">
<scale android:scaleWidth="100%">
<shape android:shape="rectangle"
android:tint="?attr/colorControlActivated">
<corners android:radius="8dp"/>
<size android:height="20dp" />
<solid android:color="#b9f6ca" />
</shape>
</scale>
</item>
</layer-list>
自定义不确定进度条
以下 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"
android:top="16dp"
android:bottom="16dp">
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="315">
<shape android:shape="rectangle">
<size
android:width="80dp"
android:height="80dp" />
<stroke
android:width="6dp"
android:color="#b71c1c" />
</shape>
</rotate>
</item>
</layer-list>
- Arnav Rao
10
自定义进度条颜色，特别是在旋转器类型的情况下，需要一个xml文件和各自Java文件中的初始化代码。
创建一个名为progressbar.xml的xml文件。
使用以下代码获取各种期望颜色的旋转器。这里使用十六进制代码将旋转器显示为蓝色。
创建一个名为progressbar.xml的xml文件。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
tools:context=".Radio_Activity" >
<LinearLayout
android:id="@+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ProgressBar
android:id="@+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ProgressBar>
</LinearLayout>
</LinearLayout>
使用以下代码获取各种期望颜色的旋转器。这里使用十六进制代码将旋转器显示为蓝色。
Progressbar spinner = (ProgressBar) progrees.findViewById(R.id.spinner);
spinner.getIndeterminateDrawable().setColorFilter(Color.parseColor("#80DAEB"),
android.graphics.PorterDuff.Mode.MULTIPLY);
- user4125837
1
有没有办法为整个应用程序设置此颜色过滤器，我的意思是，在每个进度条中设置它，比如在样式中设置它之类的？谢谢。 - Hugo
7
使用自定义绘制：
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:drawable="@drawable/my_drawable"
android:pivotX="50%"
android:pivotY="50%" />
在res/drawable目录下添加progress.xml文件，my_drawable可以是xml或png格式。
接下来，在你的布局中使用以下代码：
<ProgressBar
android:id="@+id/progressBar"
android:indeterminateDrawable="@drawable/progress_circle"
...
/>
- Evgenii Vorobei
1
1这是我见过的最好的答案。像魔法一样有效。谢谢。 - Rajeshwar
6
创建类似于Hotstar的自定义进度条。
- 在布局文件中添加进度条，并使用Drawable文件设置indeterminateDrawable。
activity_main.xml
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:id="@+id/player_progressbar"
android:indeterminateDrawable="@drawable/custom_progress_bar"
/>
- 在res\drawable中创建新的xml文件
文件名为custom_progress_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="1080" >
<shape
android:innerRadius="35dp"
android:shape="ring"
android:thickness="3dp"
android:useLevel="false" >
<size
android:height="80dp"
android:width="80dp" />
<gradient
android:centerColor="#80b7b4b2"
android:centerY="0.5"
android:endColor="#f4eef0"
android:startColor="#00938c87"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
- Rajesh Shetty
4
在Android中创建自定义进度条的最简单方法：
Initialize and show dialog:
MyProgressDialog progressdialog = new MyProgressDialog(getActivity()); progressdialog.show();Create method:
public class MyProgressDialog extends AlertDialog { public MyProgressDialog(Context context) { super(context); getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT)); } @Override public void show() { super.show(); setContentView(R.layout.dialog_progress); } }Create layout XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/transparent" android:clickable="true"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true"> <ProgressBar android:id="@+id/progressbarr" android:layout_width="@dimen/eightfive" android:layout_height="@dimen/eightfive" android:layout_centerInParent="true" android:indeterminateDrawable="@drawable/progresscustombg" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_below="@+id/progressbarr" android:layout_marginTop="@dimen/_3sdp" android:textColor="@color/white" android:text="Please wait"/> </RelativeLayout> </RelativeLayout>Create shape progresscustombg.xml and put res/drawable:
<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" > <shape android:innerRadiusRatio="3" android:shape="ring" android:thicknessRatio="20" android:useLevel="false" > <size android:height="@dimen/eightfive" android:width="@dimen/eightfive" /> <gradient android:centerY="0.50" android:endColor="@color/color_green_icash" android:startColor="#FFFFFF" android:type="sweep" android:useLevel="false" /> </shape> </rotate>
- Jaydeep Dobariya
1
如果你想在代码中实现这个功能，这里有一个示例：
使用TextView可以让您更改文本的颜色、大小和字体。否则，您可以像往常一样调用setMessage()。
pd = new ProgressDialog(MainActivity.this);
pd.setProgressStyle(ProgressDialog.STYLE_SPINNER);
pd.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
pd.getWindow().setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);
TextView tv = new TextView(this);
tv.setTextColor(Color.WHITE);
tv.setTextSize(20);
tv.setText("Waiting...");
pd.setCustomTitle(tv);
pd.setIndeterminate(true);
pd.show();
使用TextView可以让您更改文本的颜色、大小和字体。否则，您可以像往常一样调用setMessage()。
- Flot2011
0
<ProgressBar
android:indeterminateDrawable="@drawable/loading"
style="?android:attr/progressBarStyleLarge"
android:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="200dp"
android:scaleY="0.5"
android:scaleX="0.5"
android:id="@+id/progressBarGallery"/>
@drawable/loading 是 src\main\res\drawable\loading.gif 文件，大小为200x200。
- sklimkovitch
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接