android - অ্যান্ড্রয়েড ডিজাইন সমর্থন ট্যাবলয়আউটে ট্যাব পাঠ্যের ফন্ট পরিবর্তন করুন




fonts android-design-library (12)

আপনার নিজস্ব কাস্টম স্টাইল তৈরি করুন এবং প্যারেন্ট স্টাইলটি parent="@android:style/TextAppearance.Widget.TabWidget" হিসাবে ব্যবহার করুন parent="@android:style/TextAppearance.Widget.TabWidget"

এবং আপনার ট্যাব বিন্যাসে app:tabTextAppearance="@style/tab_text" হিসাবে এই শৈলীটি ব্যবহার app:tabTextAppearance="@style/tab_text"

উদাহরণ: স্টাইল:

<style name="tab_text" parent="@android:style/TextAppearance.Widget.TabWidget">
    <item name="android:fontFamily">@font/poppins_regular</item>
</style>

উদাহরণ: ট্যাব বিন্যাসের উপাদান:

<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" />

আমি অ্যান্ড্রয়েড ডিজাইনের লাইব্রেরি থেকে নতুন TabLayout কাজ করার চেষ্টা করছি।

আমি কাস্টম ফন্টে ট্যাব পাঠ্য পরিবর্তন করতে চাই। এবং, আমি TabLayout সম্পর্কিত কিছু স্টাইলিং অনুসন্ধান করার চেষ্টা TabLayout , তবে এটি এখানেই শেষ হয়েছে।

আমি কীভাবে ট্যাব পাঠ্য ফন্টগুলি পরিবর্তন করতে পারি তা গাইড করুন।


আপনি এটি ব্যবহার করতে পারেন, এটি আমার পক্ষে কাজ করে।

 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);
            }
        }
    }
}

আমার সমাধানের পদ্ধতিটি ঠিক এইভাবেই সুনির্দিষ্ট ট্যাব পাঠ্য পরিবর্তন করুন,

 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);
 }

