Compatible avec RTL Design sur Android. Salut les amis android. Dans cette histoire… | par Cengiz Toru | juillet 2021

Le moteur RTL d’Android inverse le sens de la mise en page, mais n’inverse pas automatiquement les ressources (donc les drawables). Donc, si nous avons une image directionnelle, nous devons l’inverser manuellement.

Vous savez que les répertoires de ressources de projet Android ont des qualificatifs tels que -nuit, -v24, -v21, -xxhdpi, -Avec . Comme ceux-ci, il possède également le qualificatif -ldrtl qui signifie « direction de mise en page de droite à gauche » pour les fonctionnalités qui fonctionnent dans les langages RTL.

Images et icônes de soutien

Supposons que nous ayons une image de panier d’achat comme l’option A ci-dessus. Doit être affiché comme option B dans le projet RTL. Nous mettons généralement une image comme res / dessinable / ic_cart.png ou alors res / dessinable / ic_cart.xml dans notre projet. Pour prendre en charge cette image dans la conception RTL, préparez d’abord un nouveau répertoire nommé res / dessinable-ldrtl. Après cela, prenez votre image prise en charge de droite à gauche (option B) avec le même nom que l’image LTR et placez-la dans le dessin-ldrtl annuaire. Le système d’exploitation Android rendra le fichier correct lors du chargement de ses interfaces. Il soutiendra le projet LTR et le projet RTL.

(Pour utiliser également certains fichiers de ressources dans la conception LTR, vous pouvez préparer des fichiers avec le qualificateur -ldrtl)

Tour: Si vous utilisez des icônes telles que Vector Assets (fichiers avec l’extension .xml), vous n’avez pas besoin d’un nouveau répertoire avec le qualificateur -ldrtl. quand tu ajoutes android : autoMirrored = « true » ligne dans le vecteur de balise, votre icône prendra automatiquement en charge RTL. (Ce SDK fonctionne en version 19 et supérieure.) Vous n’avez donc pas besoin de stocker 2 fichiers dans votre projet. De cette façon, la taille de votre apk sera plus petite. Et lorsque vous souhaitez modifier votre icône, modifiez simplement un fichier.

Animations d’assistance

Les animations qui utilisent l’axe X ne fonctionnent pas bien dans la conception RTL. Vous pouvez préparer les répertoires res transaction-ldrtl ou res anim-ldrtl et placer des fichiers d’animation avec prise en charge de la conception RTL dans ces répertoires. Assurez-vous que les noms des fichiers d’animation LTR et RTL sont les mêmes. Par exemple, res anim slide_out_right.xml et res anim-ldrtl slide_out_right.xml

Compatible avec RecyclerView

Officiellement soutenu. Vous n’avez rien d’autre à faire que ce qui précède. Comme c’est merveilleux, n’est-ce pas ?

Prise en charge des ViewPagers

Si vous utilisez ViewPager2 dans votre projet, vous pouvez également ignorer cette section. Parce que ViewPager2 prend officiellement en charge la conception RTL. Sinon, si vous utilisez ViewPager, vous pouvez prendre en charge le projet RTL de 2 manières ; faire pivoter certaines vues et migrer vers ViewPager2.

vues tournantes

Vous devez ajouter une nouvelle valeur comme locale_viewpager_rotation =0 pour les entiers.xml. Après cela, préparez un autre entiers.xml dossier sous le valeurs-ldrtl dossier. Ajouter locale_viewpager_rotation =180 valeur dans ce fichier xml. Pour terminer android : rotationY = « @ entier / locale_viewpager_rotation » extrait de code pour votre viewpager (vous pouvez également utiliser cette méthode pour n’importe quelle vue). De cette façon, vos téléavertisseurs seront pivotés dans la conception RTL. Pour une prise en charge complète, vous devrez peut-être également faire pivoter le contenu des éléments du visualiseur. Et les indicateurs aussi.

J’ai essayé cette méthode. Ce n’est pas une solution efficace, donc, à mon avis, migrez simplement vers ViewPager 2.

Migration de ViewPager2

ViewPager2 a été intégré à RecyclerView pour qu’il prenne officiellement en charge RTL. Alors pour la meilleure solution migrez votre adaptateur ViewPager vers ViewPager2 adaptateur. Et profitez des avantages de ViewPager2.

De plus, si vous utilisez TabLayout avec ViewPager, vous devez également le migrer vers l’implémentation ViewPager2. Vous pouvez utiliser

extrait de code au lieu de mTabLayout.setupWithViewPager (mViewPager).

Compatible avec TextView

TextView prend officiellement en charge la conception RTL. Si vous utilisez les propriétés de début et de fin au lieu de gauche-droite, cela fonctionne bien dans le projet RTL. Ainsi, lorsque vous configurez un texte de script RTL pour textview, le texte commencera automatiquement à partir de la droite.

Mais si en mode RTL vous définissez un texte de script LTR, le texte textView commencera à gauche comme ci-dessous (même si vous avez substitué gauche/droite pour début/fin).

