美文网首页
使用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