Android'de İlerleme Çubuğunu Özelleştirme


160

Göstermek istediğim bir uygulama üzerinde çalışıyorum ProgressBar, ancak varsayılan Android'i değiştirmek istiyorum ProgressBar.

Peki nasıl özelleştirebilirim ProgressBar?

Bunun için biraz grafik ve animasyona ihtiyacım var mı?

Aşağıdaki yazıyı okudum ama işe yaramadım:

Özel İlerleme çubuğu Android


1
Bu özel ilerleme çubuğunu deneyin ProgressWheel
neeraj kirola

Yanıtlar:


300

A özelleştirmek ProgressBariçin ilerleme çubuğunuzun arka planı ve ilerlemesi için öznitelik veya özelliklerin tanımlanması gerekir.

Adlı bir XML dosyası oluşturun customprogressbar.xmlsizin de res->drawableklasörünün:

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> 

Şimdi progressDrawableözelliği customprogressbar.xml(çekilebilir) olarak ayarlamanız gerekiyor

Bunu XML dosyasında veya Etkinlik'te (çalışma zamanında) yapabilirsiniz.

XML'nizde aşağıdakileri yapın:

<ProgressBar
    android:id="@+id/progressBar1"
    style="?android:attr/progressBarStyleHorizontal"
    android:progressDrawable="@drawable/custom_progressbar"         
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Çalışma zamanında aşağıdakileri yapın

// Get the Drawable custom_progressbar                     
    Drawable draw=res.getDrawable(R.drawable.custom_progressbar);
// set the drawable as progress drawable
    progressBar.setProgressDrawable(draw);

Düzenleme: düzeltilmiş xml düzeni


5
res nedir ?? Çizilebilir bulunamadı
hiren gamit

1
@hirengamit res "Kaynak" tır. Hatanız büyük olasılıkla dosyanın bulunamadığını gösteriyor. "C: /whereYourProjectFolderIs/res/drawable/customprogressbar.xml" <- bulunamadı. Oradaysa, projenizi "temizlemeyi" deneyin, kaynak dosyayı yeniden oluşturur.
K - SO'da toksisite artıyor.

5
@Johnson, res, Kaynak anlamına gelir. Çizgiyi Drawable olarak değiştirirseniz draw = getResources (). GetDrawable (R.drawable.custom_progressbar); İşe yaramalı.
Erwin Lengkeek

7
İlerleme durumunu xml dosyasında mümkün olduğunda çalışma zamanında çizilebilir olarak ayarlamak neden gereklidir?
Nicolás Arias

1
@ NicolásArias belki herhangi bir nedenden ötürü görünümünü değiştirmek istersiniz (örneğin "yanıt beklerken" olduğu gibi
yeşilden

35

Böyle karmaşık bir durumda ProgressBar,

resim açıklamasını buraya girin

kullanın ClipDrawable.

NOT: ProgressBarBu örnekte burada kullanılmadım . Bunu ClipDrawable kullanarak görüntüyü kırparak elde ettim Animation.

Bunun geçerli seviye değerine göre Drawablediğerini kırpan A. Çocuğun seviyeye bağlı olarak genişlik ve yükseklikte ne kadar kırpılacağını ve genel kabına nereye yerleştirileceğini kontrol etmek için bir yerçekimini kontrol edebilirsiniz. , çekmecenin seviyesini artırarak .DrawableDrawableDrawableMost often used to implement things like progress barssetLevel()

NOT: Çekilebilir tamamen kırpılır ve seviye 0 olduğunda görünmez ve seviye 10.000 olduğunda tam olarak ortaya çıkar.

Bunu yapmak için bu iki görüntüyü kullandım 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" />

Kompleks halinde HorizontalProgressBarsadece değişim cliporientationiçinde clip_source.xml böyle,

android:clipOrientation="horizontal"

Sen komple demo indirebilirsiniz burada .


kodu gerçekten ilginç ama bana img nesnesinde nullpointer istisna verir:
Parth Anjaria

Widget Id bulun, istisna çözülecektir.
Vikash Sharma

34

xml'nizde

<ProgressBar
        android:id="@+id/progressBar1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="@style/CustomProgressBar" 
        android:layout_margin="5dip" />

Ve içinde 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>

Ve custom_progress_bar_horizontalözel ilerleme çubuğunu tanımlayan çekilebilir klasörde saklanan bir xml. Daha fazla ayrıntı için bu bloga bakın .

Umarım bu sana yardımcı olmuştur.


10

Spinner türü durumunda ilerleme çubuğunun rengini özelleştirmek için bir xml dosyasına ihtiyaç duyulur ve ilgili java dosyalarında kodlar başlatılır.

Bir xml dosyası oluşturun ve progressbar.xml olarak adlandırın

<?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>

Spinner'ı beklenen çeşitli renklerde almak için aşağıdaki kodu kullanın. Burada, spinner'ı mavi renkte görüntülemek için hexcode kullanıyoruz.

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

Bu renk filtresini tüm uygulama için ayarlamanın herhangi bir yolu var mı, yani her ilerleme çubuğunda, stiller veya sth olarak ayarlamak gibi? thnx
Hugo

8

Belirli ilerleme çubuğu (sabit süre) ve belirsiz ilerleme çubuğu (bilinmeyen süre) adı verilen iki tür ilerleme çubuğu vardır.

Her iki ilerleme çubuğu türü için çekilebilirler, çekilebilir xml kaynağı olarak tanımlanarak özelleştirilebilir. İlerleme çubuğu stilleri ve özelleştirme hakkında daha fazla bilgiyi http://www.zoftino.com/android-progressbar-and-custom-progressbar-examples adresinde bulabilirsiniz .

Sabit veya yatay ilerleme çubuğunu özelleştirme:

Xml'nin altında yatay ilerleme çubuğu özelleştirmesi için çekilebilir bir kaynak vardır.

 <?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>

Belirsiz ilerleme çubuğunu özelleştirme

Xml'nin altında dairesel ilerleme çubuğu özelleştirmesi için çekilebilir bir kaynak vardır.

<?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

Özel ilerleme çubuğu oluşturma hotstar gibi.

  1. Düzen dosyasına İlerleme çubuğu ekleyin ve indeterminateDrawable'ı çekilebilir dosyayla ayarlayın.

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. Res \ drawable içinde yeni xml dosyası oluştur

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'de bir ilerleme çubuğunu özelleştirmenin en basit yolu:

  1. İletişim kutusunu başlat ve göster:

    MyProgressDialog progressdialog = new MyProgressDialog(getActivity());
    progressdialog.show();
  2. Oluşturma yöntemi:

    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. Düzen XML'si oluşturma:

    <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. Şekil progresscustombg.xml oluşturun ve res / drawable yazın:

    <?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>

3

Özel çekilebilir kullanmak için:

<?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 / drawable altına ekleyin progress.xml).my_drawablexml, png olabilir

Sonra düzeninizi kullanın

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

1
Bu şimdiye kadar gördüğüm en iyi cevap. Cazibe gibi çalışır. Teşekkürler
Rajeshwar

1

Bunu kodda yapmak istiyorsanız, işte bir örnek:

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 kullanmak, metninizin rengini, boyutunu ve yazı tipini değiştirme seçeneği sunar. Aksi takdirde, her zamanki gibi setMessage () yöntemini çağırabilirsiniz.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.