Android - Setze eine ProgressBar als vertikalen Balken statt als horizontalen Balken?

Ich bin versucht, eine ProgressBar als metering-ähnliches display. Ich dachte, es ging um eine einfache Aufgabe, und dachte, dass die ProgressBar hatte eine Eigenschaft, um festgelegt werden, vertikale, aber ich bin nicht zu sehen, nichts.

Zusätzlich möchte ich in der Lage sein zu zeigen, Herrscher wie Kennzeichen an der Seite entlang der Leiste, um eindeutig die aktuelle Ebene.

Zeiger geschätzt - vielen Dank!

InformationsquelleAutor der Frage bursk | 2010-10-13

  1. 2

    Vertikalen Balken werden standardmäßig nicht unterstützt.

    InformationsquelleAutor der Antwort Romain Guy

  2. 50

    Ich hatte vor kurzem über die Notwendigkeit für eine vertikale Statusanzeige, aber nicht in der Lage war, eine Lösung zu finden, die mithilfe der bestehenden Progress Bar widget. Die Lösungen, die ich kam in der Regel erforderlich, eine Verlängerung der Laufenden Fortschrittsbalken oder eine völlig neue Klasse, in der es sich von selbst. Ich war nicht überzeugt, die Einführung einer neuen Klasse zu erzielen, die eine einfache Orientierung zu ändern war notwendig.

    Dieser Artikel stellt eine einfache, elegante, und vor allem eine nicht-hack-Lösung zu erreichen, ein vertikaler Fortschrittsbalken.
    Ich werde überspringen Sie die Erklärung und geben Sie einfach eine nullachtfünfzehn-Lösung. Wenn Sie weitere Einzelheiten fühlen Sie sich frei, mich zu Kontaktieren oder einen Kommentar unten hinterlassen.

    Erstellen Sie eine xml-Datei in Ihrem drawable-Ordner (nicht drawable-hdpi oder drawable-mdpi -- setzen Sie es in drawable). Für dieses Beispiel nenne ich meine xml vertical_progress_bar.xml

    Hier ist, was in der xml-Datei:

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:id="@android:id/background">
    <shape>
      <corners android:radius="5dip" />
      <gradient
        android:startColor="#ff9d9e9d"
        android:centerColor="#ff5a5d5a"
        android:centerY="0.75"
        android:endColor="#ff747674"
        android:angle="180"
      />
    </shape>
  </item>
  <item android:id="@android:id/secondaryProgress">
    <clip android:clipOrientation="vertical" android:gravity="bottom">
      <shape>
        <corners android:radius="5dip" />
        <gradient
          android:startColor="#80ffd300"
          android:centerColor="#80ffb600"
          android:centerY="0.75"
          android:endColor="#a0ffcb00"
          android:angle="180"
        />
      </shape>
    </clip>
  </item>
  <item android:id="@android:id/progress">
    <clip android:clipOrientation="vertical" android:gravity="bottom">
      <shape>
        <corners android:radius="5dip" />
        <gradient
          android:startColor="#ffffd300"
          android:centerColor="#ffffb600"
          android:centerY="0.75"
          android:endColor="#ffffcb00"
          android:angle="180"
        />
      </shape>
    </clip>
</item>
</layer-list>

    Erstellen Sie eine xml-Datei namens styles.xml und legen Sie es in res/values. Wenn Ihr Projekt bereits enthält styles.xml in res/values dann überspringen Sie diesen Schritt.

    Ändern Sie Ihre styles.xml Datei, und fügen Sie den folgenden code am Ende der Datei:

    <style name="Widget">
</style>
<style name="Widget.ProgressBar">
  <item name="android:indeterminateOnly">true</item>
  <item name="android:indeterminateBehavior">repeat</item>
  <item name="android:indeterminateDuration">3500</item>
  <item name="android:minWidth">48dip</item>
  <item name="android:maxWidth">48dip</item>
  <item name="android:minHeight">48dip</item>
  <item name="android:maxHeight">48dip</item>
</style>
<style name="Widget.ProgressBar.Vertical">
  <item name="android:indeterminateOnly">false</item>
  <item name="android:progressDrawable">@drawable/progress_bar_vertical</item>
  <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
  <item name="android:minWidth">1dip</item>
  <item name="android:maxWidth">12dip</item>
