右对齐视图的自动布局不起作用

Posted 2023-03-13

【中文标题】右对齐视图的自动布局不起作用

【英文标题】：Auto layout of right-aligned view not working

【发布时间】：2014-10-29 13:21:44

【问题描述】：

我正在尝试将此 tableview 部分标题视图调整为自动布局，以便适应 iPhone 6 和 6 Plus。这是想要的结果

其中有 3 个视图，名为 stringView、favoriteCount 和 heartImage。以下屏幕截图将在每个视图上设置灰色背景，以便更轻松地查看正在发生的事情。

我不明白的是以下内容

@"|-(15.0)-[stringView]-(>=20.0)-[favoriteCount(44.0)]-[heartImage(22.0)]-(10.0)-|"

产生

计数和心脏视图无处可见。所以感觉好像包含的视图比它需要的要宽得多，但我不知道我对此有任何控制权，因为从这个方法返回的视图应该自动调整为 tableview 宽度，不是吗？

顺便说一句，这一切都发生在 tableView:viewForHeaderInSection: 方法中，看起来像

- (UIView *)tableView:(UITableView*)tableView viewForHeaderInSection:(NSInteger)section 

    if (section == 0) 
        // My Favourites menu
        UIView *myFavoritesMenuView = [[UIView alloc] init];
        [myFavoritesMenuView setBackgroundColor:[UIColor colorWithWhite:0.2 alpha:1.0]];

        UILabel *stringView = [[UILabel alloc] init];
        [stringView setTranslatesAutoresizingMaskIntoConstraints:NO];
        [stringView setText:@"My Favourites"];
        [stringView setTextColor:[UIColor whiteColor]];
        [stringView setFont:[UIFont fontWithName:@"OpenSans" size:16.0]];
        [stringView setBackgroundColor:[UIColor grayColor]];
        [myFavoritesMenuView addSubview:stringView];

        NSDictionary *favoriteArticles = [[NSUserDefaults standardUserDefaults] dictionaryForKey:@"FavoriteArticles"];
        UILabel *favoriteCount = [[UILabel alloc] init];
        [favoriteCount setTranslatesAutoresizingMaskIntoConstraints:NO];
        [favoriteCount setFont:[UIFont fontWithName:@"OpenSans" size:16.0]];
        [favoriteCount setTextColor:[UIColor whiteColor]];
        [favoriteCount setTextAlignment:NSTextAlignmentRight];
        [favoriteCount setBackgroundColor:[UIColor grayColor]];
        [myFavoritesMenuView addSubview:favoriteCount];

        if (favoriteArticles && favoriteArticles.count > 0) 
            [favoriteCount setText:[NSString stringWithFormat:@"%lu", (unsigned long)favoriteArticles.count]];
         else 
            [favoriteCount setText:@""];
        

        UIImageView *heartImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"heart-button-on"]];
        [heartImage setTranslatesAutoresizingMaskIntoConstraints:NO];
        [heartImage setBackgroundColor:[UIColor grayColor]];
        [myFavoritesMenuView addSubview:heartImage];

        // Create the views dictionary
        NSDictionary *views = NSDictionaryOfVariableBindings(stringView, favoriteCount, heartImage);

        // Horizontal layout - note the options for aligning the vertical center of all views
        NSString *horizontalFormat = @"|-(15.0)-[stringView]-(>=20.0)-[favoriteCount(44.0)]-[heartImage(22.0)]-(10.0)-|";

        [myFavoritesMenuView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:horizontalFormat
                                                                                    options:NSLayoutFormatAlignAllCenterY
                                                                                    metrics:nil
                                                                                      views:views]];

        // Vertical layout - we only need one "column" of information because of the alignment options used when creating the horizontal layout
        NSString *verticalFormat = @"V:|-[stringView]-|";
        [myFavoritesMenuView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:verticalFormat
                                                                                    options:0
                                                                                    metrics:nil
                                                                                      views:views]];

        return myFavoritesMenuView;
    

    // handle other section headers here

顺便说一句，我还尝试通过将 UIView 创建为单独的 xib 来尝试此操作，其中仅包含左对齐的文本标签和与超级视图的后沿对齐的心脏图像，并且我看到心脏不可见的完全相同的问题（大概关闭屏幕右侧）。

【问题讨论】：

标题视图是用代码创建的吗？确保调用 [myHeaderView setTranslatesAutoresizingMasksIntoConstraints:NO]。

显示你在 tableView:viewForHeaderInSection: 中的全部代码，这样我们就可以看到你是如何创建这个视图的。您显示的约束应该可以正常工作（假设您也有正确的垂直约束）。

@MikeTaverne 是的，标题视图是在代码中创建的。如果我调用 [myFavoritesMenuView setTranslatesAutoresizingMaskIntoConstraints:NO];那么这个容器视图甚至不会出现在表格中。

【参考方案1】：

整个表格视图的宽度不正确（表格视图由于某种原因是方形的，而不是适合屏幕），因此缺少的子视图位于屏幕右侧。当我更改为在 iPhone 6 中以横向视图运行并出现子视图时发现它......

【讨论】：

你设置了table view的约束吗？如果是，你能告诉我们吗？

事实证明，我没有在情节提要中的表格视图上手动设置约束，它使用的是设置的任何大小。由于当您更改查看宽度和高度时，表格视图会在情节提要编辑器中调整大小，因此不添加合理约束（将其与超级视图大小匹配）而不是将其设置为当前大小似乎不一致。

1) 你所说的“改变观看的宽度和高度”到底是什么意思：哪个观看？ 2）情节提要设置中的“使用大小类”和“使用自动布局”是选中还是未选中？

在情节提要上启用了“使用大小类”和“使用自动布局”。我的意思是设置表格视图框架的 X/Y/Width/Height 字段。因此，如果我将情节提要视图设置为 Any/Any，但没有在 tableview 上设置任何约束并使其填充可用区域，那么当我在 iPhone 5S 中运行应用程序时，tableview 实际上设置为 600pt宽度，没有将其边缘设置为超级视图。所以基本上设置约束是绝对必要的。

是的，这是绝对必要的。