android TAB切换 - 技术栈

有一些场景需要左右两个按钮tab实现切换的布局，如图：

类似这样的布局

这种只是在xml中实现的简单布局，没有切换时的动画效果，

1、Xml的简单代码

XML 复制代码

      <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="49dp"
                android:background="@drawable/bg_deal_channel_onchain">


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerVertical="true"

                    android:orientation="horizontal">

                    <View
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1" />

                    <View
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1" />
                </LinearLayout>


                <LinearLayout
                    android:id="@+id/bg_channel_selected"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerVertical="true"
                    android:background="@mipmap/bg_left"
                    android:orientation="horizontal"
                    android:visibility="visible" />


                <LinearLayout
                    android:id="@+id/bg_chain_selected"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerVertical="true"
                    android:background="@mipmap/bg_right"
                    android:orientation="horizontal"
                    android:visibility="gone" />


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerVertical="true"

                    android:orientation="horizontal">


                    <LinearLayout
                        android:id="@+id/ll_channel_mode"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:background="@android:color/transparent"
                        android:gravity="center"
                        android:onClick="onModeSwitchClick">

                        <TextView
                            android:id="@+id/tv_channel_mode"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="通道"
                            android:textColor="@color/white"
                            android:textSize="15sp"
                            android:textStyle="bold" />
                    </LinearLayout>


                    <LinearLayout
                        android:id="@+id/ll_chain_mode"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:background="@android:color/transparent"
                        android:gravity="center"
                        android:onClick="onModeSwitchClick">

                        <TextView
                            android:id="@+id/tv_chain_mode"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="链上"
                            android:textColor="@color/black"
                            android:textSize="15sp"
                            android:textStyle="bold" />
                    </LinearLayout>

                </LinearLayout>

            </RelativeLayout>

资源文件bg_deal_channel_onchain

XML 复制代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <corners
        android:topRightRadius="20dp"
        android:topLeftRadius="20dp" />
    <stroke
        android:width="1dp"
        android:color="@color/white" />
</shape>

java代码

点击第二个按钮

java 复制代码

public void switchToChainMode() {
        tab_onchain.setVisibility(View.VISIBLE);

        if (currentMode == 2) return;

        AlphaAnimation fadeOut = new AlphaAnimation(1.0f, 0.0f);
        fadeOut.setDuration(150);
        fadeOut.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {}

            @Override
            public void onAnimationEnd(Animation animation) {
                bgChannelSelected.setVisibility(View.GONE);
                bgChainSelected.setVisibility(View.VISIBLE);
                AlphaAnimation fadeIn = new AlphaAnimation(0.0f, 1.0f);
                fadeIn.setDuration(150);
                bgChainSelected.startAnimation(fadeIn);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {}
        });
        bgChannelSelected.startAnimation(fadeOut);
        AnimatorUtil.animateButtonPress(llChainMode);
        AnimatorUtil.animateTextTransition(this,tvChannelMode, tvChainMode, false);

        currentMode = 2;
    }

点击第一个按钮

java 复制代码

public void switchToChannelMode() {
     
        tab_onchain.setVisibility(View.GONE);
        if (currentMode == 1) return;

        AlphaAnimation fadeOut = new AlphaAnimation(1.0f, 0.0f);
        fadeOut.setDuration(150);
        fadeOut.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {}

            @Override
            public void onAnimationEnd(Animation animation) {
                bgChainSelected.setVisibility(View.GONE);
                bgChannelSelected.setVisibility(View.VISIBLE);
                AlphaAnimation fadeIn = new AlphaAnimation(0.0f, 1.0f);
                fadeIn.setDuration(150);
                bgChannelSelected.startAnimation(fadeIn);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {}
        });
        bgChainSelected.startAnimation(fadeOut);
        AnimatorUtil.animateButtonPress(llChainMode);
        AnimatorUtil.animateTextTransition(this,tvChannelMode, tvChainMode, true);

        currentMode = 1;
    }

2、其中动画可根据具体需求实现。

-END