Android中FragmentTabHost结合fragment实现选项卡功能

时间:2021-09-17 06:29:38

效果图:

Android中FragmentTabHost结合fragment实现选项卡功能

下面直接上代码了,注释很全,看过我前2篇文章的朋友,肯定秒懂的,哈哈~
activity_main.xml(主布局文件)

<span style="font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<!-- 存放主要页面内容 -->

<FrameLayout
android:id="@+id/maincontent"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</FrameLayout>

<!-- 底层菜单 -->
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#99CC99" >

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" >
</FrameLayout>
</android.support.v4.app.FragmentTabHost>

</LinearLayout>
</span>

tabcontent.xml(具体底部菜单详细布局)

<span style="font-size:18px;"><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:gravity="center_horizontal"
android:orientation="vertical" >

<ImageView
android:id="@+id/image"
android:layout_height="30dp"
android:layout_width="30dp"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="@+id/text"
android:padding="2dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/color"
/>


</LinearLayout></span>




Fragment有5个,都一样,这里只写一个,示范一下
注意Fragment是import android.support.v4.app.Fragment;包下的

<span style="font-size:18px;">public class BlankFragment1 extends Fragment {


public BlankFragment1() {
// Required empty public constructor
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment1, container, false);
}


}</span>

fragment.xml(有5个,由于只有文字不同,这里只给出一个)fragment1.xml


<span style="font-size:18px;"><?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">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="我的第1个fragment"
/>

</LinearLayout></span>

图片选择器,放在res---drawable目录下(有5个,内容都一样)这里只写一个selector_cart.xml

点击后改变图片

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/guide_cart_on" android:state_focused="true" />
<item android:drawable="@mipmap/guide_cart_on" android:state_selected="true" />
<item android:drawable="@mipmap/guide_cart_nm" />
</selector></span>

文字选择器,放在res----color----color.xml,只有一个

点击后改变文字颜色

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#FF5001" android:state_focused="true" />
<item android:color="#FF5001" android:state_selected="true" />
<item android:color="@android:color/darker_gray" />
</selector>
</span>

MainActivity.java(主代码)

注意MainActivity 必须继承FragmentActivity 

<span style="font-size:18px;">public class MainActivity extends FragmentActivity {
private FragmentTabHost fragmentTabHost;

private String texts[] = {"首页", "消息", "好友", "广场", "更多"};
private int imageButton[] = {R.drawable.selector_cart, R.drawable.selector_catagory, R.drawable.selector_hot, R.drawable.selector_personal, R.drawable.selector_tab};
private Class fragmentArray[] = {BlankFragment1.class, BlankFragment2.class, BlankFragment3.class, BlankFragment4.class, BlankFragment5.class};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 实例化tabhost
fragmentTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
fragmentTabHost.setup(this, getSupportFragmentManager(),
R.id.maincontent);


for (int i = 0; i < texts.length; i++) {
TabHost.TabSpec spec = fragmentTabHost.newTabSpec(texts[i]).setIndicator(getView(i));
fragmentTabHost.addTab(spec, fragmentArray[i], null);

}
// 去掉分隔的竖线
fragmentTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
}

private View getView(int i) {
//取得布局实例
View view = View.inflate(MainActivity.this, R.layout.tabcontent, null);

//取得布局对象
ImageView imageView = (ImageView) view.findViewById(R.id.image);
TextView textView = (TextView) view.findViewById(R.id.text);

//设置图标
imageView.setImageResource(imageButton[i]);
//设置标题
textView.setText(texts[i]);
return view;
}


}</span>

图片都在mipmap-mdpi,大家可以从源码中找
说完了
开发工具android studio
源码MyApp----myapplication

源码下载:

http://download.csdn.net/detail/zhaihaohao1/9478653

相关文章

http://blog.csdn.net/zhaihaohao1/article/details/53385291

注意:这个方法把我的设置为点亮状态,并显示我的fragment

if (ConsumerApp.consumerApp.mainMy == 4) {
fragmentTabHost.setCurrentTabByTag("我的");

}