Как настроить панель выполнения на Android

Я работаю над приложением, в котором я хочу показать ProgressBar , но я хочу заменить стандартную версию Android ProgressBar .

Итак, как я могу настроить ProgressBar ?

Нужна ли мне графика и анимация?

Я прочитал следующие сообщения, но не смог заставить их работать:

Пользовательский индикатор прогресса Android

https://stackoverflow.com/questions/15377805/how-to-customize-progress-barspinner-in-android

Solutions Collecting From Web of "Как настроить панель выполнения на Android"

Я описал это с помощью кода и примера в этом блоге: настраиваемая панель прогресса на Android

Настройка ProgressBar требует определения атрибута или свойств фона и хода вашего индикатора выполнения.

Создайте XML-файл с именем customprogressbar.xml в папке res->drawable :

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> 

Теперь вам нужно установить свойство progressDrawable в customprogressbar.xml (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-макет

В случае сложного ProgressBar как это,

Введите описание изображения здесь

Используйте ClipDrawable .

ПРИМЕЧАНИЕ. Я не использовал ProgressBar здесь в этом примере. Я достиг этого, используя ClipDrawable, обрезая изображение с помощью Animation .

A Drawable который зажимает другой Drawable на основе этого значения текущего уровня Drawable . Вы можете контролировать, насколько ребенок Drawable получает обрезанные по ширине и высоте в зависимости от уровня, а также от силы тяжести, чтобы контролировать, где он помещен в общий контейнер. Most often used to implement things like progress bars , путем увеличения уровня setLevel() с помощью setLevel() .

ПРИМЕЧАНИЕ. Вытачиваемый полностью обрезается и не отображается, когда уровень равен 0 и полностью отображается, когда уровень равен 10 000.

Я использовал эти два изображения для создания этого CustomProgressBar .

scall.png

scall.png

ballon_progress.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 в файле clip_source.xml, как это,

 android:clipOrientation="horizontal" 

Здесь вы можете скачать полную демоверсию.

В вашем 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, хранящийся в папке с возможностью custom_progress_bar_horizontal которая определяет ваш пользовательский индикатор выполнения. Подробнее см. В этом блоге .

Я надеюсь, что это поможет вам.

Настройка цвета индикатора прогресса, а именно в случае типа spinner требует файла xml и инициирования кодов в соответствующих java-файлах.

Создайте 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> 

Используйте следующий код, чтобы получить счетчик в различных ожидаемых цветах. Мы используем шестнадцатеричный код для отображения счетчика в синем цвете.

 Progressbar spinner = (ProgressBar) progrees.findViewById(R.id.spinner); spinner.getIndeterminateDrawable().setColorFilter(Color.parseColor("#80DAEB"), android.graphics.PorterDuff.Mode.MULTIPLY); 

Создание пользовательского ProgressBar, такого как hotstar.

  1. Добавьте индикатор выполнения в файл макета и установите параметр неопределенныйDrawable с помощью файла.

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-файл в res \ drawable

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 дает вам возможность изменять цвет, размер и шрифт вашего текста. В противном случае вы можете просто вызвать setMessage (), как обычно.

Самый простой способ создать настройку панели выполнения в Android:

  1. Инициализировать и показать диалог:

     MyProgressDialog progressdialog = new MyProgressDialog(getActivity()); progressdialog.show(); 
  2. Создать метод:

     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. Создание макета 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. Создайте shape 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>