iOS UICollectionView 入门 02 构建松木板

最新推荐文章于 2025-08-17 23:14:02 发布

yamingwu

最新推荐文章于 2025-08-17 23:14:02 发布

阅读量738

点赞数

CC 4.0 BY-SA版权

分类专栏： UICollectionView 文章标签： UICollectionView ios

本文链接：https://blog.youkuaiyun.com/yamingwu/article/details/44260021

UICollectionView 专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了如何在iOS应用中使用UICollectionView构建一个包含搜索功能的界面。作者首先添加了toolbar，设置了Share按钮，并关联了点击事件。接着，添加了一个image view作为搜索图标，设置其Size to Fit Content属性。之后，添加了搜索文本框，并作为delegate，以便处理键盘隐藏。还在搜索框下方添加了一条分隔线。最后，通过编程方式调整了界面的布局和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这一节，我们为程序添加必要的控件并为它们配置背景图。

修改ViewController.m，添加所需要的outlet：

@interface ViewController () <UITextFieldDelegate>

@property (nonatomic, weak) IBOutlet UIToolbar *toolbar;
@property (nonatomic, weak) IBOutlet UIBarButtonItem *shareButton;
@property (nonatomic, weak) IBOutlet UITextField *textField;

- (IBAction)shareButtonTapped:(id)sender;

@end

为action添加空的实现：

- (void)shareButtonTapped:(id)sender
{
    
}

打开storyboard，disable size classes并且选择设别为iPad：

添加toolbar到view的顶端，修改按钮标题为Share：

再使用辅助编辑器，将Share按钮与shareButtonTapped方法关联起来：

接下来，我们添加搜索标签和搜索文本框。拖动image view到主view中，设置其image属性为search_text.png，此时图片被放大了，我们需要设置其Size to Fit Content属性，让其以原始大小显示：

然后添加TextField到搜索标签的右侧并将ViewController类作为它的delegate，这样做使得我们可以通过编程的方式来通过回车隐藏打开的软键盘。同时，我们隐藏TextField的边框。

最后我们在搜索框下添加一条线，用于分隔搜索区和结果显示区。这里我们通过添加一个没有边框的image view，设置image属性为divider_bar.png来实现。

接下来，我们连接这些控件到ViewController.m中的outlet上：

有了基本的控件，我们通过编程的方式，让它更好看。

在viewDidLoad中添加以下代码：

    self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"bg_cork.png"]];
    
    UIImage *navBarImage = [[UIImage imageNamed:@"navbar.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(27, 27, 27, 27)];
    
    [self.toolbar setBackgroundImage:navBarImage forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];
    [self.shareButton setTintColor:[UIColor whiteColor]];

    UIImage *textFieldImage = [[UIImage imageNamed:@"search_field"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)];
    [self.textField setBackground:textFieldImage];

这样我们分别为toolbar，text field和整个view设置了背景图。