1、上面的标题过多,我们选择的方法是让TabBar显示有限的标题
2、TabBar的每一项的宽度(Button的宽度)都是根据标题的长度来设置的,超出的部分不现实
<s:Group id="myContainer" height="100%" clipAndEnableScrolling="true"
width="{this.width-50}">
<s:TabBar id="menuBar" dataProvider="{source}" alpha="1" skinClass="components.tabbar.TabBarSkin_Scroll" click="menuBar_clickHandler(event)"/>
</s:Group>
3、四个移动思想的代码
/*
往右移动
坐标(负的)+当前总长度>窗口
原来坐标+视口-(坐标(负的)+当前总长度)
*/
private function checkRight():void{
var index:int=menuBar.selectedIndex;
var maxIndex:int=this.source.length-1;
if(index==maxIndex){
return;
}
index++;
menuBar.selectedIndex=index;
var sum:Number=0;//长度
for(var i:int=0;i<=index;i++){
sum+=FlexGlobals.topLevelApplication.itemWidthArr[i];
}
if((sum+menuBar.x)>myContainer.width){
menuBar.move(menuBar.x+myContainer.width-(sum+menuBar.x),menuBar.y);
}
}
private function checkLeft():void{
/*
往左移动
坐标(负的)+当前总长度<当前选择的索引长度
原来坐标+当前选择的索引长度-(坐标(负的)+当前总长度)
*/
var index:int=menuBar.selectedIndex;
if(index<1){
return;
}
var maxIndex:int=this.source.length-1;
index--;
menuBar.selectedIndex=index;
var sum:Number=0;//长度
for(var i:int=0;i<=index;i++){
sum+=FlexGlobals.topLevelApplication.itemWidthArr[i];
}
if((sum+menuBar.x)<FlexGlobals.topLevelApplication.itemWidthArr[i]){
menuBar.move(menuBar.x+FlexGlobals.topLevelApplication.itemWidthArr[i]-(sum+menuBar.x),menuBar.y);
}
}
private function checkFirst():void{
/*
选择第一个
*/
if(menuBar.selectedIndex==0){
if(menuBar.x!=0){
menuBar.move(0,menuBar.y);
}
}
}
private function checkLast():void{
/*
选择第一个
*/
if(menuBar.selectedIndex==source.length){
if(menuBar.x!=(myContainer.width-menuBar.width)){
menuBar.move(0,myContainer.width-menuBar.width);
}
}
}
4、时间有限,有问题留言哈,详细代码附件 。
5、如果您有更好的解决方案或代码有缺陷的地方,望告之,一定虚心接受,谢谢。
- 大小: 4.1 KB
分享到:
相关推荐
本篇文章将详细介绍如何在Flex中实现TabBar组件的自动换行功能。 首先,我们需要理解Flex的TabBar组件的工作原理。TabBar是基于MX组件库中的ButtonBar组件构建的,它继承了ButtonBar的布局特性。ButtonBar使用...
flex4 TabBar skin
在Adobe Flex 4中,TabBar是一种常见的用户界面组件,用于创建具有多个选项卡的应用界面,它允许用户在不同的视图或内容之间进行切换。TabBar组件是Spark组件库的一部分,提供了更加灵活和可定制的界面设计,提升了...
在IT行业中,`flex tabBar`通常指的是使用Flex布局来实现的底部导航栏。这是一种常见的用户界面元素,尤其在移动应用中广泛使用,用于在多个页面或功能之间切换。`flex tabBar`利用CSS Flexible Box(Flexbox)布局...
在Tabbar场景中,`ViewPager`常与`TabLayout`配合使用,实现Tabbar的滑动式切换效果: 1. **添加ViewPager**:在主布局文件中添加`ViewPager`,并设置适配器以加载多个Fragment。 2. **创建TabLayout**:在`...
本篇文章将详细讲解如何在iOS中实现TabBar,包括高亮显示选项卡以及视图的切换效果。 首先,我们要了解TabBarController是苹果提供的一个系统控制器,它负责管理一组ViewController,并在TabBar上展示这些...
接下来,我们将在`CustomTabBar`类中实现自定义TabBar的功能。首先是改变TabBar的大小,可以通过设置`tabBar.frame`来完成: ```swift override func viewDidLoad() { super.viewDidLoad() tabBar.frame = ...
本篇文章将深入探讨如何在iOS中实现一个独特的中间凸起圆形的TabBar,模仿闲鱼应用的设计效果。我们将涉及到Swift编程语言、UIKit框架以及自定义视图控件的创建。 首先,我们需要了解TabBar的基本结构。在iOS中,...
以上就是实现Flex中多行Tab的基本原理和操作步骤。通过理解这些知识点,你可以根据实际需求定制自己的Tab导航,为用户提供更友好的界面体验。记住,良好的用户体验往往来源于对细节的关注和优化。
5. 动态调整TabBar布局:为了让中间item更加突出,可能还需要调整TabBar的布局,比如增加中间item的宽度或高度,这需要在自定义的TabBar类中实现。 6. 适配屏幕旋转和不同设备尺寸:为了确保突出效果在不同设备和...
在Flex中,按钮是通过mx.controls.Button类实现的。创建一个垂直按钮并不意味着按钮本身会旋转90度,而是指按钮群组按照垂直方向进行布局。这通常通过设置容器的布局属性来实现,比如使用垂直Box布局或VGroup布局。...
本文将详细阐述如何在iOS应用中纯代码实现TabBar和Navigation的集成。 首先,我们需要创建一个TabBarController类,继承自UITabBarController。在这个类中,我们将设置TabBar的各个标签项(TabBarItem)。每个标签...
在提供的压缩包文件"左右滑动tabbar"中,你应该能找到实现这种功能的示例代码。这个例子可能包括了`CustomTabBar`的自定义视图类,以及如何在`UITabBarController`中集成和使用它的示例。通过研究和修改这个例子,你...
在这个"tabbar练习小项目"中,我们将深入探讨TabBar的实现、设计原则以及它在实际应用中的运用。 TabBar的基本功能: 1. **导航**:TabBar的主要功能是提供用户在应用内的导航,让用户能够快速访问主要的功能区域。...
3、实现自由组合tabBar菜单项目,支持自由组合总数超过5个tabBar菜单。 4、本示例是7个底部导航,分2种权限,权限1显示1,2,3;权限2显示4,5,6,7; 5、你也可以根据自己随便组合显示导航,比如1,3,5;2,4,6...
要实现标题中提到的"中间凸起”效果,我们需要创建一个自定义的`UITabBarController`子类,并覆写其`tabBar`属性。这样,我们可以通过自定义的`TabBar`类来控制每个按钮的外观和布局。以下是一个简单的步骤概述: 1...
以上代码展示了如何实现标题中提到的两个功能。在实际项目中,你可以根据需求调整参数,如渐变的速度、TabBar按钮的凸起程度等,以达到理想的效果。通过这些自定义设计,你的应用将更加独特,更能吸引用户的眼球。在...
在iOS应用开发中,`UITabBarController` 是一个非常重要的组件,它用于实现底部的标签栏界面,让用户可以通过点击不同的标签来切换不同的视图控制器。本文将深入探讨如何在iOS中进行`TabBar`的嵌套使用,以及相关的...
本教程将详细讲解如何在微信小程序中实现自定义TabBar,参考“微信小程序实现自定义tabBar(类似咸鱼)tabbar-master.zip”项目。 首先,理解微信小程序中的TabBar结构。在微信小程序的配置文件app.json中,TabBar...