এবং এখানে কোটলিনে আমার বাস্তবায়ন যা নির্বাচিত এবং অনির্বাচিত ট্যাবগুলির জন্য ফন্ট পরিবর্তন করার অনুমতি দেয়।

 fun TabLayout.setFontSizeAndColor(typeface: Typeface, @DimenRes textSize: Int, @ColorRes textColor: Int) {
val viewGroup: ViewGroup = this.getChildAt(0) as ViewGroup
val tabsCount: Int = viewGroup.childCount
for (j in 0 until tabsCount) {
    val viewGroupTab: ViewGroup = viewGroup.getChildAt(j) as ViewGroup
    val tabChildCount: Int = viewGroupTab.childCount
    for (i in 0 until tabChildCount) {
        val tabViewChild: View = viewGroupTab.getChildAt(i) as View
        if ( tabViewChild is TextView) {
            tabViewChild.typeface = typeface
            tabViewChild.gravity = Gravity.FILL
            tabViewChild.maxLines = 1
            tabViewChild.setTextSize(TypedValue.COMPLEX_UNIT_PX, this.resources.getDimension(textSize))
            tabViewChild.setTextColor(ContextCompat.getColor(this.context, textColor))
        }
    }
}

atrs.xML এ:

class FontTabLayout @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    @AttrRes defStyleAttr: Int = 0
) : TabLayout(context, attrs, defStyleAttr) {

    private var textSize = 14f

    private var defaultSelectedPosition = 0

    private var selectedTypeFace: Typeface? = ResourcesCompat.getFont(context, R.font.muli_bold)
    private var normalTypeFace: Typeface? = ResourcesCompat.getFont(context, R.font.muli_regular)

    @ColorInt private var selectedColor = 0
    @ColorInt private var normalTextColor = 0

    init {
        attrs?.let { initAttrs(it) }
        addOnTabSelectedListener()
    }

    private fun initAttrs(attrs: AttributeSet) {
        val a = context.obtainStyledAttributes(attrs, R.styleable.FontTabLayout)

        textSize = a.getDimensionPixelSize(R.styleable.FontTabLayout_textSize, 14).toFloat()

        defaultSelectedPosition = a.getInteger(R.styleable.FontTabLayout_defaultSelectedPosition, 0)
        val selectedResourceId = a.getResourceId(R.styleable.FontTabLayout_selectedTypeFace, R.font.muli_bold)
        val normalResourceId = a.getResourceId(R.styleable.FontTabLayout_normalTypeFace, R.font.muli_regular)

        selectedColor = a.getColor(com.google.android.material.R.styleable.TabLayout_tabSelectedTextColor, 0)
        normalTextColor = a.getColor(R.styleable.FontTabLayout_normalTextColor, 0)

        selectedTypeFace = ResourcesCompat.getFont(context, selectedResourceId)
        normalTypeFace = ResourcesCompat.getFont(context, normalResourceId)

        a.recycle()
    }

    private fun addOnTabSelectedListener() {
        addOnTabSelectedListener(object : OnTabSelectedListenerAdapter() {

            override fun onTabUnselected(tab: Tab?) {
                getCustomViewFromTab(tab)?.apply {
                    setTextColor(normalTextColor)
                    typeface = normalTypeFace
                }
            }

            override fun onTabSelected(tab: Tab?) {

                getCustomViewFromTab(tab)?.apply {
                    setTextColor(selectedColor)
                    typeface = selectedTypeFace
                }
            }

            private fun getCustomViewFromTab(tab: Tab?) = tab?.customView as? AppCompatTextView

        })
    }

    override fun setupWithViewPager(viewPager: ViewPager?, autoRefresh: Boolean) {
        super.setupWithViewPager(viewPager, autoRefresh)
        addViews(viewPager)
    }

    private fun addViews(viewPager: ViewPager?) {
        for (i in 0 until tabCount) {
            val customTabView = getCustomTabView(i).apply {
                typeface = if (i == defaultSelectedPosition) selectedTypeFace else normalTypeFace
                val color = if (i == defaultSelectedPosition) selectedColor else normalTextColor
                setTextColor(color)
                text = viewPager?.adapter?.getPageTitle(i)
            }

            getTabAt(i)?.customView = customTabView
        }
    }

    private fun getCustomTabView(position: Int): AppCompatTextView {
        return AppCompatTextView(context).apply {
            gravity = Gravity.CENTER
            textSize = this@FontTabLayout.textSize
            text = position.toString()
        }
    }
}

কোটলিন এক্সটেনশন যা আমার পক্ষে কাজ করেছে:

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>

জাভা কোড বা এটির মতো এক্সএমএল থেকে একটি টেক্সটভিউ তৈরি করুন

<?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"
/>

আইডিটি এখানে যেমন রয়েছে তেমনি তা নিশ্চিত করে রাখুন কারণ আপনি যদি কাস্টম পাঠ্যদর্শনটি ব্যবহার করেন তবে ট্যাবলয়আউটটি এই আইডিটি পরীক্ষা করে

তারপরে কোড থেকে এই লেআউটটি স্ফীত করুন এবং সেই পাঠ্যদর্শনটিতে কাস্টম Typeface সেট করুন এবং এই কাস্টম ভিউটিকে ট্যাবে যুক্ত করুন

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);
}

নিম্নলিখিত পদ্ধতিটি পুনরাবৃত্তভাবে পুরো ViewGroup ফন্ট পরিবর্তন করবে। আমি এই পদ্ধতিটি বেছে নিয়েছি কারণ আপনার TabLayout অভ্যন্তরীণ কাঠামো সম্পর্কে TabLayout । আমি একটি ফন্ট সেট করতে Calligraphy লাইব্রেরি ব্যবহার করছি।

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);
        }
    }
}

পরিবর্তন

if (tabViewChild instanceof TextView) {

জন্য

if (tabViewChild instanceof AppCompatTextView) { 

এটিকে android.support.design.widget.TabLayout (কমপক্ষে com.android.support:design:23.2.0 থেকে) দিয়ে কাজ করার জন্য


ভাল, আমি এটি লুপ ব্যবহার না করেই 23.4.0 এ সাদৃশ্য পেয়েছি। @ ইজেডাবির পরামর্শ অনুসারে স্রেফ অ্যাডট্যাব (@ নননুল ট্যাব ট্যাব, বুলিয়ান সেটসিলেক্ট) ওভাররাইড করুন।

@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);
}

