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(); } }

好啦！！