Android 垂直Tab

最新推荐文章于 2022-02-13 23:28:09 发布

原创最新推荐文章于 2022-02-13 23:28:09 发布 · 4.8k 阅读

1 ·

CC 4.0 BY-SA版权

android 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在Android中创建垂直方向的Tab布局。通过继承TabWidget并自定义，然后在XML中引用这个自定义组件。示例代码包括VerticalTab的实现以及在setting_tab.xml中的应用。

项目中要用到VerticalTab，查阅资料得以解决，记录下。

首先要继承TabWidget然后再xml引用自定义TabWidget。

xml文件:

		<UIVerticalTabWidget
			android:id="@android:id/tabs"
			android:layout_width="wrap_content"
			android:layout_height="fill_parent"
			android:gravity="top|right"
			android:paddingTop="5dp"
			android:background="@drawable/tabwidget_repeat_bg"/>

			<FrameLayout
				android:id="@android:id/tabcontent"
				android:layout_width="fill_parent"
				android:layout_height="fill_parent"
				android:background="@android:color/transparent"
				>

				<FrameLayout
					android:id="@+id/tab_1"
					android:layout_width="fill_parent"
					android:layout_height="fill_parent"
					android:background="@android:color/transparent"/>

				<FrameLayout
					android:id="@+id/tab_2"
					android:layout_width="fill_parent"
					android:layout_height="fill_parent" 
					android:background="@android:color/transparent"/>
				
				<FrameLayout
					android:id="@+id/tab_3"
					android:layout_width="fill_parent"
					android:layout_height="fill_parent" 
					android:background="@android:color/transparent"/>
				
				<FrameLayout
					android:id="@+id/tab_4"
					android:layout_width="fill_parent"
					android:layout_height="fill_parent" 
					android:background="@android:color/transparent"/>
			</FrameLayout>

VerticalTab代码：

public class UIVerticalTabWidget extends TabWidget {

	public UIVerticalTabWidget(Context context, AttributeSet attrs) {
		super(context, attrs);

		setOrientation(LinearLayout.VERTICAL);
	}

	@Override
	public void addView(View child) {
		ViewGroup.LayoutParams lp = new LayoutParams(
				LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		child.setLayoutParams(lp);
		
		super.addView(child);
	}
}

最后使用代码：

		View view = getLayoutInflater().inflate(R.layout.setting_tab, null);
		tabSpec = mTabHost.newTabSpec("1");
		tabSpec.setIndicator(view);
		tabSpec.setContent(R.id.tab_1);
		mTabHost.addTab(tabSpec);

setting_tab.xml：

<?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:background="@drawable/tab_selector"
    android:gravity="center"
    >

    <TextView
        android:id="@+id/setting_tab_title"
        android:layout_width="20dp"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:text="常规设置" 
        android:textColor="#FFFFFF"
        android:layout_marginTop="3dp"
        android:layout_marginBottom="5dp"/>

</LinearLayout>

效果如下图：