如何在 ios 中的 UIButtons 上创建线条？

Posted 2023-03-22

【中文标题】如何在 ios 中的 UIButtons 上创建线条？

【英文标题】：How to create line over UIButtons in ios?

【发布时间】：2013-09-10 07:36:36

【问题描述】：

我有 8 个 UIButton。现在我想在这些按钮上创建线条。

我试过了，我可以画一条线。请检查我在做什么。

MyDrawingView.h

#import <UIKit/UIKit.h>

@interface MyDrawingView : UIView

CGPoint fromPoint;
CGPoint toPoint;
UIColor* currentColor;



UIImage *backgroundImage;


@property CGPoint fromPoint;
@property CGPoint toPoint;
@property(nonatomic,retain) UIColor* currentColor;

@end



MyDrawingView.m

#import "MyDrawingView.h"

@implementation MyDrawingView

@synthesize fromPoint;
@synthesize toPoint;
@synthesize currentColor;



- (id)initWithFrame:(CGRect)frame

self = [super initWithFrame:frame];
if (self) 
    // Initialization code

    backgroundImage = [UIImage imageNamed:@"office.jpeg"];

return self;



- (void)drawRect:(CGRect)rect 

//CGPoint drawingTargetPoint = CGPointMake(100,0);
//[backgroundImage drawAtPoint:drawingTargetPoint];

CGContextRef    context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context,10);
CGContextSetStrokeColorWithColor(context, currentColor.CGColor);
CGContextMoveToPoint(context,fromPoint.x , fromPoint.y);
CGContextAddLineToPoint(context, toPoint.x, toPoint.y);
CGContextStrokePath(context);




- (void) touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event

UITouch* touchPoint = [touches anyObject];
fromPoint = [touchPoint locationInView:self];
toPoint = [touchPoint locationInView:self];

[self setNeedsDisplay];


-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event

UITouch* touch = [touches anyObject];
toPoint=[touch locationInView:self];
[self setNeedsDisplay];


-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event

UITouch* touch = [touches anyObject];
toPoint = [touch locationInView:self];
[self setNeedsDisplay];

现在在另一堂课上，我在 viewDidLoad 上使用了 8 个按钮，请检查我在做什么。

-(void)viewDidLoad

8 UIButtons (8 buttons in one line and 10 pixels gap in X-position after every button)

[self method_Call_drawView];





-(void)method_Call_drawView
v = [[MyDrawingView alloc]initWithFrame:CGRectMake(100,350,400,400)]; 
v.backgroundColor = [UIColor whiteColor];
[v setNeedsDisplay];
[self.view addSubview:v];


 .h file
#import <UIKit/UIKit.h>


@class MyDrawingView;
@interface iPad_Level1 : UIViewController

UIButton *btn1;
UIButton *btn2;
UIButton *btn3;
UIButton *btn4;
UIButton *btn5;
UIButton *btn6;
UIButton *btn7;
UIButton *btn8;
MyDrawingView *v;

@property(nonatomic,retain)MyDrawingView *v;
@end

我能够创建视图并在视图上画一条线，但我无法触摸 UIButtons 并在其上创建一条线。

无论我点击哪里，我的线路都会增加和减少，但我希望这条线路出现在我的 UIButton 上。

请检查我要做什么 itunes.apple.com/in/app/word-search-puzzles/id609067187?mt=8，检查按钮上的黄线和蓝线。

非常欢迎任何想法或建议。

【问题讨论】：

还是不清楚你到底想要什么..

使用预制图像可能更容易，因此请按照您希望的方式在图像编辑器中绘制按钮。然后设置按钮以显示您创建的图像。没有看到一个例子就很难知道你想要什么。

@smick 谢谢你的回复，但我不明白。

@AfreenKhan 取一个高度为 1px 的 UIImageView 并将其放在您的 UIButton 上方，然后根据您的需要进行修改。

好的，我在 self.view 上的按钮上使用了 UiImageview。表示 [btn1 addSubview:img1]； ，现在如何在上面创建线？

【参考方案1】：

你可以在你想要的按钮之前添加一个 1px 高度的子视图。

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 200, self.view.bounds.size.width, 1)]; // change the 200 to fit your screen
lineView.backgroundColor = [UIColor blackColor];
[self.view addSubview:lineView];

当用户点击按钮时移动这条线：

[UIView animateWithDuration:0.5
                              delay:0.5
                            options: UIViewAnimationCurveEaseOut
                         animations:^
                          
             CGRect frame = lineView .frame;
             frame.origin.y = 100;   // for move
             frame.size.width = 50; // for re-size
             lineView .frame = frame;
         
             completion:^(BOOL finished)
         
             NSLog(@"Completed");
         
];

【讨论】：

谢谢您的回复，请问我该怎么做？

这是个好主意，然后您可以将背景颜色设置为您想要的任何颜色。

好的，我正在尝试。但是线将如何创建？当我触摸按钮 1 然后触摸按钮 2 时？

你想在点击按钮时移动这一行吗？

不，先生，我不想这样做，在此代码中，无需触摸按钮即可显示该行。我想当我触摸 UIButton 时，该行将仅在该按钮大小上创建，并且该行仍然出现，当我用该行触摸按钮 2 时，该行将增加，依此类推，但直到按钮所在的位置。如果有 8 个按钮，我触摸 btn 1、2、和 4，则行将只到按钮 4。行将逐个按钮增加。

【参考方案2】：

#import <QuartzCore/CAGradientLayer.h>

导入这个并在项目中添加quartzcore框架

-(IBAction)btnTapped:(id)sender
    UIButton *m_btnTemp=((UIButton *)sender);
    m_btnTemp.layer.borderColor=[UIColor blackColor];
    m_btnTemp.layer.borderWidth= 1.0f;

当你想移除边框颜色集时borderWidth=0;

【讨论】：

什么都没有发生。

请检查我要做什么 itunes.apple.com/in/app/word-search-puzzles/id609067187?mt=8，检查按钮上的黄线和蓝线。

@AfreenKhan ：将此代码与您的按钮类型一起用作自定义按钮，而不是圆形矩形。

-(void)viewDidLoadbtn1 = [UIButton buttonWithType:UIButtonTypeCustom]; btn1.frame = CGRectMake(100, 100, 25, 25); //77, 639, 148, 51.5 btn1.backgroundColor = [UIColor whiteColor]; [btn1 addTarget:self action:@selector(btnTapped:) forControlEvents:UIControlEventTouchUpInside]; btn1.userInteractionEnabled = 是； [self.view addSubview:btn1]; -(void)btnTapped:(id)sender UIButton *m_btnTemp=((UIButton *)sender); m_btnTemp.layer.borderColor=[UIColor blackColor]; m_btnTemp.layer.borderWidth= 1.0f;