多行TabWidget组件

最新推荐文章于 2023-01-29 15:08:43 发布
最新推荐文章于 2023-01-29 15:08:43 发布
阅读量420 收藏 1
点赞数
分类专栏： Android 文章标签： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ThornBird313/article/details/84712330
版权
android.widget.TabWidget组件继承自LinearLayout，默认水平布局横向显示多个Tab（改垂直布局似乎就不能正常显示了）。如果要显示多行，每行水平分布若干个Tab，TabWidget是无能为力的。我继承TabWidget实现了一个MultirowTabWidget类，可以显示多行Tab。效果图如下。


[img]http://dl2.iteye.com/upload/attachment/0107/5916/ab4d5b50-019e-3ad5-95d6-efc4d939de7c.jpg[/img]

[img]http://dl2.iteye.com/upload/attachment/0107/5920/5aceb310-52fa-3686-9b48-595d86c9f3ea.jpg[/img]

图1是初始状态，只显示单行Tab，图2是点击了“更多”后显示多行Tab的效果。

具体原理就是加一个maxTabCountOfRow属性用于保存每行最多显示多少个Tab，然后设置垂直布局，加进若干水平布局的LinearLayout进去，最终Tab实际被加进这些LinearLayout里。重写TabWidget的addView方法，每次有新的child加进来，先判断最后一个LinearLayout是否已加满，没加满就把新的Tab加到它里面，加满的话就创建下一个LinearLayout来放Tab。接下来贴一下主要的代码。

[b]MultirowTabWidget.java[/b] 

package com.thornbird.multirowtab.widget;

import java.lang.reflect.Field;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.TranslateAnimation;
import android.widget.LinearLayout;
import android.widget.TabWidget;

public class MultirowTabWidget extends TabWidget {

	private static final String ROW_TAG = "MultirowTabWidgetRow";

	private boolean mMultirow = false;

	private int mMaxTabCountOfRow = 5;

	private Drawable mVerticalDividerDrawable = null;

	public MultirowTabWidget(Context context) {
		super(context);

		initTabWidget();
	}

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

