TabHost
本文的合集已經(jīng)編著成書伍玖，高級Android開發(fā)強化實戰(zhàn)镀虐，歡迎各位讀友的建議和指導(dǎo)祟蚀。在京東即可購買：https://item.jd.com/12385680.html
Android
FragmentTabHost作為Android4.0版本的控件, 已經(jīng)被項目廣泛使用, 5.0版本又推出TabLayout+ViewPager顯示多頁. 我來講解如何使用FragmentTabHost.
本文源碼的GitHub下載地址
主要包括:
(1) 自定義Tab的圖片資源和去掉分割線.
(2) 緩存Fragment的布局, 減少填充.
在切換頁面時, 控件會調(diào)用Fragment的onCreateView, 重新創(chuàng)建頁面.
通過緩存頁面, 可以增強性能.
1. 布局
FragmentTabHost是原生控件, 并不需要添加其他的maven庫.
包括標簽組Tabs和頁面TabContainer, 標簽組固定大小, 頁面填充.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"/>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
注意控件的id必須是Android提供的標準id, 即"@android:id".
Fragment布局, 包含一行文字提示.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical">
<TextView
android:id="@+id/tab_tv_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="40sp"
tools:text="Test"/>
</LinearLayout>
Tab布局, 包含一個圖片控件.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/tab_iv_image"
android:padding="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@null"
tools:src="@drawable/tab_assistant"/>
</LinearLayout>
2. 主頁
setup設(shè)置頁面組合, 卻掉分割線etDividerDrawable(null), 設(shè)置Tab.
使用自定義的圖片資源, newTabSpec設(shè)置Fragment的Tag標簽.
/**
* 主頁, 切換Tab標簽顯示不同頁面.
*
* @author C.L.Wang
*/
public class MainActivity extends AppCompatActivity {
@Bind(android.R.id.tabhost) FragmentTabHost mTabHost;
// 圖片
@DrawableRes
private int mImages[] = {
R.drawable.tab_counter,
R.drawable.tab_assistant,
R.drawable.tab_contest,
R.drawable.tab_center
};
// 標題
private String mFragmentTags[] = {
"counter",
"assistant",
"contest",
"center"
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);
mTabHost.getTabWidget().setDividerDrawable(null); // 去掉分割線
for (int i = 0; i < mImages.length; i++) {
// Tab按鈕添加文字和圖片
TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mFragmentTags[i]).setIndicator(getImageView(i));
// 添加Fragment
mTabHost.addTab(tabSpec, FragmentTab.class, null);
// 設(shè)置Tab按鈕的背景
mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.color.pedo_actionbar_bkg);
}
}
// 獲得圖片資源
private View getImageView(int index) {
@SuppressLint("InflateParams")
View view = getLayoutInflater().inflate(R.layout.view_tab_indicator, null);
ImageView imageView = (ImageView) view.findViewById(R.id.tab_iv_image);
imageView.setImageResource(mImages[index]);
return view;
}
}
3. 切換頁
顯示不同Tag標簽. 緩存頁面, 注意關(guān)聯(lián)前, 刪除父控件關(guān)聯(lián). 頁面顯示Tag信息.
/**
* Tab的Fragment
* <p/>
* Created by wangchenlong on 15/12/28.
*/
public class FragmentTab extends Fragment {
@Bind(R.id.tab_tv_text) TextView mTvText;
private View mViewContent; // 緩存視圖內(nèi)容
@Nullable @Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
if (mViewContent == null) {
mViewContent = inflater.inflate(R.layout.fragment_tab, container, false);
}
// 緩存View判斷是否含有parent, 如果有需要從parent刪除, 否則發(fā)生已有parent的錯誤.
ViewGroup parent = (ViewGroup) mViewContent.getParent();
if (parent != null) {
parent.removeView(mViewContent);
}
ButterKnife.bind(this, mViewContent);
return mViewContent;
}
@Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
// 顯示Fragment的Tag信息
mTvText.setText(String.valueOf("Page: " + getTag()));
}
@Override public void onDestroyView() {
super.onDestroyView();
ButterKnife.unbind(this);
}
}
動畫
熟練使用控件很重要.
OK, That's all! Enjoy It!
