仿QQ頂部圓角頁面切換Button

實現效果，可點擊切換。

一.佈局文件

activity_main.xml

<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"
    tools:context="com.example.slidetabdemo.MainActivity" >
	
     <LinearLayout
            android:id="@+id/common_constact"
            android:layout_height="wrap_content"
            android:layout_width="150dp"
            android:orientation="horizontal"
            android:layout_centerHorizontal="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/ll_top_bg">
            <Button 
                android:id="@+id/constact_group"
                style="@style/top_group"
                android:text="分組"/>
            <Button 
                android:id="@+id/constact_all"
                style="@style/top_all"
                android:text="全部"/>
        </LinearLayout>
     
     <View android:id="@+id/divider_view"
         android:layout_below="@id/common_constact"
         android:layout_width="match_parent"
         android:layout_height="2dp"
         android:background="#bdbdbd"/>
     
     
   	<FrameLayout 
   	    
   	    android:id="@+id/id_content"
   	    android:layout_width="wrap_content"
   	    android:layout_height="match_parent"
   	    android:layout_below="@id/divider_view"
   	    ></FrameLayout>

</RelativeLayout>

left_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView
        android:layout_gravity="center"
   		android:id="@+id/left_fragment"
   		android:layout_width="wrap_content"
   		android:layout_height="wrap_content"
   		android:text="left_fragment"
   		android:textSize="20sp"
           ></TextView>

</LinearLayout>

right_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    
    <TextView
        android:layout_gravity="center"
   		android:id="@+id/right_fragment"
   		android:layout_width="wrap_content"
   		android:layout_height="wrap_content"
   		android:text="right_fragment"
   		android:textSize="20sp"
           ></TextView>

</LinearLayout>

二.button圓角，邊框格式，以及button背景色等的設置，在res文件夾下的styles.xml中設置

styles.xml

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>
    
    <style name="top_group">
        <item name="android:layout_height">30dp</item>
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@drawable/qq_constact_font</item>
        <item name="android:background">@drawable/qq_constact_group</item>
    </style>
    
    <style name="top_all">
        <item name="android:layout_height">30dp</item>
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@drawable/qq_constact_font</item>
        <item name="android:background">@drawable/qq_constact_all</item>
    </style>

</resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="blue">#499BF7</color>
    <color name="whites">#ffffff</color>
</resources>

drwable文件夾下的一些.xml文件

ll_top_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="5dp"/>
    <solid android:color="#FFFFFF"/>
    <stroke android:width="1dp" android:color="@color/blue"/>
</shape>

qq_contact_all.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="false"><shape>
            <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="5dp" android:topLeftRadius="0dp" android:topRightRadius="5dp" />
            <solid android:color="@color/blue" />
            <stroke android:width="1dp" android:color="@color/blue" />
        </shape>
    </item>
    <item android:state_pressed="true"><shape>
            <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="5dp" android:topLeftRadius="0dp" android:topRightRadius="5dp" />
            <solid android:color="@color/blue" />
            <stroke android:width="1dp" android:color="@color/blue" />
        </shape>
    </item>
    <item><shape>
            <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="5dp" android:topLeftRadius="0dp" android:topRightRadius="5dp" />
            <solid android:color="@color/whites" />
            <stroke android:width="1dp" android:color="@color/blue" />
        </shape>
    </item>

</selector>

qq_contact_font.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" android:color="@color/whites"/>
    <item android:state_enabled="false" android:color="@color/whites"/>
    <item android:color="@color/blue"/>

</selector>

qq_contact_group.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="false"><shape>
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="0dp" android:topLeftRadius="5dp" android:topRightRadius="0dp" />
            <solid android:color="@color/blue" />
            <stroke android:width="1dp" android:color="@color/blue" />
        </shape>
    </item>
    <item android:state_pressed="true"><shape>
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="0dp" android:topLeftRadius="5dp" android:topRightRadius="0dp" />
            <solid android:color="@color/blue" />
            <stroke android:width="1dp" android:color="@color/blue" />
        </shape>
    </item>
    <item><shape>
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="0dp" android:topLeftRadius="5dp" android:topRightRadius="0dp" />
            <solid android:color="@color/whites" />
            <stroke android:width="1dp" android:color="@color/blue" />
        </shape>
    </item>

</selector>

以上是一些樣式的設置，以及點擊事件樣式改變的設置

三.Java代碼

MainActivity.java

package com.example.slidetabdemo;

import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity implements OnClickListener{

	private Button title_left_btn , title_right_btn;
	
	
	
	/**
	 * Fragment管理器
	 */
	private FragmentManager mFragmentManager;
	private FragmentTransaction mTransaction; 
	
	/**
	 * 兩個Fragment
	 */
	private LeftFragment mLFragment ;
	private RightFragment mRFragment;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initView();
	}


	private void initView() {
		// TODO Auto-generated method stub
		title_left_btn = (Button)findViewById(R.id.constact_group);
		title_right_btn = (Button)findViewById(R.id.constact_all);
		
		title_left_btn.setOnClickListener(this);
		title_left_btn.performClick();//模擬點擊事件，使左邊按鈕被點擊
		
		mFragmentManager = getFragmentManager();
		mTransaction = mFragmentManager.beginTransaction();
		
		mLFragment = new LeftFragment();
		mTransaction.replace(R.id.id_content, mLFragment);
		mTransaction.commit();
		
		
		title_right_btn.setOnClickListener(this);
	}


	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		switch (v.getId()) {
		case R.id.constact_group:
			if(title_left_btn.isEnabled()){
				title_left_btn.setEnabled(false);
				title_right_btn.setEnabled(true);
			}
			mFragmentManager = getFragmentManager();
			mTransaction = mFragmentManager.beginTransaction();
			if(mLFragment == null){
				mLFragment = new LeftFragment();
				
			}
			mTransaction.replace(R.id.id_content, mLFragment);
			mTransaction.commit();
			break;

		case R.id.constact_all:
			if(title_right_btn.isEnabled()){
				title_left_btn.setEnabled(true);
				title_right_btn.setEnabled(false);
			}
			mFragmentManager = getFragmentManager();
			mTransaction = mFragmentManager.beginTransaction();
			if(mRFragment == null){
				mRFragment = new RightFragment();
			}
			mTransaction.replace(R.id.id_content, mRFragment);
			mTransaction.commit();
			break;
		}
	}

	
}

LeftFragment.java

package com.example.slidetabdemo;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class LeftFragment extends Fragment {

	
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		
		return inflater.inflate(R.layout.left_fragment, container , false);
		//return super.onCreateView(inflater, container, savedInstanceState);
	}
}

RightFragment.java

package com.example.slidetabdemo;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class RightFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub

		return inflater.inflate(R.layout.right_fragment, container, false);

		// return super.onCreateView(inflater, container, savedInstanceState);
	}
}

完成