CN102655548A - 一种标签栏实现方法及装置 - Google Patents

Abstract

本发明提供了一种移动终端中的标签栏实现方法及装置，包括获取标签栏在屏幕上的区域，在获得的区域中放置标签栏的信息；同时，根据设置的标签栏的区域调整主界面范围，并屏蔽系统自带标签栏。通过本发明方法，在手机横屏状态下，标签栏可以根据用户设置，实现了自动在手机屏幕靠左或靠右的垂直布局，这样，有效地节省了标签栏所占的屏幕区域面积、方便了用户点击。

Description

一种标签栏实现方法及装置

技术领域

本发明涉及移动终端应用程序实现技术，尤指一种移动终端中的标签栏实现方法及装置。

背景技术

随着社会的发展，手机逐渐成为了人们生活必备的信息交流与获取的工具。如图1所示，目前市场上较为流行的iPhone、Android平台上的手机应用程序界面一般从上到下依次为状态栏、主界面、标签栏。其中，状态栏是指位于手机顶端显示网络信号、电池容量、时间等状态信息的长方形区域；主界面是指手机应用程序主要内容的展示区域；标签栏通常位于手机底部由若干按钮组成，可以切换应用程序界面的长方形区域；应用程序窗口是状态栏之外的应用程序区域。

而在手机横屏状态下，标签栏的布局仍然是是位于手机屏幕的底部，如图2所示。现有iPhone，Android平台上应用程序在横屏时对标签栏的处理方法较为简单，存在以下几个缺点：

1)手机屏幕空间较小，横屏状态下，标签栏所占区域大大增多，直接造成主界面区域变小，展示的信息减少。

2)用户的手在横屏状态下通常握在手机的左右端，此时要用手指点击屏幕下方的标签栏，手指需要移动的距离较远，影响用户感知。

发明内容

有鉴于此，本发明的主要目的在于提供一种标签栏实现方法及装置，能够有效节省标签栏所占的屏幕区域面积，方便用户使用。

为达到上述目的，本发明的技术方案是这样实现的：

一种移动终端中的标签栏实现方法，包括：

获取标签栏在屏幕上的区域，在获得的区域中放置标签栏的信息；

根据设置的标签栏的区域调整主界面范围，并屏蔽系统自带标签栏。

该方法之前还包括：监听移动终端已有的横竖屏切换事件，在转换为横屏时，从获取标签栏在屏幕上的区域步骤开始执行。

所述移动终端屏幕为M*N，标签栏位于移动终端屏幕的左边；

所述标签栏在屏幕上的区域为(0，K，W，M-K)，其中，状态栏的高度为K，标签栏的宽度为W。

所述移动终端屏幕为M*N，标签栏位于移动终端屏幕的右边；

所述标签栏在屏幕上的区域为(N-W，K，W，M-k)，其中，状态栏的高度为K，标签栏的宽度为W。

所述在获得的区域中放置标签栏的信息包括：

预先分别存储横屏和竖屏两种状态下的两张标签栏的背景图；

根据所述得到的标签栏在屏幕上的区域，从程序包中读取图片作为标签栏的背景图。

该方法还包括：定义主界面范围为(top，left，bottom，right)，其中，top，left，bottom，right分别表示与窗口顶部、左部、底部、右部的距离，且默认值为(0，0，0，0)；

所述标签栏的宽为W，高为H；

所述调整主界面范围为：在移动终端竖屏的状态下，主界面范围被调整为(0，0，H，0)；

在移动终端横屏的状态下，且标签栏在左边时，主界面范围被调整为(0，W，0，0)；当标签栏在右边时，主界面范围为(0，0，0，W)。

所述屏蔽系统自带标签栏包括：将移动终端的主界面的高度增加H，其中，H为标签栏的高度。

一种移动终端中的标签栏实现装置，至少包括标签栏区域获取模块和调整模块，其中，

标签栏区域获取模块，用于获取标签栏在屏幕上的区域，并在获得的区域中放置标签栏的信息；

调整模块，用于根据设置的标签栏的区域调整主界面范围，并屏蔽系统自带标签栏。

还包括切换模块，用于监听手机已有的横竖屏切换事件；

在转换为横屏时，向标签栏区域获取模块发送第一通知，通知标签栏区域获取模块进行横屏时对标签栏的处理；在转换为竖屏时，发送第二通知，通知现有用于处理手机竖屏时标签栏的设置的功能模块进行竖屏时对标签栏的处理。

