Frage ProgressBar unter Aktionsleiste


Fragenzusammenfassung: Wie kann ich ein ProgressBar integriert in die ActionBarWie in der Chrome App?

Einzelheiten: Schau dir diesen Screenshot von Chrome an:

Chrome for Android screenshot

Ich möchte genau so eine Aktionsleiste erstellen. Direkt unter der Aktionsleiste befindet sich eine ProgressBar, die sich entsprechend dem Laden der Seite füllt. Ich habe dieses Beispiel aus vielen Apps wie Feedly gesehen, aber ich konnte keine eigene Implementierung erstellen. Ich habe versucht, Androids eigene APIs zu verwenden, um es zu erstellen:

@Override
protected void onCreate(Bundle savedInstanceState) {
    //Request Permission to display the Progress Bar...
    this.requestWindowFeature(Window.FEATURE_PROGRESS);
            this.setWindowContentView(R.layout.activity_main)
    super.onCreate(savedInstanceState);

    this.setProgressBarIndeterminate(true);
}

Aber dieser Code bewirkt nur, dass die ProgressBar angezeigt wird Über die Aktionsleiste, so:

My App Screenshot

Wie kann ich meine ProgressBar wie in der Chrome App unter der Aktionsleiste anzeigen lassen?


76
2017-12-18 13:24


Ursprung


Antworten:


Dies ist jetzt ein natives Verhalten, das mit verwendet werden kann SwipeRefreshLayout.

Sie können Ihre scrollbare Ansicht mit a umschließen SwipeRefreshLayout und dann musst du nur zuhören onAuffrischen Veranstaltungen:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    swipeLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_container);
    swipeLayout.setOnRefreshListener(this);
    swipeLayout.setColorScheme(android.R.color.holo_blue_bright, 
            android.R.color.holo_green_light, 
            android.R.color.holo_orange_light, 
            android.R.color.holo_red_light);
}


@Override public void onRefresh() {
    new Handler().postDelayed(new Runnable() {
        @Override public void run() {
            swipeLayout.setRefreshing(false);
        }
    }, 5000);
}

Ein nettes und einfaches Tutorial finden Sie in dieser Blog.


6
2018-02-20 17:30



Ich war mit der angenommenen Antwort oben nicht ganz zufrieden, also habe ich selbst einige Nachforschungen angestellt.

Der Trick, den Sie meinen, ist, dass sie die Draufsicht in der aufgerufenen Ansichtshierarchie aufgerufen haben DecorView und fügte den Fortschrittsbalken dort hinzu. Auf diese Weise wird der Fortschrittsbalken sowohl über die Aktionsleiste als auch über den Inhaltsbereich angezeigt. Beachten Sie, dass die Antwort von S. D. den Fortschrittsbalken in den Inhaltsbereich stellt und Raum von tatsächlichem Inhalt "stiehlt", was zu unerwarteten Ergebnissen führen kann.

Probe Screenshots dieser Implementierung:

ProgressBar

ProgressBarIndeterminate

Code

Setzen Sie diesen Code einfach in onCreate Methode einiger Aktivität und es sollte funktionieren:

// create new ProgressBar and style it
final ProgressBar progressBar = new ProgressBar(this, null, android.R.attr.progressBarStyleHorizontal);
progressBar.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 24));
progressBar.setProgress(65);

// retrieve the top view of our application
final FrameLayout decorView = (FrameLayout) getWindow().getDecorView();
decorView.addView(progressBar);

// Here we try to position the ProgressBar to the correct position by looking
// at the position where content area starts. But during creating time, sizes 
// of the components are not set yet, so we have to wait until the components
// has been laid out
// Also note that doing progressBar.setY(136) will not work, because of different
// screen densities and different sizes of actionBar
ViewTreeObserver observer = progressBar.getViewTreeObserver();
observer.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        View contentView = decorView.findViewById(android.R.id.content);
        progressBar.setY(contentView.getY() - 10);

        ViewTreeObserver observer = progressBar.getViewTreeObserver();
        observer.removeOnGlobalLayoutListener(this);
    }
});

Sie können mit dem Argument "height" von LayoutParam spielen, um die Fortschrittsleiste breiter oder schmaler zu setzen, aber Sie müssen möglicherweise die Option anpassen -10 Offset.

Styling

Leider können Sie den hässlichen grauen Hintergrund des Fortschrittsbalkens sehen. Um es zu entfernen, funktioniert die Suche nach dem Hintergrund anhand der ID und der Versuch, es auszublenden, nicht. Um den Hintergrund zu entfernen, musste ich eine identische Zeichnung der Systemversion erstellen und das Hintergrundelement entfernen.

TL; DR: Datei erstellen progress_horizontal_holo_no_background_light.xml und fügen Sie dieses Zeichen ein:

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

    <item android:id="@android:id/secondaryProgress">
        <scale android:scaleWidth="100%"
               android:drawable="@drawable/progress_secondary_holo_light" />
    </item>

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%"
               android:drawable="@drawable/progress_primary_holo_light" />
    </item>

</layer-list>

Kopieren Sie geeignete .png-Zeichen aus sdk/platforms/android-xx/data/res/drawable-xxx/ zu Ihrem Projekt und dann im Code können Sie hinzufügen:

progressBar.setProgressDrawable(getResources().getDrawable(R.drawable.progress_horizontal_holo_no_background_light));

Extra: Indeterminierter Fortschrittsbalken

