功能需求：
点击按钮切换按钮的文字和背景图片，同时点击上下左右可以移动图片位置，点击加或减可以放大或缩小图片。
分析：
- 实现一个UIView的子类即可，该子类包含多个按钮。
实现步骤：
-
使用OC语言，故创建cocoa Touch类型文件。Xcode会创建.h文件和.m文件：UIButtonTest类。
-
图片资源导入。
拖动文件夹到Assets文件夹下。之后项目中直接通过图片名字即可获得【即使图片处于上级文件夹下】。
-
实现该类。
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;
}
- 调用并创建自定义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
- Demo结果展示：
https://s31.aconvert.com/convert/p3r68-cdx67/gqfq1-4j8f8.gif
知识点和问题：
- UIButton
- UIButton没有Label，按钮上显示的内容为。
- 按钮有多种状态，点击前后，默认点击后是高亮，但自己可以设置均为normal。
- frame可以变大小、位置
center只能变位置，获取到的是中心点的坐标
bounds只能变大小，在中心点位置。
transform位置大小、旋转等都可- 修改frame必须创建新的，利用新的盖掉旧的。
- 本人实现该Demo创建了一个UIView，该UIView包含了一系列UIButton，要显示这些UIButton必须添加到子视图中去。且在UIViewController中创建该自定义UIView后，仍然要添加该UIView到子视图中去。
- 点击按钮没反应：
按钮外的视图大小没有将按钮的坐标区域完全包含，调整view大小即可。
- @property：
- 使用@property声明变量后，在@implement中获取时，可以通过self和_name的方式获取，_name更安全，不会触发setter和getter。
- 组件建议声明为strong类型，如果为weak，该Demo中按钮不显示。