从上述本发明提供的技术方案可以看出，包括获取标签栏在屏幕上的区域，在获得的区域中放置标签栏的信息；同时，根据设置的标签栏的区域调整主界面范围，并屏蔽系统自带标签栏。通过本发明方法，在手机横屏状态下，标签栏可以根据用户设置，实现了自动在手机屏幕靠左或靠右的垂直布局，这样，有效地节省了标签栏所占的屏幕区域面积、方便了用户点击。

附图说明

图1为现有竖屏手机应用程序界面的示意图；

图2为现有横屏手机应用程序界面的示意图；

图3为本发明标签栏实现方法的流程图；

图4为本发明横屏手机应用程序界面中标签栏位于左边的示意图；

图5为本发明横屏手机应用程序界面中标签栏位于左边的示意图；

图6为本发明标签栏实现装置的组成结构示意图。

具体实施方式

图3为本发明标签栏实现方法的流程图，如图3所示，包括：

步骤300：获取标签栏在屏幕上的区域。本步骤具体包括：

首先，计算自定义标签栏(相对于手机自带标签栏)的区域：移动终端如手机屏幕是一个二维坐标系，水平方向为X轴，垂直方向为Y轴，坐标原点通常位于左上角，即左上角的坐标为(0，0)。因此，任何一个区域可以通过一个4维向量表示(x，y，width，height)，其中，x表示X轴的坐标，y表示Y轴坐标，width表示宽度，height表示高度。

以M*N的手机屏幕为例，竖屏时，手机屏幕可表示为(0，0，M，N)，横屏时，手机屏幕可表示为(0，0，N，M)。假定状态栏的高度为K，标签栏的宽度为W。

手机竖屏时，标签栏位于屏幕底部，区域为(0，N-K，M，K)。

手机横屏时，标签栏垂直布局，可能存在以下两种情况：

其中一种如图4所示，标签栏位于左边，应用程序窗口的区域为状态栏以下的所有区域，即为(0，K，N，M-K)。那么，标签栏的左上角与应用程序窗口的左上角一致，标签栏的区域为(0，K，W，M-K)。

另外一种如图5所示，标签栏位于右边，应用程序窗口的区域仍为(0，K，N，M-K)。此时，标签栏的右下角与应用程序窗口的右下角重合，标签栏的区域为(N-W，K，W，M-k)。

要是状态栏不存在时，取K＝0即可。

然后，计算标签栏中每个标签的区域：假设标签栏的宽为W，高为H，标签数为n。在手机竖屏的状态下，从左到右绘制标签，每个标签的宽为W/n，高为H。在手机横屏的状态下，从上到下绘制标签，每个标签的宽为W，高为H/n。其中，绘制标签的具体实现属于本领域技术人员惯用技术手段，这里不再赘述。

步骤301：在获得的区域中放置标签栏的信息。本步骤具体包括：

预先分别存储横屏和竖屏两种状态下的两张标签栏的背景图；根据步骤300中计算得到的区域，假设标签栏的宽为W，高为H。从程序包中读取一张W*H的图片，作为标签栏的背景图。假设标签栏中包括4个标签，每个标签在横屏和竖屏状态下均分别需要选中状态和非选中状态两张图，一共需要16张图(假设命名格式分别为：normal1，...，normal4，selected1，...，selected4，landscape_normal1，...，landscape_normal4，landscape_selected1，...，landscape_selected4)。其中normal表示非选中态，selected表示选中态，landscape表示横屏。若当前非选中标签为a，选中标签b时，需要设置a的背景图为normala，再设置b的背景图为selectedb。

步骤302：根据设置的标签栏的区域调整主界面范围，并屏蔽系统自带标签栏。

本步骤具体包括：定义主界面范围为(top，left，bottom，right)，其中，top，left，bottom，right分别表示主界面与窗口顶部、左部、底部、右部的距离，默认为(0，0，0，0)。为了避免自定义标签栏覆盖在主界面的内容上，主界面的范围需要为自定义标签栏腾出区域，此时，在手机竖屏的状态下，主界面范围为(0，0，H，0)；在手机横屏的状态下，且标签栏在左边时，主界面范围为(0，W，0，0)；当标签栏在右边时，主界面范围为(0，0，0，W)。

本步骤中隐藏系统自带标签栏具体包括：系统导航控件(如，iPhone平台上的UITabBarController)自带有标签栏，为了显示本发明自定义标签栏，可以通过将自带标签栏的位置移出到手机可显示屏幕范围外，来实现隐藏自带标签栏的效果。具体方法包括：将主界面的高度增加H(该H即为标签栏的高度)，这样，系统的标签栏控件就不会显示在手机屏幕上了。需要说明的是，对系统自带标签栏的步骤在本发明方法中的执行位置比较灵活，也可以在步骤300之前，或本发明方法中的任何位置执行。

