android TAB切换

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

类似这样的布局

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

1、Xml的简单代码

      <RelativeLayoutandroid:layout_width="match_parent"android:layout_height="49dp"android:background="@drawable/bg_deal_channel_onchain"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_centerVertical="true"android:orientation="horizontal"><Viewandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1" /><Viewandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1" /></LinearLayout><LinearLayoutandroid: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" /><LinearLayoutandroid: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" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_centerVertical="true"android:orientation="horizontal"><LinearLayoutandroid: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"><TextViewandroid: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><LinearLayoutandroid: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"><TextViewandroid: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 version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="@color/white" /><cornersandroid:topRightRadius="20dp"android:topLeftRadius="20dp" /><strokeandroid:width="1dp"android:color="@color/white" />
</shape>

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() {@Overridepublic void onAnimationStart(Animation animation) {}@Overridepublic 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);}@Overridepublic void onAnimationRepeat(Animation animation) {}});bgChannelSelected.startAnimation(fadeOut);AnimatorUtil.animateButtonPress(llChainMode);AnimatorUtil.animateTextTransition(this,tvChannelMode, tvChainMode, false);currentMode = 2;}

点击第一个按钮

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() {@Overridepublic void onAnimationStart(Animation animation) {}@Overridepublic 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);}@Overridepublic void onAnimationRepeat(Animation animation) {}});bgChainSelected.startAnimation(fadeOut);AnimatorUtil.animateButtonPress(llChainMode);AnimatorUtil.animateTextTransition(this,tvChannelMode, tvChainMode, true);currentMode = 1;}

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

                                                                                      -END