标签: safearealayoutguide

我有一个基于自定义tabBar的应用程序controller,现在,由于我们有安全的区域布局,我想更改我的应用程序以充分利用iPhone X屏幕.

所以我想解决tabBar的问题,目前不考虑安全区域.

我已经完成了人们发布的大部分解决方案,但这些解决方案主要用于UIViewController.

我当前的tabBar看起来像这样

我正在使用RDVTabBar此标签栏是一个实例,UIView我没有使用storyboard或xib,一切都是以编程方式完成的.

解决问题的当前代码

if (@available(iOS 11.0, *)) {
    UILayoutGuide *safe = self.view.safeAreaLayoutGuide;
    self.tabBar.translatesAutoresizingMaskIntoConstraints = NO;

    [NSLayoutConstraint activateConstraints:@[[safe.trailingAnchor constraintEqualToAnchor:self.tabBar.trailingAnchor],
                                              [self.tabBar.leadingAnchor constraintEqualToAnchor:safe.leadingAnchor],
                                              [safe.bottomAnchor constraintEqualToAnchor:self.tabBar.bottomAnchor]]];

    [self.tabBar addConstraint:[NSLayoutConstraint constraintWithItem:self.tabBar
                                                      attribute:NSLayoutAttributeHeight
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:nil
                                                      attribute: NSLayoutAttributeNotAnAttribute
                                                     multiplier:1
                                                       constant:45]];

}

但是这并没有改变任何事情

考虑到我目前的代码结构,我有一个解决方法,这是有效的

CGRect frame = self.tabBar.frame;
frame.origin.y = frame.origin.y - 34;
frame.size.height = frame.size.height + 34;
self.tabBar.frame = frame;

但它不使用安全区域布局指南,如果未来安全区域高度发生变化,那么这将无效; 所以我不愿意使用它.

那么如何使用这个tabBar的安全区域布局指南来解决这个问题呢？

当在横向iPhone X上滑动儿童ViewController时，在安全区域方面遇到困难。

我有一个根ViewController，其视图之一是可移动的，并且包含一个嵌入式子ViewController。真正的应用程序是滑动的侧栏菜单UI。这里的示例代码是简化版本。

如果表格位于屏幕的左侧，则“安全区域”布局规则会将其单元格contentView插入项推到右侧以允许出现缺口。正确。但是，如果我将子级ViewController移离屏幕的左边缘，则子级的插图不会更新以重播内容。

我已经意识到，实际上，如果子ViewController在其最终位置完全显示在屏幕上，则一切正常。如果其中任何部分不在屏幕上，则不会发生“安全区域”更新。

这是显示此问题的示例代码。这适用于标准的Single View App Xcode模板项目：用显示的代码替换ViewController文件代码。运行时，向右滑动表格会将其从屏幕的左边缘移动到右边缘。

参见“ constraint（...，乘数：0.5）”行。这设置了相对于屏幕的可移动视图的宽度。值为0.5时，表格完全适合屏幕，并且安全区域会随着移动而更新。左停靠时，表格单元格遵循“安全区域”插图，右停靠时，表格单元格中没有正确的额外插图。

一旦乘数超过0.5（甚至在0.51时），表格的右滑动部分便不在屏幕上。在这种情况下，不会发生安全区域更新，因此表格单元格内容插入太大了-即使表格的左边缘现在不在安全区域附近，它仍然具有44像素的安全区域插入。

更令人困惑的是，如果UIViews不是UIViewController的视图，则布局似乎可以很好地工作。但是我需要它与UIViewControllers一起使用。

谁能解释如何让子级ViewController遵守正确的安全区域？谢谢。

复制代码：

class ViewController: UIViewController {

    var leftEdgeConstraint : NSLayoutConstraint!
    var viewThatMoves : UIView!
    var myEmbeddedVC : UIViewController!

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = UIColor.gray

        self.viewThatMoves = UIView()
        self.viewThatMoves.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(self.viewThatMoves)