এবং এখানে এক্সএমএল

<?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" />

আশা করি এটি সাহায্য করতে পারে :)


যদি আপনি TabLayout ব্যবহার TabLayout এবং আপনি ফন্টটি পরিবর্তন করতে চান তবে আপনাকে আগের সমাধানটিতে লুপের জন্য একটি নতুন যুক্ত করতে হবে:

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);
                }
        }
    }
} 

শেরলক ব্যবহার করে অ্যাকশন বার ট্যাবে ফন্ট শৈলী পরিবর্তন করতে দয়া করে উল্লেখ করুন


আন্ড্রেই উত্তর হিসাবে, আপনি ট্যাবলআউট ক্লাস প্রসারিত করে ফন্টফেস পরিবর্তন করতে পারেন। এবং Penzzz যেমন বলেছে, আপনি এটি অ্যাডট্যাব পদ্ধতিতে করতে পারবেন না। বেনো হিসাবে লেআউট পদ্ধতি ওভাররাইড করুন:

@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);
            }
        }
    }
}

অবশ্যই লেআউট পদ্ধতিতে ওভাররাইট করা আবশ্যক, কারণ যখন আপনি ভিউপ্যাজারের সাথে ট্যাবলাইআউট বাঁধতে সেটআপউইথ ভিউপেজার পদ্ধতিটি ব্যবহার করেন, আপনাকে সেটটেক্সট পদ্ধতিতে বা তারপরে পেজারআডাপ্টারে ট্যাব পাঠ্য নির্ধারণ করতে হয় এবং যখন এটি ঘটে তখন অন-লেআউট পদ্ধতিটি প্যারেন্ট ভিউগ্রুপের কাছে কল করা হয় ( ট্যাবলআউট) এবং সেটিংস হ'ল ফন্টফেস স্থাপন করার জায়গা ((একটি পাঠ্যদর্শন পাঠ্য পরিবর্তন করা কল করে তার পিতামাতার লেআউট পদ্ধতিটি কল করতে পারে - একটি ট্যাবভিউয়ের দুটি বাচ্চা রয়েছে, একটিতে চিত্র ভিউ অন্যটি টেক্সটভিউ রয়েছে)

আরেকটি সমাধান:

প্রথমত, কোডগুলির এই লাইনগুলি:

    if(fontFace == null){
        fontFace = Typeface.createFromAsset(context.getAssets(), context.getString(R.string.IranSans));
    }

উপরের সমাধানে দুটি লুপের বাইরে লেখা উচিত।

তবে এপিআই> = 16 এর জন্য আরও ভাল সমাধান অ্যান্ড্রয়েড ব্যবহার করছে : হরফফ্যামিলি :

একটি অ্যান্ড্রয়েড রিসোর্স ডিরেক্টরি নামের ফন্ট তৈরি করুন এবং আপনার পছন্দসই ফন্টটি ডিরেক্টরিতে অনুলিপি করুন।

তারপরে এই স্টাইলগুলি ব্যবহার করুন:

<style name="tabLayoutTitles">
    <item name="android:textColor">@color/white</item>
    <item name="android:textSize">@dimen/appFirstFontSize</item>
    <item name="android:fontFamily">@font/vazir_bold</item>
</style>

<style name="defaultTabLayout">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">@dimen/defaultTabLayoutHeight</item>
    <item name="android:gravity">right</item>
    <item name="tabTextAppearance">@style/tabLayoutTitles</item>
    <item name="tabSelectedTextColor">@color/white</item>
    <item name="tabIndicatorColor">@color/white</item>
    <item name="tabIndicatorHeight">@dimen/accomTabIndicatorHeight</item>
    <item name="tabMode">fixed</item>
    <item name="tabGravity">fill</item>
    <item name="tabBackground">@drawable/rectangle_white_ripple</item>
    <item name="android:background">@color/colorPrimary</item>
</style>

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)
                }
            }
        }
    }
}







android-tablayout