关于Fragment类在之前的安卓开发复习笔记——Fragment+ViewPager组件(高仿微信界面)也介绍过,这里就不再重复阐述了。
国际惯例,先来张效果图:
activity_main.xml(主布局文件)
<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" > <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>
fragment.xml(由于只有文字不同,这里只给出一个)
<RelativeLayout 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" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="我是第一个Fragment" android:textSize="20dp" /> </RelativeLayout>
tabcontent.xml(具体底部菜单详细布局)
<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_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="2dp" android:textColor="@android:color/white" /> </LinearLayout>
bt_selector.xml(底部菜单点击背景)
1 <?xml version="1.0" encoding="utf-8"?> 2 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 3 4 <item android:drawable="@drawable/home_btn_bg" android:state_pressed="true"></item> 5 <item android:drawable="@drawable/home_btn_bg" android:state_selected="true"></item> 6 7 </selector>
bt_home_selector.xml(底部菜单按钮效果)
1 <?xml version="1.0" encoding="utf-8"?> 2 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 3 4 <item android:drawable="@drawable/icon_home_sel" android:state_selected="true"></item> 5 <item android:drawable="@drawable/icon_home_nor"></item> 6 7 </selector>
FragmentPage1-FragmentPage5.java
package com.example.administrator.fragmenttablehost; /** * 作者:刘帅 on 2016/3/19 13:23 * 邮箱:857279611@qq.com */ import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class FragmentPage1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment1, null); } }
MainActivity.java(主代码)
package com.example.administrator.fragmenttablehost; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentTabHost; import android.view.View; import android.widget.ImageView; import android.widget.TabHost.TabSpec; import android.widget.TextView; public class MainActivity extends FragmentActivity { private FragmentTabHost fragmentTabHost; private String texts[] = {"首页", "消息", "好友", "广场", "更多"}; private int imageButton[] = {R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable .ic_launcher, R.drawable.ic_launcher}; private Class fragmentArray[] = {FragmentPage1.class, FragmentPage2.class, FragmentPage3 .class, FragmentPage4.class, FragmentPage5.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++) { TabSpec spec = fragmentTabHost.newTabSpec(texts[i]).setIndicator(getView(i)); fragmentTabHost.addTab(spec, fragmentArray[i], null); //设置背景(必须在addTab之后,由于需要子节点(底部菜单按钮)否则会出现空指针异常) // fragmentTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable // .bt_selector); } } 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; } }