透明 ActionBar:将 NativeScript 与 Angular 结合使用
Posted
技术标签:
【中文标题】透明 ActionBar:将 NativeScript 与 Angular 结合使用【英文标题】:Transparent ActionBar: using NativeScript in combination with Angular 【发布时间】:2018-08-27 09:22:04 【问题描述】:嗨 Nativescript 社区,
结合使用 Nativescript 和 Angular,我无法获得在 ActionBar 上工作的透明度。我找到了像这样的薮主题,但没有人有使用 Angular 的工作示例。有人想向我发送一个使用 Angular 的透明 ActionBar 背景的工作示例吗? 最后,我希望能够在滚动时更改透明度。
一些相关主题(但没有工作角度示例):
-
https://github.com/3rror404/ns-fading-actionbar
Adding view to NativeScript ActionBar breaks navigation
https://www.nativescript.org/blog/how-to-match-a-nativescript-actionbar-s-color-on-ios
https://discourse.nativescript.org/t/scrolling-behind-transparent-actionbar/2133
https://discourse.nativescript.org/t/tranparent-action-bar/3413
https://github.com/NativeScript/NativeScript/issues/2669
问候,
木材
【问题讨论】:
我发誓这让我发疯了,我查看了每个链接和文章,它仍然是半透明的。很高兴我不是唯一一个为此苦苦挣扎的人。 好吧,显然没有人对此有正确的答案,多视图但没有答案:( 我认为您应该隐藏操作栏,如示例play.nativescript.org/?template=play-tsc&id=Y4fVGt&v=16 所示,操作栏将是透明的。您可以自定义页面顶部以包含任何按钮或标签。 【参考方案1】:您可以将任何东西用作操作栏。将标签放在网格布局的顶部 7% 上,然后就可以了。我不知道操作栏工具是否有效,但您可以尝试一下。
【讨论】:
这适用于操作栏按钮吗?我现在也有同样的问题。【参考方案2】:这是 iOS 的示例。
import topmost, Color from "tns-core-modules/ui/frame";
declare let UIBarMetrics, UIBarStyle, UIImage;
makeActionBarTransparent() : void
let navbar = topmost().ios.controller.navigationBar;
navbar.barStyle = UIBarStyle.BlackTranslucent;
navbar.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default);
navbar.shadowImage = UIImage.new();
navbar.translucent = true;
navbar.tintColor = new Color('white').ios;
但似乎当您在一个页面中修改操作栏时,其他页面中的操作栏也会被修改。如果这不是您想要的行为,您可以隐藏操作栏并使用自定义元素。例如,创建一个带有操作图标的透明堆栈布局。
您可以像这样隐藏操作栏:
import Page from "tns-core-modules/ui/page";
constructor(
private page : Page
)
ngAfterViewInit() : void
this.page.actionBarHidden = true;
【讨论】:
以上是关于透明 ActionBar:将 NativeScript 与 Angular 结合使用的主要内容,如果未能解决你的问题,请参考以下文章
xml 带有AppCompat-v7的透明Actionbar 21
Android:具有动态 actionBar 颜色和 DrawerLayout 的透明状态栏
使用Android Navigation Component,如何使actionBar透明并在单个Fragment中使布局全屏?