Fragment实现的Tab标签

利用Fragment实现Tab主界面的方法

Fragment是在Android3.0以后引入的一个，它可以优化布局层次，与viewpager相比，它不用像Viewpager一样在所有的布局都要mainactivity中进行初始化，包括后面的事件。

案例：

先是布局文件：

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

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<!--顶部-->
<RelativeLayout
android:id="@+id/rl_top_tab"
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="金属材料及热处理"
android:textStyle="bold"
android:textSize="30sp"
android:gravity="center"
android:background="#7737ff00"/>

</RelativeLayout>

<!--底部-->
<LinearLayout
android:id="@+id/ll_bottom_tab"
android:layout_width="match_parent"
android:layout_height="90dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:baselineAligned="true">
<LinearLayout
android:id="@+id/mTabcailiao"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center"
android:background="#770000ff">
<ImageButton
android:id="@+id/mImgbut1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab1"/>
<TextView
android:id="@+id/tv_cailiao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="材料类型"/>
</LinearLayout>
<LinearLayout
android:id="@+id/mTablixue"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center"
android:background="#770000ff">
<ImageButton
android:id="@+id/mImgbut2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab2"/>
<TextView
android:id="@+id/tv_lixue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="力学性能"/>
</LinearLayout>
<LinearLayout
android:id="@+id/mTabrechuli"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center"
android:background="#770000ff">
<ImageButton
android:id="@+id/mImgbut3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab3"/>
<TextView
android:id="@+id/tv_rechuli"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="热处理"/>
</LinearLayout>
<LinearLayout
android:id="@+id/mTabsetting"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center"
android:background="#770000ff">
<ImageButton
android:id="@+id/mImgbut4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab_settings_normal"/>
<TextView
android:id="@+id/tv_setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="设置"/>
</LinearLayout>

</LinearLayout>

<!--内容部分-->
<LinearLayout
android:id="@+id/ll_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/ll_bottom_tab"
android:layout_below="@+id/rl_top_tab"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_above="@+id/ll_bottom_tab"/>

</LinearLayout>

</RelativeLayout>

</FrameLayout>

在MainActivity.java中

package com.administrator.thermaltreatment;

import android.graphics.Color;
import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.support.v4.app.FragmentManager;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements View.OnClickListener {

private LinearLayout mTabcailiao;
private LinearLayout mTablixue;
private LinearLayout mTabrechuli;
private LinearLayout mTabsetting;

private ImageButton mImgcailiao;
private ImageButton mImglixue;
private ImageButton mImgrechuli;
private ImageButton mImgsetting;

//四个内容区域
private android.support.v4.app.Fragment mContent01;
private android.support.v4.app.Fragment mContent02;
private android.support.v4.app.Fragment mContent03;
private android.support.v4.app.Fragment mContent04;

private TextView tv_cailiao;
private TextView tv_lixue;
private TextView tv_rechuli;
private TextView tv_setting;

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

initview();
initEvent();
setselected(0);

}

private void initview() {
mTabcailiao = (LinearLayout) findViewById(R.id.mTabcailiao);
mTablixue = (LinearLayout) findViewById(R.id.mTablixue);
mTabrechuli = (LinearLayout) findViewById(R.id.mTabrechuli);
mTabsetting = (LinearLayout) findViewById(R.id.mTabsetting);

mImgcailiao = (ImageButton) findViewById(R.id.mImgbut1);
mImglixue = (ImageButton) findViewById(R.id.mImgbut2);
mImgrechuli = (ImageButton) findViewById(R.id.mImgbut3);
mImgsetting = (ImageButton) findViewById(R.id.mImgbut4);

tv_cailiao = (TextView) findViewById(R.id.tv_cailiao);
tv_lixue= (TextView) findViewById(R.id.tv_lixue);
tv_rechuli= (TextView) findViewById(R.id.tv_rechuli);
tv_setting= (TextView) findViewById(R.id.tv_setting);

}

private void initEvent(){
mTabcailiao.setOnClickListener(this);
mTablixue.setOnClickListener(this);
mTabrechuli.setOnClickListener(this);
mTabsetting.setOnClickListener(this);
}

public void onClick(View v) {
//添加一个令图片变暗的方法
resetImg();
switch (v.getId()) {
case R.id.mTabcailiao:
setselected(0);
break;
case R.id.mTablixue:
setselected(1);
break;
case R.id.mTabrechuli:
setselected(2);
break;
case R.id.mTabsetting:
setselected(3);
break;

}

}

private void setselected(int i) {
FragmentManager fm = getSupportFragmentManager();
android.support.v4.app.FragmentTransaction transaction = fm.beginTransaction();
hideFragment(transaction);
transaction.commit();

switch (i) {
case 0:
if(mContent01==null){
mContent01=new cailiao_fragment();
transaction.add(R.id.ll_content,mContent01);
}else{
transaction.show(mContent01);
}
mTabcailiao.setBackgroundColor(Color.RED);
break;
case 1:
if(mContent02==null){
mContent02=new lixue_fragment();
transaction.add(R.id.ll_content,mContent02);
}else{
transaction.show(mContent02);
}
mTablixue.setBackgroundColor(Color.RED);
break;
case 2:
if(mContent03==null){
mContent03=new rechuli_fragment();
transaction.add(R.id.ll_content,mContent03);
}else{
transaction.show(mContent03);
}
mTabrechuli.setBackgroundColor(Color.RED);
break;
case 3:
if(mContent04==null){
mContent04=new setting_fragment();
transaction.add(R.id.ll_content,mContent04);
}else{
transaction.show(mContent04);
}
mTabsetting.setBackgroundColor(Color.RED);
break;

}
}

private void hideFragment(android.support.v4.app.FragmentTransaction transaction) {
if (mContent01 != null) {
transaction.hide(mContent01);
}
if (mContent02 != null) {
transaction.hide(mContent02);
}
if (mContent03 != null) {
transaction.hide(mContent03);
}
if (mContent04 != null) {
transaction.hide(mContent04);
}

}

private void resetImg() {
mTabcailiao.setBackgroundColor(Color.BLUE);
mTablixue.setBackgroundColor(Color.BLUE);
mTabrechuli.setBackgroundColor(Color.BLUE);
mTabsetting.setBackgroundColor(Color.BLUE);
}

}

我们还有四个Fragment:

cailiao_fragment.java；

lixue_fragment.java；

rechuli_fragment.java；

setting_fragment.java

以及与他们对应的XML布局

content01.xml

content02.xml

content03.xml

content04.xml

在cailiao_fragment等四个fragment中我们直接onCreatview，然后Copy四份，修改一些layout的id（红色加粗地方）。如下：

package com.administrator.thermaltreatment;

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

/**
* Created by Administrator on 2016/3/2.
*/
public class cailiao_fragment extends android.support.v4.app.Fragment {

@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.<span style="color:#ff0000;"><strong>content01</strong></span>,container,false);
}
}

至此，一个利用Fragment写出的Tab标签就好了，效果如下（我是用的真机，图可能有点模糊）