it-swarm.com.de

Anpassen einer Fortschrittsleiste in Android

Ich arbeite an einer App, in der ich ProgressBar anzeigen möchte, aber ich möchte die Standardversion von Android ProgressBar ersetzen.

Wie kann ich also die ProgressBar anpassen?

Benötige ich dazu Grafiken und Animationen?

Ich habe den folgenden Beitrag gelesen, konnte ihn aber nicht zum Laufen bringen:

Benutzerdefinierte Fortschrittsleiste Android

131
user2446494

Für das Anpassen einer ProgressBar müssen Sie das Attribut oder die Eigenschaften für den Hintergrund und den Fortschritt Ihrer Fortschrittsleiste definieren.

Erstellen Sie eine XML-Datei mit dem Namen customprogressbar.xml in Ihrem res->drawable-Ordner:

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> 

Jetzt müssen Sie die progressDrawable-Eigenschaft in customprogressbar.xml (drawable) festlegen.

Sie können dies in der XML-Datei oder in der Aktivität (zur Laufzeit) tun.

Führen Sie in Ihrem XML Folgendes aus:

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

Zur Laufzeit mache folgendes

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

Bearbeiten: korrigiertes XML-Layout

260
user2446474

in deiner XML

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

Und in 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>

Und custom_progress_bar_horizontal ist eine XML-Datei, die in einem Zeichnungsordner gespeichert ist und den benutzerdefinierten Fortschrittsbalken definiert. Weitere Informationen finden Sie in diesem Blog .

Ich hoffe, dies wird dir helfen.

30
Gunaseelan

Im Falle von komplexen ProgressBar

enter image description here

verwenden Sie ClipDrawable

HINWEIS: Ich habe in diesem Beispiel hier nicht ProgressBar verwendet. Ich habe erreicht dies mit ClipDrawable durch Beschneiden des Bildes mit Animation.

Ein Drawable, das ein anderes Drawable basierend auf dem aktuellen Pegelwert dieses Drawables ausschneidet. Sie können steuern, wie stark das untergeordnete Drawable in Breite und Höhe abhängig von der Ebene beschnitten wird, sowie die Schwerkraft, um zu steuern, wo es in seinem gesamten Container platziert wird. Most often used to implement things like progress bars, indem Sie die Ebene des Drawable mit setLevel() erhöhen.

HINWEIS: Die Zeichenfläche ist vollständig abgeschnitten und bei einem Pegel von 0 .__ nicht sichtbar. und vollständig offenbart, wenn das Niveau 10.000 ist.

Ich habe diese zwei Bilder verwendet, um diese CustomProgressBar zu erstellen.

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

Im Falle eines komplexen HorizontalProgressBar ändern Sie cliporientation in clip_source.xml so,

Android:clipOrientation="horizontal"

Sie können die vollständige Demo von hier herunterladen.

30
Jaydipsinh Zala

Das Anpassen der Farbe der Fortschrittsleiste erfordert im Fall eines Spinner-Typs eine XML-Datei und das Initiieren von Codes in den entsprechenden Java-Dateien.

Erstellen Sie eine XML-Datei und nennen Sie sie 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>

Verwenden Sie den folgenden Code, um den Spinner in verschiedenen erwarteten Farben zu erhalten. Hier verwenden wir den Hexcode, um den Spinner in blauer Farbe anzuzeigen.

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

Es gibt zwei Arten von Fortschrittsbalken, die als bestimmte Fortschrittsleiste (feste Dauer) und unbestimmte Fortschrittsleiste (unbekannte Dauer) bezeichnet werden. 

Drawables für beide Fortschrittsbalkentypen können angepasst werden, indem drawable als XML-Ressource definiert wird. Weitere Informationen zu Fortschrittsbalkenstilen und zur Anpassung finden Sie unter http://www.zoftino.com/Android-progressbar-and-custom-progressbar-examples .

Feste oder horizontale Fortschrittsleiste anpassen:

Unterhalb von XML befindet sich eine anzeigbare Ressource für die Anpassung der horizontalen Fortschrittsleiste.

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

Fortgeschrittene Fortschrittsanzeige anpassen

Unterhalb von XML befindet sich eine zeichnbare Ressource für die Anpassung der Fortschrittsleiste. 

<?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>
6
Arnav Rao

Erstellen einer benutzerdefinierten Fortschrittsleiste wie hotstar.

  1. Fügen Sie in der Layoutdatei eine Fortschrittsleiste hinzu, und legen Sie die indeterminateDrawable mit der Zeichnungsdatei fest.

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. Erstellen Sie eine neue XML-Datei in 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>
4
Rajesh Shetty

Einfachste Möglichkeit zum Erstellen einer Fortschrittsleiste in Android:

  1. Dialog initialisieren und anzeigen:

    MyProgressDialog progressdialog = new MyProgressDialog(getActivity());
    progressdialog.show();
    
  2. Methode erstellen:

    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. Layout-XML erstellen:

    <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. Form progresscustombg.xml erstellen und res/drawable setzen: 

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

Für die Verwendung von benutzerdefinierten Zeichen:

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

(unter res/drawable progress.xml hinzufügen). my_drawable kann xml, png sein

Dann in deinem Layout verwenden

<ProgressBar
        Android:id="@+id/progressBar"
        Android:indeterminateDrawable="@drawable/progress_circle"
...
/>
1
Evgenii Vorobei

Wenn Sie dies im Code ausführen möchten, finden Sie hier ein Beispiel:

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

Die Verwendung von TextView bietet Ihnen die Möglichkeit, Farbe, Größe und Schriftart Ihres Textes zu ändern. Ansonsten können Sie wie gewohnt einfach setMessage () aufrufen.

1
Flot2011