Question

我正在尝试使用compile＆＃39; com.android.support设计tablayout中的自定义标签：design：25.3.1＆＃39;在gradle。

我想使用选择器，以便在单击选项卡时，它会根据其状态进行更改。

所以我尝试了下面的失败：

这是我的活动xml：

<ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@color/white"/>

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabGravity="fill"
    style="@style/MyCustomTabLayout"
    />

这是我用于tabLayout的样式：

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
       <item name="tabIndicatorColor">@android:color/transparent</item>
   </style>

隐藏下划线。

这是我家标签的一个选择器：

这是我对每个标签的自定义视图：

<ImageView
    android:id="@+id/iv_imgview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    tools:src="@drawable/home_tab_selector"

    />

<TextView
    android:id="@+id/tv_tab_name"
    android:layout_gravity="center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:text="HOME"
    />

以下是创建tablayout的代码部分：

for (int i = 0; i < NUM_OF_TABS; i++)
           tabLayout.addTab(tabLayout.newTab());

       adapter = new LandingPagerAdapter(getApplicationContext(),getSupportFragmentManager(), tabLayout.getTabCount());

       //Adding adapter to pager
       viewPager.setAdapter(adapter);

       tabLayout.addOnTabSelectedListener(this);
       tabLayout.setupWithViewPager(viewPager);

       // Iterate over all tabs and set the custom view
       for (int i = 0; i < tabLayout.getTabCount(); i++) {
           TabLayout.Tab tab = tabLayout.getTabAt(i);
           tab.setCustomView(adapter.getTabView(i));
       }

       tabLayout.getTabAt(0).select();

最后是负责应用选择器和自定义视图的getTabView方法：

public class LandingPagerAdapter extends FragmentStatePagerAdapter {

    private final Context context;
    //integer to count number of tabs
    int tabCount;
    private Fragment mCurrentFragment;

    private String[] tabTitles = new String[]{"Home", "tab2"};

    // configure tab icons
    int[] imageTabResId = {
            R.drawable.home_tab_selector,
            R.drawable.tab_two_selector,;

    //Constructor to the class
    public LandingPagerAdapter(Context context, FragmentManager fm, int tabCount) {
        super(fm);
        this.context = context;
        this.tabCount = tabCount;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                TabHomeContainerFragment tab1 = new TabHomeContainerFragment();
                return tab1;
            case 1:
                TabTwoContainerFragment tab2 = new TabTwoContainerFragment();; //Todo: these should all be containers
                return tab2;
            default:
                return null;
        }
    }

    //Overriden method getCount to get the number of tabs
    @Override
    public int getCount() {
        return tabCount;
    }

    public Fragment getCurrentFragment() {
        return mCurrentFragment;
    }

    @Override
    public void setPrimaryItem(ViewGroup container, int position, Object object) {
        if (getCurrentFragment() != object) {
            mCurrentFragment = ((Fragment) object);
        }
        super.setPrimaryItem(container, position, object);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitles[position];
    }

    public View getTabView(int position) {
        // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView
        View v = LayoutInflater.from(context).inflate(R.layout.custom_landingpagetab, null);
        TextView tv = (TextView) v.findViewById(R.id.tv_tab_name);
        tv.setText(tabTitles[position]);
        ImageView img = (ImageView) v.findViewById(R.id.iv_imgview);
        img.setImageDrawable(ContextCompat.getDrawable(getApplicationContext(),imageTabResId[position]));
        return v;
    }

}

注意在getTabView中我将图像资源设置为类字段中数组中的选择器。但是在我测试过的api 24设备上没有任何反应。

Answer 1

我使用支持库27.1.1并面临同样的问题。经过一些研究后，我发现必须明确定义 state_selected 。请参阅以下代码：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_chat_disabled" android:state_selected="false"/>
    <item android:drawable="@drawable/ic_chat_enabled" android:state_selected="true"/>
</selector>

android：state_selected =＆＃34; false＆＃34; 是必须的！

Answer 2

我最终放弃了选择器方法，只是从选项卡中获取我的customView。然后我可以改变它的视图元素。我有一组数组用于选中，另一组用于未选中。

然后当切换标签时，我根据标签位置在图像之间切换：

@Override
    public void onTabSelected(TabLayout.Tab tab) {
        viewPager.setCurrentItem(tab.getPosition());
        ImageView iv = (ImageView) tab.getCustomView().findViewById(R.id.iv_imgview);
        TextView tv = (TextView) tab.getCustomView().findViewById(R.id.tv_tab_name);

        iv.setImageDrawable(ContextCompat.getDrawable(this, imageTabResId_selected[tab.getPosition()]));
        tv.setTextColor(ContextCompat.getColor(this, R.color.black));

    }
@Override
public void onTabUnselected(TabLayout.Tab tab) {
    ImageView iv = (ImageView) tab.getCustomView().findViewById(R.id.iv_imgview);
    TextView tv = (TextView) tab.getCustomView().findViewById(R.id.tv_tab_name);

    iv.setImageDrawable(ContextCompat.getDrawable(this, imageTabResId[tab.getPosition()]));
    tv.setTextColor(ContextCompat.getColor(this, R.color.tabs_default_text));

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}

Android - 具有自定义视图标签的tablayout - 无法应用可绘制选择器

2 个答案: