在 UITabbarController 中均匀放置 UITabbarItem

Posted 2023-03-22

【中文标题】在 UITabbarController 中均匀放置 UITabbarItem

【英文标题】：Evenly place UITabbarItem in UITabbarController

【发布时间】：2013-05-27 07:56:28

【问题描述】：

以下是 iPad UITabbar 的 2 张图片。默认情况下，我得到顶部的。但我需要让它像第二个（在整个屏幕上均匀分布）而不使用自定义标签栏。有可能吗？！

已编辑：正如我在其中一个 cmets 中提到的。默认情况下，第一个 tabbarItem 从 300 px 或其他东西开始。而我希望 tabitem 1 的选择区域应该是 px-0-256。在这里我们可以看到，所有默认选项卡都在中心，下面是“如何获胜”和“记录”选项卡。因此，当我们按下设计上的主页按钮时，技术上什么都不会发生。

【问题讨论】：

为什么需要自定义标签栏？您可以轻松放置选中状态和未选中状态的图像

是的，但问题是 - 默认情况下，第一个 tabbarItem 从 300 px 或其他东西开始。而我希望 tabitem 1 的选择区域应该是 px-0-256。在这里我们可以看到，所有默认选项卡都在中心，下面是“如何获胜”和“记录”选项卡。因此，当我们按下设计上的主页按钮时，技术上什么都不会发生。

【参考方案1】：

你不能。

糟透了，是吗？幸运的是，用几个按钮并排滚动你自己的类似标签栏的视图并不难，实现一个视图控制器来保持你的 ersatz 标签栏并包含子控制器也不难。 （请查看UIViewController 的文档的“实现容器视图控制器”部分以了解有关此主题的更多信息。）

【参考方案2】：

假设您在这里谈论 ios， 我知道这样做的两种方法基本上是，在 XCODE 中，制作一个选项卡式应用程序，转到他的 Storyboard 文件，将选项卡视图连接到控制器。然后为标签制作图像并替换它们。

正如我发现的，这里复制了：http://kurrytran.blogspot.tw/2011/10/ios-5-tutorial-creating-custom-tab-bar.html

在 Html5 中，我认为你可以这样做：

<nav id="tabbar">
<ul>
<!-- Action & navigation -->
<li style="width: 20%; "><a href="#home" class="flip" style=""><strong>Home</strong><div class="home"></div></a></li>    
<li style="width: 20%; "><a href="#cat1" class="flip current" style=""><strong>RSS Feed</strong><div class="rss"></div></a></li>
<li style="width: 20%; "><a href="#cat2" class="flip" style="">   <strong>Twitter</strong><div class="twitter"></div></a></li>
<li style="width: 20%; "><a href="#cat3" class="flip" style=""><small class="badge right">3</small><strong>Flickr</strong><div class="flickr"></div></a></li>
<li style="width: 20%; "><a onclick="moveDown();" class="flip" style=""><strong>Search</strong><div class="search2"></div></a></li>

</ul>
</nav>

编辑： 此外，使其适合的一种方法是调整图像的大小，使其两侧为空白，并更改 iphone5-portrait、ipad2-landscape 等的图像。

编辑2： 除此之外，唯一的其他方法是使用 UIToolbar 创建一个类似于创建自定义按钮预设的选项卡栏。然后改变看法。 如果不是，那么就不可能或切换到上面那个 html 元素。

【讨论】：

是的，我在这里谈论的是 iOS。但是您提供的链接不会调整标签栏项目的大小。再看看图像。默认的标签栏项目集中在中心，而不是在整个宽度上均匀放置。我需要它。

是的，我明白了。我想调整图像大小可能会有所帮助，对吗？正如我在第二张图片中看到的那样，您可能想在图像的侧面添加一些空白区域...

如果有误导，我很抱歉。但是第二张图片的末端没有空格。我只需要每个 tabbaritem width = 1024/4 而不是集中在中心。这样当用户点击第二张图片中的标签时，他们最终不会像默认标签栏中那样点击空白区域。

为每个选项卡制作 256 像素宽的图标时会发生什么？

这是我的问题。我可以将图像设置为 256 像素宽。如何设置 256 像素宽度的选项卡项？即可点击区域 = 256 像素。