</style>

    Fügen Sie Ihre neue vertikale Fortschrittsbalken zu Ihrem layout. Hier ist ein Beispiel:

    <ProgressBar
  android:id="@+id/vertical_progressbar"
  android:layout_width="12dip"
  android:layout_height="300dip"
  style="@style/Widget.ProgressBar.Vertical"
/>

    Werden sollte, dass alle Sie tun müssen, um zu machen, verwenden Sie eine vertikale Fortschrittsbalken in Ihrem Projekt. Optional, müssen Sie möglicherweise benutzerdefinierte drawable neun-patch Bilder, die Sie verwenden für die progress-bar. Sollten Sie die entsprechenden änderungen in der progress_bar_vertical.xml Datei.
    Ich hoffe, dies hilft Ihnen in Ihrem Projekt!

    InformationsquelleAutor der Antwort jagsaund

  3. 28

    Erstellen Sie Ihre eigenen benutzerdefinierten progressbar.

    In Ihrer xml-fügen Sie diesem layout:

     <com.example.component.VerticalProgressBar 
        style="?android:attr/progressBarStyleHorizontal"
        android:id="@+id/verticalRatingBar1"
        android:layout_width="wrap_content"
        android:progress="50"
        android:layout_height="fill_parent" />

    VerticalProgressBar.java

    public class VerticalProgressBar extends ProgressBar{
    private int x, y, z, w;

    @Override
    protected void drawableStateChanged() {
        //TODO Auto-generated method stub
        super.drawableStateChanged();
    }

    public VerticalProgressBar(Context context) {
        super(context);
    }

    public VerticalProgressBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public VerticalProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(h, w, oldh, oldw);
        this.x = w;
        this.y = h;
        this.z = oldw;
        this.w = oldh;
    }

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec,
            int heightMeasureSpec) {
        super.onMeasure(heightMeasureSpec, widthMeasureSpec);
        setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
    }

    protected void onDraw(Canvas c) {
        c.rotate(-90);
        c.translate(-getHeight(), 0);
        super.onDraw(c);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!isEnabled()) {
            return false;
        }

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:

            setSelected(true);
            setPressed(true);
            break;
        case MotionEvent.ACTION_MOVE:
            setProgress(getMax()
                    - (int) (getMax() * event.getY() / getHeight()));
            onSizeChanged(getWidth(), getHeight(), 0, 0);

            break;
        case MotionEvent.ACTION_UP:
            setSelected(false);
            setPressed(false);
            break;

        case MotionEvent.ACTION_CANCEL:
            break;
        }
        return true;
    }

    @Override
    public synchronized void setProgress(int progress) {

        if (progress >= 0)
            super.setProgress(progress);

        else
            super.setProgress(0);
        onSizeChanged(x, y, z, w);

    }
}

    Oder :
    Jagsaund Lösung ist auch nicht perfekt.

    InformationsquelleAutor der Antwort Ramesh Akula

  4. 9

    Ich weiß, dass es eine alte post, aber ich fand eine sehr einfache Lösung für dieses problem, vielleicht kann jemand helfen.
    Zuerst erstellen Sie eine progress_drawable_vertical.xml wie diese:

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <color android:color="#777" />
</item>
<item android:id="@android:id/progress">
    <clip
        android:clipOrientation="vertical"
        android:gravity="bottom">
        <shape>
            <gradient
                android:startColor="#00FF00"
                android:centerColor="#FFFF00"
                android:endColor="#FF0000"
                android:angle="90" />
        </shape>
    </clip>
</item>
</layer-list>

    Dann verwenden Sie einfach diese in Ihre progressBar:

    <ProgressBar
    android:id="@+id/progress_bar"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_centerInParent="true"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:max="100"
    android:progress="33"
    android:progressDrawable="@drawable/progress_drawable_vertical" />

    Ich habe auch eine erstellt progress_drawable_horizontal.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">
    <color android:color="#777" />
</item>
<item android:id="@android:id/progress">
    <clip
        android:clipOrientation="horizontal"
        android:gravity="left">
        <shape>
            <gradient
                android:startColor="#00FF00"
                android:centerColor="#FFFF00"
                android:endColor="#FF0000" />
        </shape>
    </clip>