		initTabWidget();
	}

	public MultirowTabWidget(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);

		initTabWidget();
	}

	public MultirowTabWidget(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
		super(context, attrs, defStyleAttr, defStyleRes);

		initTabWidget();
	}

	@Override
	public void setGravity(int gravity) {
		super.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTAL);
	}

	@Override
	public void setOrientation(int orientation) {
		super.setOrientation(VERTICAL);
	}

	@Override
	public void setShowDividers(int showDividers) {
		super.setShowDividers(SHOW_DIVIDER_MIDDLE);
	}

	@Override
	public void setStripEnabled(boolean stripEnabled) {
		super.setStripEnabled(false);
	}

	@Override
	public void addView(View child) {
		int tabCount = getTabCount();
		int currentRowCount = (int) Math.ceil((double) tabCount / (double) mMaxTabCountOfRow);
		int rowCount = (int) Math.ceil((double) (tabCount + 1) / (double) mMaxTabCountOfRow);
		LinearLayout row = null;
		LayoutParams rlp = null;
		LayoutParams tlp = null;

		if (currentRowCount == rowCount) {
			row = (LinearLayout) getChildAt(this.getChildCount() - 1);
		} else {
			row = new LinearLayout(getContext());
			super.addView(row);
			row.setFocusable(false);
			row.setClickable(false);
			row.setOnClickListener(null);
			row.setOnFocusChangeListener(null);
			row.setDividerDrawable(mVerticalDividerDrawable);
			row.setShowDividers(SHOW_DIVIDER_MIDDLE);
			row.setOrientation(HORIZONTAL);
			row.setTag(ROW_TAG);
			rlp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
			rlp.setMargins(0, 0, 0, 0);
			row.setLayoutParams(rlp);
		}

		super.addView(child);
		removeView(child);
		tlp = new LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f);
		tlp.setMargins(0, 0, 0, 0);
		row.addView(child, tlp);
	}

	@Override
	public void removeAllViews() {
		int count = getChildCount();
		for (int i = 0; i < count; i++) {
			View view = getChildAt(i);
			Object tag = view.getTag();
			if (tag != null && tag.toString().equals(ROW_TAG)) {
				ViewGroup row = (ViewGroup) getChildAt(i);
				row.removeAllViews();
			}
		}

		super.removeAllViews();
	}

	@Override
	public int getTabCount() {
		int tabCount = 0;
		int count = getChildCount();
		for (int i = 0; i < count; i++) {
			View view = getChildAt(i);
			Object tag = view.getTag();
			if (tag != null && tag.toString().equals(ROW_TAG)) {
				ViewGroup row = (ViewGroup) getChildAt(i);
				tabCount = tabCount + row.getChildCount();
			} else {
				tabCount = tabCount + 1;
			}
		}
		return tabCount;
	}

	@Override
	public View getChildTabViewAt(int index) {
		View tab = null;
		int currentIndex = -1;
		int count = getChildCount();
		for (int i = 0; i < count; i++) {
			View view = getChildAt(i);
			Object tag = view.getTag();
			if (tag != null && tag.toString().equals(ROW_TAG)) {
				ViewGroup row = (ViewGroup) getChildAt(i);
				int tabCount = row.getChildCount();
				for (int j = 0; j < tabCount; j++) {
					currentIndex = currentIndex + 1;
					if (currentIndex == index) {
						tab = row.getChildAt(j);
						break;
					}
				}
			}
			if (tab != null)
				break;
		}
		return tab;
	}

	@Override
	protected int getChildDrawingOrder(int childCount, int i) {
		return i;
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);

		int measuredWidth = getMeasuredWidth();
		int measuredHeight = getExplicitHeight(true);
		setMeasuredDimension(measuredWidth, measuredHeight);

		ViewGroup.MarginLayoutParams mlp = (ViewGroup.MarginLayoutParams) getLayoutParams();
		if (mlp == null)
			return;

		int bottomMargin = 0;
		if (!mMultirow)
			bottomMargin = getExplicitHeight(false) - getExplicitHeight(true);
		if (mlp.bottomMargin != bottomMargin) {
			mlp.bottomMargin = bottomMargin;
			setLayoutParams(mlp);
		}
	}

	public boolean isMultirow() {
		return mMultirow;
	}

	public void setMultirow(boolean multirow) {
		if (mMultirow == multirow)
			return;

		mMultirow = multirow;
		new Handler().post(new Runnable() {
			@Override
			public void run() {
				setVisibility(INVISIBLE);
				requestLayout();
				playAnim();
			}
		});
	}

	public int getMaxTabCountOfRow() {
		return mMaxTabCountOfRow;
	}

	public void setMaxTabCountOfRow(int maxTabCountOfRow) {
		if (getChildCount() == 0)
			mMaxTabCountOfRow = Math.max(maxTabCountOfRow, 1);
	}

	public Drawable getVerticalDividerDrawable() {
		return mVerticalDividerDrawable;
	}

	public void setVerticalDividerDrawable(Drawable drawable) {
		mVerticalDividerDrawable = drawable;
	}

	public void setVerticalDividerDrawable(int resId) {
		setVerticalDividerDrawable(getResources().getDrawable(resId));
	}

	public int getExplicitHeight(boolean multirow) {
		int measuredHeight = 0;
		Drawable divider = getDividerDrawable();
		int dividerHeight = (divider == null ? 0 : divider.getIntrinsicHeight());
		int count = getChildCount();
		if (!multirow)
			count = 1;
		for (int i = 0; i < count; i++) {
			View view = getChildAt(i);
			if (i > 0 && i < count)
				measuredHeight = measuredHeight + dividerHeight;
			measuredHeight = measuredHeight + view.getMeasuredHeight();
		}
		return measuredHeight;
	}

	public int getSelectedTab() {
		Class<TabWidget> c = TabWidget.class;
		Field f = null;
		int selectedTab = -1;

		try {
			f = c.getDeclaredField("mSelectedTab");
		} catch (NoSuchFieldException e) {
			e.printStackTrace();
		}

		if (f != null) {
			f.setAccessible(true);
			try {
				Integer value = (Integer) f.get(this);
				if (value != null)
					selectedTab = value.intValue();
			} catch (IllegalArgumentException e) {
				e.printStackTrace();
			} catch (IllegalAccessException e) {
				e.printStackTrace();
			}
			f.setAccessible(false);
		}

		return selectedTab;
	}

	protected void initTabWidget() {
		setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTAL);
		setOrientation(VERTICAL);
		setShowDividers(SHOW_DIVIDER_MIDDLE);
		setStripEnabled(false);
	}

	protected void playAnim() {
		clearAnimation();
		if (getChildCount() <= 1 || getParent() == null)
			return;

		int fromValue = 0;
		int toValue = 0;
		if (mMultirow) {
			fromValue = getExplicitHeight(true) - getExplicitHeight(false);
			toValue = 0;
		} else {
			fromValue = getExplicitHeight(false) - getExplicitHeight(true);
			toValue = 0;
		}

		TranslateAnimation anim = new TranslateAnimation(0, 0, fromValue, toValue);
		anim.setDuration(150L);
		anim.setAnimationListener(new TabWidgetAnimationListener(MultirowTabWidget.this));
		startAnimation(anim);
	}


	private static class TabWidgetAnimationListener implements AnimationListener {

		private MultirowTabWidget mTabWidget = null;

		public TabWidgetAnimationListener(MultirowTabWidget tabWidget) {
			mTabWidget = tabWidget;
		}

		@Override
		public void onAnimationStart(Animation animation) {
		}

		@Override
		public void onAnimationEnd(Animation animation) {
			mTabWidget.setVisibility(VISIBLE);
		}

		@Override
		public void onAnimationRepeat(Animation animation) {
		}

	}

}


