自定义TabLayout中的选定选项卡

Question

这就是我需要的

这就是我的成就（忽略尺寸和背景颜色）

我的代码：

const osmosis = require('osmosis');
const fs = require('fs');
const writeStream = fs.createWriteStream('data.html');

osmosis
  .get('https://www.myurl.com/glossary')
  .follow('@href') // browse each href in the url
  .set({
    'term' : 'h1',
    'definition' : '.glossary_short_definition'
  })
  .data((res) => {
    // do something with the data result
    writeStream.write(`<h1>${res.term}</h1> <p>${res.definition}</p> \n`);
  })
  .done((x) => console.log('finished!'))
  .log(console.log)
  .error(console.log)
  .debug(console.log);

  

tab_selector.xml

<android.support.design.widget.TabLayout
                    android:id="@+id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="24dp"
                    app:tabMode="fixed"
                    app:tabBackground="@drawable/tab_selector"
                    app:tabIndicatorHeight="0dp"
                    app:tabTextAppearance="?android:textAppearanceMedium"
                    app:tabSelectedTextColor="#6e00b5"/>

  

selected_dot.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/selected_dot"
        android:state_selected="true"/>

</selector>

我面临的唯一问题是在文本下方放置点。

Answer 1

简单解决方案

使用app:tabIndicator代替app:tabBackground

<TabLayout
    app:tabIndicator="@drawable/tab_dot"
    app:tabIndicatorHeight="8dp">

请注意，至少要使用{@ {1}}分页思维（app:tabIndicatorHeight）的两倍，才能使其完全可见。

Answer 2

我不这样认为，选项卡选择器可以在出现布局问题时起作用。您需要以自己的方式实施

您需要设置 TabSlected监听器，然后添加以下代码，

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){
    @Override
    public void onTabSelected(TabLayout.Tab tab){
    int position = tab.getPosition();
    LinearLayout view = (LinearLayout) tabLayout.getChildAt(0);      
    TextView textView = (TextView) view.getChildAt(position);
//Below line will change selected tab textview title only.
    textView.setCompoundDrawablesWithIntrinsicBounds(null,null,null,objContext.getResources().getDrawable(R.drawable.selected_dot))
    }
});