</item>
</layer-list>

    mit der objetive von mantain gleichen Stil definiert progress_drawable_vertical.xml

    Der Schlüssel ist hier die richtige Nutzung der android:clipOrientation und android:gravity.

    Fand ich diese Lösung hier und der Kern der Lösung ist ähnlich jagsaund aber etwas einfacher.

    InformationsquelleAutor der Antwort Daniel S.

  5. 3

    Fand ich die wohl beste(einfachste & vielseitigsten) Lösung:)

    Dies ist eine alte post, aber es war so schwer für mich zu finden, diese so einfache Lösung, so dass ich dachte, ich sollte es posten..

    Einfach ein scale-drawable (oder ein 9-patch, wenn du möchtest), keine Notwendigkeit für einen ANDEREN code.

    Beispiel: 

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  

    <item android:id="@android:id/background" android:drawable="@color/transparent"/>  

    <item android:id="@android:id/progress">
        <scale android:scaleGravity="bottom" android:scaleWidth="0%" android:scaleHeight="100%">
            <shape >
                <solid android:color="@color/blue"/>
                <corners android:topRightRadius="1dp" android:topLeftRadius="1dp"/>
            </shape>
        </scale>
    </item>
</layer-list>

    Und natürlich der normale code: 

    <ProgressBar
    android:id="@+id/progress_bar"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="24dp"
    android:layout_height="match_parent"
    android:max="1000"
    android:progress="200"
    android:progressDrawable="@drawable/progress_scale_drawable" />

    Beachten Sie die scale-drawable's xml-Linien (die Magische Linien): 

    android:scaleGravity="bottom"  //scale from 0 in y axis (default scales from center Y)  
android:scaleWidth="0%"        //don't scale width (according to 'progress')
android:scaleHeight="100%"     //do scale the height of the drawable

    InformationsquelleAutor der Antwort guy_m

  6. 1

    Nutzen die ProgressBar und stellen Sie es senkrecht, müsste man erstellen Sie Ihre eigenen benutzerdefinierten Ansicht, die die ProgressBar-Ansicht und überschreiben der onDraw () - Methode. Dies ermöglicht es Ihnen, ziehen Sie es in umgekehrter Orientierung. Werfen Sie einen Blick auf die Quellcode der ProgressBar.onDraw() (befindet sich unten auf dem link), um Hilfe, wie dies zu tun. Best-case-Szenario, müssen Sie sich nur noch tauschen, ein paar x-und y-Variablen.

    InformationsquelleAutor der Antwort John Leehey

  7. 1

    Erstellen der Fortschrittsbalken (ich umgewandelt mein code von c# zu java also möglicherweise nicht 100% korrekt)

    ProgressBar progBar = new ProgressBar(Context, null, Android.resource.attribute.progressDrawable);
progBar.progressDrawable = ContextCompat.getDrawable(Context, resource.drawable.vertical_progress_bar);
progBar.indeterminate = false;

    vertical_progress_bar.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">
        <shape>
          <solid android:color="@color/grey" />

          <corners android:radius="20dip" />
        </shape>
      </item>
      <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/vertical_progress_bar_blue_progress"
            android:scaleHeight="100%"
            android:scaleGravity="bottom"/>
      </item>
    </layer-list>

    vertical_progress_bar_blue_progress.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

  <corners
      android:radius="20dip" />

  <solid android:color="@color/ProgressBarFourth" />

</shape>

    Was Los ist, um Ihre bar vertikal ist die scaleHeight und scaleGravity Attribute in vertical_progress_bar.xml.

    Landet es suchen so etwas wie dieses:

    Android - Setze eine ProgressBar als vertikalen Balken statt als horizontalen Balken?

    InformationsquelleAutor der Antwort Met-u

  8. 0

    Ich habe genaue das problem. Machen Sie eine benutzerdefinierte Klasse (Erweiterung der ProgressBar) erstellen Sie code, die sind schwer zu pflegen. Mit einem custom Stil verursachen Kompatibilitätsprobleme mit verschiedenen theme vom neuen OS (z.B. lollipop)

    Schließlich habe ich mich nur für eine rotation-animation für einen horizontalen Fortschrittsbalken. Inspiriert von Pete.

    1. Erstellen Sie den tag in Ihrem layout-xml, wie normalen horizontalen Fortschrittsbalken.
    2. Stellen Sie sicher, dass die Größe und position der ProgressBar ist das, was Sie wollen nach der rotation. (Vielleicht auch Einstellung negative margin-Hilfe). In meinem code habe ich die Ansicht drehen von 0,0.
    3. Verwenden Sie die Methode unten zu drehen und neue Fortschritte.

    Code:

    private void setProgress(final ProgressBar progressBar, int progress) {
    progressBar.setWillNotDraw(true);
    progressBar.setProgress(progress);
    progressBar.setWillNotDraw(false);
    progressBar.invalidate();
}

private void rotateView(final View v, float degree) {
    Animation an = new RotateAnimation(0.0f, degree);
    an.setDuration(0);
    an.setRepeatCount(0);
    an.setFillAfter(true);               //keep rotation after animation
    v.setAnimation(an);
}

    InformationsquelleAutor der Antwort Pan Ng

  9. 0

    Einfach progrebar Bild anzeigen

    Beispiel 

    viewHolder.proBarTrueImage.setMaximalValue(147);
viewHolder.proBarTrueImage.setLevel(45);
viewHolder.proBarTrueImage.setColorResource(R.color.corner_blue);

    einfach Klasse

    public class ProgressImageView extends ImageView {

private Context mContext;
private Paint paint;
private RectF rectf;

private int maximalValue = 1;
private int level = 0;
private int width;
private int height;

public ProgressImageView(Context context) {
    super(context);
    init(context, null, 0);
}

public ProgressImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context, attrs, 0);
}