[b]main_tab_item_view.xml[/b] 

<?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:background="@drawable/main_tab_selector"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="@dimen/main_tab_image_padding">

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="@dimen/main_tab_image_size"
        android:layout_height="@dimen/main_tab_image_size"
        android:contentDescription="@string/imageview_description"
        android:focusable="false"
        android:scaleType="centerInside" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/main_tab_text_height"
        android:gravity="center_vertical"
        android:textSize="@dimen/main_tab_textview_text_size"
        android:textColor="@color/main_tab_text_selector" />

</LinearLayout>


[b]activity_main.xml[/b] 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.thornbird.multirowtab.MainActivity" >

    <android.support.v4.app.FragmentTabHost
        android:id="@+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="@+id/realtabcontent"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="0" />

            <com.thornbird.multirowtab.widget.MultirowTabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/main_tab_background" />
        </LinearLayout>
    </android.support.v4.app.FragmentTabHost>

</RelativeLayout>


[b]MainActivity.java[/b] 

package com.thornbird.multirowtab;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;

import com.thornbird.multirowtab.widget.MultirowTabWidget;
import com.thornbird.multirowtab.R;

public class MainActivity extends FragmentActivity {

	private static Class<?> sFragments[] = {FragmentPage.class, FragmentPage.class,
			FragmentPage.class, FragmentPage.class, FragmentPage.class, FragmentPage.class,
			FragmentPage.class, FragmentPage.class};

	private static int sTabImages[] = {R.drawable.main_tab_cart_selector,
			R.drawable.main_tab_mail_selector,
			R.drawable.main_tab_search_selector,
			R.drawable.main_tab_more_selector,
			R.drawable.main_tab_user_selector,
			R.drawable.main_tab_history_selector,
			R.drawable.main_tab_chart_selector,
			R.drawable.main_tab_settings_selector};

	private static String sTabIds[] = {"tab1", "tab2", "tab3", "tab4", "tab5", "tab6", "tab7", "tab8"};

	private static String sTabTexts[] = {"购物车", "信息", "搜索", "更多", "账户", "历史", "统计", "设置"};

	private LayoutInflater mLayoutInflater;
	private FragmentTabHost mTabHost;
	private MultirowTabWidget mTabWidget;

