Android - iphone 风格 tabhost
是否可以将 Android Tabhost 设计得像 iPhone 一样? 如果没有,是否有任何开源代码可以展示如何为 Android 创建底部选项卡?
(来源:appshopper.com)
Is it possible to style the Android Tabhost to look like that of the iPhone?
If not, is there any open source code that can show how to create Bottom Tabs for Android ?
(source: appshopper.com)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
我建议你们不要改变选项卡的默认外观和感觉,因为Android设备上的用户有自己的用户体验,你会否定过去的体验,所以不要强迫他们学习新的选项卡体验(因为用户使用移动设备的人很懒于学习新事物,通常他们依赖于过去的经验。)
请参阅 纯 Android 了解更多。
不过,如果您想继续,我已将默认的
Android
选项卡自定义为看起来像iPhone
选项卡。它很简单,并且具有默认的
Android
选项卡的 ui 组件(̶T̶a̶b̶H̶o̶s̶t̶
、̶T̶a̶b̶W̶i̶d̶g̶e̶t̶
)。下载链接:
GitHub、Iphone-Tab-in-Android
此示例已升级为使用
TabLayout
和ViewPager
相关博客条目可在此处找到:
Android 中类似 iPhone 的选项卡。
屏幕截图:
我还对选项卡主机进行了自定义,使其看起来像凸起的中心选项卡。
要下载 RaiseCenterTab,请转到此处GitHub:RaishedCenterTab。
I would suggest you guys to not change the default look and feel of the tabs, because users on android devices have their own user experience, and you will negate that past experience, so don't force them to learn new tabs experience (because users on mobile are so lazy to learn new things, usually they rely on their past experience.)
See Pure Android for more.
However if you want to go ahead, I've customized the default
Android
Tabs to be look likeiPhone
tabs.Which is simple and features default
Android
tabs' ui components (̶T̶a̶b̶H̶o̶s̶t̶
,̶T̶a̶b̶W̶i̶d̶g̶e̶t̶
).Download link:
GitHub, Iphone-Tab-in-Android
This sample has been upgraded to use
TabLayout
andViewPager
Relavent Blog entry can be found here:
iPhone like Tabs in Android.
The screenshot:
I have also cutomized the tabhost to look like Raised Center Tab.
to download RaiseCenterTab, please go here GitHub: RaisedCenterTab.
您需要自己构建此控件。
几个选项:
使用 RadioGroup 并放置
那里有自定义单选按钮和
自定义它的地狱。
从头开始构建此控件,从其中之一继承它
布局(框架、相对、线性)
并构建您需要的行为。
您还可以获取 TabHost src,并将其用作控件的基础
You'll need to build this control yourself.
Few options:
use RadioGroup and put
custom radio buttons there and
customize hell of it.
build this control from scratch, inherit it from one of the
layouts ( Frame, Relative, Linear )
and build the behavior you need.
You can also take TabHost src, and use it as a base for your control
你可以看一下: https://github.com/mta452/iTab
这样做的好处是它会像 iOS 一样自动使用渐变进行图像整形。
屏幕截图:
You can look at: https://github.com/mta452/iTab
The plus point of this is that it automatically does images shaping with gradient like iOS does.
Screenshot:
你的截图是android 1.6。风格。如果您在较新版本上使用 tabhost,只需将其放在屏幕底部,它看起来会非常像 iPhone 版本。
我不会对 Android 的 UI 做太多改变,只是让它与 iphone 的外观和感觉(相同的图标)相似,并保持 Android 风格的其余部分。这将使该应用程序对用户来说看起来很熟悉。
要实现相同的图标外观,只需使用可绘制的 xml 定义以及按钮的选定和未选定状态,就像在 iphone 上一样。要设置图标,请使用 tabspec 的 setIndicator 方法。
您可以通过设置选项卡小部件的背景或样式来对选项卡主机进行某种样式设置。但小部件的实际内部部分将绘制在您的样式和背景上方
Your screenshot has the android 1.6. style. If you are using a tabhost on a newer version and simply put it on the bottom of the screen it will look very much like the iphone version.
I wouldn't change to much at the UI of android simply give it a resemblance to the iphone look and feel(same icons) and stay with the rest in the android style. This will make the app look familiar to the users.
To achieve the same look for the icons just use an xml definition of you drawable with a selected and a not selected state of the button like it looks on the iphone. To set an icon use the setIndicator method of the tabspec.
You can somewhat style the tabhost by setting a background or a style for the tabwidget. But the actual inner part of the widget will be drawn above you style and background