如何在Android中自定义进度条
我正在一个应用程序中，我想要显示一个ProgressBar ，但我想要replace默认的Android ProgressBar 。
那么我怎样才能定制ProgressBar呢？
我需要一些graphics和animation吗？
我读了以下post，但无法让他们工作：
自定义进度栏Android
https://stackoverflow.com/questions/15377805/how-to-customize-progress-barspinner-in-android
我已经用这个博客中的代码和示例描述了这一点： Android中的定制进度条
自定义ProgressBar需要为进度条的背景和进度定义一个或多个属性。
在res->drawable文件夹中创build一个名为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设置progressDrawable属性（drawable）
您可以在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布局
在你的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 ，
使用ClipDrawable 。
注意：在这个例子中，我没有使用
ProgressBar。 我已经实现了这个使用ClipDrawable剪辑图像与Animation。
Drawable根据Drawable的当前级别值Drawable另一个Drawable 。 您可以控制Drawable的子对象的宽度和高度，以及重力来控制放置在整个容器中的位置。 Most often used to implement things like progress bars通过使用setLevel()增加drawable的级别Most often used to implement things like progress bars 。
注意：drawable被完全剪裁，当等级为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只是像这样改变cliporientation中的cliporientation ，
android:clipOrientation="horizontal"
你可以从这里下载完整的演示。
自定义进度条的颜色，即在微调types的情况下，需要一个XML文件，并在其各自的Java文件中启动代码。
创build一个xml文件并将其命名为progressbar.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>
使用下面的代码来获得各种期望颜色的微调。在这里我们使用hex代码来显示蓝色的微调。
Progressbar spinner = (ProgressBar) progrees.findViewById(R.id.spinner); spinner.getIndeterminateDrawable().setColorFilter(Color.parseColor("#80DAEB"), android.graphics.PorterDuff.Mode.MULTIPLY);
像hotstar一样创build自定义ProgressBar。
- 在布局文件上添加进度条，并用可绘制文件设置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中创build新的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>
如果你想在代码中做到这一点，这里是一个示例：
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可以让您select更改文本的颜色，大小和字体。 否则，你可以照常调用setMessage（）。
在Android中创build自定义进度条的最简单方法：
-
初始化并显示对话框：
MyProgressDialog progressdialog = new MyProgressDialog(getActivity()); progressdialog.show(); -
创build方法：
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); } } -
创build布局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> -
创build形状progresscustombg.xml并把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>
有两种types的进度条，分别称为确定进度条（固定持续时间）和不确定进度条（未知持续时间）。
可以通过将drawable定义为xml资源来定制两种types的进度条的Drawable。 您可以在http://www.zoftino.com/android-progressbar-and-custom-progressbar-examples上find关于进度条样式和自定义的更多信息。;
定制固定或水平进度条：
在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>
