FrameLayout实现Tab页按钮重叠效果

一.使用setElevation

使用setElevation的缺点很明确，需要5.0以上。设置view的高，并不是hight。而是Z轴高度

代码

布局.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    android:id="@+id/fl"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.liu.viewtest.MainActivity"
    android:background="#333333">


    <Button
        android:id="@+id/btn1"
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:text="111"
        android:background="@mipmap/gray"
        />

    <Button
        android:id="@+id/btn2"
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:text="222"
        android:layout_marginLeft="120dp"
        android:background="@mipmap/gray"
        />
    <Button
        android:id="@+id/btn3"
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:text="333"
        android:layout_marginLeft="240dp"
        android:background="@mipmap/gray"/>
</FrameLayout>

MainActivityt.

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btn1,btn2,btn3;
    private FrameLayout fl;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fl = (FrameLayout) findViewById(R.id.fl);

        btn1 = (Button) findViewById(R.id.btn1);
        btn2 = (Button) findViewById(R.id.btn2);
        btn3 = (Button) findViewById(R.id.btn3);

        btn1.setOnClickListener(this);
        btn2.setOnClickListener(this);
        btn3.setOnClickListener(this);

    }


    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    public void onClick(View v) {

        switch (v.getId()) {
            case R.id.btn1:


                btn1.setElevation(2.0f);
                btn2.setElevation(1.0f);
                btn3.setElevation(0);

                break;
            case R.id.btn2:


                btn1.setElevation(1.0f);
                btn2.setElevation(2.0f);
                btn3.setElevation(0);
                break;
            case R.id.btn3:


                btn1.setElevation(0);
                btn2.setElevation(1.0f);
                btn3.setElevation(2.0f);
                break;
        }
    }
}

二.使用setAlpha

使用setAlpha时就没有版本限制，具体思路是放置两层按钮，设置上层按钮的透明度来达到点击切换的效果。

代码

布局.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    android:id="@+id/fl"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.liu.viewtest.MainActivity"
    android:background="#333333">

    <Button
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:text="111"
        android:background="@mipmap/gray"
        />
    <Button
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:text="222"
        android:layout_marginLeft="120dp"
        android:background="@mipmap/gray"/>

    <Button
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:text="333"
        android:layout_marginLeft="240dp"
        android:background="@mipmap/gray"/>

    <Button
        android:id="@+id/btn1"
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:text="111"
        android:background="@mipmap/white"
        />

    <Button
        android:id="@+id/btn2"
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:text="222"
        android:layout_marginLeft="120dp"
        android:background="@mipmap/white"
        />
    <Button
        android:id="@+id/btn3"
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:text="333"
        android:layout_marginLeft="240dp"
        android:background="@mipmap/white"/>
</FrameLayout>

MainActivityt.

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btn1,btn2,btn3;
    private FrameLayout fl;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fl = (FrameLayout) findViewById(R.id.fl);

        btn1 = (Button) findViewById(R.id.btn1);
        btn2 = (Button) findViewById(R.id.btn2);
        btn3 = (Button) findViewById(R.id.btn3);

        btn1.setOnClickListener(this);
        btn2.setOnClickListener(this);
        btn3.setOnClickListener(this);

        btn1.setAlpha(1);
        btn2.setAlpha(0);
        btn3.setAlpha(0);

    }


    @Override
    public void onClick(View v) {

        switch (v.getId()) {
            case R.id.btn1:

                btn1.setAlpha(1);
                btn2.setAlpha(0);
                btn3.setAlpha(0);
                break;
            case R.id.btn2:

                btn1.setAlpha(0);
                btn2.setAlpha(1);
                btn3.setAlpha(0);
                break;
            case R.id.btn3:

                btn1.setAlpha(0);
                btn2.setAlpha(0);
                btn3.setAlpha(1);
                break;
        }
    }
}