UIKit之UIButton

功能需求：

点击按钮切换按钮的文字和背景图片，同时点击上下左右可以移动图片位置，点击加或减可以放大或缩小图片。

分析：

• 实现一个UIView的子类即可，该子类包含多个按钮。

实现步骤：

1. 使用OC语言，故创建cocoa Touch类型文件。Xcode会创建.h文件和.m文件：UIButtonTest类。
   

2. 图片资源导入。
   拖动文件夹到Assets文件夹下。之后项目中直接通过图片名字即可获得【即使图片处于上级文件夹下】。
   

3. 实现该类。
   a. 声明成员变量：在.h文件中的@interface~@end之间，类型是strong，若使用weak，则运行时样式消失。

// 该类继承自UIView，因它带着很多按钮组件
// 点击按钮实现背景和文字变化是因为它的组件绑定了动画，整个应该是个带着一堆组件的View
// 带图片的btn
@interface UIButtonTest : UIView
// @property自动生成get、setter方法
@property(strong, nonatomic) UIButton *btn;
@property(strong, nonatomic) UIButton *btn1;
@property(strong, nonatomic) UIButton *btn2;
@property(strong, nonatomic) UIButton *btn3;
@property(strong, nonatomic) UIButton *btn4;
@property(strong, nonatomic) UIButton *btn5;
@property(strong, nonatomic) UIButton *btn6;

@end

b. .m文件中，在@implementation ~@end之间实现初始化方法：为按钮控件申请内容空间、定义大小、添加背景图片、添加动画、绑定点击函数等。**该Demo必须在初始化时设置好背景图片和文字，只设置点击函数的变化会导致刚启动显示非点击前**

@implementation UIButtonTest

-(instancetype) initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    // 视图中有个按钮，按钮点击了没反应？GPT4实现一下
    if(self){
        /// 初始化btn1：带bgImage
            /// 初始化每个组件，通过self.或_来获得
            /// 如果类继承自组件本身，则通过self即可
            /// 初始化btn内容，如果不设置，初始的状态不一定
            ///如果是成员，直接用_成员名字,或者self.均可，注意是view，_方式安全，不会出发getter和setter方法
            /// CGRect：位置、大小
        _btn = [[UIButton alloc] initWithFrame:CGRectMake(50, 100, 200, 200)];
        [_btn setTitle:@"点击前" forState:UIControlStateNormal];
        // 文字设置
        [_btn setTitleColor:[UIColor blackColor]  forState:UIControlStateNormal];
        // bgImage
        [_btn setBackgroundImage:[UIImage imageNamed:@"1.jpg"] forState:UIControlStateNormal];
        // 动画：绑定函数，点击事件，在btn上调用，加到self上
        [_btn addTarget:self action:@selector(btnClicked) forControlEvents:UIControlEventTouchUpInside];
        
        /// btn1~6 初始化和设置大小
        _btn1 = [[UIButton alloc] initWithFrame:CGRectMake(80, 350, 50, 50)];
        _btn2 = [[UIButton alloc] initWithFrame:CGRectMake(80, 400, 50, 50)];
        _btn3 = [[UIButton alloc] initWithFrame:CGRectMake(30, 400, 50, 50)];
        _btn4 = [[UIButton alloc] initWithFrame:CGRectMake(130, 400, 50, 50)];
        _btn5 = [[UIButton alloc] initWithFrame:CGRectMake(200, 349, 49, 49)];
        _btn6 = [[UIButton alloc] initWithFrame:CGRectMake(200, 402, 49, 49)];
        /// 设置背景图片
        [_btn1 setBackgroundImage:[UIImage imageNamed:@"shang.jpg"] forState:UIControlStateNormal];
        [_btn2 setBackgroundImage:[UIImage imageNamed:@"xia.jpg"] forState:UIControlStateNormal];
        [_btn3 setBackgroundImage:[UIImage imageNamed:@"zuo.jpg"] forState:UIControlStateNormal];
        [_btn4 setBackgroundImage:[UIImage imageNamed:@"you.jpg"] forState:UIControlStateNormal];
        [_btn5 setBackgroundImage:[UIImage imageNamed:@"jia.jpg"] forState:UIControlStateNormal];
        [_btn6 setBackgroundImage:[UIImage imageNamed:@"jian.jpg"] forState:UIControlStateNormal];
        /// 绑定函数
        [_btn1 addTarget:self action:@selector(btn1Clicked) forControlEvents:UIControlEventTouchUpInside];
        [_btn2 addTarget:self action:@selector(btn2Clicked) forControlEvents:UIControlEventTouchUpInside];
        [_btn3 addTarget:self action:@selector(btn3Clicked) forControlEvents:UIControlEventTouchUpInside];
        [_btn4 addTarget:self action:@selector(btn4Clicked) forControlEvents:UIControlEventTouchUpInside];
        [_btn5 addTarget:self action:@selector(btn5Clicked) forControlEvents:UIControlEventTouchUpInside];
        [_btn6 addTarget:self action:@selector(btn6Clicked) forControlEvents:UIControlEventTouchUpInside];
        
        // 初始化btn2、btn3、btn4、btn5
        // 本身是view，需要添加组件进去
        [self addSubview:_btn];
        [self addSubview:_btn1];
        [self addSubview:_btn2];
        [self addSubview:_btn3];
        [self addSubview:_btn4];
        [self addSubview:_btn5];
        [self addSubview:_btn6];
    }
    return self;
}

c. 实现各点击函数：

1> 点击切换背景图片：该函数实现需要==借助bool值==，来回更改点击前和点击后的样式。
2> 点击放大和缩小：center等属性可以根据中心位置来进行放大和缩小。本人使用的frame直接调整根据原始坐标(x, y)来调整。
3> frame变化：frame位置变化和大小变化必须先创建新的frame，然后把旧的盖掉，不能直接在原本的frame上修改。

// 带图片的按钮点击后的变化
// 点击后重新设置title、bgImage
- (void)btnClicked{
    // 点击前后
    static BOOL isClicked = NO;
    if(isClicked){
        [_btn setTitle:@"点击前" forState:UIControlStateNormal];
        [_btn setBackgroundImage:[UIImage imageNamed:@"1.jpg"] forState:UIControlStateNormal];
    }
    else{
        // 状态常识不同样式：hightlight，可设置
        [_btn setTitle:@"点击后" forState:UIControlStateNormal];
        [_btn setBackgroundImage:[UIImage imageNamed:@"2.jpg"] forState:UIControlStateNormal];
    }
    isClicked = !isClicked;
}

// 移动、修改大小，必须创建新的矩形框体，再做赋值
- (void)btn1Clicked{
    CGRect originalFrame = self.btn.frame;
    originalFrame.origin.y -= 10;
    self.btn.frame = originalFrame;
}

- (void)btn2Clicked{
    CGRect originalFrame = self.btn.frame;
    originalFrame.origin.y += 10;
    self.btn.frame = originalFrame;

}

- (void)btn3Clicked{
    CGRect originalFrame = self.btn.frame;
    originalFrame.origin.x -= 10;
    self.btn.frame = originalFrame;
}

- (void)btn4Clicked{
    CGRect originalFrame = self.btn.frame;
    originalFrame.origin.x += 10;
    self.btn.frame = originalFrame;
}

- (void)btn5Clicked{
    CGRect originalFrame = self.btn.frame;
    originalFrame.size.width += 10;
    originalFrame.size.height += 10;
    self.btn.frame = originalFrame;
}

- (void)btn6Clicked{
    CGRect originalFrame = self.btn.frame;
    originalFrame.size.width -= 10;
    originalFrame.size.height -= 10;
    self.btn.frame = originalFrame;
}

4. 调用并创建自定义UIView。
   a. 在ViewController中import该文件。
   b. 在viewDidLoad()函数中创建该类型变量，申请空间并实例化。定义视图大小。(可以设置背景色，使其显示)
   c. 将子视图加入当前视图中

@implementation ViewController

// 整体视图加载处
- (void)viewDidLoad {
    [super viewDidLoad];
    UIButtonTest *myBtnsView = [[UIButtonTest alloc] initWithFrame:CGRectMake(20, 20, 300, 600)];
    [myBtnsView setBackgroundColor: [UIColor blueColor]];
    // 自定义按钮添加到视图
    [self.view addSubview:myBtnsView];
}

@end

5. Demo结果展示：
   https://s31.aconvert.com/convert/p3r68-cdx67/gqfq1-4j8f8.gif
   

知识点和问题：

1. UIButton

1. UIButton没有Label，按钮上显示的内容为。
2. 按钮有多种状态，点击前后，默认点击后是高亮，但自己可以设置均为normal。
3. frame可以变大小、位置
   center只能变位置，获取到的是中心点的坐标
   bounds只能变大小，在中心点位置。
   transform位置大小、旋转等都可
4. 修改frame必须创建新的，利用新的盖掉旧的。
5. 本人实现该Demo创建了一个UIView，该UIView包含了一系列UIButton，要显示这些UIButton必须添加到子视图中去。且在UIViewController中创建该自定义UIView后，仍然要添加该UIView到子视图中去。
6. 点击按钮没反应：
   按钮外的视图大小没有将按钮的坐标区域完全包含，调整view大小即可。

2. @property：

1. 使用@property声明变量后，在@implement中获取时，可以通过self和_name的方式获取，_name更安全，不会触发setter和getter。
2. 组件建议声明为strong类型，如果为weak，该Demo中按钮不显示。