专业java、php、iOS、C++、网页设计、平面设计、网络营销、游戏开发、前端与移动开发培训机构

点赞

效果

布局分析

实现

• 先添加界面需要的所有元素
• 
• 选中 点赞 和 撤销 按钮
• 将选中的 点赞 和 撤销 按钮添加到一个UIStackView里面
• 
• 选中 星星 图片
• 将选中的 星星 图片添加到一个UIStackView里面
• 
• 将控制器的view的子控件添加到UIStackView
• 
• 设置最外层的 Out StackView 约束:距离父控件的上下左右都为 10, 设置 Out StackView 的间距为 10
• 
• 设置 Out StackView 的 对齐 方式(Alignment) 为 Fill
• 
• 设置 来点个赞吧 的高度约束为 22,对齐方式为 居中
• 设置大图 UIImageView 的 contentMode 为 Aspect Fit
• 设置 Button Stack View 的 分布 方式(Distribution) 为 Fill Equally, 间距为 10,高度约束为 40
• 设置 star UIImageView 的 contentMode 为 Aspect Fit
• 设置 Star Stack View 的高度约束为 100
• 运行效果:

通过代码向 Star Stack View 添加和删除 星星 图片

• 将 Star Stack View 连线到 ViewController

    @interface ViewController ()
  
    @property (weak, nonatomic) IBOutlet UIStackView *starStackView;
  
    @end
  

• 将 点赞 和 撤销 按钮的点击事件连线到 ViewController

    /// 添加星星
    - (IBAction)addStar:(id)sender {
  
    }
  
    /// 删除星星
    - (IBAction)removeStar:(id)sender {
  
    }
  

• 在 addStar: 方法中,创建星星,并添加到 starStackView

    /// 添加星星
    - (IBAction)addStar:(id)sender {
        // 创建星星
        UIImage *starImage = [UIImage imageNamed:@"star"];
        UIImageView *starImageView = [[UIImageView alloc] initWithImage:starImage];
        [self.starStackView addArrangedSubview:starImageView];
    }
  

• 运行,发现并没有和预想的一样,没有出现星星.在 StoryBoard 中可以发现 Star Stack View 是 垂直排列 的,需要改成 水平排列
• 
• 运行,点击 点赞 按钮
• 可以看到,第2个星星变形了
• 查看视图层次结构可以发现第2个星星的宽度比第一个星星大,调整 Star Stack View 的 分布 方式(Distribution)为 Fill Equally

• 设置创建的星星图片的 contentMode 为 Aspect Fit

    /// 添加星星
    - (IBAction)addStar:(id)sender {
        // 创建星星
        UIImage *starImage = [UIImage imageNamed:@"star"];
        UIImageView *starImageView = [[UIImageView alloc] initWithImage:starImage];
  
        // 设置图片填充模式
        starImageView.contentMode = UIViewContentModeScaleAspectFit;
  
        [self.starStackView addArrangedSubview:starImageView];
    }
  

• 到目前为止,可以向 Star Stack View 添加 星星 了.只不过没有动画,添加动画

    /// 添加星星
    - (IBAction)addStar:(id)sender {
        // 创建星星
        UIImage *starImage = [UIImage imageNamed:@"star"];
        UIImageView *starImageView = [[UIImageView alloc] initWithImage:starImage];
  
        // 设置图片填充模式
        starImageView.contentMode = UIViewContentModeScaleAspectFit;
  
        [self.starStackView addArrangedSubview:starImageView];
  
        CGRect frame = starImageView.frame;
  
        // 添加动画
        [UIView animateWithDuration:0.5 animations:^{
            [self.starStackView layoutIfNeeded];
        }];
    }
  

• 移除 星星

    /// 删除星星
    - (IBAction)removeStar:(id)sender {
        // 获取 starStackView 里面的最后一个星星
        UIView *view = self.starStackView.arrangedSubviews.lastObject;
  
        // 从父控件中移除
        [view removeFromSuperview];
  
        // 添加动画
        [UIView animateWithDuration:0.5 animations:^{
            [self.starStackView layoutIfNeeded];
        }];
    }