ProgressBar/ProgressDialog 的自定义 Drawable
Posted
技术标签:
【中文标题】ProgressBar/ProgressDialog 的自定义 Drawable【英文标题】：Custom Drawable for ProgressBar/ProgressDialog 【发布时间】：2011-02-18 16:07:56 【问题描述】：阅读 Google 提供的有限文档后，我感觉可以通过简单地创建新样式并将其分配给 ProgressBar 的样式属性来更改 ProgressBar/ProgressDialog 的外观（可绘制）。但我无法让它正常工作。这是我到目前为止所做的：
我创建了一个这样的形状（mp2.xml）
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="4"
android:thicknessRatio="4"
android:useLevel="false">
<size android: android: />
<gradient android:type="sweep" android:useLevel="false" android:startColor="#300000ff" android:centerColor="#500000ff" android:endColor="#ff0000ff" />
</shape>
然后像这样创建了一个动画（mp3.xml）：
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
<item android:duration="70">
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0" android:toDegrees="30" android:repeatCount="1" />
</item>
<item android:duration="70">
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="30" android:toDegrees="60" android:repeatCount="1" />
</item>
<item android:duration="70">
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="60" android:toDegrees="90" android:repeatCount="1" />
</item>
<item android:duration="70">
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="90" android:toDegrees="120" android:repeatCount="1" />
</item>
<item android:duration="70">
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="120" android:toDegrees="150" android:repeatCount="1" />
</item>
<item android:duration="70">
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="150" android:toDegrees="180" android:repeatCount="1" />
</item>
<item android:duration="70">
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="180" android:toDegrees="210" android:repeatCount="1" />
</item>
<item android:duration="70">
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="210" android:toDegrees="240" android:repeatCount="1" />
</item>
<item android:duration="70">
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="240" android:toDegrees="270" android:repeatCount="1" />
</item>
<item android:duration="70">
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="270" android:toDegrees="300" android:repeatCount="1" />
</item>
<item android:duration="70">
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="300" android:toDegrees="330" android:repeatCount="1" />
</item>
<item android:duration="70">
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="330" android:toDegrees="360" android:repeatCount="1" />
</item>
</animation-list>
然后创建了这样的样式（attrs.xml）：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style parent="@android:style/Widget.ProgressBar" name="customProgressBar">
<item name="android:progressDrawable">@anim/mp3</item>
</style>
</resources>
在我的 main.xml 中，我设置了这样的样式：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_
android:layout_ android:drawingCacheQuality="high">
<ProgressBar android:id="@+id/ProgressBar01"
android:layout_
android:layout_ style="@style/customProgressBar"/>
</LinearLayout>
但它仍然显示与以前相同的可绘制对象。我做错了什么？
【问题讨论】：
碰巧在浏览样本，在阅读this 后偶然发现了您的样本。希望它能解决您的问题。 我知道如何创建形状/渐变/动画。我在上面创建的一个基于您所指的帖子（我不得不对其进行一些更改，因为它看起来非常不稳定和缓慢）。我只是希望能够使用“风格”来实现这一目标。无论如何感谢您的回应 如果您想完全自定义您的进度条并获得真正的幻想，请查看this blog post 它可能有点超出您的预期，或者可能正是您想要的。希望对您有所帮助！ 【参考方案1】：我使用以下内容来创建自定义进度条。
文件res/drawable/progress_bar_states.xml 声明了不同状态的颜色：
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<gradient
android:startColor="#000001"
android:centerColor="#0b131e"
android:centerY="0.75"
android:endColor="#0d1522"
android:angle="270"
/>
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:startColor="#234"
android:centerColor="#234"
android:centerY="0.75"
android:endColor="#a24"
android:angle="270"
/>
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<gradient
android:startColor="#144281"
android:centerColor="#0b1f3c"
android:centerY="0.75"
android:endColor="#06101d"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
还有你的布局 xml 中的代码：
<ProgressBar android:id="@+id/progressBar"
android:progressDrawable="@drawable/progress_bar_states"
android:layout_ android:layout_
style="?android:attr/progressBarStyleHorizontal"
android:indeterminateOnly="false"
android:max="100">
</ProgressBar>
享受吧！
【讨论】：
@YuliaRogovaya 是因为可绘制对象不在剪辑元素中吗？我也不能让它工作。怀疑剪辑元素是关键。 如何为ProgressDialog 执行此操作？
@Nezam 我不能给你确切的代码或示例，但这是你需要做的。为 ProgressDialog 提供自定义主题。自定义主题将定义进度条样式。
很高兴看到这个东西的截图
@Jona 我知道它已经有一段时间了，但我怎样才能让这个可绘制的高度更小？？【参考方案2】：
我在使用 Indeterminate Progress Dialog 和此处的解决方案时遇到了一些问题，经过一些工作和反复试验后，我得到了它的工作。
首先，创建要用于进度对话框的动画。就我而言，我使用了 5 张图片。
../res/anim/progress_dialog_icon_drawable_animation.xml：
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/icon_progress_dialog_drawable_1" android:duration="150" />
<item android:drawable="@drawable/icon_progress_dialog_drawable_2" android:duration="150" />
<item android:drawable="@drawable/icon_progress_dialog_drawable_3" android:duration="150" />
<item android:drawable="@drawable/icon_progress_dialog_drawable_4" android:duration="150" />
<item android:drawable="@drawable/icon_progress_dialog_drawable_5" android:duration="150" />
</animation-list>
您想在哪里显示 ProgressDialog：
dialog = new ProgressDialog(Context.this);
dialog.setIndeterminate(true);
dialog.setIndeterminateDrawable(getResources().getDrawable(R.anim.progress_dialog_icon_drawable_animation));
dialog.setMessage("Some Text");
dialog.show();
这个解决方案非常简单并且对我有用，您可以扩展 ProgressDialog 并使其在内部覆盖可绘制对象，但是，这对于我需要的东西来说实在是太复杂了，所以我没有这样做。
【讨论】：
感谢您关注“dialog.setIndeterminateDrawable()” 有没有办法让对话框中只有一个图像，所以没有消息，但整个对话框中有一个可绘制对象？ @Diego 我没有尝试过，但我不明白为什么不这样做。您是否尝试过使用会占用您想要的空间的可绘制对象（即具有长宽高比）并且没有为对话框设置任何文本？【参考方案3】：尝试设置：
android:indeterminateDrawable="@drawable/progress"
它对我有用。这里也是progress.xml的代码：
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0"
android:toDegrees="360">
<shape android:shape="ring" android:innerRadiusRatio="3"
android:thicknessRatio="8" android:useLevel="false">
<size android: android: />
<gradient android:type="sweep" android:useLevel="false"
android:startColor="#4c737373" android:centerColor="#4c737373"
android:centerY="0.50" android:endColor="#ffffd300" />
</shape>
</rotate>
【讨论】：
如果您想使用可绘制对象，则只需在旋转标签中使用android:drawable=，然后删除形状。终于有人回答了旋转进度条的问题。
设置颜色但进度条不旋转
为了快速调整旋转速度android:toDegrees可以设置为更高的值。将其设置为 android:toDegrees="1080" 将增加 3 倍的旋转。【参考方案4】：
你的风格应该是这样的：
<style parent="@android:style/Widget.ProgressBar" name="customProgressBar">
<item name="android:indeterminateDrawable">@anim/mp3</item>
</style>
【讨论】：
【参考方案5】：我做你的代码。我可以运行，但我需要修改两个地方：
name="android:indeterminateDrawable" 而不是android:progressDrawable
修改名称 attrs.xml --->styles.xml
【讨论】：
你修改你的android:startColor="#300000ff“为#FF00ff00,修改其他颜色【参考方案6】：自定义进度与规模！
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:duration="150">
<scale
android:drawable="@drawable/face_no_smile_eyes_off"
android:scaleGravity="center" />
</item>
<item android:duration="150">
<scale
android:drawable="@drawable/face_no_smile_eyes_on"
android:scaleGravity="center" />
</item>
<item android:duration="150">
<scale
android:drawable="@drawable/face_smile_eyes_off"
android:scaleGravity="center" />
</item>
<item android:duration="150">
<scale
android:drawable="@drawable/face_smile_eyes_on"
android:scaleGravity="center" />
</item>
</animation-list>
【讨论】：
【参考方案7】：public class CustomProgressBar
private RelativeLayout rl;
private ProgressBar mProgressBar;
private Context mContext;
private String color__ = "#FF4081";
private ViewGroup layout;
public CustomProgressBar (Context context, boolean isMiddle, ViewGroup layout)
initProgressBar(context, isMiddle, layout);
public CustomProgressBar (Context context, boolean isMiddle)
try
layout = (ViewGroup) ((Activity) context).findViewById(android.R.id.content).getRootView();
catch (Exception e)
e.printStackTrace();
initProgressBar(context, isMiddle, layout);
void initProgressBar(Context context, boolean isMiddle, ViewGroup layout)
mContext = context;
if (layout != null)
int padding;
if (isMiddle)
mProgressBar = new ProgressBar(context, null, android.R.attr.progressBarStyleSmall);
// mProgressBar.setBackgroundResource(R.drawable.pb_custom_progress);//Color.parseColor("#55000000")
padding = context.getResources().getDimensionPixelOffset(R.dimen.padding);
else
padding = context.getResources().getDimensionPixelOffset(R.dimen.padding);
mProgressBar = new ProgressBar(context, null, android.R.attr.progressBarStyleSmall);
mProgressBar.setPadding(padding, padding, padding, padding);
mProgressBar.setBackgroundResource(R.drawable.pg_back);
mProgressBar.setIndeterminate(true);
try
color__ = AppData.getTopColor(context);//UservaluesModel.getAppSettings().getSelectedColor();
catch (Exception e)
color__ = "#FF4081";
int color = Color.parseColor(color__);
// color=getContrastColor(color);
// color__ = color__.replaceAll("#", "");//R.color.colorAccent
mProgressBar.getIndeterminateDrawable().setColorFilter(color, android.graphics.PorterDuff.Mode.SRC_ATOP);
RelativeLayout.LayoutParams params = new
RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
rl = new RelativeLayout(context);
if (!isMiddle)
int valueInPixels = (int) context.getResources().getDimension(R.dimen.padding);
lp.setMargins(0, 0, 0, (int) (valueInPixels / 1.5));//(int) Utils.convertDpToPixel(valueInPixels, context));
rl.setClickable(false);
lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
else
rl.setGravity(Gravity.CENTER);
rl.setClickable(true);
lp.addRule(RelativeLayout.CENTER_IN_PARENT);
mProgressBar.setScaleY(1.55f);
mProgressBar.setScaleX(1.55f);
mProgressBar.setLayoutParams(lp);
rl.addView(mProgressBar);
layout.addView(rl, params);
public void show()
if (mProgressBar != null)
mProgressBar.setVisibility(View.VISIBLE);
public void hide()
if (mProgressBar != null)
rl.setClickable(false);
mProgressBar.setVisibility(View.INVISIBLE);
然后调用
customProgressBar = new CustomProgressBar (Activity, true);
customProgressBar .show();
【讨论】：
【参考方案8】：我不确定，但在这种情况下，您仍然可以使用完整的自定义 AlertDialog，方法是在警报对话框中设置单独的布局文件，并使用上述代码的一部分为您的 imageview 设置动画，也应该这样做！
【讨论】：
以上是关于ProgressBar/ProgressDialog 的自定义 Drawable的主要内容，如果未能解决你的问题，请参考以下文章