如何在 Android 中自定义进度条

我正在开发一个应用程序，我想在其中显示一个 ProgressBar，但我想替换默认的安卓 ProgressBar。

那么我如何定制 ProgressBar呢？

我需要一些图形和动画吗？

我读了下面这篇文章，但是没能让它起作用:

自定义进度条 Android

379774 次浏览
小开

在 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是存储在可绘制文件夹中的 xml，该文件夹定义您的自定义进度条。有关更多细节，请参见此 博客。

我希望这能帮到你。

小开
最佳答案

自定义 ProgressBar需要为进度条的背景和进度定义属性。

在 res->drawable文件夹中创建一个名为 customprogressbar.xml的 XML 文件:

自定义 _ 累进栏. 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(可绘制)中设置 progressDrawable属性

您可以在 XML 文件或活动(在运行时)中执行此操作。

在 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 布局

小开

自定义进度条的颜色即在 spinner 类型的情况下需要一个 xml 文件和在它们各自的 java 文件中初始化代码。

创建一个 xml 文件并将其命名为 Progress sbar.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);
小开

对于这种复杂的 ProgressBar,

enter image description here

使用 ClipDrawable。

注意: 在这个例子中我没有使用 ProgressBar 这使用 剪贴画剪辑图像与 Animation。

一个基于此 Drawable的当前级别值剪辑另一个 Drawable的 Drawable。您可以根据级别控制子 Drawable的宽度和高度，以及控制其放置在整个容器中的位置的重力。通过用 setLevel()增加可拉伸件的水平。

注意: 当级别为0时，可绘制内容被完全剪裁，不可见 当水平达到10,000时就会完全显示出来。

我用这两张图片制作了这个 CustomProgressBar。

Scall.png

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"

您可以从 给你下载完整的演示。

小开

如果你想在代码中做到这一点，这里有一个例子:

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

小开

像热星一样创建自定义进度条。

  1. 在布局文件上添加进度条，并用可绘制文件设置不确定的可绘制文件。

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"
/>
  1. 在可绘制文件中创建新的 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>
小开

在 Android 中创建自定义进度条的最简单方法:

  1. 初始化并显示对话框:

    MyProgressDialog progressdialog = new MyProgressDialog(getActivity());
progressdialog.show();

  2. 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);
}
}

  3. 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>

  4. 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>
小开

有两种类型的进度条，称为确定进度条(固定持续时间)和不确定进度条(未知持续时间)。

通过将可绘制内容定义为 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>
小开

使用自定义绘图:

<?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/draable progress.xml下添加) . my_drawable可能是 xml，png

然后在你的布局使用

<ProgressBar
android:id="@+id/progressBar"
android:indeterminateDrawable="@drawable/progress_circle"
...
/>
小开 
<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文件，它的大小是200乘200


提交答案