Tablayout with Custom view Broken on 23.4.0 design lib

问题

i am setting tablayout to my viewpager . but when i use notifyDataSetChanged then it removing my customview and showing default title view my code

 ViewPager viewPager = findView(R.id.view_pager);
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(), getResources(), getFragments());
    viewPager.setAdapter(adapter);

    tabs.setupWithViewPager(viewPager);
    for (int i = 0; i < tabs.getTabCount(); i++) {
        TabLayout.Tab tab = tabs.getTabAt(i);
        tab.setCustomView(getTabView(i));

    }
    t.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            adapter.notifyDataSetChanged();
        }
    });


   public View getTabView(int position) {
    View v = LayoutInflater.from(this).inflate(R.layout.pager_tab, null);
    RelativeLayout linearLayout = (RelativeLayout) v.findViewById(R.id.view);



    return v;
}

so its working properly but when i call adapter.notifyDataSetChanged(); then my tablayout not showing customview which i have already added prev . it only showing default title .. this same code is working if i use compile "com.android.support:design:23.1.1"

but if i change this to newer version this is not working please can any one help me i trying this but havnt got ans or any other alternative lib or method where i can add customView in tab view

回答1:

This might be a bug! and I'm still facing this on latest 25.2.0 support SDK.

By default, tablayout is assigned with auto refresh when viewpager is updated. This can be fixed (Workaround) by turning off auto refresh like in below code,

viewPager = (ViewPager) findViewById(R.id.viewpager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);

 setupViewPager(viewPager);
tabLayout.setupWithViewPager(viewPager,false); // Do like this to disable auto refresh of tabs

回答2:

I think i found a kind of solution : Listen to layout change, and if customView is null, set it again :

viewPager.addOnLayoutChangeListener(new ViewPager.OnLayoutChangeListener() {
  @Override
  public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
      for (int i = 0; i < tabLayout.getTabCount(); i++) {
          if (tabLayout.getTabAt(i).getCustomView() == null) {
              tabLayout.getTabAt(i).setCustomView(tabs[i]);
          }
      }
  }
}

回答3:

In order to set the custom view when the tabs are created or recreated, we need a callback when that happens.
The class TabLayout does not allow a listener to be called in this case but it exposes the method TabLayout.newTab().

Create a class that extends from TabLayout and overwrite newTab() as follows.

public class TabLayoutWithCustomTabView extends TabLayout {
    public TabLayoutWithCustomTabView(Context context) {
        super(context);
    }

    public TabLayoutWithCustomTabView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public TabLayoutWithCustomTabView(Context context, AttributeSet attrs,
                                      int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @NonNull
    @Override
    public Tab newTab() {
        final Tab tab = super.newTab();
        tab.setCustomView(inflate(getContext(), R.layout.custom_layout, null));
        return tab;
    }
}

In your layout, use the the new class where you had TabLayout.

<com.example.TabLayoutWithCustomTabView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ... />

回答4:

I was facing the same issue, and I fix it by setting TabLayout.setupWithViewPager(viewPager,false) when setup (I'm currently using the version 24.1.0).

For more detailed, honestly I just take a look at the TabLayout class and realize that the call that removed tabs came from PagerAdapterObserver. That one is set when autoRefresh is true witch is the default value of TabLayout.setupWithViewPager(ViewPager viewPager).

Then a quick look on the documentation say :

If autoRefresh is true, any changes in the PagerAdapter will trigger this layout to re-populate itself from the adapter's titles.

So either the documentation should be updated saying that autoRefresh should be false for custom view or they failed to take care of custom views.

https://developer.android.com/reference/android/support/design/widget/TabLayout.html#setupWithViewPager(android.support.v4.view.ViewPager, boolean)

回答5:

The height of the tabs is fixed to 48dp. The material guidelines uses 48dp when you have text only but if you want an icon the height is 72dp (Tab guidelines). So to solve it I subclassed the TabLayout and overriden onMeasure method in this way:

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); super.setMeasuredDimension(widthMeasureSpec, MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec), MeasureSpec.EXACTLY)); }

And you need to set height of the tab also in xml.

android:layout_height="72dp"

So that it will work fine.

来源：https://stackoverflow.com/questions/37223931/tablayout-with-custom-view-broken-on-23-4-0-design-lib

标签

android

android-design-library

android-tablayout