	private int mLastTabId = 0;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		setContentView(R.layout.activity_main);
		findViews();
		init();
		setListeners();
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}

	protected void findViews() {
		setContentView(R.layout.activity_main);

		mLayoutInflater = LayoutInflater.from(this);
		mTabHost = (FragmentTabHost)findViewById(R.id.tabhost);
		mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
		mTabWidget = (MultirowTabWidget) mTabHost.getTabWidget();
	}

	protected void init() {
		mTabWidget.setMaxTabCountOfRow(4);
		mTabWidget.setDividerDrawable(R.drawable.tab_divider_horizontal);
		mTabWidget.setVerticalDividerDrawable(R.drawable.tab_divider_vertical);

		int count = sFragments.length;
		for (int i = 0; i < count; i++) {
			String tag = sTabIds[i];
			TabSpec tabSpec = mTabHost.newTabSpec(tag).setIndicator(getTabItemView(i));
			mTabHost.addTab(tabSpec, sFragments[i], null);
		}
	}

	protected void setListeners() {
		mTabHost.setOnTabChangedListener(new OnTabChangeListener() {
			@Override
			public void onTabChanged(String tabId) {
				if (tabId.equals(sTabIds[3])) {
					mTabHost.setCurrentTab(mLastTabId);
					mTabWidget.setMultirow(!mTabWidget.isMultirow());
				} else {
					mLastTabId = mTabHost.getCurrentTab();
				}
			}
		});
	}

	@SuppressLint("InflateParams")
	private View getTabItemView(int index) {
		View view = mLayoutInflater.inflate(R.layout.main_tab_item_view, null);
		ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
		imageView.setImageResource(sTabImages[index]); 
		TextView textView = (TextView) view.findViewById(R.id.textview);
		textView.setText(sTabTexts[index]);
		return view;
	}

}


MultirowTabWidget类只适用于Tab显示在底部的FragmentTabHost或TabHost中，为了实现单行与多行间切换的动画，我设置MultirowTabWidget的底边边距用来显示单行或多行。其实最初的版本我是控制MultirowTabWidget中除第一个LinearLayout之外的LinearLayout隐藏或显示来显示单行与多行，那样的话应该能放到顶部，但加切换动画就麻烦点了。

