Toon een voortgangsbalk in uw Android-app voor een betere UX

Als uw Android-app te lang duurt om te reageren op de actie van een gebruiker, krijgt deze de ANR-fout (Application Not Responding). Een eenvoudige manier om de gebruikerservaring (UX) beter te maken, is door een voortgangsbalk weer te geven tijdens langere bewerkingen.

Wanneer en hoe een voortgangsbalk te gebruiken

Acties zoals het laden van bronnen, het downloaden van inhoud of het verzenden van berichten kunnen enige tijd duren. Wanneer die actie meetbaar is, kunt u de gebruiker ervan bewust maken hoe ver de operatie zich in het proces bevindt.

Een bewegende voortgangsbalk verzekert gebruikers ook dat de app nog steeds goed werkt. Zelfs als de voortgangsbalk aan niets anders kan worden gekoppeld dan aan een timer die de balk soepel bijwerkt, heeft de gebruiker iets om naar te kijken terwijl hij wacht.

We behandelen hier de verticale voortgangsbalk, maar er zijn verschillende stijlen voor de voortgangsbalk. De onbepaalde status voor een voortgangswidget kan bijvoorbeeld aangeven dat er nog steeds iets gebeurt.

Voorbeeldcode

Om dit project te demonstreren, maakte ik een nieuw Android-applicatieproject in Eclipse en gebruikte ik alle standaardinstellingen. Ik heb het een activiteit laten maken en het aangepast zoals hieronder getoond.

Merk eerst op dat u eenvoudig een voortgangsbalk aan een lay-out kunt toevoegen. Hier is de lay-out voor onze activiteit, met de voortgangsbalk onderaan.

 "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: paddingBottom = "@ dimen / activity_vertical_margin" 
 android: paddingLeft = "@ dimen / activity_horizontal_margin" 
 android: paddingRight = "@ dimen / activity_horizontal_margin" 
 android: paddingTop = "@ dimen / activity_vertical_margin" 
 tools: context = ".MainActivity" > 
 android: layout_width = "wrap_content" 
 android: layout_height = "wrap_content" 
 android: text = "@ string / hello_world" /> 
 android: id = "@ + id / adprogress_progressBar" 
 android: layout_height = "wrap_content" 
 android: layout_width = "match_parent" 
 style = "? android: attr / progressBarStyleHorizontal" 
 android: layout_alignParentBottom = "true" 
 android: layout_margin = "10dp" 
 /> 

We gebruiken de horizontale stijl, dus de voortgangsbalk gaat van de linkerkant van het scherm naar rechts.

Nu willen we dat deze voortgangsbalk beweegt, dus we zullen de voortgangsbalk bijwerken met een constante timer. Zoals bij elke voorbeeldcode, moet u aangepaste logica voor uw app toevoegen en meer foutafhandeling.

 pakket com.example.progressbar; 
 android.app.Activity importeren ; 
 android.os.bundle importeren ; 
 android.widget.ProgressBar importeren ; 
 openbare klasse MainActivity breidt activiteit uit { 
 beschermde statische finale int TIMER_RUNTIME = 10000; // in ms -> 10 sec 
 beschermde booleaanse mbActive; 
 beschermde ProgressBar mProgressBar; 
 @ Override 
 public void onCreate ( laatste bundel saveInstanceState) { 
 super .onCreate (opgeslagenInstanceState); 
 setContentView (R.layout. activity_main ); 
 mProgressBar = (ProgressBar) findViewById (R.id. progressBar ); 
 laatste draad timerThread = nieuwe draad () { 
 @ Override 
 openbare ongeldige run () { 
 mbActive = true ; 
 probeer { 
 int wachtte = 0; 
 terwijl (mbActive && (wachtte < TIMER_RUNTIME )) { 
 slaap (200); 
 if (mbActive) { 
 gewacht + = 200; 
 UpdateProgress (gewacht); 
 } 
 } 
 } vangst (InterruptedException e) { 
 // niets doen 
 } eindelijk { 
 onContinue (); 
 } 
 } 
 }; 
 timerThread.start (); 
 } 
 @ Override 
 openbare nietig op onDestroy () { 
 super .onDestroy (); 
 } 
 public void updateProgress ( final int timePassed) { 
 if ( null ! = mProgressBar) { 
 // Negeer hier de afrondingsfout 
 final int progress = mProgressBar.getMax () * timePassed / TIMER_RUNTIME ; 
 mProgressBar.setProgress (vooruitgang); 
 } 
 } 
 publieke ongeldig onContinue () { 
 // voer hier alle laatste acties uit 
 } 
 } 
We hebben een thread gemaakt die de voortgangsbalk blijft bijwerken met de huidige voortgang elke 200 ms, totdat deze op het volledige tijdstip 100% bereikt. Bekijk hoe dit eruit ziet op een Android 2.3-apparaat ( Afbeelding A ). Figuur A

Bekijk nu de bijgewerkte stijl van een Android 4.0-apparaat ( Afbeelding B ). Figuur B

Deze stijl wordt automatisch toegepast op basis van de versie van Android in combinatie met eventuele wijzigingen van de fabrikant. Tenzij u een bepaalde stijl nodig hebt, is het het beste om deze als standaardstijl (of een stijl die is opgenomen in een thema dat u gebruikt) te laten staan ​​om de look en feel consistent te houden op dat apparaat.

Conclusie

De voortgangsbalk is een eenvoudige maar effectieve manier om een ​​gebruiker te laten zien dat de app nog steeds werkt en hem betrokken te houden. Correct gebruik van een voortgangsbalk kan er ook voor zorgen dat een app vloeiender en responsiever aanvoelt, wat over het algemeen de UX zal verbeteren.

© Copyright 2020 | mobilegn.com