Ondersteunen/aanpassen tekstgrootte op verschillende schermformaten in Android

Als u mobiele applicaties ontwikkelt specifiek in Android dan ben ik er vrij zeker van dat u problemen moet hebben gehad met het dynamisch maken van de inhoud van uw applicaties in het bijzonder de tekstgrootte. Ik heb gewerkt aan Android-toepassingen voor een vrij lange tijd en ik heb geen officiële documentatie gevonden over de ondersteuning van verschillende tekstgrootte op basis van het scherm van het apparaat, zijn er enkele officiële bronnen wel het gebruik van TextView beschrijven met ondersteunende tekstgrootte zoals gedefinieerd in de sp eenheid bijvoorbeeld android:textSize=”12sp”.

Geen twijfel dat elke ontwikkelaar deze aanpak heeft gebruikt om de dynamische tekstgrootte die het apparaat ondersteunt heks de toepassing wordt uitgevoerd op te bereiken.

Vandaag zal ik mijn ervaring delen over hoe ik dynamische tekstgrootte in Android-toepassingen heb bereikt, met deze aanpak kunt u niet alleen de tekstgrootte aanpassen, maar ook de grootte van andere weergaven.

Laten we eens duiken in onze aanpak van dynamische tekstgrootte💪🏼

Als u nog geen dimen.xml bestand in uw project hebt, maak er dan een aan door de volgende stappen te volgen:

  • Rechter muisklik op uw waarden map
  • Select New
  • Select Values Resource File

  • Maak vervolgens een bestand dimen.xml

  • Definieer een dimension resource in dimen.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="textSizeTitle">@dimen/_22sdp</dimen>
</resources>

Als je eenmaal dimen resource hebt toegevoegd zal er een fout optreden op @dimen/_22sdp maak je daar geen zorgen over we zullen dit in de volgende stappen oplossen.

Maken van meta.xml bestand:

Dit bestand zal worden gebruikt als een verwijzing voor de verschillende varianten of qualifiers dat de android apparaat bezit waarop de toepassing wordt uitgevoerd.

  • Maak weer een nieuw Values Resource File
  • Noem het als meta, maar druk nog niet op Ok in het dialoogvenster
  • Klik op de dichtheidskwalificator in de lijst aan de linkerkant

  • Kies nu de knop met een groter dan teken zoals >>, dan ziet u iets als dit

  • Selecteer gemiddelde dichtheid en druk op ok

Android Studio ondersteunt verschillende kwalifiers, waaronder de dichtheid die we net hierboven hebben gebruikt. Herhaal nu de stap om meta.xml bestand te maken en voeg alle volgende dichtheid qualifiers:

  • High Density
  • X-High Density
  • XX-High Density
  • XXX-High Density

Naar aanleiding van een andere meta.xml bestand en deze keer gebruik maken van grootte qualifier aan de linkerkant en selecteer X-Large opties.

Nu zullen we een andere meta.xml bestand aanmaken met een andere qualifier die Smallest Screen Width is zoals hieronder getoond

Als u eenmaal op de Smallest Screen Width qualifier klikt, ziet u de optie om de kleinste breedte in dp te definiëren, zoals hieronder getoond

Klik vervolgens op de knop OK.

We zullen meer meta.xml-bestand maken met de volgende kleinste breedte maten:

  • 300
  • 330
  • 360
  • 390
  • … maak bestanden aan met een verschil van 30 totdat je 780

De vraag hier is wat er in deze bestanden zou moeten staan, nou we zullen string resource toevoegen in alle meta bestanden in de volgende stappen.

In het linkerdeelvenster van Android Studio hebt u deze bestanden zoals hieronder getoond:

Elk bestand toont zijn qualifier aan de rechterkant van de meta.xml naam, open elk bestand en plaats de volgende string resource.

meta.xml (hdpi)

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="dimension">values-hdpi</string>
</resources>

Open elk meta.xml bestand en bovenstaande resource maar je moet de waarden veranderen-hdpi waarde met waarden-{hier gebruik qualifier van respectieve bestand}. Bovendien kunt u deze bestanden controleren op github.

  • meta.xml(hdpi)
  • meta.xml(mdpi)
  • meta.xml(xhdpi)
  • meta.xml(xxhdpi)
  • meta.xml(xxxhdpi)
  • meta.xml(xlarge)
  • meta.xml(sw300dp)
  • meta.xml(sw330dp)
  • meta.xml(sw360dp)
  • meta.xml(sw390dp)
  • meta.xml(sw420dp)
  • meta.xml(sw450dp)
  • meta.xml(sw480dp)
  • meta.xml(sw510dp)
  • meta.xml(sw540dp)
  • meta.xml(sw570dp)
  • meta.xml(sw600dp)
  • meta.xml(sw630dp)
  • meta.xml(sw660dp)
  • meta.xml(sw690dp)
  • meta.xml(sw720dp)
  • meta.xml(sw750dp)
  • meta.xml(sw780dp)

Het is nog niet klaar, er zijn meer bestanden die we nodig hebben en dat is sdp.xml, maak dit bestand met alle qualifiers die we eerder hebben gemaakt voor meta.xml, zodra u klaar bent met het maken van al deze bestanden van sdp.xml met alle qualifiers dan kunt u de inhoud van deze bestanden op github vinden. sdp

  • sdp.xml(hdpi)
  • sdp.xml(mdpi)
  • sdp.xml(xhdpi)
  • sdp.xml(xxhdpi)
  • sdp.xml(xxxhdpi)
  • sdp.xml(xlarge)
  • sdp.xml(sw300dp)
  • sdp.xml(sw330dp)
  • sdp.xml(sw360dp)
  • sdp.xml(sw390dp)
  • sdp.xml(sw420dp)
  • sdp.xml(sw450dp)
  • sdp.xml(sw480dp)
  • sdp.xml(sw510dp)
  • sdp.xml(sw540dp)
  • sdp.xml(sw570dp)
  • sdp.xml(sw600dp)
  • sdp.xml(sw630dp)
  • sdp.xml(sw660dp)
  • sdp.xml(sw690dp)
  • sdp.xml(sw720dp)
  • sdp.xml(sw750dp)
  • sdp.xml(sw780dp)

En dat is alles voor de setup nu hoef je alleen nog maar deze dimensie waarden te gebruiken die je al hebt gedefinieerd in het dimen.xml bestand dat we aan het begin van deze blog hebben besproken.

Gebruik

Gezien het feit dat u een dimen waarde hebt gedefinieerd zoals:

<dimen name="textSizeTitle">@dimen/_22sdp</dimen>

U kunt het overal in uw lay-out xml bestanden gebruiken:

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
<!-- // here is the dimen value that will support different screen size-->
android:textSize="@dimen/textSizeTitle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

Probeer om uw app in verschillende emulators uit te voeren die verschillende schermafmetingen en dichtheid hebben, zult u zien dat de tekstgrootte zich aanpast aan het apparaat waarop de toepassing wordt uitgevoerd.

En dat is alles wat je nu hebt 🥳

Bedankt voor het lezen en ik hoop dat je aanwezigheid hier nuttig was 😎

Je kunt ook mijn andere verhaal over Styling/Designing TextField in Jectpack Compose UI – Android

Kamran Ramzan is een student Software Engineering en werkt als een Full Stack Mobile Application-ontwikkelaar. Hij verkent voortdurend nieuwe technologieën en deelt de kennis met jullie in de hoop dat het op de een of andere manier zal helpen.

Druk op de klap opnieuw en opnieuw 😇 als je van mijn inspanningen houdt 👏🏼

Plaats een reactie