需求:使用TabHost实现底部菜单栏;
效果图:
实现分析:
1.目录结构:
代码实现:
1.activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="2dp" android:layout_weight="0" android:background="@drawable/tab_widget_background" /> </LinearLayout> </TabHost>
2 activity_one.xml
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/image_01" > </FrameLayout>
3 item_tab_view.xml
<?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:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/image_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dp" /> <TextView android:id="@+id/text_name" style="@style/item_tab_text_style" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>
4 tab_background_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/tab_item_p" android:state_pressed="true"/> <item android:drawable="@drawable/tab_item_d" android:state_selected="true"/> </selector>
5 style.xml
<style name="item_tab_text_style"> <item name="android:textSize">10.0dip</item> <item name="android:textColor">#ffffffff</item> <item name="android:ellipsize">marquee</item> <item name="android:singleLine">true</item> </style>
6 Constant.java
package com.jjc.demo; /** * @author ThinkPad * 功能描述:常量工具类 */ public class Constant { public static final class ConValue{ /** * Tab选项卡的图标 */ public static int mImageViewArray[] = { R.drawable.tab_icon1, R.drawable.tab_icon2, R.drawable.tab_icon3, R.drawable.tab_icon4, R.drawable.tab_icon5 }; /** * Tab选项卡的文字 */ public static String mTextViewArray[] = {"主页", "关于", "设置", "搜索", "更多"}; /** * 每一个Tab界面 */ public static Class<?> mTabClassArray[] = { ActivityOne.class, ActivityTwo.class, ActivityThree.class, ActivityFour.class, ActivityFive.class }; } }
7 ActivityOne.java
package com.jjc.demo; import android.app.Activity; import android.os.Bundle; public class ActivityOne extends Activity{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_one); } }
8 MainActivity.java
package com.jjc.demo; import com.jjc.demo.Constant.ConValue; import android.app.TabActivity; import android.content.Intent; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; import android.widget.TabHost; import android.widget.TabHost.TabSpec; import android.widget.TextView; public class MainActivity extends TabActivity { private TabHost mTabHost; private LayoutInflater mInflater; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } /** * 初始化组件 */ private void initView() { // 实例化TabHost对象,得到TabHost mTabHost = getTabHost(); // 实例化布局对象 mInflater = LayoutInflater.from(this); // 得到Activity的个数 int count = ConValue.mTabClassArray.length; for (int i = 0; i < count; i++) { // 为每一个Tab按钮设置图标、文字和内容 TabSpec tabSpec = mTabHost.newTabSpec(ConValue.mTextViewArray[i]) .setIndicator(getTabItemView(i)) .setContent(getTabItemIntent(i)); // 将Tab按钮添加进Tab选项卡中 mTabHost.addTab(tabSpec); // 设置Tab按钮的背景 mTabHost.getTabWidget().getChildAt(i) .setBackgroundResource(R.drawable.tab_background_selector); } } /** * 给Tab按钮设置图标和文字 */ private View getTabItemView(int index) { View view = mInflater.inflate(R.layout.item_tab_view, null); ImageView imageView = (ImageView) view.findViewById(R.id.image_icon); if (imageView != null) { imageView.setImageResource(ConValue.mImageViewArray[index]); } TextView textView = (TextView) view.findViewById(R.id.text_name); textView.setText(ConValue.mTextViewArray[index]); return view; } /** * 给Tab选项卡设置内容(每个内容是一个Activity) */ private Intent getTabItemIntent(int index) { Intent intent = new Intent(this, ConValue.mTabClassArray[index]); return intent; } }