Si vous ne le souhaitez pas, vous pouvez ajouter android: textDirection = « locale » attribuer à vos textViews. Je le recommande car l’écran est plus fluide. Lorsque vous avez fait cela, vos textViews sont affichés ci-dessous. Même s’il s’agit du script LTR de texte de textView, il commencera par la droite. Bien sûr, vous pouvez combiner cet attribut avec des styles dans styles.xml.

Pour terminer

Dans certains cas, si vous devez définir la direction textView sur LTR et que vous souhaitez que les scripts LTR s’affichent à droite dans la conception RTL, vous pouvez définir

par programmation.

Prise en charge de l’édition de textes

EditText prend officiellement en charge la conception RTL. Si vous utilisez les propriétés de début et de fin au lieu de gauche-droite, cela fonctionne bien dans le projet RTL. Par conséquent, lorsque vous écrivez un texte de script RTL pour éditer le texte, le texte d’édition commencera automatiquement à partir de la droite.

Mais lorsque l’application est en mode RTL, si vous écrivez un texte de script LTR, le texte editText commencera à gauche en tant que TextView. Si vous ne le souhaitez pas et même dans les scripts LTR si vous souhaitez modifier le texte en partant de la droite, vous pouvez essayer les options ci-dessous

• Tout d’abord, soyez prudent lorsque vous ajoutez androïde : gravité biens.
• Si votre texte d’édition se trouve dans TextInputLayout, vous pouvez ajouter android : textDirection = « locale » affecter à TextInputLayout. Cela fonctionnera comme ci-dessous

si android : textDirection = « locale » ne fonctionne pas, vous pouvez essayer d’ajouter android : textAlignment = « viewStart » affecter à TexteEntréeModifierTexte

• Si vous avez un texte d’édition simple, vous pouvez ajouter android : textDirection = « locale » attribuer à votre EditText. si android : textDirection = « locale » ne fonctionne pas, vous pouvez essayer d’ajouter android : textAlignment = « viewStart » attribut pour EditText.
• Si vous souhaitez fixer le curseur à l’extrême droite du texte d’édition, vous pouvez utiliser l’extrait de code ci-dessous

Prise en charge des vues Web

Lorsque vous chargez un bloc de données/HTML dans webView, s’il ne prend pas en charge RTL, vous pouvez le manipuler à l’aide de l’extrait de code ci-dessous. Par conséquent, il prendra en charge la conception RTL.

Prise en charge des mises en page personnalisées pour des scripts spécifiques

Si vous souhaitez ajouter une version spécifique de la mise en page conçue pour le texte arabe uniquement, sa structure de répertoire ressemble à ceci :

res/mise en page/main.xml Ce fichier de mise en page est chargé par défaut.

res / layout-ar / main.xml Ce fichier de mise en page est chargé avec du texte arabe.

res / layout-ldrtl / main.xml Ce fichier de mise en page n’est chargé que pour les langues non arabes qui utilisent une direction de texte RTL.

Quelques extraits de code dont vous pourriez avoir besoin

• si tu utilises Gravité.GAUCHE / DROITE vous devez remplacer Gravité.DEBUT / FIN.
• Si vous souhaitez connaître le sens de mise en page d’une vue, vous pouvez l’obtenir view.layoutDirection extrait de code
• Pour obtenir la direction de mise en page d’un contexte, vous pouvez utiliser ceci le contexte.Ressources.Les paramètres.dispositionDirection extrait de code.
• Pour changer layoutDirection, vous pouvez utiliser view.dispositionDirection = Affichage.LAYOUT_DIRECTION_RTL extrait de code
• Pour vérifier le sens de la mise en page, vous pouvez utiliser une condition comme celle ci-dessous.

• Pour obtenir la direction du texte d’une visualisation, vous pouvez le faire avec Vision.sens du texte. so vous pouvez définir comment Vision.textDirection = view.textDirection = View.TEXT_DIRECTION_RTL
• Pour la direction de la mise en page vers un emplacement spécifique, vous pouvez utiliser TextUtils. getLayoutDirectionFromLocale (paramètres régionaux)
• Si vous avez une vue personnalisée et avez besoin d’un rappel lorsque les propriétés RTL sont modifiées, vous pouvez remplacer la fonction ci-dessous

Conclusion

Pour une conception RTL entièrement conforme dans votre application, vous pouvez suivre brièvement ces étapes

• Remplacez toutes les propriétés de disposition gauche/droite de votre application par start/end, qui sont leurs équivalents.
• Si vous utilisez ViewPager, migrez simplement ViewPager2.
• Définissez la direction du texte « local » pour vos vues de texte
• Ajoutez autoMirrored = true à vos icônes qui doivent être reflétées dans la conception RTL.

Merci d’avoir lu. Si vous pensez que l’article est utile, tapez dans vos mains et partagez-le afin que plus de personnes puissent en bénéficier.