Changer la police du texte d'onglet dans le TabLayout de soutien de conception d'android
j'essaie de travailler sur le nouveau TabLayout
de la bibliothèque de design android.
je veux changer le texte de l'onglet en police personnalisée . Et, j'ai essayé de chercher quelque style lié à TabLayout
,mais j'ai fini par ce .
s'il vous Plaît guide comment puis-je changer l'onglet polices de texte.
15 réponses
créer un TextView à partir du code Java ou XML comme ceci
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@android:id/text1"
android:layout_width="match_parent"
android:textSize="15sp"
android:textColor="@color/tabs_default_color"
android:gravity="center"
android:layout_height="match_parent"
/>
assurez-vous de garder l'id comme il est ici parce que le contrôle de TabLayout pour cet ID si vous utilisez custom textview
puis à partir du code gonfler cette mise en page et mettre la coutume Typeface
sur ce textview et ajouter cette vue personnalisée à l'onglet
for (int i = 0; i < tabLayout.getTabCount(); i++) {
//noinspection ConstantConditions
TextView tv = (TextView)LayoutInflater.from(this).inflate(R.layout.custom_tab,null)
tv.setTypeface(Typeface);
tabLayout.getTabAt(i).setCustomView(tv);
}
si vous utilisez TabLayout
et que vous voulez changer la police, vous devez ajouter une nouvelle boucle à la solution précédente comme celle-ci:
private void changeTabsFont() {
ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
int tabsCount = vg.getChildCount();
for (int j = 0; j < tabsCount; j++) {
ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
int tabChildsCount = vgTab.getChildCount();
for (int i = 0; i < tabChildsCount; i++) {
View tabViewChild = vgTab.getChildAt(i);
if (tabViewChild instanceof TextView) {
((TextView) tabViewChild).setTypeface(Font.getInstance().getTypeFace(), Typeface.NORMAL);
}
}
}
}
consultez changer le style de police dans la barre d'action onglets à l'aide de sherlock
grande réponse de praveen Sharma. Juste un petit ajout:
Au lieu d'utiliser changeTabsFont()
partout où vous avez besoin de TabLayout
, vous pouvez simplement utiliser votre propre CustomTabLayout
.
import android.content.Context;
import android.graphics.Typeface;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class CustomTabLayout extends TabLayout {
private Typeface mTypeface;
public CustomTabLayout(Context context) {
super(context);
init();
}
public CustomTabLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mTypeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/Roboto-Regular.ttf");
}
@Override
public void addTab(Tab tab) {
super.addTab(tab);
ViewGroup mainView = (ViewGroup) getChildAt(0);
ViewGroup tabView = (ViewGroup) mainView.getChildAt(tab.getPosition());
int tabChildCount = tabView.getChildCount();
for (int i = 0; i < tabChildCount; i++) {
View tabViewChild = tabView.getChildAt(i);
if (tabViewChild instanceof TextView) {
((TextView) tabViewChild).setTypeface(mTypeface, Typeface.NORMAL);
}
}
}
}
et encore une chose.
TabView
est un LinearLayout
avec TextView
à l'intérieur (il peut aussi éventuellement contenir ImageView
). Donc vous pouvez rendre le code encore plus simple:
@Override
public void addTab(Tab tab) {
super.addTab(tab);
ViewGroup mainView = (ViewGroup) getChildAt(0);
ViewGroup tabView = (ViewGroup) mainView.getChildAt(tab.getPosition());
View tabViewChild = tabView.getChildAt(1);
((TextView) tabViewChild).setTypeface(mTypeface, Typeface.NORMAL);
}
mais je ne le recommande pas. Si TabLayout
l'implémentation va changer, ce code peut fonctionner incorrectement ou même se planter.
une autre façon de personnaliser TabLayout
est d'y ajouter custom view. Voici le grand exemple .
créez votre propre style personnalisé et utilisez le style parent comme parent="@android:style/TextAppearance.Widget.TabWidget"
et dans la mise en page de votre onglet utilisez ce style comme app:tabTextAppearance="@style/tab_text"
exemple: Style:
<style name="tab_text" parent="@android:style/TextAppearance.Widget.TabWidget">
<item name="android:fontFamily">@font/poppins_regular</item>
</style>
Exemple: Onglet mise en page de la composante:
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabTextAppearance="@style/tab_text" />
la méthode suivante va changer la police en entier ViewGroup
récursivement. J'ai choisi cette méthode parce que vous n'avez pas à vous soucier de la structure interne de TabLayout
. J'utilise Calligraphie bibliothèque pour définir une police.
void changeFontInViewGroup(ViewGroup viewGroup, String fontPath) {
for (int i = 0; i < viewGroup.getChildCount(); i++) {
View child = viewGroup.getChildAt(i);
if (TextView.class.isAssignableFrom(child.getClass())) {
CalligraphyUtils.applyFontToTextView(child.getContext(), (TextView) child, fontPath);
} else if (ViewGroup.class.isAssignableFrom(child.getClass())) {
changeFontInViewGroup((ViewGroup) viewGroup.getChildAt(i), fontPath);
}
}
}
pour la prise en charge de la conception 23.2.0, en utilisant setupWithViewPager, vous devrez déplacer le code d'addTab(tab tab) à addTab(Tab tab, boolean setSelected).
Eh bien, je l'ai trouvé simple dans 23.4.0 sans utiliser une boucle. Il suffit de surcharger addTab (tab Tab Tab de@NonNull, boolean setSelected) comme suggéré par @ejw.
@Override
public void addTab(@NonNull Tab tab, boolean setSelected) {
CoralBoldTextView coralTabView = (CoralBoldTextView) View.inflate(getContext(), R.layout.coral_tab_layout_view, null);
coralTabView.setText(tab.getText());
tab.setCustomView(coralTabView);
super.addTab(tab, setSelected);
}
et voici le XML
<?xml version="1.0" encoding="utf-8"?>
<id.co.coralshop.skyfish.ui.CoralBoldTextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/custom_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:textColor="@color/graylove"
android:textSize="@dimen/tab_text_size" />
Espère que ça pourrait aider :)
vous pouvez utiliser ceci, ça marche pour moi.
private void changeTabsFont() {
ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
int tabsCount = vg.getChildCount();
for (int j = 0; j < tabsCount; j++) {
ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
int tabChildsCount = vgTab.getChildCount();
for (int i = 0; i < tabChildsCount; i++) {
View tabViewChild = vgTab.getChildAt(i);
if (tabViewChild instanceof TextView) {
AssetManager mgr = getActivity().getAssets();
Typeface tf = Typeface.createFromAsset(mgr, "fonts/Roboto-Regular.ttf");//Font file in /assets
((TextView) tabViewChild).setTypeface(tf);
}
}
}
}
Comme Andrei , a répondu, vous pouvez modifier fontface en étendant TabLayout de la classe. Et comme Penzzz dit, vous ne pouvez pas le faire dans addTab méthode. Remplacer onLayout méthode comme suit:
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom){
super.onLayout(changed, left, top, right, bottom);
final ViewGroup tabStrip = (ViewGroup)getChildAt(0);
final int tabCount = tabStrip.getChildCount();
ViewGroup tabView;
int tabChildCount;
View tabViewChild;
for(int i=0; i<tabCount; i++){
tabView = (ViewGroup)tabStrip.getChildAt(i);
tabChildCount = tabView.getChildCount();
for(int j=0; j<tabChildCount; j++){
tabViewChild = tabView.getChildAt(j);
if(tabViewChild instanceof AppCompatTextView){
if(fontFace == null){
fontFace = Typeface.createFromAsset(context.getAssets(), context.getString(R.string.IranSans));
}
((TextView) tabViewChild).setTypeface(fontFace, Typeface.BOLD);
}
}
}
}
doit écraser la méthode onLayout, parce que, lorsque vous utilisez setupWithViewPager méthode pour lier le TabLayout avec le ViewPager, vous devez définir le texte des onglets soit avec la méthode setText ou dans le PagerAdapter après cela et quand cela s'est produit, la méthode onLayout est appelée Sur le groupe de vue parent (TabLayout) et c'est l'endroit où mettre le paramètre fontface.(Changer une cause TextView text cause en appelant la méthode onLayout de son parent - un tabView a deux enfants, L'un est ImageView L'autre est TextView)
ma méthode de résolution comme ceci ,changer le texte de l'onglet spécifié,
ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
ViewGroup vgTab = (ViewGroup) vg.getChildAt(1);
View tabViewChild = vgTab.getChildAt(1);
if (tabViewChild instanceof TextView) {
((TextView) tabViewChild).setText(str);
}
pour utiliser le support des polices de caractères dans la fonctionnalité XML
sur les périphériques tournant Android 4.1
(niveau API 16) et plus, utilisez la bibliothèque de Support 26+.
- clic droit dossier res
- Nouveau -> Android annuaire de ressources-> sélectionnez la police de caractères -> Ok
- mettez votre fichier
myfont.ttf
dans le dossier de police nouvellement créé
sur res/values/styles.xml
ajouter:
<style name="customfontstyle" parent="@android:style/TextAppearance.Small">
<item name="android:fontFamily">@font/myfont</item>
</style>
sur le fichier de mise en page ajouter app: tabTextAppearance= "@style / customfontstyle",
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabTextAppearance="@style/customfontstyle"
app:tabMode="fixed" />
veuillez vous référer à [polices en xml].( https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml )
Mon 2p, Kotlin avec la vérification des références, applicables partout où il va s'arrêter si quelque chose est faux.
private fun setTabLayouFont(tabLayout: TabLayout) {
val viewGroupTabLayout = tabLayout.getChildAt(0) as? ViewGroup?
(0 until (viewGroupTabLayout?.childCount ?: return))
.map { viewGroupTabLayout.getChildAt(it) as? ViewGroup? }
.forEach { viewGroupTabItem ->
(0 until (viewGroupTabItem?.childCount ?: return))
.mapNotNull { viewGroupTabItem.getChildAt(it) as? TextView }
.forEach { applyDefaultFontToTextView(it) }
}
}
I think this is easier way.
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
app:tabTextColor="@color/lightPrimary"
app:tabSelectedTextColor="@color/white"
style="@style/CustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<style name="CustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabMaxWidth">20dp</item>
<item name="tabMode">scrollable</item>
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabPaddingStart">12dp</item>
<item name="tabPaddingEnd">12dp</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabTextAppearance">@style/CustomTabTextAppearance</item>
<item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
<style name="CustomTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">16sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">?android:textColorSecondary</item>
<item name="textAllCaps">false</item>
</style>
Kotlin extension qui a fonctionné pour moi:
fun TabLayout.setFont(font: FontUtils.Fonts) {
val vg = this.getChildAt(0) as ViewGroup
for (i: Int in 0..vg.childCount) {
val vgTab = vg.getChildAt(i) as ViewGroup?
vgTab?.let {
for (j: Int in 0..vgTab.childCount) {
val tab = vgTab.getChildAt(j)
if (tab is TextView) {
tab.typeface = FontUtils.getTypeFaceByFont(FontUtils.Fonts.BOLD, context)
}
}
}
}
}
Changement
if (tabViewChild instanceof TextView) {
pour
if (tabViewChild instanceof AppCompatTextView) {
pour que ça marche avec android.soutien.conception.widget.TabLayout (au moins de com.Android.support: design: 23.2.0)