通过本发明方法，在手机横屏状态下，标签栏可以根据用户设置，实现了自动在手机屏幕靠左或靠右的垂直布局，这样，有效地节省了标签栏所占的屏幕区域面积、方便了用户点击。

本发明方法还包括横屏与竖屏的切换，具体包括：监听手机已有的横竖屏切换事件，在转换为横屏时，按照步骤300～步骤302执行；在转换为竖屏时，按照现有方法执行即可。

图6为本发明标签栏实现装置的组成结构示意图，如图6所示，至少包括标签栏区域获取模块和调整模块，其中，

标签栏区域获取模块，用于获取标签栏在屏幕上的区域，并在获得的区域中放置标签栏的信息。

调整模块，用于根据设置的标签栏的区域调整主界面范围，并屏蔽系统自带标签栏。

进一步地，本发明装置设置在手机中，与现有手机竖屏情况下的标签栏设置功能结合使用，此时，本发明装置还包括切换模块，用于监听手机已有的横竖屏切换事件，在转换为横屏时，向标签栏区域获取模块发送第一通知，通知标签栏区域获取模块进行横屏时对标签栏的处理；在转换为竖屏时，发送第二通知，通知现有用于处理手机竖屏时标签栏的设置的功能模块进行竖屏时对标签栏的处理。

以上所述，仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (9)

1.一种移动终端中的标签栏实现方法，其特征在于，包括：

获取标签栏在屏幕上的区域，在获得的区域中放置标签栏的信息；

根据设置的标签栏的区域调整主界面范围，并屏蔽系统自带标签栏。

2.根据权利要求1所述的标签栏实现方法，其特征在于，该方法之前还包括：监听移动终端已有的横竖屏切换事件，在转换为横屏时，从获取标签栏在屏幕上的区域步骤开始执行。

3.根据权利要求1或2所述的标签栏实现方法，其特征在于，所述移动终端屏幕为M*N，标签栏位于移动终端屏幕的左边；

所述标签栏在屏幕上的区域为(0，K，W，M-K)，其中，状态栏的高度为K，标签栏的宽度为W。

4.根据权利要求1或2所述的标签栏实现方法，其特征在于，所述移动终端屏幕为M*N，标签栏位于移动终端屏幕的右边；

所述标签栏在屏幕上的区域为(N-W，K，W，M-k)，其中，状态栏的高度为K，标签栏的宽度为W。

5.根据权利要求1或2所述的标签栏实现方法，其特征在于，所述在获得的区域中放置标签栏的信息包括：

预先分别存储横屏和竖屏两种状态下的两张标签栏的背景图；

根据所述得到的标签栏在屏幕上的区域，从程序包中读取图片作为标签栏的背景图。

6.根据权利要求1或2所述的标签栏实现方法，其特征在于，该方法还包括：定义主界面范围为(top，left，bottom，right)，其中，top，left，bottom，right分别表示与窗口顶部、左部、底部、右部的距离，且默认值为(0，0，0，0)；

所述标签栏的宽为W，高为H；

所述调整主界面范围为：在移动终端竖屏的状态下，主界面范围被调整为(0，0，H，0)；

在移动终端横屏的状态下，且标签栏在左边时，主界面范围被调整为(0，W，0，0)；当标签栏在右边时，主界面范围为(0，0，0，W)。

7.根据权利要求1或2标签栏实现方法，其特征在于，所述屏蔽系统自带标签栏包括：将移动终端的主界面的高度增加H，其中，H为标签栏的高度。

8.一种移动终端中的标签栏实现装置，其特征在于，至少包括标签栏区域获取模块和调整模块，其中，

标签栏区域获取模块，用于获取标签栏在屏幕上的区域，并在获得的区域中放置标签栏的信息；

调整模块，用于根据设置的标签栏的区域调整主界面范围，并屏蔽系统自带标签栏。

9.根据权利要求8所述的标签栏实现装置，其特征在于，还包括切换模块，用于监听手机已有的横竖屏切换事件；

在转换为横屏时，向标签栏区域获取模块发送第一通知，通知标签栏区域获取模块进行横屏时对标签栏的处理；在转换为竖屏时，发送第二通知，通知现有用于处理手机竖屏时标签栏的设置的功能模块进行竖屏时对标签栏的处理。

Images