TabLayout 遇到那些坑

官方参考链接: 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"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto">    <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"        ><android.support.design.widget.TabItem    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="android"    /><android.support.design.widget.TabItem    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="java"    /><android.support.design.widget.TabItem    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="javascript"    /><android.support.design.widget.TabItem    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:icon="@drawable/ic_launcher"    />    android.support.design.widget.TabLayout>RelativeLayout>

效果图:

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

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

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

布局代码

<?xml version="1.0" encoding="utf-8"?><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">    <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"        />    <android.support.v4.view.ViewPager        android:id="@+id/vp_pager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        />LinearLayout>

java代码

public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ViewPager viewPager = (ViewPager) findViewById(R.id.vp_pager);        MyAdapter myAdapter = new MyAdapter();        viewPager.setAdapter(myAdapter);        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);        tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));        tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));        tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));        tabLayout.addTab(tabLayout.newTab().setText("Tab 4"));        tabLayout.setupWithViewPager(viewPager);    }    class MyAdapter extends PagerAdapter {        @Override        public int getCount() {            return 4;        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view == object;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            ImageView imageView = new ImageView(MainActivity.this);            imageView.setBackgroundResource(R.drawable.ic_launcher);            container.addView(imageView);            return imageView;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView((View) object);        }    }}

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

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

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

tabLayout.setupWithViewPager(viewPager);

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

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

 /**     * The one-stop shop for setting up this {@link TabLayout} with a {@link ViewPager}.     *     * 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.
     *     * After this method is called, you will not need this method again unless you want     * to change the linked ViewPager.
     *     * If the given ViewPager is non-null, it needs to already have a     * {@link PagerAdapter} set.
     *     * @param viewPager The ViewPager to link, or {@code null} to clear any previous link.     */    public void setupWithViewPager(@Nullable final ViewPager viewPager) {        if (mViewPager != null && mPageChangeListener != null) {            // If we've already been setup with a ViewPager, remove us from it            mViewPager.removeOnPageChangeListener(mPageChangeListener);        }        if (viewPager != null) {            final PagerAdapter adapter = viewPager.getAdapter();            if (adapter == null) {                throw new IllegalArgumentException("ViewPager does not have a PagerAdapter set");            }            mViewPager = viewPager;            // Add our custom OnPageChangeListener to the ViewPager            if (mPageChangeListener == null) {                mPageChangeListener = new TabLayoutOnPageChangeListener(this);            }            mPageChangeListener.reset();            viewPager.addOnPageChangeListener(mPageChangeListener);            // Now we'll add a tab selected listener to set ViewPager's current item            setOnTabSelectedListener(new ViewPagerOnTabSelectedListener(viewPager));            // Now we'll populate ourselves from the pager adapter            setPagerAdapter(adapter, true);        } else {            // We've been given a null ViewPager so we need to clear out the internal state,            // listeners and observers            mViewPager = null;            setOnTabSelectedListener(null);            setPagerAdapter(null, true);        }    }

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

private void setPagerAdapter(@Nullable final PagerAdapter adapter, final boolean addObserver) {        if (mPagerAdapter != null && mPagerAdapterObserver != null) {            // If we already have a PagerAdapter, unregister our observer            mPagerAdapter.unregisterDataSetObserver(mPagerAdapterObserver);        }        mPagerAdapter = adapter;        if (addObserver && adapter != null) {            // Register our observer on the new adapter            if (mPagerAdapterObserver == null) {                mPagerAdapterObserver = new PagerAdapterObserver();            }            adapter.registerDataSetObserver(mPagerAdapterObserver);        }        // Finally make sure we reflect the new adapter        populateFromPagerAdapter();    }

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

 private void populateFromPagerAdapter() {        removeAllTabs();        if (mPagerAdapter != null) {            final int adapterCount = mPagerAdapter.getCount();            for (int i = 0; i < adapterCount; i++) {                addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);            }            // Make sure we reflect the currently set ViewPager item            if (mViewPager != null && adapterCount > 0) {                final int curItem = mViewPager.getCurrentItem();                if (curItem != getSelectedTabPosition() && curItem < getTabCount()) {                    selectTab(getTabAt(curItem));                }            }        } else {            removeAllTabs();        }    }

握草,

 removeAllTabs();

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

然后我又修改了一下代码

public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ViewPager viewPager = (ViewPager) findViewById(R.id.vp_pager);        MyAdapter myAdapter = new MyAdapter();        viewPager.setAdapter(myAdapter);        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);        tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));        tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));        tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));        tabLayout.addTab(tabLayout.newTab().setText("Tab 4"));        tabLayout.setupWithViewPager(viewPager);        tabLayout.getTabAt(0).setText("Tab1");        tabLayout.getTabAt(1).setText("Tab2");        tabLayout.getTabAt(2).setText("Tab3");        tabLayout.getTabAt(3).setText("Tab4");    }    class MyAdapter extends PagerAdapter {        @Override        public int getCount() {            return 4;        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view == object;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            ImageView imageView = new ImageView(MainActivity.this);            imageView.setBackgroundResource(R.drawable.ic_launcher);            container.addView(imageView);            return imageView;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView((View) object);        }    }}

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

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

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

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

更多相关文章

随机推荐

TabLayout 遇到那些坑

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

更多相关文章

随机推荐

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