Android实现chrome浏览器的Tab样式

网上搜了好多种Tab切换的样式，就是没找到类似浏览器那种折叠的样式。于是，我就自己写了一个比较简单的实现！效果图如下：

首先，让朋友帮忙做了两张图

         

开始写代码了！

R.layout.activity_main布局界面，利用相对布局，将需要的tab也排列一下，相互负margin。我测试用的pad，实际用的时候需要调整tab宽度，这个木有适配：)捂脸

<RelativeLayout 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"
                android:background="@color/white"
                android:gravity="center_horizontal"
                android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/rl_title"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#c0c0c0">

        <TextView
            android:id="@+id/tv_name_version"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="5dp"
            android:text="测试测试"
            android:textColor="@color/white"
            android:textSize="24dp"/>

    RelativeLayout>


    <FrameLayout
        android:id="@+id/contentLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/topBar"/>


    <RelativeLayout
        android:id="@+id/topBar"
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:layout_below="@id/rl_title"
        android:layout_centerHorizontal="true"
        android:background="#c0c0c0">

        <LinearLayout
            android:id="@+id/tab4"
            android:layout_width="170dp"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:background="@drawable/tab_unselected"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tab4_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="TAB4"
                android:textSize="20dp"/>

        LinearLayout>


        <LinearLayout
            android:id="@+id/tab3"
            android:layout_width="170dp"
            android:layout_height="match_parent"
            android:layout_marginRight="-15dp"
            android:layout_toLeftOf="@id/tab4"
            android:background="@drawable/tab_unselected"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tab3_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="TAB3"
                android:textSize="20dp"/>

        LinearLayout>

        <LinearLayout
            android:id="@+id/tab2"
            android:layout_width="170dp"
            android:layout_height="match_parent"
            android:layout_marginRight="-15dp"
            android:layout_toLeftOf="@id/tab3"
            android:background="@drawable/tab_unselected"
            android:gravity="center"
            android:orientation="vertical">


            <TextView
                android:id="@+id/tab2_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="TAB2"
                android:textSize="20dp"/>

        LinearLayout>


        <LinearLayout
            android:id="@+id/tab1"
            android:layout_width="170dp"
            android:layout_height="match_parent"
            android:background="@drawable/tab_selected"
            android:gravity="center"
            android:orientation="vertical">


            <TextView
                android:id="@+id/tab1_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="TAB1"
                android:textSize="20dp"/>

        LinearLayout>

    RelativeLayout>


RelativeLayout>

MainActivity代码，主要就是用到了bringToFront()这个方法

package com.yun.testdemo;

import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements View.OnClickListener {

    private final static String TAG = "MainActivity";
    private LinearLayout llTab1;
    private LinearLayout llTab2;
    private LinearLayout llTab3;
    private LinearLayout llTab4;

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

        llTab1 = (LinearLayout) findViewById(R.id.tab1);
        llTab2 = (LinearLayout) findViewById(R.id.tab2);
        llTab3 = (LinearLayout) findViewById(R.id.tab3);
        llTab4 = (LinearLayout) findViewById(R.id.tab4);

        llTab1.setOnClickListener(this);
        llTab2.setOnClickListener(this);
        llTab3.setOnClickListener(this);
        llTab4.setOnClickListener(this);

        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.contentLayout, new Frag1());
        fragmentTransaction.commit();
    }


    @Override
    public void onClick(View v) {
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        switch (v.getId()) {
            case R.id.tab1:
                llTab1.setBackgroundResource(R.drawable.tab_selected);
                llTab1.bringToFront();
                llTab2.setBackgroundResource(R.drawable.tab_unselected);
                llTab3.setBackgroundResource(R.drawable.tab_unselected);
                llTab4.setBackgroundResource(R.drawable.tab_unselected);
                fragmentTransaction.replace(R.id.contentLayout, new Frag1());
                break;
            case R.id.tab2:
                llTab1.setBackgroundResource(R.drawable.tab_unselected);
                llTab2.setBackgroundResource(R.drawable.tab_selected);
                llTab2.bringToFront();
                llTab3.setBackgroundResource(R.drawable.tab_unselected);
                llTab4.setBackgroundResource(R.drawable.tab_unselected);
                fragmentTransaction.replace(R.id.contentLayout, new Frag2());
                break;
            case R.id.tab3:
                llTab1.setBackgroundResource(R.drawable.tab_unselected);
                llTab2.setBackgroundResource(R.drawable.tab_unselected);
                llTab3.setBackgroundResource(R.drawable.tab_selected);
                llTab3.bringToFront();
                llTab4.setBackgroundResource(R.drawable.tab_unselected);
                fragmentTransaction.replace(R.id.contentLayout, new Frag3());
                break;
            case R.id.tab4:
                llTab1.setBackgroundResource(R.drawable.tab_unselected);
                llTab2.setBackgroundResource(R.drawable.tab_unselected);
                llTab3.setBackgroundResource(R.drawable.tab_unselected);
                llTab4.setBackgroundResource(R.drawable.tab_selected);
                llTab4.bringToFront();
                fragmentTransaction.replace(R.id.contentLayout, new Frag4());
                break;
        }
        fragmentTransaction.commit();
    }
}

好啦！！