FragmentTabHost介绍
FragmentTabHost代表整个底部导航栏,它包含的每一个Item,称之为TabSpec,点击可以切换到相应的Fragment分页。TabSpec里面需要有指示器Indicator,用来设置样式。
相较于RadioButton(RadioGroup)+ Fragment的实现方式,FragmentTabHost实现简单,对资源的控制相对较好。
FragmentTabHost基本用法
1.FragmentTabHost XML布局
注意
1. 使用 v4 的FragmentTabHost
2. FragmentTabHost需要使用Android自带的id
@android:id/tabhost
3. FragmentTabHost中的FrameLayout也需要使用自带id
@android:id/tabcontent
因为实现的是底部菜单,底部的FrameLayout设置为0dp
真正展示内容的是上方的FrameLayout
<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"
tools:context=".ui.activity.MainActivity">
<FrameLayout
android:id="@+id/fra_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#E8E8E8">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp" />
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
2.drawable设置
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/red_img" android:state_selected="true" />
<item android:drawable="@mipmap/base_img" />
</selector>
文本选择设置
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/colorAccent" android:state_selected="true" />
<item android:color="#000" />
</selector>
设置Tab Host每个Item的样式
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/tab_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/red_press" />
<TextView
android:id="@+id/tab_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
android:textColor="@color/text_press" />
</LinearLayout>
2.代码实现
步骤
1. 为TabHost设置初始化
mFraTabHost.setup(mContext, getSupportFragmentManager(), R.id.fra_content);
2. 生成每个Item
TabHost.TabSpec mTabSpec = mFraTabHost.newTabSpec("Tag" + i);
3. 为每个Item指定样式
mTabSpec.setIndicator(View view);
4. 将每个Item添加到TabHost,同时也添加Fragment
mFraTabHost.addTab(mTabSpec, fraClass[i], null);
public class MainActivity extends AppCompatActivity {
private FragmentTabHost mFraTabHost;
private Context mContext;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initTabHost();
initEvent();
}
private void initEvent() {
//监听分页切换
mFraTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
@Override
public void onTabChanged(String s) {
Log.i("TagInfo", s);
}
});
}
private void initTabHost() {
mFraTabHost.setup(mContext, getSupportFragmentManager(), R.id.fra_content);
initTabHostData();
//设置显示的当前页
mFraTabHost.setCurrentTab(1);
//去掉分割线
mFraTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
}
private void initTabHostData() {
Class[] fraClass = {RedFragment.class, BlueFragment.class};
int[] icon = {R.drawable.red_press, R.drawable.blue_press};
String[] title = {"Red", "Blue"};
for (int i = 0; i < fraClass.length; i++) {
TabHost.TabSpec mTabSpec = mFraTabHost.newTabSpec("Tag" + i);
mTabSpec.setIndicator(getTabHostItemView(icon[i], title[i]));
mFraTabHost.addTab(mTabSpec, fraClass[i], null);
}
}
public View getTabHostItemView(int icon, String itemText) {
LayoutInflater inflater = LayoutInflater.from(this);
View view = inflater.inflate(R.layout.item_tabhost, null);
TextView mItemText = view.findViewById(R.id.tab_text);
ImageView mItemImg = view.findViewById(R.id.tab_img);
mItemImg.setImageResource(icon);
mItemText.setText(itemText);
return view;
}
private void initView() {
mContext = this;
mFraTabHost = findViewById(android.R.id.tabhost);
}
}
网友评论