Android 自定义选项卡按钮和选项卡位置

最新推荐文章于 2022-02-16 11:31:45 发布

最新推荐文章于 2022-02-16 11:31:45 发布 · 543 阅读

文章标签：

#Android #选项卡位置 #选项卡按钮 #自定义

Android开发同时被 2 个专栏收录

16 篇文章

订阅专栏

2011-09

9 篇文章

订阅专栏

本文详细介绍了如何在Android应用中自定义选项卡布局，并提供了完整的代码实现，包括选项卡按钮的设计、TabHost的使用以及主界面的集成。

这是前段时间做的一个项目的一部分，我把它单独提取出来！效果如下图：

可以把选项卡放在一个Activity的任何位置，自定义了选项卡按钮的背景颜色！

basicview_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#852741"
    >
    	<!-- 导入别的xml文件 -->
	<include	layout="@layout/title_bar"/>
    <TabHost xmlns:android="http://schemas.android.com/apk/res/android"  
   		android:id="@android:id/tabhost" android:layout_width="fill_parent"  
     	android:layout_height="fill_parent">  
   <LinearLayout android:orientation="vertical"  
    android:layout_width="fill_parent" android:layout_height="fill_parent"> 
   
      <TabWidget android:id="@android:id/tabs"  
      android:layout_width="fill_parent"   
      android:layout_height="wrap_content" /> 
      <FrameLayout android:id="@android:id/tabcontent"  
      android:layout_width="fill_parent"   
      android:layout_height="wrap_content"  
      android:layout_weight="3" >  
         
      </FrameLayout>
      
       
    </LinearLayout>  
</TabHost>  
</LinearLayout>

自定义选项卡按钮 TabButton

public class TabButton extends LinearLayout {

	public TabButton(Context c, int drawable, String text) {
		super(c);
		LayoutInflater inflater = LayoutInflater.from(c);
		View view = inflater.inflate(R.layout.tab_button_layout, null);

		addView(view);

		TextView tv = (TextView)     view.findViewById(R.id.tab_button_text);

		ImageView iv = (ImageView) view.findViewById(R.id.tab_button_img);
		iv.setImageResource(drawable);
		tv.setText(text);
	}
}

布局 tab_button_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="62dip"
    android:background="@drawable/tab_selector_bg"
    android:gravity="center"
    >
    <ImageView 
    	android:layout_width="240dip"
    	android:layout_height="wrap_content"
    	android:id="@+id/tab_button_img"
    	android:layout_gravity="center_horizontal"
    	/>
	<TextView  
	    android:layout_width="wrap_content" 
	    android:layout_height="wrap_content" 
	    android:id="@+id/tab_button_text"
	   	android:layout_gravity="center"
	   	android:textColor="#ffffff"
    />
</LinearLayout>

主界面代码 BasicViewTab

public class BasicViewTab extends TabActivity {

	private TabHost tabHost;
	private TextView textView;

	/* (non-Javadoc)
	 * @see android.app.ActivityGroup#onCreate(android.os.Bundle)
	 */
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.basicview_tab);
		
		Intent intent = new Intent(BasicViewTab.this,TabExpenses.class);
		intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
		textView = (TextView)findViewById(R.id.tv_title_bar);
		textView.setText("Basic View Factor");
		
		tabHost = getTabHost(); 
		tabHost.addTab(tabHost.newTabSpec("tab1")
				.setIndicator(new TabButton(this,
						R.drawable.tabbar_icon_basic_expenses_selector,
						"Expenses"))
	        	.setContent(intent));
		tabHost.addTab(tabHost.newTabSpec("tab2")
				.setIndicator(new TabButton(this,
						R.drawable.tabbar_icon_basic_setting_selector,
						"Setting"))
	        	.setContent(new Intent(this, TabSetting.class)));

		tabHost.setCurrentTab(0);
		
		ImageView backHome = (ImageView) findViewById(R.id.btn_back_home);
		backHome.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				BasicViewTab.this.finish();
			}
		});
	}
}

附件里有完整代码！