Een donker thema opnemen in uw Android-app
Voor ontwikkelaars is het maken van een Android-app een eenvoudig proces - het ontwerpen van een aantrekkelijke gebruikersinterface is eigenlijk moeilijk. Daarom schreven we de gids “Hoe een Android-app-UI te ontwerpen die niet zuigt”, voor ontwikkelaars die wat inspiratie nodig hebben bij het maken van eenvoudige maar aantrekkelijke UI's. In die gids hebben we het kort gehad over het toevoegen van een thema in de donkere / nachtmodus aan uw apps, en in deze gids zullen we u er doorheen leiden.
Het toevoegen van een thema in de donkere / nachtmodus aan uw app kan een geweldige optie zijn voor uw gebruikers - het bespaart de levensduur van de batterij en is 's nachts veel gemakkelijker voor de ogen. Een witte achtergrond op zwarte tekst of een combinatie van 'heldere' kleuren in uw gebruikersinterface is erg belastend voor de ogen, vooral 's nachts. Een donkere achtergrond met lichtere tekst is dus veel minder stressvol en schadelijk voor de ogen, dat is de reden waarom veel populaire apps zijn begonnen met een donker thema - YouTube en Reddit meest recent, hoewel Facebook die van hen nog steeds niet heeft gepubliceerd na een veelbelovende terug in Mei.
Als u gemakkelijk een schakelbare donkere modus aan uw Android-app wilt toevoegen, volgt u deze Appuals-gids en geeft u commentaar als u problemen ondervindt!
XML-kenmerken maken
Eerst moet u een XML-attributenbestand maken dat het thema afhandelt. Dit is veel beter dan het opnemen van twee sets bronnen in uw APK voor twee verschillende thema's, en dus een opgeblazen APK-grootte, omdat Android native kleuren op attributen kan wijzigen via deze XML.
Maak dus in de map 'bronnen' van uw app een bestand met de naam attrs.xml en voeg deze lijnen toe ( dit zijn stylable attributen):
Voorafgaand aan Lollipop konden we geen attributen voor drawables specificeren, dus moesten we de resource-ID's voor drawables specificeren - dit is echter niet langer het geval.
Stijlen toevoegen
Om dit te laten werken, moeten we twee afzonderlijke stijlen maken die dezelfde basis delen. De eerste zal duidelijk je primaire 'lichte' thema zijn en de tweede zal je 'donkere' thema zijn.
# F4F4F6 # 96F4F4F6 #FFFF # F2F2F3 @ drawable / i_light_plholder # 33343B / item> # 8033343B # 28292e # F2F2F3 @ drawable / i_dark_pholder
Hier zijn de werkelijke stijlen voor een bepaalde activiteit:
# F4F4F6 # 33343B
U moet een van deze thema's opgeven in het manifest voor de activiteit van de app, in dit geval FeedActivity.
De weergaven stileren
Hier is een voorbeeld van het stileren van uw weergaven - in dit voorbeeld is dit voor een omleidingsfout 'Pagina niet gevonden'.
Hoe Dynamic Theme Switching in te schakelen
De beste en meest efficiënte manier om dynamisch schakelen tussen thema's in te schakelen, is het laden van de waarde SharedPreference die wordt gebruikt om de instelling in het Application-exemplaar op te slaan met behulp van het Singleton-patroon, wat betekent dat we dit niet aan het begin van elke activiteit hoeven te doen.
public class App verlengt toepassing {public static final String TAG = "App"; private boolean isNightModeEnabled = false; @Override public void onCreate () {super.onCreate (); // We laden de nachtmodus hier SharedPreferences mPrefs = PreferenceManager.getDefaultSharedPreferences (this); this.isNightModeEnabled = mPrefs.getBoolean (“NIGHT_MODE”, false); } public boolean isNightModeEnabled () {return isNightModeEnabled; } public void setIsNightModeEnabled (boolean isNightModeEnabled) {this.isNightModeEnabled = isNightModeEnabled; }} Omdat dit exemplaar vóór iets anders wordt gestart, kunt u isNightModeEnabled () Boolean aanroepen wanneer u maar wilt, in elke activiteit die bij de app hoort nadat deze is geopend.
public final class FeedActivity breidt AppCompatActivity uit {private final static String TAG = "FeedActivity"; @Override beschermde nietig onCreate (bundle saveInstanceState) {if (MyApplication.getInstance (). IsNightModeEnabled ()) {setTheme (R.style.FeedActivityThemeDark); } super.onCreate (opgeslagenInstanceState); setContentView (R.layout.activity_feed); }} Als u echter een ander thema wilt toepassen dan het thema dat is opgegeven in het manifestbestand, moet u dit doen voordat u de methode parent onCreate () aanroept.
De status instellen met AppCompat
AppCompat is echt handig voor een breed scala van dingen, en in dit geval zullen we het gebruiken om de modusstatus in te stellen. Dit betekent dat u de app-instantie niet langer hoeft te gebruiken om een status in de cache te maken, waardoor de bloksnelheid van de app wordt verminderd ( zij het met een zeer kleine marge ).
AppCompatDelegate .setDefaultNightMode (AppCompatDelegate.MODE_NIGHT_YES);
Hier kunt u gebruik maken van:
- AppCompatDelegate.MODE_NIGHT_YES
AppCompatDelegate.MODE_NIGHT_NO
AppCompatDelegate.MODE_NIGHT_AUTO
De staat ophalen
AppCompatDelegate.getDefaultNightMode (); public final class FeedActivity breidt AppCompatActivity uit {private final static String TAG = "FeedActivity"; @Override beschermde nietig onCreate (bundle saveInstanceState) {if (AppCompatDelegate.getDefaultNightMode () == AppCompatDelegate.MODE_NIGHT_YES) {setTheme (R.style.FeedActivityThemeDark); } super.onCreate (opgeslagenInstanceState); setContentView (R.layout.activity_feed); }} Dat zou het moeten zijn - je kunt doorgaan met het aanpassen en aanpassen van waarden naar wens, maar deze gids is een geweldige introductie om aan de slag te gaan met het opnemen van een native dark-thema in je Android-app.