        // Relayout during animation work with multiplier = 0.5
        // With any greater value, like 0.51 (meaning part of the view is offscreen), relayout does not happen
        self.viewThatMoves.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.5).isActive = true
        self.viewThatMoves.heightAnchor.constraint(equalTo: …

我正在尝试在顶部工具栏和底部选项卡区域之间放置一个。我需要它在 iPhone 5-X 和 iOS 10-11 上运行。如果你忽略iOS10，那么不存在问题，但我还需要旧版本才能工作。这是我的 CSS。“margin-top”给出了 iOS 10 的错误。如果我使用“padding-top”那么它在 iPhone X 上不起作用。这是 LoadingController 封面，所以我不想以编程方式从 JS 到HTML（老实说，不知道如何访问用于加载控制器的 HTML）。我已经为谷歌地图以编程方式解决了这个问题，但想知道是否有通过 CSS 的解决方案？我已经获得了所有东西和 WKWebView 的所有最新版本。我的离子观点如下。

.loading-ios {
  margin-top: constant(safe-area-inset-top);
  margin-top: env(safe-area-inset-top);
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);

  background-color: white;
  opacity: 1 !important;
  position: absolute;
  top: 64px;
  bottom: 49px;
}

cli包：

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

全局包：

cordova (Cordova CLI) : 7.1.0 

本地包：

@ionic/app-scripts : 1.3.12
Cordova Platforms  : ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

系统：

ios-deploy : 1.9.2 
ios-sim    : …

我正在开发像滑块一样的图像库UIPageViewController，但我在过渡样式模式UIPageViewController下的自动插入时遇到了麻烦。Scroll

这是我的布局：

1. UIViewController与UIContainerView（洋红色背景）
2. UIPageViewController链接到容器（来自#1）
3. UIViewController(s)页面控制器中动态创建的视图列表（来自#2），全宽高视图（1.橙色，2.红色，3.绿色）

它曾经在很长一段时间内工作良好，并且继续与 iOS 11 一起工作，除非它在具有安全区域的 iPhone X 设备上渲染：

我检查了很多不同的选项，并能够确认它与页面控制器的滚动模式特别相关。如果我切换到 PageCurl 过渡样式 - 它会按预期工作（全高）：

页面控制器没有公开很多选项来控制滚动模式的此行为，我也无法通过搜索控件树并修改各种和相关insets属性来“破解”它。我可以清楚地看到，一旦创建视图控制器，我的滚动视图就会比容器小framecontentSizecontentSizeframe34pxframe

> view.frame
{{X=0,Y=0,Width=375,Height=732}}
    Bottom: 732
    Height: 732
    IsEmpty: false
    Left: 0
    Location: {{X=0, Y=0}}
    Right: 375
    Size: {{Width=375, Height=732}}
    Top: 0
    Width: 375
    X: 0
    Y: 0

> scroll.frame
{{X=-5,Y=0,Width=385,Height=698}}
    Bottom: 698
    Height: 698
    IsEmpty: false
    Left: -5
    Location: {{X=-5, Y=0}}
    Right: 380
    Size: …

我正在<SafeAreaView>我的 React Native 应用程序上实现一个。我的大部分屏幕都在 ScrollView 中。当我添加 时<SafeAreaView>，它会阻碍内容。虽然我希望这个底部区域是“安全的”，但我希望用户能够看到它后面的内容，否则，空间就被浪费了。

如何实现“透明”安全区域？

简化示例：

class ExampleScreen extends Component {
  render() {
    return (
      <SafeAreaView>
        <Scrollview>
          <Text>Example</Text>
          <Text>Example</Text>
          <Text>Example</Text>
          (etc)
        </Scrollview>
      </SafeAreaView>
    );
  }
}

输出：

期望输出：

在将其标记为重复之前，请注意，我确实阅读了此内容，但这似乎不适用于UITabBar

双方UIViewController并UITabBar以编程方式创建。约束设置如下：

public override func viewDidLoad() {
    super.viewDidLoad()
    self.view.bringSubview(toFront: self.tabBar)
}

并且self.tabBar：

lazy var tabBar: UITabBar = {
    let tab = UITabBar()
    self.view.addSubview(tab)
    tab.translatesAutoresizingMaskIntoConstraints = false
    tab.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
    tab.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
    tab.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true //This line will change in second part of this post.
    return tab
}()

这个节目UITabBar是这样的：

而且它太小了，因为它没有考虑安全区域。所以我确实改变了线路：

tab.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true

到：

tab.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true

然后显示如下：

所以它也没有按预期显示。这里的目标是这样的：

如何制作约束以显示UITabBar这样的内容？

我是新来的Xcode，我不知道如何设置webview在safe areaiPhone X.我通过各种情侣答案已经走了，但他们并没有帮助。我对这个应用程序的唯一了解是，视图是以编程方式设置的。下面是我的ViewController.swift文件。

import UIKit
import WebKit
import AVFoundation

class ViewController: UIViewController, WKScriptMessageHandler, WKNavigationDelegate, WKUIDelegate
{
    var webView       = WKWebView()
    var containerView = WKWebView() //Footer  Webview

