做房产中介网站网页设置与制作

功能需求：

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

分析：

• 实现一个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中按钮不显示。