TabLayout 遇到那些坑

待我称王封你为后i 2022-09-24 10:21 370阅读 0赞

官方参考链接: https://developer.android.com/reference/android/support/design/widget/TabLayout.html?utm_campaign=io15&utm_source=dac&utm_medium=blog

稀土掘金:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0731/3247.html

  • 如何使用 :注意事项

    <?xml version=”1.0” encoding=”utf-8”?>

效果图:

![Image 1][]

一些坑 和 ViewPager 一起使用需要注意

  • 我在和ViewPager一起使用时,遇到了一些坑,

按照官方给出的示例,我写出来的代码是这样的

布局代码

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" xmlns:app="http://schemas.android.com/apk/res-auto">
  3.     <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorColor="@color/colorAccent" app:tabSelectedTextColor="@color/colorAccent" />
  4.     <android.support.v4.view.ViewPager android:id="@+id/vp_pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" />
  5. </LinearLayout>

java代码

  1. public class MainActivity extends AppCompatActivity { 
  3.     @Override
  4.     protected void onCreate(Bundle savedInstanceState) {
  5.         super.onCreate(savedInstanceState);
  6.         setContentView(R.layout.activity_main);
  8.         ViewPager viewPager = (ViewPager) findViewById(R.id.vp_pager);
  9.         MyAdapter myAdapter = new MyAdapter();
  10.         viewPager.setAdapter(myAdapter);
  12.         TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
  13.         tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
  14.         tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
  15.         tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
  16.         tabLayout.addTab(tabLayout.newTab().setText("Tab 4"));
  17.         tabLayout.setupWithViewPager(viewPager);
  22.     }
  24.     class MyAdapter extends PagerAdapter {
  26.         @Override
  27.         public int getCount() {
  28.             return 4;
  29.         }
  31.         @Override
  32.         public boolean isViewFromObject(View view, Object object) {
  33.             return view == object;
  34.         }
  36.         @Override
  37.         public Object instantiateItem(ViewGroup container, int position) {
  38.             ImageView imageView = new ImageView(MainActivity.this);
  39.             imageView.setBackgroundResource(R.drawable.ic_launcher);
  40.             container.addView(imageView);
  41.             return imageView;
  42.         }
  44.         @Override
  45.         public void destroyItem(ViewGroup container, int position, Object object) {
  46.             container.removeView((View) object);
  47.         }
  48.     }
  49. }

然而,看到运行结果的我一脸懵逼.

![Image 1][]这里写图片描述

踏马达我的字去哪了,我首先想到的就是,是不是ViewPager布局太高了,把Tab盖住了,然而减少了的ViewPager的高度还是不行,
是不是颜色不对。。。
是不是字号不对…

然后,我又尝试着注释掉了这行代码

  1. tabLayout.setupWithViewPager(viewPager);

![Image 1][]
这里写图片描述

虽然Tab和 ViewPagre 失去了关联,但是最起码按我的想法展示出来了.

现在已经找到了罪魁祸首,就是 tabLayout.setupWithViewPager(viewPager); 搞的鬼,然后我点进去查看一下源码,

  1. /** * The one-stop shop for setting up this {@link TabLayout} with a {@link ViewPager}. * * <p>This method will link the given ViewPager and this TabLayout together so that any * changes in one are automatically reflected in the other. This includes adapter changes, * scroll state changes, and clicks. The tabs displayed in this layout will be populated * from the ViewPager adapter's page titles.</p> * * <p>After this method is called, you will not need this method again unless you want * to change the linked ViewPager.</p> * * <p>If the given ViewPager is non-null, it needs to already have a * {@link PagerAdapter} set.</p> * * @param viewPager The ViewPager to link, or {@code null} to clear any previous link. */
  2.     public void setupWithViewPager(@Nullable final ViewPager viewPager) {
  3.         if (mViewPager != null && mPageChangeListener != null) {
  4.             // If we've already been setup with a ViewPager, remove us from it
  5.             mViewPager.removeOnPageChangeListener(mPageChangeListener);
  6.         }
  8.         if (viewPager != null) {
  9.             final PagerAdapter adapter = viewPager.getAdapter();
  10.             if (adapter == null) {
  11.                 throw new IllegalArgumentException("ViewPager does not have a PagerAdapter set");
  12.             }
  14.             mViewPager = viewPager;
  16.             // Add our custom OnPageChangeListener to the ViewPager
  17.             if (mPageChangeListener == null) {
  18.                 mPageChangeListener = new TabLayoutOnPageChangeListener(this);
  19.             }
  20.             mPageChangeListener.reset();
  21.             viewPager.addOnPageChangeListener(mPageChangeListener);
  23.             // Now we'll add a tab selected listener to set ViewPager's current item
  24.             setOnTabSelectedListener(new ViewPagerOnTabSelectedListener(viewPager));
  26.             // Now we'll populate ourselves from the pager adapter
  27.             setPagerAdapter(adapter, true);
  28.         } else {
  29.             // We've been given a null ViewPager so we need to clear out the internal state,
  30.             // listeners and observers
  31.             mViewPager = null;
  32.             setOnTabSelectedListener(null);
  33.             setPagerAdapter(null, true);
  34.         }
  35.     }

