Jeśli tworzysz aplikacje mobilne na Androida to jestem pewien, że musiałeś mieć problemy z dynamizacją zawartości swoich aplikacji, szczególnie z rozmiarem tekstu. Pracuję nad aplikacjami na Androida od dłuższego czasu i nie znalazłem żadnej oficjalnej dokumentacji na temat obsługi różnych rozmiarów tekstu w zależności od ekranu urządzenia, są jednak pewne oficjalne zasoby opisujące użycie TextView z obsługą rozmiaru tekstu zdefiniowanego w jednostce sp np. android:textSize=”12sp”.
Nie ma wątpliwości, że każdy deweloper użył tego podejścia, aby osiągnąć dynamiczny rozmiar tekstu, który obsługuje urządzenie, na którym działa aplikacja.
Dzisiaj podzielę się moim doświadczeniem jak osiągnąłem dynamiczny rozmiar tekstu w aplikacjach android, z tym podejściem można dostosować nie tylko rozmiar tekstu również rozmiar innych widoków.
Zanurzmy się w naszym podejściu do dynamicznego rozmiaru TextView💪🏼
Jeśli nie masz dimen.xml w projekcie, to utwórz go, wykonując poniższe kroki:
- Kliknij prawym przyciskiem myszy na folderze values
- Wybierz New
- Wybierz Values Resource File
- Potem utwórz plik dimen.xml
- Zdefiniuj zasób dimension w dimen.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="textSizeTitle">@dimen/_22sdp</dimen>
</resources>
Gdy dodasz zasób dimen pojawi się błąd na @dimen/_22sdp nie przejmuj się tym naprawimy to w następnych krokach.
Tworzenie pliku meta.xml:
Ten plik będzie używany jako odniesienie dla różnych wariantów lub kwalifikatorów, które posiada urządzenie z androidem, na którym działa aplikacja.
- Utwórz nowy Plik Zasobów Wartości ponownie
- Nazwij go jako meta, ale nie naciskaj jeszcze ok w oknie dialogowym
- Kliknij na kwalifikator gęstości z listy po lewej stronie
- Teraz wybierz przycisk, który ma znak większy niż jak >>, wtedy zobaczysz coś takiego
- Wybierz Średnią Gęstość i naciśnij ok
Android Studio obsługuje różne kwalifikatory jeden z nich to gęstość, której właśnie użyliśmy powyżej. Teraz powtórz krok, aby utworzyć plik meta.xml i dodać wszystkie następujące kwalifikatory gęstości:
- Wysoka Gęstość
- X-Wysoka Gęstość
- XX-Wysoka Gęstość
- XXX-Wysoka Gęstość
Następnie utwórz inny plik meta.xml i tym razem użyj kwalifikatora rozmiaru z lewej strony i wybierz opcje X-Large.
Teraz stworzymy kolejny plik meta.xml z innym kwalifikatorem, którym jest Smallest Screen Width jak pokazano poniżej
Po kliknięciu na Smallest Screen Width. pojawi się możliwość zdefiniowania najmniejszej szerokości w dp, jak pokazano poniżej
Następnie kliknij przycisk OK.
Utworzymy więcej plików meta.xml z następującymi najmniejszymi rozmiarami szerokości:
- 300
- 330
- 360
- 390
- …
- …
- … twórz pliki z różnicą 30, aż dojdziesz do 780
Pytanie tutaj brzmi co będzie w tych plikach, otóż w następnych krokach dodamy zasób string we wszystkich plikach meta.
W lewym panelu Android Studio masz te pliki jak pokazano poniżej:
Każdy plik pokazuje swój kwalifikator po prawej stronie meta.xml, otwórz każdy plik i umieść następujący ciąg resource.
meta.xml (hdpi)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="dimension">values-hdpi</string>
</resources>
Otwórz każdy plik meta.xml i powyższy zasób, ale musisz zmienić wartości-hdpi z values-{tutaj użyj kwalifikatora odpowiedniego pliku}. Ponadto możesz sprawdzić te pliki na githubie.
- 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)
Jeszcze nie skończyłem, jest jeszcze więcej plików, których potrzebujemy, a mianowicie sdp.xml, utwórz ten plik ze wszystkimi kwalifikatorami, które stworzyliśmy wcześniej dla meta.xml, kiedy skończysz z tworzeniem wszystkich tych plików sdp.xml ze wszystkimi kwalifikatorami wtedy możesz znaleźć zawartość tych plików na githubie. 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)
I to już wszystko jeśli chodzi o konfigurację, teraz musisz tylko użyć tych wartości wymiarów, które już zdefiniowałeś w pliku dimen.xml, który omówiliśmy na początku tego bloga.
Usage
Zważywszy, że zdefiniowałeś jedną wartość dimen jak:
<dimen name="textSizeTitle">@dimen/_22sdp</dimen>
Możesz użyć jej gdziekolwiek w swoich układach xml:
<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" />
Spróbuj uruchomić swoją aplikację w różnych emulatorach, które mają różne wymiary ekranu i gęstość, zobaczysz, że rozmiar tekstu dostosowuje się w zależności od urządzenia, na którym działa aplikacja.
And that’s all yours now 🥳
Thanks for reading and i hope your presence here was resourceful 😎
You can also check my other story about Styling/Designing TextField in Jectpack Compose UI – Android
Kamran Ramzan is a student of Software Engineering working as a Full Stack Mobile Application developer. Ciągle odkrywa nowe technologie i dzieli się z wami wiedzą, mając nadzieję, że to wam jakoś pomoże.
Uprzejmie uderzaj w klaśnięcie ponownie i ponownie 😇 jeśli podobają ci się moje wysiłki 👏🏼
.