如何使用自定义标签下方的指示器实施自定义标签

Question

当前实施：

要求：

下面是我自定义的_tab xml，我将其扩展到Tablayout中，并且我还需要指标来获取自定义方形框的宽度。我添加了custom_tab.xml布局文件。请让我知道如何实现一个类似的要求。 也添加了tab.xml

Custom_tab.xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_margin="10dp"
app:cardCornerRadius="8dp">

<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="@drawable/round_corners_rectangle"
android:gravity="center_vertical"
android:orientation="vertical">

<ImageView
android:id="@+id/imageView_tabs"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="center"
android:layout_marginTop="-15dp"
android:contentDescription="@string/app_name"
android:src="@drawable/agent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/textView_tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp"
android:text="rooms"
android:textColor="@color/white"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView_tabs" />

<View
android:id="@+id/underLine"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_marginBottom="5dp"
android:background="@drawable/chat_indicator_line"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/textView_tabs" />

</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

Tab.xml：

<LinearLayout
android:id="@+id/linear_tab"
android:layout_width="match_parent"
android:layout_height="90dp"
android:alpha="0.6">

<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@color/black"
android:baselineAligned="false"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
app:tabIndicatorColor="@color/white"
app:tabIndicatorHeight="3dp"
app:tabPaddingEnd="7dp"
app:tabPaddingStart="3dp" />

</LinearLayout>

下面是代码如何以编程方式添加customview：

private void createTabs（）{

   for (int i = 0; i < tabArray.length; i++) {
       View viewCustomTab = 
       LayoutInflater.from(this).inflate(R.layout.custom_tab, null);//get custom view
    viewCustomTab.setBackgroundColor(getResources().getColor(R.color.black));
        ImageView imageViewTab = viewCustomTab.findViewById(R.id.imageView_tabs);
        imageViewTab.setImageResource(tabIcons[i]);
        TextView textViewTab = 
        viewCustomTab.findViewById(R.id.textView_tabs);
        textViewTab.setText(tabArray[i]);
        TabLayout.Tab tab = mTabLayout.getTabAt(i);//get tab via position
        if (tab != null) {
            tab.setCustomView(viewCustomTab);//set custom view
        }
      }
    }