美文网首页
使用TabLayout 实现 bottom Tab布局

使用TabLayout 实现 bottom Tab布局

作者: tigg | 来源:发表于2017-03-13 16:03 被阅读84次
    public class MainActy extends BaseActivity {
    
        @BindView(R.id.pager)
        ViewPager pager;
    
        MyPageAdapter pAdapter;
    
        @BindView(R.id.mTabLayout)
        TabLayout mTabLayout;
    
        List<Fragment> lists = new ArrayList<Fragment>();
    
        String[] mTitles = {"首页", "通讯录", "统计", "我"};
    
        @BindColor(R.color.home_tab_text)
        int home_tab_text;
    
        @BindColor(R.color.colorPrimaryDark)
        int colorPrimaryDark;
    
        int[] draWbles = {R.drawable.home_sy, R.drawable.home_txl, R.drawable.home_tj, R.drawable.home_me};
        int[] draWbleSelects = {R.drawable.home_sy_select,
                R.drawable.home_txl, R.drawable.home_tj, R.drawable.home_me_select};
    
        @Override
        public int initResource() {
            return R.layout.acty_main;
        }
    
    
        @Override
        protected void initView() {
    
            lists.add(new HomeFragment());
            lists.add(new ContactFragment());
            lists.add(new ProfileFragment());
            lists.add(new MeFragment());
    
            pAdapter = new MyPageAdapter(getSupportFragmentManager(), lists, mTitles);
            pager.setAdapter(pAdapter);
            pager.setOffscreenPageLimit(4);//保存四个页面
    
            initBottomTab();
    
            pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
                }
    
                @Override
                public void onPageSelected(int position) {
                    resetBottomTab(position);
                }
    
                @Override
                public void onPageScrollStateChanged(int state) {
    
                }
            });
    
    
            mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    int position = tab.getPosition();
                    resetBottomTab(position);
                    if (pager.getCurrentItem() != position) {
                        pager.setCurrentItem(position);
                    }
                }
    
                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
    
                }
    
                @Override
                public void onTabReselected(TabLayout.Tab tab) {
    
                }
            });
            resetBottomTab(0);
        }
    
        /**
         * 初始化tab
         */
        private void initBottomTab() {
            int i = 0;
            for (String str : mTitles) {
                View view = LayoutInflater.from(this).inflate(R.layout.icon_layout, null);
                TextView tv = (TextView) view.findViewById(R.id.title);
                ImageView imageView = (ImageView) view.findViewById(R.id.img);
                tv.setText(str);
                tv.setTextColor(home_tab_text);
                imageView.setImageResource(draWbles[i]);
                mTabLayout.addTab(mTabLayout.newTab().setCustomView(view));
                i++;
            }
        }
    
        /**
         * 调整tab
         */
        private void resetBottomTab(int positon) {
    
            for (int i = 0; i < mTabLayout.getTabCount(); i++) {
                TabLayout.Tab tabIndex = mTabLayout.getTabAt(i);
                View view = tabIndex.getCustomView();
                TextView tv = (TextView) view.findViewById(R.id.title);
                ImageView imageView = (ImageView) view.findViewById(R.id.img);
                tv.setTextColor(home_tab_text);
                imageView.setImageResource(draWbles[i]);
            }
    
            TabLayout.Tab tab = mTabLayout.getTabAt(positon);
            View view = tab.getCustomView();
            TextView tv = (TextView) view.findViewById(R.id.title);
            ImageView imageView = (ImageView) view.findViewById(R.id.img);
            tv.setTextColor(colorPrimaryDark);
            imageView.setImageResource(draWbleSelects[position]);
        }
    

    布局文件 icon_layout.xml

    <?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:gravity="center"
        android:orientation="vertical">
    
     <ImageView
            android:id="@+id/img"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/home_sy" />
    
      <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="1dp"
            android:text="test"
            android:textColor="@color/home_tab_text"
            android:textSize="11dp" />
    </LinearLayout>
    

    布局文件 acty_main.xml

     <android.support.design.widget.TabLayout
                android:id="@+id/mTabLayout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:tabBackground="@color/white"
                app:tabIndicatorHeight="0dp"
                app:tabSelectedTextColor="@color/colorPrimaryDark"
                app:tabTextColor="@color/home_tab_text" />
    

    相关文章

      网友评论

          本文标题:使用TabLayout 实现 bottom Tab布局

          本文链接:https://www.haomeiwen.com/subject/fbtqnttx.html