Pre-KitKat-Versionen von unbestimmten Fortschrittsbalken sind ziemlich hässlich und lückig. Sie können neue glatte progressBar aufgerufen herunterladen ButteryProgressBar. Suchen Sie einfach nach Google (ich kann keine weiteren Links posten, da ich neu hier bin: [], fügen Sie die Klasse in Ihr Projekt ein und Sie können einfach die vorherige ProgressBar durch diesen Code ersetzen und haben einen knackigen unbestimmten Fortschrittsbalken:

final ButteryProgressBar progressBar = new ButteryProgressBar(this);
progressBar.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 24));

Möglicherweise müssen Sie diesen Code auch vereinfachen:

final TypedArray ta = c.obtainStyledAttributes(attrs, R.styleable.ButteryProgressBar);
try {
    mBarColor = ta.getColor(R.styleable.ButteryProgressBar_barColor,
            c.getResources().getColor(android.R.color.holo_blue_light));
    mSolidBarHeight = ta.getDimensionPixelSize(
            R.styleable.ButteryProgressBar_barHeight,
            Math.round(DEFAULT_BAR_HEIGHT_DP * mDensity));
    mSolidBarDetentWidth = ta.getDimensionPixelSize(
            R.styleable.ButteryProgressBar_detentWidth,
            Math.round(DEFAULT_DETENT_WIDTH_DP * mDensity));
} finally {
    ta.recycle();
}

zu diesem Code:

mBarColor = c.getResources().getColor(android.R.color.holo_blue_light);
mSolidBarHeight = Math.round(DEFAULT_BAR_HEIGHT_DP * mDensity);
mSolidBarDetentWidth = Math.round(DEFAULT_DETENT_WIDTH_DP * mDensity);

Hoffe ich half :)


54
2018-06-08 03:13



Erweitern Sie die Aktivitäten der folgenden Klasse, um eine ProgressBar oben (unter ActionBar) zu erhalten, und a getProgressBar() Methode:

Elternklasse:

public abstract class ProgressActivity extends Activity {
    private ProgressBar mProgressBar;

    @Override
    public void setContentView(View view) {
        init().addView(view);
    }

    @Override
    public void setContentView(int layoutResID) {
        getLayoutInflater().inflate(layoutResID,init(),true);
    }

    @Override
    public void setContentView(View view, ViewGroup.LayoutParams params) {
        init().addView(view,params);
    }

    private ViewGroup init(){
        super.setContentView(R.layout.progress);
        mProgressBar = (ProgressBar) findViewById(R.id.activity_bar);
        return (ViewGroup) findViewById(R.id.activity_frame);
    }

    protected ProgressBar getProgressBar(){
        return mProgressBar;
    }
}

Layout (progress.xml):

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"
    android:layout_width="match_parent" android:layout_height="match_parent">
<ProgressBar android:id="@+id/activity_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="-8dp"
    style="@android:style/Widget.DeviceDefault.ProgressBar.Horizontal"
    />
  <FrameLayout android:id="@+id/activity_frame"
      android:layout_width="match_parent"
      android:layout_height="fill_parent"
      />
</LinearLayout>

25
2018-02-25 18:19



Ich habe Code aus diesem Thread sowie andere Threads auf StackOverflow kompiliert und ein Projekt erstellt, das verwendet werden kann, um ButteryProgessbar zu implementieren, sowie "Pull-Down zum Aktualisieren". https://github.com/pauldmps/Gmail-like-Pull-Down-to-Refresh

Fühlen Sie sich frei, den Code in Ihrer Anwendung zu verwenden.

Ein großes Dankeschön an euch.


4
2017-07-26 17:20



Bitte benutzen Sie den untenstehenden Code. Verwenden Sie einfach einen Standardstil in der Statusleiste als style="?android:attr/progressBarStyleHorizontal"

<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"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
    <ProgressBar 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleHorizontal"
        android:indeterminate="true"

        />

</RelativeLayout>

2
2018-05-12 12:47



Nun, ich habe etwas ähnliches für eine meiner Haustier-Apps gemacht und bin mir nicht sicher, ob das der einzige Weg oder der beste Weg ist, es zu tun, aber es funktioniert definitiv.

Verwenden Sie zunächst eine Overlay-Aktionsleiste und legen Sie dann den Hintergrund auf "null" fest, sodass die Overlay-Aktionsleiste transparent ist.

Setzen Sie nun in Ihrem Aktivitätslayout den oberen Rand für Ihre Root-Ansicht auf "actionbar height". Sie können es so machen.

<RelativeLayout
    ...
    android:layout_marginTop="?android:attr/actionBarSize" />

Jetzt wird die Aktion keinen Ihrer Aktivitätsinhalte verbergen.

Das nächste, was Sie jetzt tun müssen, ist - Fügen Sie eine Kopfansicht über Ihrer Stammansicht mit der gleichen Höhe wie die Aktionsleiste hinzu. Legen Sie eine Hintergrundfarbe fest. Dies würde nun die Farbe Ihrer Aktionsleiste sein und da die Aktionsleiste perfekt auf diese Header-Ansicht ausgerichtet ist.

Jetzt können Sie einfach einen Fortschrittsbalken in die Kopfzeile einfügen und ihn am unteren Rand der Kopfzeile ausrichten. Für den Benutzer sieht das so aus, als wäre die Fortschrittsanzeige in der Aktionsleiste selbst, genau wie Chrome.


0
2018-04-06 20:23