TabHost应用 - 爱码网

系统默认的TabHost按钮在上面，其实大部分主流应用的都在下面，有的同学可能不知道怎么做，其实很简单。系统的TabWidget在FramLayout的上面，只要把它移到FramLayout的下面就可以了。系统的TabWidget外面是没有HorizontalScrollView的，当TabWidget比较多的时候可以套了一个HorizontalScrollView，这样可以滑动，HorizontalScrollView增加一个属性android：scrollbars=“none”这样就没有滚动条了。到这里可能有些同学又遇到布局的比例问题了，只要更改FramLayout为android：layoutHight=“match_parent”还有android：layout_weight=“1”应该就可以了

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/linearLayout1"
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="match_parent"
android:layout_weight="1" >
</FrameLayout>
<HorizontalScrollView
android:id="@+id/horizontalScrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="none" >
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TabWidget>
</HorizontalScrollView>
</LinearLayout>
</TabHost>
</LinearLayout>

下面说一下代码怎么写，首先要继承TabActivity，然后getTabHost()的到TabHost。

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;
public class Ex140_tabHostActivity extends TabActivity {
/** Called when the activity is first created. */
TabHost mTabHost;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mTabHost = getTabHost();
Intent intent1=new Intent(this,FirstActivity.class);
View view = LayoutInflater.from(this).inflate(R.layout.tabitem, null);
ImageView img = (ImageView) view.findViewById(R.id.p_w_picpathView1);
img.setImageResource(R.drawable.friend_qzone);
mTabHost.addTab(mTabHost.newTabSpec("tab1").setContent(intent1).setIndicator(view));
//方法和上面代码效果一样
addTab("tab2",R.drawable.friend_kaixin,SecondActivity.class);
addTab("tab3",R.drawable.friend_renren,ThirdActivity.class);
addTab("tab4",R.drawable.friend_sina,FirstActivity.class);
addTab("tab5",R.drawable.friend_tencent,SecondActivity.class);
}
private void addTab(String string, int imgId,Class clazz) {
View view = LayoutInflater.from(this).inflate(R.layout.tabitem, null);
ImageView img = (ImageView) view.findViewById(R.id.p_w_picpathView1);
img.setImageResource(imgId);
mTabHost.addTab(mTabHost.newTabSpec("tab2").setContent(new Intent(this,clazz)).setIndicator(view));
}
}

上面view的布局是一个图片，我在外面又套了一个RelativeLayout这样大家可以实现更复杂的样式，其实一般也用不到，一张图片足以在复杂的只要把它们做成图片就OK了。这里用了android：padding是因为图片背景设置了selecter，这样更容易看到选中时的状态。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/p_w_picpathView1"
android:layout_width="80dip"
android:layout_height="80dip"
android:padding="5dip"
android:layout_alignParentLeft="true"
android:background="@drawable/imgbg"
android:layout_alignParentTop="true"
android:src="@drawable/ic_launcher" />
</RelativeLayout>

TabWidget的选中状态是android：state_selected，selecter代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"><color android:color="#ff3333cc"/></item>
<item ><color android:color="#ffffaacc"/></item>
</selector>

如有意见或建议请留言，欢迎批评指正。源码见附件。

转载于:https://blog.51cto.com/zhizunbao/750546