貌似没神魔问题,再看看 setPagerAdapter

  1. private void setPagerAdapter(@Nullable final PagerAdapter adapter, final boolean addObserver) {
  2.         if (mPagerAdapter != null && mPagerAdapterObserver != null) {
  3.             // If we already have a PagerAdapter, unregister our observer
  4.             mPagerAdapter.unregisterDataSetObserver(mPagerAdapterObserver);
  5.         }
  7.         mPagerAdapter = adapter;
  9.         if (addObserver && adapter != null) {
  10.             // Register our observer on the new adapter
  11.             if (mPagerAdapterObserver == null) {
  12.                 mPagerAdapterObserver = new PagerAdapterObserver();
  13.             }
  14.             adapter.registerDataSetObserver(mPagerAdapterObserver);
  15.         }
  17.         // Finally make sure we reflect the new adapter
  18.         populateFromPagerAdapter();
  19.     }

貌似也没什么问题啊,此时我万念俱灰,又抱着一丝希望点开看看 populateFromPagerAdapter();

  1. private void populateFromPagerAdapter() {
  2.         removeAllTabs();
  4.         if (mPagerAdapter != null) {
  5.             final int adapterCount = mPagerAdapter.getCount();
  6.             for (int i = 0; i < adapterCount; i++) {
  7.                 addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
  8.             }
  10.             // Make sure we reflect the currently set ViewPager item
  11.             if (mViewPager != null && adapterCount > 0) {
  12.                 final int curItem = mViewPager.getCurrentItem();
  13.                 if (curItem != getSelectedTabPosition() && curItem < getTabCount()) {
  14.                     selectTab(getTabAt(curItem));
  15.                 }
  16.             }
  17.         } else {
  18.             removeAllTabs();
  19.         }
  20.     }

握草,

  1. removeAllTabs();

就只这行代码,竟然在这儿 remove 掉了我之前设置的所有 Tab ,我真是想日了个狗啊,这在官方文档上没一点提示啊.

然后我又修改了一下代码

  1. public class MainActivity extends AppCompatActivity { 
  3.     @Override
  4.     protected void onCreate(Bundle savedInstanceState) {
  5.         super.onCreate(savedInstanceState);
  6.         setContentView(R.layout.activity_main);
  8.         ViewPager viewPager = (ViewPager) findViewById(R.id.vp_pager);
  9.         MyAdapter myAdapter = new MyAdapter();
  10.         viewPager.setAdapter(myAdapter);
  13.         TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
  15.         tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
  16.         tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
  17.         tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
  18.         tabLayout.addTab(tabLayout.newTab().setText("Tab 4"));
  21.         tabLayout.setupWithViewPager(viewPager);
  23.         tabLayout.getTabAt(0).setText("Tab1");
  24.         tabLayout.getTabAt(1).setText("Tab2");
  25.         tabLayout.getTabAt(2).setText("Tab3");
  26.         tabLayout.getTabAt(3).setText("Tab4");
  28.     }
  30.     class MyAdapter extends PagerAdapter {
  32.         @Override
  33.         public int getCount() {
  34.             return 4;
  35.         }
  37.         @Override
  38.         public boolean isViewFromObject(View view, Object object) {
  39.             return view == object;
  40.         }
  42.         @Override
  43.         public Object instantiateItem(ViewGroup container, int position) {
  44.             ImageView imageView = new ImageView(MainActivity.this);
  45.             imageView.setBackgroundResource(R.drawable.ic_launcher);
  46.             container.addView(imageView);
  47.             return imageView;
  48.         }
  49.         @Override
  50.         public void destroyItem(ViewGroup container, int position, Object object) {
  51.             container.removeView((View) object);
  52.         }
  53.     }
  54. }

![Image 1][]
这里写图片描述

真感动人!!!!!!!!终于得到我想要的结果了,

看一眼表,23:44 了,我以为官方文档会和我一样贴心,我真是太天真了,

合合合合合合合合!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[Image 1]:

发表评论

表情：
评论列表 （有 0 条评论，370人围观）

还没有评论，来说两句吧...

相关阅读

    相关 配环境遇到的那些坑

    大大小小也配过好几次环境了 我发现每次配环境就那些坑，有时候我自己都搞不清楚，但是做过了一些尝试之后就莫名其妙成功了。。。。 1.路径不能有中文 其实有的是可以有中

    小咪咪小咪咪/ 0 赞/ 391 阅读