ViewPager+TabLayout小札记

2019-02-23  本文已影响0人  十指相扣的瞬间

直接上正题:
要使用TabLayout控件,需要在build.gradle中导包:

 implementation 'com.android.support:design:28.0.0'

布局

布局有两种,区别是是否需要添加代码:

mTabLayout.setupWithViewPager(mViewPager);
布局一
image.png

如上图所示,TabLayout和ViewPager按线性排布。需要添加代码:mTabLayout.setupWithViewPager(mViewPager);

布局二
image.png

如上图所示,ViewPager内包含TabLayout,则不需要添加上述代码。

注意:TabLayout在上,ViewPager在下的情况,则布局一和二没有区别,如果要灵活调整TabLayout的位置(比如在ViewPager下方),请选择布局一。

TabLayout属性

Tab对齐方式
[受到app:tabMode影响,差别主要在app:tabMode=fixed时]:(为center且tabMode=fixed,Tab会在水平方向上,集中在屏幕中央;为fill且tabMode=fixed,Tab会在水平方向上,平分屏幕)
app:tabGravity="center"
Tab指示器颜色:
app:tabIndicatorColor="@android:color/holo_blue_bright"
Tab指示器高度:
app:tabIndicatorHeight="1dp"
Tab指示器是否填充宽度:(为false,指示器与文字宽度相同;为true,指示器与单个Tab控件宽度相同)
app:tabIndicatorFullWidth="false"
Tab模式:(为scrollable,可左右滑动;为fixed,固定的)
app:tabMode="scrollable"
Tab文字颜色:
app:tabTextColor="@android:color/black"
Tab选中的文字颜色:
app:tabSelectedTextColor="@android:color/holo_blue_bright"

代码

简单示例:

private Context mContext;
private List<View> mListView = new ArrayList<>();
private String[] str = {"首页", "视频", "我的"};
private TabLayout mTabLayout;
private ViewPager mVP;
protected void initView() {
        mContext = getActivity();

        mListView.add(LayoutInflater.from(mContext).inflate(R.layout.view1, null));
        mListView.add(LayoutInflater.from(mContext).inflate(R.layout.view2, null));
        mListView.add(LayoutInflater.from(mContext).inflate(R.layout.view3, null));

        mTabLayout = ((TabLayout) mRootView.findViewById(R.id.video_tab));
        mVP = ((ViewPager) mRootView.findViewById(R.id.video_vp));

        mVP.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return mListView.size();
            }

            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
                return view == o;
            }

            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                View view = mListView.get(position);
                container.addView(view);
                return view;
            }

            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
                container.removeView(((View) object));
            }

            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {//添加标题Tab
                return str[position];
            }
        });
        initEvent();
    }
    private void initEvent() {
        //添加标签选中监听
        mTabLayout.addOnTabSelectedListener(listener);
    }

    private TabLayout.OnTabSelectedListener listener = new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {

        }

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

        }

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

        }
    };

更多的注意事项和用法,以后会继续更新。

上一篇下一篇

猜你喜欢

热点阅读