Android之Tab类总结
本文主要包括以下Tab类实现方式
- FragmentTabHost+Fragment实现
- 传统的ViewPager实现
- FragmentManager+Fragment实现
- ViewPager+FragmentPagerAdapter实现
- TabPageIndicator+ViewPager+FragmentPagerAdapter
FragmentTabHost+Fragment实现
布局文件
<?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">
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</FrameLayout>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="60dip" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
MainActivity
package com.darna.wmxfx;
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.RelativeLayout;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TextView;
import com.darna.wmxfx.fragment.Frg_Cart;
import com.darna.wmxfx.fragment.Frg_Index;
import com.darna.wmxfx.fragment.Frg_UserCenter;
public class MainActivity extends FragmentActivity {
private FragmentTabHost mTabHost = null;
private int iTabIndex = 0;
private int[][] iTab = new int[][] { { R.drawable.indexunused, R.drawable.cartunused, R.drawable.usercenterunused },
{ R.drawable.indexused, R.drawable.cartused, R.drawable.usercenterused } };
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
private void initViews(){
String[] strTab = getResources().getStringArray(R.array.bottom_tab);
RelativeLayout[] relativeLayout = new RelativeLayout[strTab.length];
for(int i = 0; i < strTab.length; i++){
if (i == 0) {
relativeLayout[i] = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tab_bottom, null);
relativeLayout[i].findViewById(R.id.iv_bottom_tab).setBackgroundResource(iTab[1][i]);
TextView tView = (TextView) relativeLayout[i].findViewById(R.id.tv_bottom_tab);
tView.setText(strTab[i]);
tView.setTextColor(getResources().getColor(R.color.textused));
}else {
relativeLayout[i] = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tab_bottom, null);
relativeLayout[i].findViewById(R.id.iv_bottom_tab).setBackgroundResource(iTab[0][i]);
TextView t = (TextView) relativeLayout[i].findViewById(R.id.tv_bottom_tab);
t.setText(strTab[i]);
t.setTextColor(getResources().getColor(R.color.textunused));
}
}
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);
mTabHost.addTab(mTabHost.newTabSpec(Config.KEY_INDEX)
.setIndicator(relativeLayout[0]), Frg_Index.class, null);
mTabHost.addTab(mTabHost.newTabSpec(Config.KEY_CART)
.setIndicator(relativeLayout[1]), Frg_Cart.class, null);
mTabHost.addTab(mTabHost.newTabSpec(Config.KEY_USERCENTER)
.setIndicator(relativeLayout[2]), Frg_UserCenter.class, null);
mTabHost.setOnTabChangedListener(new OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
// TODO Auto-generated method stub
View v = mTabHost.getTabWidget().getChildAt(iTabIndex);
((ImageView) v.findViewById(R.id.iv_bottom_tab)).setBackgroundResource(iTab[0][iTabIndex]);
((TextView) v.findViewById(R.id.tv_bottom_tab)).setTextColor(getResources().getColor(R.color.textunused));
v = mTabHost.getCurrentTabView();
iTabIndex = mTabHost.getCurrentTab();
((ImageView) v.findViewById(R.id.iv_bottom_tab)).setBackgroundResource(iTab[1][iTabIndex]);
((TextView) v.findViewById(R.id.tv_bottom_tab)).setTextColor(getResources().getColor(R.color.textused));
}
});
}
}
效果如下
传统的ViewPager实现
FragmentManager+Fragment实现
ViewPager+Fragment实现
TabPageIndicator+ViewPager+FragmentPagerAdapter
实现方式和3是一致的,但是使用了TabPageIndicator作为tab的指示器,效果还是不错的,这个之前写过,就不再贴代码了。
效果图:
后四种方式详细可以参见
Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager - Hongyang - 博客频道 - CSDN.NET