public ProgressImageView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context, attrs, defStyleAttr);
}

private  void init(Context context, AttributeSet attrs, int defStyleAttr){

    mContext = context;
    paint = new Paint();
    rectf = new RectF();
    paint.setColor(Color.GRAY);
    paint.setStyle(Paint.Style.FILL);
};

@Override
protected void onDraw(Canvas canvas) {

    float dif = (float) height / (float) maximalValue;
    int newHeight = height - (int) (dif * level);

    rectf.set(0,newHeight, width, height);
    canvas.drawRect(rectf, paint);

    super.onDraw(canvas);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    this.width = w;
    this.height = h;
}

public void setMaximalValue(int maximalValue) {
    this.maximalValue = maximalValue;
    invalidate();
}

public void setLevel(int level) {
    this.level = level;
    invalidate();
}

public void setColorResource(int color) {

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        color = mContext.getResources().getColor(color,mContext.getTheme());
    }else {
        color = mContext.getResources().getColor(R.color.corner_blue);
    }

    setColor(color);
}

public void setColor(int color){
    if (paint != null){
        paint.setColor(color);
        invalidate();
    }
}

    }

    InformationsquelleAutor der Antwort Vahe Gharibyan

  10. 0
    This perfectly works

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <gradient
                android:startColor="#DDDDDD"
                android:centerColor="#DDDDDD"
                android:centerY="0.75"
                android:endColor="#DDDDDD"
                android:angle="270"
                />
        </shape>
    </item>

    <item
        android:id="@android:id/progress">
        <clip
            android:clipOrientation="vertical"
            android:gravity="top">
            <shape>
                <gradient
                    android:angle="0"
                    android:startColor="#302367"
                    android:centerColor="#7A5667"
                    android:endColor="#C86D67"/>
            </shape>
        </clip>
    </item>
</layer-list>

    <ProgressBar
            android:id="@+id/progress_bar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="5dp"
            android:layout_height="match_parent"`enter code here`
            android:progressDrawable="@drawable/progress_dialog"/>

    InformationsquelleAutor der Antwort Anupam Bose

  11. -1
    <ProgressBar
        android:id="@+id/battery_pb"
        android:rotation="270"
        android:progress="100"
...
/>

    Android:rotation="270" zu 100% sein, wie von unten nach oben oder android:rotation="90" bis 100% sein, wie von oben nach unten

    InformationsquelleAutor der Antwort Beto Caldas

Schreibe einen Kommentar