TextView + Tablayout实现顶部菜单栏效果

实现的效果如下图所示:


其中,左侧全部按钮控件为TextView,右侧标签为XTabLayout控件。
1.布局文件

   <android.support.constraint.ConstraintLayout
                android:id="@+id/cl_tablayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintTop_toBottomOf="@+id/tl_game_classfied"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                android:background="@color/statusbar"
                app:layout_scrollFlags="scroll|enterAlways"

                >
                <TextView
                    android:id="@+id/tv_all"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="16sp"
                    android:text="全部"
                    android:textColor="@color/green"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintRight_toLeftOf="@+id/tl_show"
                    android:padding="5dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    />
                <com.androidkun.xtablayout.XTabLayout
                    android:id="@+id/tl_show"
                    android:layout_width="0dp"
                    app:layout_constraintLeft_toRightOf="@+id/tv_all"
                    app:layout_constraintRight_toRightOf="parent"
                    android:layout_height="wrap_content"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:xTabMode="scrollable"
                    app:xTabIndicatorHeight="0dp"
                    app:xTabIndicatorColor="@color/statusbar"
                    app:xTabTextColor="@color/white"
                    app:xTabSelectedTextColor="@color/green"
                    android:textAlignment="center"
                    >

                </com.androidkun.xtablayout.XTabLayout>
            </android.support.constraint.ConstraintLayout>

2.在activity中进行设置

private int cnt = 0;        //防止初始化时将TextView的颜色设置为白色
...
...
tl_show.addOnTabSelectedListener(new XTabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(XTabLayout.Tab tab) {
                tl_show.setTabTextColors(Color.WHITE, Color.parseColor("#54ba3d"));
                if (cnt != 0) {
                    tv_all.setTextColor(Color.WHITE);
                } else {
                    cnt = 1;
                }
            }

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

            }

            @Override
            public void onTabReselected(XTabLayout.Tab tab) {
                tl_show.setTabTextColors(Color.WHITE, Color.parseColor("#54ba3d"));
                if (cnt != 0) {
                    tv_all.setTextColor(Color.WHITE);
                } else {
                    cnt = 1;
                }
            }


        });
        tv_all.setTextColor(Color.parseColor("#54ba3d"));
...

    tl_show.setTabTextColors(Color.WHITE, Color.WHITE);
    tv_all.setOnClickListener(v -> {
        tl_show.getTabAt(0).select();
        tv_all.setTextColor(Color.parseColor("#54ba3d"));
        tl_show.setTabTextColors(Color.WHITE, Color.WHITE);
    });
posted @ 2019-06-13 19:24  Ricardoldc  阅读(415)  评论(0编辑  收藏  举报