    override func loadView()
    {
        super.loadView()
    }

    override func viewDidLoad()
    {
        super.viewDidLoad()

        let theConfiguration = WKWebViewConfiguration()

        //Bind Swift and Javascript interface through MessageHandler IOSJSObject
        theConfiguration.userContentController.add(self, name: "IOSJSObject")

        /* Webview intialization Start */
        webView = WKWebView(frame: CGRect(x: 0, y: 20, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height-65), configuration: theConfiguration)

        containerView = …

特尔；博士：

我无法在宽屏 (13:6) 手机上将图像准确地绘制到全屏上。如果我观察安全区域，错误是（可预测的）欠扫描。使用.edgesIgnoringSafeArea()（出乎意料地）在另一个方向上走得太远了。

更新

Apple DTS 建议这是一个错误，向我退还了一次支持事件，并邀请我提交错误报告。https://feedbackassistant.apple.com/feedback/8192204正在筹备中

警告讲师

我的假设.scaledToFill可能是错误的。我在最后解决这个问题。

代码

所以基本的我可以把它放在这里，它甚至不会减慢你的速度

struct ContentView: View {
    var body: some View {
        Image("testImage").resizable().scaledToFill()
//        .edgesIgnoringSafeArea(.all)
    }
}

测试图像

测试图像是一个横向矩形，比例为 13:6，就像宽屏手机一样。（例如原始 iPhone X 的 812:375 比例。）灰色边缘不是图像的一部分。

它标有其子框架，对应于窄（旧）手机 (16:9) 和打击垫 (4:3)。

运行时结果

Xcode 项目设置明确仅限横向，适用于平板电脑和手机。

对于窄手机和所有键盘，上面的代码，观察安全区域，像我期望的那样呈现测试图像：

但是在宽屏手机上，我无法让红色矩形与屏幕边缘重合。

宽电话

随着无调用.edgesIgnoringSafeArea()，这是我们正在观察安全区域。自然地，我们的图像被映射到全屏的一个子集。

随着对 的调用.edgesIgnoringSafeArea()。我希望这能完全填满屏幕，但它会过度扫描：

这是 Xcode 视图层次结构调试器对上一个的看法：图像被映射到一个比全屏大的矩形。为什么？

事件顺序

如果我颠倒修饰符的顺序，并.edgesIgnoringSafeArea() 在之前 调用.scaledToFill()，我会得到纵横比失真，这.scaledToFill()应该可以防止。（请参阅屏幕截图中的圆变成椭圆。）解释这些操作是如何组成的，以及它们为什么不通勤，可能对回答我的主要问题大有帮助。

解决方法

我认为上述应该有效，我不明白为什么不行。什么做 …

我实现了一个自定义导航栏，它只是一个带有标题文本和用于关闭视图的箭头的视图。我只希望导航栏的背景颜色超出顶部安全区域，同时内容遵守安全区域限制

这是自定义导航栏的代码：

struct CustomNavigationBar: View {
    
    @Environment(\.presentationMode) var presentationMode
    let title: String
    
    var body: some View {
        HStack {
            Button(action: {
                presentationMode.wrappedValue.dismiss()
            }, label: {
                Image(systemName: "chevron.left")
                    .font(.title2)
                    .foregroundColor(Globals.Color.background)
            })
            Spacer()
            Text(title)
                .font(.title2)
                .bold()
                .foregroundColor(Globals.Color.background)
            Spacer()
        }
        .padding()
        .background(Globals.Color.crimson)
    }
}

以下是使用自定义导航栏的示例视图的代码：

var body: some View {
    ZStack {
        VStack {
            CustomNavigationBar(title: "Sample Title")
            Spacer()
        }
    }
}

下面我附上了当前视图的屏幕截图：

我无法像我期望的那样让 UIPageViewController 与 Safe Area 结合使用。

我正在做的是将 UIPageViewControllers 子视图控制器（例如childVc1）的子视图固定到安全区域（childVc1.view.safeAreaLayoutGuide）。这工作正常，直到我将方向从纵向切换到横向，滑动到下一个子视图控制器，旋转回纵向并返回到上一个子视图控制器。然后之前的子视图控制器的视图只有在滚动完成后才更新，这看起来很奇怪。

这是使用 Xcode 提供的基于页面的应用程序模板的演示（已修改，以便将内容视图固定到安全区域）。它没有最好的fps，但应该很清楚，例如滚动完成后月份名称会改变位置。

有人遇到过类似的问题并找到了如何正确解决这个问题的方法吗？

谢谢