FragmentTabHost是support-v包下提供的用于集成和管理Fragment页面的组件.
今天要实现的效果图如下:
整体结构是MainActivity+5个模块的Fragment.
MainActivity的布局如下:
<?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"> <!--真正的内容视图,用于展示Fragment--> <FrameLayout android:id="@+id/real_tabcontent" 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="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical"> <!--tab图片--> <ImageView android:id="@+id/iv_tab" android:layout_width="26dp" android:layout_height="26dp" /> <!--tab名字--> <TextView android:id="@+id/tv_tab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="1dp" android:textSize="12sp"/> </LinearLayout>
MainActivity代码如下:
package blog.csdn.net.mchenys.bsbdj.modul.main; import android.content.res.ColorStateList; import android.os.Bundle; import android.support.v4.app.FragmentTabHost; import android.text.TextUtils; import android.view.View; import android.widget.ImageView; import android.widget.TabHost; import android.widget.TextView; import blog.csdn.net.mchenys.bsbdj.R; import blog.csdn.net.mchenys.bsbdj.common.base.BaseActivity; import blog.csdn.net.mchenys.bsbdj.modul.attention.view.AttentionFragment; import blog.csdn.net.mchenys.bsbdj.modul.essence.view.EssenceFragment; import blog.csdn.net.mchenys.bsbdj.modul.mine.view.MineFragment; import blog.csdn.net.mchenys.bsbdj.modul.newpost.view.NewpostFragment; import blog.csdn.net.mchenys.bsbdj.modul.publish.view.PublishFragment; import blog.csdn.net.mchenys.bsbdj.mvp.presenter.impl.MvpBasePresenter; /** * Created by mChenys on 2016/5/27. */ public class MainActivity extends BaseActivity { //定义数组来存放tab的图片选择器 private int[] mTabImage = {R.drawable.main_bottom_essence_selector, R.drawable.main_bottom_latest_selector, R.drawable.main_bottom_writeposts_selector, R.drawable.main_bottom_news_selector, R.drawable.main_bottom_my_selector}; //tab选项卡的文字 private String[] mTabTitle = {"精华", "新帖", "", "关注", "我的"}; //每个tab对应的Fragment的字节码对象 private Class[] fragmentArray = {EssenceFragment.class, NewpostFragment.class, PublishFragment.class, AttentionFragment.class, MineFragment.class}; @Override protected boolean isHomePage() { return true; } @Override public Integer getLayoutResId() { return R.layout.activity_main; } @Override public void initView() { //获取tabhost FragmentTabHost tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost); //绑定tabContent tabHost.setup(this, getSupportFragmentManager(), R.id.real_tabcontent); //去掉分割线 tabHost.getTabWidget().setDividerDrawable(null); for (int i = 0; i < fragmentArray.length; i++) { //绑定Fragment,添加到的FragmentTabHost //设置tab的名称和view TabHost.TabSpec tabSpec = tabHost. newTabSpec(mTabTitle[i]). setIndicator(getTabItemView(i)); Bundle bundle = new Bundle(); bundle.putString("title", mTabTitle[i]); //添加tab和关联对应的fragment tabHost.addTab(tabSpec, fragmentArray[i], bundle); //设置tab的背景色 tabHost.getTabWidget(). getChildAt(i). setBackgroundColor(getResources().getColor(R.color.bgColor)); } //默认选中第一个tab tabHost.setCurrentTab(0); //设置tab的切换监听 tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() { @Override public void onTabChanged(String tabId) { //可以在这里监听tab的切换 } }); } //tab的字体选择器 ColorStateList mColorStateList; /** * 给Tab按钮设置图标和文字 */ private View getTabItemView(int index) { View view = getLayoutInflater().inflate(R.layout.view_tab_indicator, null); ImageView imageView = (ImageView) view.findViewById(R.id.iv_tab); TextView textView = (TextView) view.findViewById(R.id.tv_tab); //设置图片选择器 imageView.setImageResource(mTabImage[index]); //设置字体选择器 if (mColorStateList == null) { mColorStateList = getResources(). getColorStateList(R.color.main_bottom_text_selector); textView.setTextColor(mColorStateList); } //设置tab的文字 if (TextUtils.isEmpty(mTabTitle[index])) { //如果没有名称,则隐藏tab下的textView textView.setVisibility(View.GONE); } else { textView.setVisibility(View.VISIBLE); textView.setText(mTabTitle[index]); } return view; } @Override public void initListener() { } @Override public void initData() { } @Override public void reLoadData() { } @Override public void onClick(View v) { } @Override public MvpBasePresenter bindPresenter() { return null; } }
最后附上字体选择器
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="false" android:color="@color/main_bottom_text_normal" /> <item android:state_selected="true" android:color="@color/main_bottom_text_select" /> </selector>
图片选择器有5个,这里附上一个,其他类似:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="false" android:drawable="@drawable/main_bottom_essence_normal" /> <item android:state_selected="true" android:drawable="@drawable/main_bottom_essence_press" /> </selector>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。