如何在Android中从自定义视图中分隔字符串？ （TabLayout）

Question

我有TabLayout ViewPager。

我希望始终将文本（字符串Conver ...）与白色圆圈区分开来..所以它适用于任何分辨率

当您收到新消息时，标签会更新新消息的数量:(见图片）

CLICK HERE - IMAGE

if(total_count == 0){
    this.tabLayout.getTabAt(1).setText(getString(R.string.str_chat));
} else if(total_count > 0) { 
    // if you have more than 0 messages then, reduce to Conver... 
    this.tabLayout.getTabAt(1).setText(getString(R.string.str_chat_reduced));
}

的strings.xml

<string name="str_chat">CONVERSAS</string>
<string name="str_chat_reduced">CONVER...</string>

tab.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:showIn="@layout/app_bar_home"
    tools:context="com.yvone.homer.HomeActivity"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tabLayout"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            style="@style/MyCustomTabLayout" />

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:weightSum="3">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="right|center_vertical"
                android:paddingRight="5dp">

                <com.yvone.homer.customview.CustomFontView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:textAppearance="?android:attr/textAppearance"
                    android:text=""
                    android:id="@+id/txtMatchBadge"
                    android:background="@drawable/bg_white_badge"
                    android:gravity="center"
                    android:textColor="@color/red_dark"
                    android:visibility="invisible" />

            </LinearLayout>

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="right|center_vertical"
                android:paddingRight="5dp">

                <com.yvone.homer.customview.CustomFontView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:textAppearance="?android:attr/textAppearance"
                    android:text=""
                    android:id="@+id/txtChatBadge"
                    android:background="@drawable/bg_white_badge"
                    android:gravity="center"
                    android:textColor="@color/red_dark"
                    android:visibility="invisible" />

            </LinearLayout>

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="right|center_vertical"
                android:paddingRight="5dp"/>
        </LinearLayout>
    </FrameLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>
</LinearLayout>

Answer 1

最适合您的解决方案是为标签提供自定义视图，其中包含TextView和ImageView tabForCustom.setCustomView(R.layout.your_custom_view)。

使用viewPager时，您还可以在SpannableString的覆盖方法getPageTitle中使用PageAdapter class：

        @Override
        public CharSequence getPageTitle(int position) {

            String tabName = "Section " + position;
            Drawable image = getApplicationContext().getResources().getDrawable(android.R.drawable.ic_menu_info_details);
            image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
            SpannableString sb = new SpannableString(tabName + "x");
            ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
            sb.setSpan(imageSpan, tabName.length() - 1, sb.length()-1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            return sb;
}

如果您只需要一个图标 - 请使用setIcon方法：

tabLayout.getTabAt(i).setIcon(android.R.drawable.ic_menu_info_details);

也不要使用其他字符串资源来减少长度，为TextView提供elipsize属性。更多文档here。