Як налаштувати смугу прогресу в Android

160

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

Тож як я можу налаштувати ProgressBar?

Мені потрібна графіка та анімація для цього?

Я прочитав наступний пост, але не зміг його працювати:

Спеціальна панель прогресу Android

android android-progressbar

— Shubham Suryawanshi
джерело

1

Спробуйте цю спеціальну панель прогресу - ProgressWheel

— neeraj kirola

300

Налаштування 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(Dravable)

Це можна зробити у 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

— Мартійн Пітерс
джерело

5

що res ?? res.getDravable не знайдено

— hiren gamit

1

@hirengamit res - "Ресурс". Ваша помилка, ймовірно, вказує на те, що файл неможливо знайти. "C: /whereYourProjectFolderIs/res/dravable/customprogressbar.xml" <- неможливо знайти. Якщо він там є, спробуйте "очистити" ваш проект, він переробляє файл ресурсу.

— K - Токсичність в SO зростає.

5

@Johnson, res розшифровується як Resource. Якщо ви заміните рядок на Dravable draw = getResources (). GetDravable (R.dravable.custom_progressbar); це має працювати.

— Ервін Ленґік

7

Чому потрібно встановити прогрес, який можна зрозуміти під час виконання, коли це можливо зробити у файлі xml?

— Nicolás Arias

1

@ NicolásArias, можливо, ви хочете змінити його зовнішній вигляд з будь-якої можливої причини (наприклад, змінити на зелений як у "очікуванні відповіді" на червоний, як у "очікуванні на помилку")

— ocramot

35

У разі ProgressBarподібного комплексу ,

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

використання ClipDrawable.

ПРИМІТКА. У ProgressBarцьому прикладі я тут не використовувався . Я досяг цього з допомогою ClipDrawable закріплюючи зображення з Animation.

DrawableЩо кліпи інші на Drawableоснові цього Drawable«s значення поточного рівня. Ви можете керувати тим, наскільки дитина Drawableзарізається по ширині та висоті залежно від рівня, а також за допомогою сили тяжіння, щоб контролювати, де вона розміщена в загальній ємності. Most often used to implement things like progress bars, за рахунок підвищення рівня шансів на с 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просто зміни cliporientationв clip_source.xml, як це,

android:clipOrientation="horizontal"

Ви можете завантажити повну демонстрацію звідси .

— Джайдіпсінь Зала
джерело

код дуже цікавий, але він дає мені виключення з nullpointer на об’єкт img:

— Parth Anjaria

Знайдіть Id віджета, ваш виняток буде вирішено.

— Вікаш Шарма

34

у вашому 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, що зберігається у папці, що витягується, яка визначає вашу власну панель прогресу. Детальніше дивіться у цьому блозі .

Я сподіваюся, що це вам допоможе.

— Гунаселан
джерело

10

Налаштування кольору панелі прогресу, а саме у випадку, коли тип спінера потрібен 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);

— user4125837
джерело

Чи є спосіб встановити цей кольоровий фільтр для всієї програми, я маю на увазі в кожній панелі прогресу, як, наприклад, встановити його в стилях чи в STH? thnx

— Уго

8

Існує два типи смуг прогресу, які називаються визначеною смугою прогресу (фіксованою тривалістю) та невизначеною смугою прогресу (невідома тривалість).

Малюнки для обох типів панелі прогресу можна налаштувати, визначивши графічний ресурс як ресурс 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>

— Арнав Рао
джерело

5

Створення користувальницького ProgressBar, як hotstar.

Додайте панель прогресу у файл макета та встановіть indeterminateDravable за допомогою файлу, що малюється.

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"
    />

Створіть новий XML-файл у res \ dravable

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>

— Раджеш Шетті
джерело

4

Найпростіший спосіб створити налаштування панелі прогресу в Android:

Ініціалізація та показ діалогового вікна:

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

Метод створення:

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

Створення макета 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>

Створіть фігуру progresscustombg.xml та поставте Res / Dravable:

<?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
джерело

3

Для використання користувальницького малювання:

<?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 / dravable progress.xml).my_drawableможе бути xml, png

Потім у вашому макеті використовувати

<ProgressBar
        android:id="@+id/progressBar"
        android:indeterminateDrawable="@drawable/progress_circle"
...
/>

— Євгеній Воробей
джерело

1

Це найкраща відповідь, яку я коли-небудь бачив. Працює як шарм. Спасибі

— Rajeshwar

1

Якщо ви хочете зробити це в коді, ось приклад:

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
джерело