iOS端实现登录输入框的三种思路(包含UIBezierPath等)

今天跟我们的UI 对现在的应用界面,突然发现了一个问题,就是我的输入框为什么和他给出的不一样..

做完效果:

要求效果:

没办法,改呗.

既然设计到边框,首先要先明确切圆角和绘制边框线的方法.

<span style="font-size:18px;">view.layer.cornerRadius = 8.0;
view.layer.masksToBounds = YES;</span>

绘制边框线

<span style="font-size:18px;">    _verifty_TF.layer.borderWidth = 1;
    _verifty_TF.layer.borderColor = [SKUIColorFromRGB(0xdcdcdc) CGColor];</span>

说白了其实都是通过层对象的cornerRadius属性来实现圆角效果.

想实现下面的效果,想了下应该有三种思路.

思路一:

自己通过设置切角的作用域,以此来达到效果

UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(120, 10, 80, 80)];
view2.backgroundColor = [UIColor redColor];
[self.view addSubview:view2];

//设置偏移角总用有五个方向   TopLeft , TopRight , BottomLeft , BottomRight ,ALL
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view2.bounds byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(10, 10)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = view2.bounds;
maskLayer.path = maskPath.CGPath;
view2.layer.mask = maskLayer;

但是完成后出现了一个问题, 切正常图形是好用的 , 但是我的输入框边线怎么也切没啦???

我去,什么鬼?   方案一 作废!

思路二:

通过视图的叠加,即下方创建一个带灰色线的视图,上面放两个透明的输入框,最后中间补上一条线..

从新创建一个视图,继承于 UIView , 原本准备是使用 - ( void )drawRect:( CGRect )rect { // Drawing code }的

但是感觉不是特别好用,所以最后还是选择通过添加一个 View 的方式来做了  (实际上就是我太 LOW)

.H

#import <UIKit/UIKit.h>

@interface SKRectTextField : UIView

+(SKRectTextField *)textFieldByRectWithFrame:(CGRect)frame placeHold_1:(NSString *)placeHold_1 placeHold_2:(NSString *)placeHold_2 backgroundColor:(UIColor *)backgroundColor lineColor:(UIColor *)lineColor;

@end

.M

#import "SKRectTextField.h"

@implementation SKRectTextField

+(SKRectTextField *)textFieldByRectWithFrame:(CGRect)frame placeHold_1:(NSString *)placeHold_1 placeHold_2:(NSString *)placeHold_2 backgroundColor:(UIColor *)backgroundColor lineColor:(UIColor *)lineColor{

    //创建背景视图
    SKRectTextField *backgroundView = [[SKRectTextField alloc]initWithFrame:frame];
    backgroundView.backgroundColor = backgroundColor;
    backgroundView.layer.masksToBounds = YES;
    backgroundView.layer.cornerRadius = 5;
    backgroundView.layer.borderColor = lineColor.CGColor;
    backgroundView.layer.borderWidth = 1;
    //创建第一个输入框
    UITextField *textField_1 = [[UITextField alloc]initWithFrame:CGRectMake(10, 0, frame.size.width - 10, frame.size.height / 2)];
    textField_1.placeholder = placeHold_1;
    [backgroundView addSubview:textField_1];

    //创建第二个输入框
    UITextField *textField_2 = [[UITextField alloc]initWithFrame:CGRectMake(10, frame.size.height / 2, frame.size.width - 10, frame.size.height / 2)];
    textField_2.placeholder = placeHold_2;
    [backgroundView addSubview:textField_2];

    //创建线的视图
    UIView *lineView = [[UIView alloc]initWithFrame:CGRectMake(0, frame.size.height / 2, frame.size.width, 1)];
    lineView.backgroundColor = lineColor;
    [backgroundView addSubview:lineView];

    return backgroundView;

}

@end

实现出来效果:

算是基本实现了效果,那还有没有其他方案呢?

思路三:

上网找的,但是自己没去尝试,只做参考

通过另一张mask图创建新图

首先需要一张mask图，然后将这张mask图和原图合成，得到带圆角的新图。合成新图等同于在off-screen作图。该方法的优点是可以不局限于圆角，全凭mask图控制。

例子： https://github.com/weipin/RoundedCorner

例子中，tab 1是无圆角效果，其他三个tab各自对应三种方法。

来源： http://www.xiaweipin.com/archives/98

最后附上一个附录

附录:

//获取绘图上下文
CGContextRef context=UIGraphicsGetCurrentContext();
//设置粗细
CGContextSetLineWidth(context,0.2);
//开始绘图
CGContextBeginPath(context);
//移动到开始绘图点
CGContextMoveToPoint(context,5,50);
//移动到第二个点
CGContextAddLineToPoint(context,self.frame.size.width-5,50);
//关闭路径
CGContextClosePath(context);
//设置颜色
[[UIColorgrayColor] setStroke];
//绘图
CGContextStrokePath(context);

更多精彩文章,尽在我的公众号.