[b]附件中的MultirowTab.zip是源码[/b]
ThornBird313
关注
专栏目录
TabWidget控件.
04-26
TabWidget控件.
IDEA 设置多行显示Tabs
最新发布
linhao's 博客
05-20 1503
当打开太多的Tab时，超出的部分就会隐藏起来，点击下拉才出来。IDEA 版本：2021.3.3。
Qt5多行自适应TabBar
10-23
基于Qt5的TabBar，可以自适应宽度，宽度不足时自动多行显示，Qt4也可以，稍加修改就好了，里面有效果图。
Qt多行自适应TabBar
程序改变世界
10-23 2438
效果图： 源码： https://download.csdn.net/download/yuyu414/10739465
Qt_QTabWidget_多行
weixin_30251587的博客
07-10 1172
ZC: 一下是网上搜到的一些信息 ZC: 我只是在 Android环境做了一些测试，别的环境暂未测试... 1、自定义 QTabBar子类 #ifndef MYTABBAR_H #define MYTABBAR_H #include <QTabBar> #include <QLabel> class MyTabBar : public QTa...
tabWidget.zip
08-05
本文将深入探讨在Qt环境中如何利用TabWidget组件实现一个具有左侧排列、文字横向排列的标签页功能，同时也会涉及到在Linux和Windows操作系统上的应用。 TabWidget是Qt Widgets模块中的一个重要组件，它允许我们在一...
Android编程之TabWidget选项卡用法实例分析
09-03
TabWidget是Android中用于创建选项卡式用户界面的一个重要组件，它通常配合TabHost一起使用，允许在一个屏幕中展示多个相互独立的内容区域。在Android编程中，使用TabWidget可以提供一种高效的多视图导航方式，使...
TabWidget实例
09-20
在Android开发中，`TabWidget`是一个非常重要的组件，它被广泛用于创建具有多个标签页的应用界面，每个标签页代表一个不同的视图或活动。`TabWidget`是Android TabHost组件的一部分，允许用户通过点击不同的标签来...
Android程序开发之自定义设置TabHost，TabWidget样式
09-02
TabHost和TabWidget是Android SDK提供的组件，用于实现多标签界面，让用户能够轻松地在不同的功能之间切换。本文将详细介绍如何自定义这两个组件的样式，以实现个性化的设计。 首先，让我们了解TabHost和TabWidget...
TabWidget.zip
12-29
TabWidget是Qt库中的一个核心组件，用于实现多页签窗口，类似于浏览器中的标签页。在这个《C++ Qt开发：TabWidget实现多窗体功能》的文章课件中，我们将深入探讨如何利用Qt的TabWidget来构建功能丰富的多窗体应用...
关于在QTabbar中出现多个Tab时隐藏出现QToolButton现象
liunanya的博客
03-29 1016
代码实现： pTabBar 为 QTabBar* ( (QWidget * )(pTabBar ->children().first()))->setFixedWidth(0); ( (QWidget *) (pTabBar ->children().last()))->setFixedWidth(0); Qt QSS样式设置 参考网页地址 https://www.cnbl...
PyQt5 中QToolbar分多行显示
forward_huan的博客
02-13 1242
解决方法是在需要添加下一行工具栏的时候添加以下语句 # 换行显示 self.addToolBarBreak() 示例代码 import sys from PyQt5.QtWidgets import * class Test(QMainWindow): def __init__(self): super(Test, self).__init__() self.setWindowTitle("QToolbar换行显示") self.resize(3
idea如何配置显示多行tab标签
sg_knight的专栏
01-29 5547
在项目开发中经常会打开多个tab标签，但是idea默认只显示一行标签，如果打开的tab标签太多导致一行显示不下，则会自动关闭标签。如果可以设置打开多行tab标签，则可以方便开发并极大提高开发效率。页面，设置并选中Multiple rows。
常用快捷键
路漫漫其修远兮，吾将上下而求索
04-19 1303
VSCode 向下插入一行：Ctrl+Enter
[Qt5&控件] 选项卡tabWidget控件隐藏&增加tab个数
Loewen丶的小窝
03-19 4717
一、头文件.h定义 QWidget* af; 二、在响应槽函数中添加增加&隐藏标签tab（这里我是通过复选框是否被选中来控制tab的个数：） double tabNum = ui.tabWidget->count(); if (ui.cbxDoubleModel->isChecked() == true) { //这里是初始化判断一下tab个数，个数为1才会添加标签，个数为2不会添加 if(tabNum == 1) { ui.t
Qt Widgets 之 QDockWidget（停靠窗口）
SummerPa的博客
07-10 3380
在 Qt 中，停靠窗口 (dock window) 都是QDockWidget 的实例，可以停靠在 QMainWindow 的中央部件 (central widget) 的上下左右四个区域，停靠的 QDockWidget 没有框架，有一个较小的标题栏；也可浮动出来作为独立窗口。 Qt 提供了很多相关示例，其中Main Window最为全面详细，我们今天就就着这个示例研究一下 QDockWidget 的用法及特性。 .......
TabWidget 添加多个tab
不解不惑
04-11 6823
Qt的TabWidget组件默认是有两个tab 如果想添加多个采用的方法是在其中一个tab上面右键选择插入也，然后选择在当前页之前或当前页之后
AndroidStudio上方Tab展示多行文件
qq_58156721的博客
07-30 1979
AndroidStudio显示多行文件
Android中文API(114)——TabWidget
weixin_34006965的博客
04-12 253
前言 　　本章内容是android.widget.TabWidget，版本为Android 3.0 r1，本章配备完善的截图、链接和示例代码，翻译来自"madgoat"，欢迎大家访问他的博客：http://madgoat.cn/，再次感谢"madgoat" ！期待你加入Android 中文翻译组，联系我over140@gmail.com。   声明 　　欢迎转载，但请保留文章原始出处:) ...
Android TabWidget用法详解与实例展示
总结来说，本文提供了关于如何在Android应用程序中使用TabWidget组件创建多标签界面的详细指南，包括不同实现策略的优缺点，以及关键布局代码的展示。对于Android开发者来说，理解并熟练运用这些技术是提高用户体验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值