最近项目中需要实现TAB选项卡的效果,这里用的是TabHost来实现的。在3.0以后TabActivity已经被标示为Deprecated,我们可以用TabHost+Fragment来实现TAB选项卡效果。
activity_main.xml
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0"
android:visibility="gone"/>
<FrameLayout
android:id="@+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0" />
</LinearLayout>
</TabHost>
MainActivity.java
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.widget.TabHost;
public class MainActivity extends FragmentActivity {
TabHost tHost;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tHost = (TabHost) findViewById(android.R.id.tabhost);
tHost.setup();
/** Defining Tab Change Listener event. This is invoked when tab is changed */
TabHost.OnTabChangeListener tabChangeListener = new TabHost.OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
android.support.v4.app.FragmentManager fm = getSupportFragmentManager();
AndroidFragment androidFragment = (AndroidFragment) fm.findFragmentByTag("android");
AppleFragment appleFragment = (AppleFragment) fm.findFragmentByTag("apple");
android.support.v4.app.FragmentTransaction ft = fm.beginTransaction();
/** Detaches the androidfragment if exists */
if(androidFragment!=null)
ft.detach(androidFragment);
/** Detaches the applefragment if exists */
if(appleFragment!=null)
ft.detach(appleFragment);
/** If current tab is android */
if(tabId.equalsIgnoreCase("android")){
if(androidFragment==null){
/** Create AndroidFragment and adding to fragmenttransaction */
ft.add(R.id.realtabcontent,new AndroidFragment(), "android");
}else{
/** Bring to the front, if already exists in the fragmenttransaction */
ft.attach(androidFragment);
}
}else{ /** If current tab is apple */
if(appleFragment==null){
/** Create AppleFragment and adding to fragmenttransaction */
ft.add(R.id.realtabcontent,new AppleFragment(), "apple");
}else{
/** Bring to the front, if already exists in the fragmenttransaction */
ft.attach(appleFragment);
}
}
ft.commit();
}
};
/** Setting tabchangelistener for the tab */
tHost.setOnTabChangedListener(tabChangeListener);
/** Defining tab builder for Andriod tab */
TabHost.TabSpec tSpecAndroid = tHost.newTabSpec("android");
tSpecAndroid.setIndicator("Android",getResources().getDrawable(R.drawable.android));
tSpecAndroid.setContent(new DummyTabContent(getBaseContext()));
tHost.addTab(tSpecAndroid);
/** Defining tab builder for Apple tab */
TabHost.TabSpec tSpecApple = tHost.newTabSpec("apple");
tSpecApple.setIndicator("Apple",getResources().getDrawable(R.drawable.apple));
tSpecApple.setContent(new DummyTabContent(getBaseContext()));
tHost.addTab(tSpecApple);
}
}
AppleFragment.java
import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class AppleFragment extends ListFragment{
/** An array of items to display in ArrayList */
String apple_versions[] = new String[]{
"Mountain Lion",
"Lion",
"Snow Leopard",
"Leopard",
"Tiger",
"Panther",
"Jaguar",
"Puma"
};
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
/** Creating array adapter to set data in listview */
ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity().getBaseContext(), android.R.layout.simple_list_item_multiple_choice, apple_versions);
/** Setting the array adapter to the listview */
setListAdapter(adapter);
return super.onCreateView(inflater, container, savedInstanceState);
}
@Override
public void onStart() {
super.onStart();
/** Setting the multiselect choice mode for the listview */
getListView().setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
}
}
AndroidFragment.java
import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class AndroidFragment extends ListFragment{
/** An array of items to display in ArrayList */
String android_versions[] = new String[]{
"Jelly Bean",
"IceCream Sandwich",
"HoneyComb",
"Ginger Bread",
"Froyo"
};
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
/** Creating array adapter to set data in listview */
ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity().getBaseContext(), android.R.layout.simple_list_item_multiple_choice, android_versions);
/** Setting the array adapter to the listview */
setListAdapter(adapter);
return super.onCreateView(inflater, container, savedInstanceState);
}
@Override
public void onStart() {
super.onStart();
/** Setting the multiselect choice mode for the listview */
getListView().setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
}
}
DummyTabContent.java
import android.content.Context;
import android.view.View;
import android.widget.TabHost.TabContentFactory;
public class DummyTabContent implements TabContentFactory{
private Context mContext;
public DummyTabContent(Context context){
mContext = context;
}
@Override
public View createTabContent(String tag) {
View v = new View(mContext);
return v;
}
}
关于底部的TAB,我们也可以用RadioGroup来实现,如下:
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0.0dip"
android:layout_weight="1.0"/>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.0"
android:visibility="gone"/>
<RadioGroup
android:id="@+id/main_tab"
android:layout_width="fill_parent"
android:layout_height="@dimen/bottom_bar_height"
android:background="@drawable/bottom_bar_bg"
android:gravity="center_vertical"
android:orientation="horizontal"
android:layout_gravity="bottom">
<RadioButton
android:id="@+id/rb_favorite"
android:layout_marginTop="2.0dip"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/tab_favorite"
android:text="@string/tab_favorite" />
<RadioButton
android:id="@+id/rb_recent"
android:layout_marginTop="2.0dip"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/tab_recent"
android:text="@string/tab_recent" />
<RadioButton
android:id="@+id/rb_main"
android:layout_marginTop="2.0dip"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/tab_publiccontact"
android:text="@string/tab_main" />
<RadioButton
android:id="@+id/rb_helper"
android:layout_marginTop="2.0dip"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/tab_help"
android:text="@string/tab_help" />
<RadioButton
android:id="@+id/rb_settings"
android:layout_marginTop="2.0dip"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/tab_settings"
android:text="@string/tab_settings" />
</RadioGroup>
</LinearLayout>
</TabHost>