Android Progress Wheel Loading Overlay

Indlæsning af data fra en tredjepart er afgørende for de fleste Android-programmer. Disse data hentes og indlæses normalt til brugergrænsefladen, når programmet startes. En god måde at vise brugeren, at data er ved at blive indlæst, er med et overlay af en indlæsningscirkel på brugergrænsefladen. Under dette overlay vil du ikke have, at brugeren skal kunne interagere med brugergrænsefladen, før indlæsningen er færdig.

Lad os undersøge en måde, hvorpå du kan designe og implementere et fremskridtshjul-overlay under indlæsning af data i din applikation.

Til dette brugte jeg et material progress wheel-bibliotek, som jeg fandt på GitHub. Tilføj først dette til dit app-niveau build.gradle.

implementation 'com.pnikosis:materialish-progress:1.7

Næst oprettede jeg en XML-fil for at vise Progress Wheel som et lag, jeg kunne placere over UI.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:wheel="http://schemas.android.com/apk/res-auto"
android:id="@+id/progress_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.4"
android:animateLayoutChanges="true"
android:background="@android:color/black"
android:clickable="true"
android:focusable="true"
android:visibility="gone">
<com.pnikosis.materialishprogress.ProgressWheel
android:id="@+id/progress_wheel"
android:layout_width="80dp"
android:layout_height="80dp"
android:clickable="true"
android:layout_gravity="center"
wheel:matProg_barColor="#5588FF"
wheel:matProg_progressIndeterminate="true" />
</FrameLayout>

Inddragelse af de to linjer nedenfor for FrameLayout forhindrer UI i at være klikbar. Du ønsker også helt sikkert, at denne visning skal være usynlig i perioder, hvor den ikke bruges, hvilket er grunden til, at vi sætter visibility som gone. Med dette bibliotek kan du tilpasse de visuelle attributter for fremskridtshjulet, se GitHub repo for flere detaljer.

android:clickable="true" 
android:focusable="true"
android:visibility="gone"

For at bruge dette inden for ethvert layout i hele din applikation skal du blot inkludere det i layout XML-filen. Derefter kan du bruge kode til at manipulere synligheden.

<include layout="@layout/include_progress_overlay"/>

For at få dette layout til at blive vist over brugergrænsefladen under indlæsning skal vi indstille synligheden som visible. Når indlæsningen er færdig, kan du have en callback-metode til at indstille synligheden til invisible.

/* Progress overlay visible */
progressOverlay = findViewById(R.id.progress_overlay);
progressOverlay.setVisibility(View.VISIBLE);...
...
...public void setInvisible() {
progressOverlay.setVisibility(View.INVISIBLE);
}public void setVisible() {
progressOverlay.setVisibility(View.VISIBLE);
}

Det endelige produkt af overlayet ses nedenfor!