MainActivity布局如下:
<?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"
tools:context="activity.MainActivity">
<!--真正的内容视图,用于展示Fragment-->
<FrameLayout
android:id="@+id/real_tab_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<!--tabhost,必须使用系统的id-->
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--tabcontent,必须使用系统的id-->
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"/>
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
每个tab的布局如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f4eeee"
android:gravity="center"
android:orientation="vertical"
android:padding="8dp">
<!--图片-->
<ImageView
android:id="@+id/icon_tab"
android:layout_width="32dp"
android:layout_height="32dp"/>
<!--文字-->
<TextView
android:id="@+id/txt_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="主页"
android:textColor="@color/selector_tab_text"/>
</LinearLayout>
MainActivity代码如下:
public class MainActivity extends AppCompatActivity {
private static final String TAG = "MainActivity";
private FragmentTabHost mTabHost;
private LayoutInflater mInflater;
private List<Tab> mTabs;
private CartFragment mCartFragment;
public CnToolbar mCnToolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//通过ID拿到Tab的控件
initView();
//把5个装有图标,文字,Fragment的Tab对象,都添加到List集合
initTabData();
//把List集合里的元素都添加到Tab里面
initTab();
}
private void initTab() {
//TabHost调用setup,设置一个需要展示内容页的布局ID
mTabHost.setup(this, getSupportFragmentManager(), R.id.real_tab_content);
//遍历装了5个对象的集合
for (Tab tab : mTabs) {
//通过Tab里的文字,得到一个TabSpec
TabHost.TabSpec tabSpec = mTabHost.newTabSpec(getString(tab.getTitle()));
//使用mInflater把一个XML布局设置为一个View,并设置这个View里面的文字和图片
View view = buildIndicator(tab);
//指定视图作为选项卡指示器。
tabSpec.setIndicator(view);
//最后把TabSpec和Fragment都放到TabHost里面
mTabHost.addTab(tabSpec, tab.getFragment(), null);
}
}
private void initTabData() {
//新建5个分页,并且添加到List当中,便于管理,其中的图标我们使用了selector进行状态选择,即选中的时候会变色。
Tab home = new Tab(R.drawable.selector_icon_home, R.string.home, HomeFragment.class);
Tab hot = new Tab(R.drawable.selector_icon_hot, R.string.hot, HotFragment.class);
Tab category = new Tab(R.drawable.selector_icon_category, R.string.category, CategoryFragment.class);
Tab car = new Tab(R.drawable.selector_icon_cart, R.string.car, CartFragment.class);
Tab mine = new Tab(R.drawable.selector_icon_mine, R.string.mine, MineFragment.class);
//把5个页面都添加到集合
mTabs = new ArrayList<>(5);
mTabs.add(home);
mTabs.add(hot);
mTabs.add(category);
mTabs.add(car);
mTabs.add(mine);
}
//给一个Tab的View添加文字和图片
private View buildIndicator(Tab tab) {
View view = mInflater.inflate(R.layout.tab_indicator, null);
ImageView icon = (ImageView) view.findViewById(R.id.icon_tab);
TextView tv = (TextView) view.findViewById(R.id.txt_indicator);
icon.setBackgroundResource(tab.getIcon());
tv.setText(tab.getTitle());
return view;
}
private void initView() {
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
mCnToolbar = (CnToolbar) findViewById(R.id.toolbar);
//由于要把Layout文件设置成View,这里要用到Inflater
mInflater = LayoutInflater.from(this);
}
}
图片选择器,这个需要在添加到对象的时候设置 Tab home = new Tab(R.drawable.selector_icon_home, R.string.home, HomeFragment.class);
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_home" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" />
<!-- Pressed -->
<item android:state_selected="true" android:state_pressed="true" android:drawable="@mipmap/icon_home_press" />
<item android:state_pressed="true" android:drawable="@mipmap/icon_home" />
</selector>
文字颜色选择器,这个需要在设置Tab布局的时候就定义好了 android:textColor="@color/selector_tab_text"/>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#eb4f38" />
<item android:state_active="true" android:color="#eb4f38"/>
<item android:state_selected="false" android:color="#a9b7b7" />
<item android:state_active="false" android:color="#a9b7b7"/>
</selector>
网友评论