android > tabHost > 微博布局风格

最新推荐文章于 2025-09-11 23:53:02 发布

原创最新推荐文章于 2025-09-11 23:53:02 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动开发

android 专栏收录该内容

128 篇文章

订阅专栏

本文介绍了一种使用TabHost实现底部导航栏的方法，并详细展示了如何通过不同的布局方式避免Tab层遮挡主内容层的问题。此外，还提供了具体的Java代码示例，包括如何设置Tab的图标、文字以及切换时的效果。

tab.xml 布局

<?xml version="1.0" encoding="utf-8"?>
    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        xmlns:android="http://schemas.android.com/apk/res/android">
        
        <RelativeLayout 
            android:id="@+id/relativeLayout1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" >

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
                
                    <TabWidget
                        android:id="@android:id/tabs"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"/>
           
        </RelativeLayout>
    </TabHost>

----- 其中解决 TAB层遮住了后面的主层的解决办法的布局

<?xml version="1.0" encoding="utf-8"?>
    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        xmlns:android="http://schemas.android.com/apk/res/android">
        
        <LinearLayout 
            android:id="@+id/relativeLayout1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" >

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_weight="1" 
                android:layout_height="fill_parent" />
                
            <TabWidget
                  android:id="@android:id/tabs"
                  android:layout_width="fill_parent"
                  android:layout_weight="10" 
                  android:layout_height="fill_parent"/>
           
        </LinearLayout>
    </TabHost>

tab_list.xml

<?xml version="1.0" encoding="UTF-8"?>
 
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:paddingTop="3dip" android:paddingBottom="3dip" android:background="#393C42"
 
  xmlns:android="http://schemas.android.com/apk/res/android">
 
    <ImageView android:id="@+id/tab_imageview_icon" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="fitCenter" />
 
    <TextView android:id="@+id/tab_textview_title" android:textColor="#FFFFFF" android:textSize="10dip"  android:ellipsize="marquee" android:gravity="center" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" android:marqueeRepeatLimit="1" />
 
</LinearLayout>

主activity

package tab.mft;

import cfg.mft.CfgIndex;
import login.mft.LoginAddSensor;
import login.mft.LoginIndexActivity;
import remote2.mft.R;
import android.app.TabActivity;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TextView;

public class TabIndex extends TabActivity{
	
	private TabHost tabHost;  
    private static final String SYS = "系统";  
    private static final String SERVERS = "服务";  
    private static final String MORE = "更多";    
    
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);	
		setContentView(R.layout.tab);
		tabHost=getTabHost();
		
		final View view=View.inflate(TabIndex.this, R.layout.tab_list, null);
		view.setBackgroundColor(Color.rgb(33,36,41)); //默认第一个点亮
		((ImageView)view.findViewById(R.id.tab_imageview_icon)).setImageResource(R.drawable.icon_home_sel); //默认第一个点亮
		((TextView)view.findViewById(R.id.tab_textview_title)).setText(SYS); 
		TabHost.TabSpec tabSpec=tabHost.newTabSpec(SYS).setIndicator(view).setContent(new Intent(TabIndex.this, LoginIndexActivity.class));
		tabHost.addTab(tabSpec);
		
		final View view1=View.inflate(TabIndex.this, R.layout.tab_list, null);
		((ImageView)view1.findViewById(R.id.tab_imageview_icon)).setImageResource(R.drawable.icon_selfinfo_nor);
		((TextView)view1.findViewById(R.id.tab_textview_title)).setText(SERVERS); 
		TabHost.TabSpec tabSpec1=tabHost.newTabSpec(SERVERS).setIndicator(view1).setContent(new Intent(TabIndex.this, LoginAddSensor.class));
		tabHost.addTab(tabSpec1);
		
		final View view2=View.inflate(TabIndex.this, R.layout.tab_list, null);
		((ImageView)view2.findViewById(R.id.tab_imageview_icon)).setImageResource(R.drawable.icon_more_nor);
		((TextView)view2.findViewById(R.id.tab_textview_title)).setText(MORE); 
		TabHost.TabSpec tabSpec2=tabHost.newTabSpec(MORE).setIndicator(view2).setContent(new Intent(TabIndex.this, LoginAddSensor.class));
		tabHost.addTab(tabSpec2);
		
		tabHost.setCurrentTab(0);
		
		//设置切换监听
		tabHost.setOnTabChangedListener(new OnTabChangeListener(){
			public void onTabChanged(String tabId){
				((ImageView)view.findViewById(R.id.tab_imageview_icon)).setImageResource(R.drawable.icon_home_nor);
				view.setBackgroundColor(Color.rgb(57,60,66));
				((ImageView)view1.findViewById(R.id.tab_imageview_icon)).setImageResource(R.drawable.icon_selfinfo_nor);
				view1.setBackgroundColor(Color.rgb(57,60,66));
				((ImageView)view2.findViewById(R.id.tab_imageview_icon)).setImageResource(R.drawable.icon_more_nor);
				view2.setBackgroundColor(Color.rgb(57,60,66));
				
				if(tabId.equals(SYS)){
					((ImageView)view.findViewById(R.id.tab_imageview_icon)).setImageResource(R.drawable.icon_home_sel);
					view.setBackgroundColor(Color.rgb(33,36,41));
				}
				if(tabId.equals(SERVERS)){
					((ImageView)view1.findViewById(R.id.tab_imageview_icon)).setImageResource(R.drawable.icon_selfinfo_sel);
					view1.setBackgroundColor(Color.rgb(33,36,41));
				}
				if(tabId.equals(MORE)){
					((ImageView)view2.findViewById(R.id.tab_imageview_icon)).setImageResource(R.drawable.icon_more_sel);
					view2.setBackgroundColor(Color.rgb(33,36,41));
				}
			}
		});

	}
}