Android - FragmentTabHost 与 Fragment 制作页面切换效果

使用 FragmentTabHost 与 Fragment 制作页面切换效果

API 19

TabHost已经不建议使用了。用 FragmentTabHost 来代替TabHost。实际上 FragmentTabHost 继承自 TabHost

效果图：





主文件是

FragmentTabHostDemo.java

继承自FragmentActivity；

设置3个底部标签，自定义了标签切换时的标签变化；

添加标签页有多种方式，每个标签页对应一个fragment

每次切换fragment，都会调用fragment的

onCreateView()

和

onResume()

方法；

v4包使用

getSupportFragmentManager()

；

动态加载fragment，不用在xml中注册；

其他的大体和TabHost一样；比如xml文件中的id要用android指定的id；

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

import com.rust.aboutview.fragment.TabFragment1;
import com.rust.aboutview.fragment.TabFragment2;
import com.rust.aboutview.fragment.TabFragment3;

import java.util.HashMap;

public class FragmentTabHostDemo extends FragmentActivity {

public static final int COLOR_GRAY_01 = 0xFFADADAD; //自定义的颜色
public static final int COLOR_GREEN_01 = 0xFF73BF00;

public static final String TAB1 = "tab1";
public static final String TAB2 = "tab2";
public static final String TAB3 = "tab3";
public static final String TABS[] = {TAB1, TAB2, TAB3};

public static HashMap<String, Integer> mTabMap;
public static FragmentTabHost mTabHost;
LayoutInflater mLayoutInflater;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fragment_tab_host);
mTabMap = new HashMap<>();
mTabMap.put(TAB1, 0);
mTabMap.put(TAB2, 1);
mTabMap.put(TAB3, 2);
mLayoutInflater = LayoutInflater.from(getApplicationContext());

mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
mTabHost.getTabWidget().setMinimumHeight(120);// 设置tab的高度
mTabHost.getTabWidget().setDividerDrawable(null);

TabHost.TabSpec tabSpec = mTabHost.newTabSpec(TABS[0]);
View tabView1 = mLayoutInflater.inflate(R.layout.tab_item, null);
final ImageView tabImage1 = (ImageView) tabView1.findViewById(R.id.tab_image);
final TextView tabText1 = (TextView) tabView1.findViewById(R.id.tab_text);
tabImage1.setImageResource(R.drawable.a4a);
tabText1.setText(getString(R.string.tab_label_1));
tabText1.setTextColor(COLOR_GREEN_01);

tabSpec.setIndicator(tabView1);
mTabHost.addTab(tabSpec, TabFragment1.class, null);

View tabView2 = mLayoutInflater.inflate(R.layout.tab_item, null);
final ImageView tabImage2 = (ImageView) tabView2.findViewById(R.id.tab_image);
tabImage2.setImageResource(R.drawable.a49);
final TextView tabText2 = (TextView) tabView2.findViewById(R.id.tab_text);
tabText2.setText(getString(R.string.tab_label_2));

mTabHost.addTab(mTabHost.newTabSpec(TABS[1]).setIndicator(tabView2),
TabFragment2.class, null);

View tabView3 = mLayoutInflater.inflate(R.layout.tab_item, null);
final ImageView tabImage3 = (ImageView) tabView3.findViewById(R.id.tab_image);
tabImage3.setImageResource(R.drawable.a49);
final TextView tabText3 = (TextView) tabView3.findViewById(R.id.tab_text);
tabText3.setText(getString(R.string.tab_label_3));

mTabHost.addTab(mTabHost.newTabSpec(TABS[2])
.setIndicator(tabView3), TabFragment3.class, null);

mTabHost.setCurrentTab(0);

mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
int child = mTabMap.get(tabId);
tabImage1.setImageResource(R.drawable.a49);
tabImage2.setImageResource(R.drawable.a49);
tabImage3.setImageResource(R.drawable.a49);
tabText1.setTextColor(COLOR_GRAY_01);
tabText2.setTextColor(COLOR_GRAY_01);
tabText3.setTextColor(COLOR_GRAY_01);
switch (child) {
case 0:
tabImage1.setImageResource(R.drawable.a4a);
tabText1.setTextColor(COLOR_GREEN_01);
break;
case 1:
tabImage2.setImageResource(R.drawable.a4a);
tabText2.setTextColor(COLOR_GREEN_01);
break;
case 2:
tabImage3.setImageResource(R.drawable.a4a);
tabText3.setTextColor(COLOR_GREEN_01);
break;
}
}
});

}
}

activity_fragment_tab_host.xml

，使用FragmentTabHost；

标签放在页面底部；注意这里的id，以及layout的宽高设置

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

<FrameLayout
android:id="@+id/realtabcontent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" />

<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@color/colorYellow01">

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
</android.support.v4.app.FragmentTabHost>

</LinearLayout>

因为切换标签时会重载fragment，可以在fragment中判断一下，已经加载过的，不需要重新加载；

TabFragment1.java

中定义了一个rootView

public class TabFragment1 extends Fragment {

private View rootView;// cache fragment view
TextView centerTV;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
Log.d("rust", "TabFragment1 onCreateView");
if (rootView == null) {
rootView = inflater.inflate(R.layout.fragment_tab1, null);
}
ViewGroup parent = (ViewGroup) rootView.getParent();
// if root view had a parent, remove it.
if (parent != null) {
parent.removeView(rootView);
}
centerTV = (TextView) rootView.findViewById(R.id.center_tv);
centerTV.setOnClickListener(new View.OnClickListener() {
// @Override
public void onClick(View v) {
centerTV.setText(String.format("%s","Tab1 clicked"));
centerTV.setTextColor(Color.BLACK);
}
});
return rootView;
}

@Override
public void onResume() {
super.onResume();
Log.d("rust", "TabFragment1 onResume");
}
}

已点击的效果图：