IOS UI

时间 2019-12-02

标签 ios 栏目 iOS 繁體版

原文原文链接

#define Spacing 10 //间隔距离
#define Btn_NUMs 3//每列个数
#define Btn_HEIGHT TRUEW(30)
#define Btn_WIDTH ((SCREEN_WIDTH-(Btn_NUMs+1)*Spacing)/Btn_NUMs)

 
[btn mas_makeConstraints:^(MASConstraintMaker *make) {
                make.top.equalTo(self.contentView.mas_top).offset(Spacing+(i/3)*(Spacing+Btn_HEIGHT));
                make.left.equalTo(self.contentView.mas_left).offset(Spacing+(i%3)*(Spacing+Btn_WIDTH));
                make.width.mas_equalTo(Btn_WIDTH);
                make.height.mas_equalTo(Btn_HEIGHT);
            }];

宽高固定的九宫格

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(20, 40, 200, 100)];    
    label.backgroundColor = [UIColor yellowColor];
    label.text = @"...";//设置文字
    label.textColor = [UIColor redColor];//文字颜色
    label.textAlignment = NSTextAlignmentLeft;//左右对齐方式
     label.shadowColor = [UIColor greenColor];
    label.shadowOffset = CGSizeMake(-2, -2);

    //设置阴影的颜色和偏移量
     [label sizeToFit]; //让label的大小适应label里展现的文字
     label.lineBreakMode = NSLineBreakByTruncatingTail; //省略号出现的模式
      label.numberOfLines = 0;    //容许展现的行数，写成0表明自动换行
     label.font = [UIFont systemFontOfSize:14];//设置字体，系统字体14号，默认是系统字体17号
    [label setFont:[UIFont boldSystemFontOfSize:14]];//设置体字
        label.font = [UIFont italicSystemFontOfSize:14];//斜体
      //快速遍历系统字体库，[UIFont familyNames]返回值是一个数组：系统支持的全部字体默认 HelveticaNeue
    for (NSString *str in [UIFont familyNames]) {
        NSLog(@"str = %@",str);
    }

//系统默认字体加黑
label.font = [UIFont boldSystemFontOfSize:20];
//系统默认字体斜体
label.font = [UIFont italicSystemFontOfSize:20];   
//苹方字体
[UIFont fontWithName:@"PingFang SC" size:18]



//label 设置行间距
NSString *str = @"在实际开发中，Label的默认行间距大小通常都是知足不了UI设计师设计的行间距大小的。因而乎，就须要咱们开发人员手动调整Label的行间距大小。然而，UILabel并无提供直接修改行间距大小的属性,可是咱们能够用Label的attributedText属性来设置. 在实际开发中，Label的默认行间距大小通常都是知足不了UI设计师设计的行间距大小的。因而乎，就须要咱们开发人员手动调整Label的行间距大小。然而，UILabel并无提供直接修改行间距大小的属性,可是咱们能够用Label的attributedText属性来设置";

NSMutableAttributedString *attributedStr = [[NSMutableAttributedString alloc] initWithString:str];
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
paragraphStyle.lineSpacing = 8.0; // 设置行间距
paragraphStyle.alignment = NSTextAlignmentJustified; //设置两端对齐显示
[attributedStr addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, attributedStr.length)];

UILabel *lineSpaceLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 100, [UIScreen mainScreen].bounds.size.width - 40, 0)];
lineSpaceLabel.backgroundColor = [UIColor cyanColor];
lineSpaceLabel.numberOfLines = 0;
lineSpaceLabel.attributedText = attributedStr;
[lineSpaceLabel sizeToFit];
[self.view addSubview:lineSpaceLabel];

//字间距
[attributedStr addAttribute:NSKernAttributeName value:@(10) range:NSMakeRange(0, attributedStr.length)];

UILabel

//view的坐标区域（相对于父视图）
@property(nonatomic) CGRect frame;
//背影色
@property(nonatomic,copy) UIColor *backgroundColor
//透明度
@property(nonatomic) CGFloat alpha; 
//隐藏状态
@property(nonatomic,getter=isHidden) BOOL hidden;  
//中心点坐标
@property(nonatomic) CGPoint center;
//子图标界限
@property(nonatomic) BOOL clipsToBounds;        
//在view上添加一个view
- (void)addSubview:(UIView *)view;
//自杀
- (void)removeFromSuperview;
view3.backgroundColor = [UIColor colorWithRed:160/255.0f green:120/255.0f blue:20/255.0f alpha:1];//自定义颜色（使用三原色）
view1.clipsToBounds = YES;//不容许子视图的范围超
查找视图：
NSArray *arrayFromView = [bigView subviews];//查询某个view全部的子view，返回结果是数组
UIView *midView = [arrayFromView objectAtIndex:1];//经过数组下标，找到某个固定的子view

插入视图：查找视图：
[bigView insertSubview:insertView atIndex:1];//在固定层级插入视图
[bigView insertSubview:insertView belowSubview:midView];    //在某一个子视图的下面插入
[bigView insertSubview:insertView aboveSubview:midView];    //在某一个子视图的上面面插入

修改视图层次：
[bigView exchangeSubviewAtIndex:0 withSubviewAtIndex:2];//交换2个视图的层次
[bigView sendSubviewToBack:midView];//将某一个子视图放到最下面
[bigView bringSubviewToFront:midView];//将某一个子视图放到最上面

删除视图：
[insertView removeFromSuperview];//从父视图中移除

延迟删除视图：
[self performSelector:@selector(runLater:) withObject:midView afterDelay:1];
    //延迟1秒调用
- (void)runLater:(UIView *)view
{
    UIView *bigView = [view superview];//找到父视图
    [bigView removeFromSuperview];
}
UIView animateWithDuration:1 animations:
follow：
bigView.autoresizesSubviews = YES;//容许子视图跟随
smallView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin; //设置被跟随的模式，能够多选“｜”按位或

CGRect rect = [[UIScreen mainScreen] bounds];//获取整个屏幕的大小
    //获取整个屏幕的rect
    //frame是相对于父视图的rect，
    //bounds是相对于本身的rect，通常状况下前两位数字都是0
    //rect里的4个数字是分红2组的：一组rect.origin表明坐标 一组rect.size表明大小
View判断是否为某类
NSArray *arrayFromView = [bigView subviews];//查询某个view全部的子view，返回结果是数组
UIView *midView = [arrayFromView objectAtIndex:1];//经过数组下标，找到某个固定的子view
[obj isKindOfClass:[UIButton class]//包括这个类的子类
[obj isMemberOfClass:[UIButton class]]//只限制本类不包括子类

视图圆角与弧度：
view.layer.borderColor = [[UIColor redColor] CGColor];//layer 至关于  frame (能够不用管)
    //borderColor 是边框颜色，类型是： CGColorRef,须要把UIColor 经过 CGColor 转换
    view.layer.borderWidth = 10;//边框的宽度
    view.layer.cornerRadius = 30;//边框的弧度
    view.layer.masksToBounds = YES;//（大多数不用加这句话就行）个别不能用的需加这句话
         btn.layer.masksToBounds = YES;//裁剪子视图不容许子视图超过本身的范围

UIView

UIImageView

//导航背景图片
[vc.navigationController.navigationBar setBackgroundImage:[[UIImage alloc]init] forBarMetrics:UIBarMetricsDefault];
//样式
[vc.navigationController.navigationBar setBarStyle:UIBarStyleDefault];
 //导航下边横线是否显示 不设置image则显示横线
[vc.navigationController.navigationBar setShadowImage:[UIImage new]];

//导航背景色
 vc.navigationController.navigationBar.barTintColor = [UIColor whiteColor];
//设置导航条里字体的颜色
self.navigationController.navigationBar.tintColor = [UIColor redColor];

//是否半透明状态，YES为透明 会影响坐标点｛0，0｝的位置
 [vc.navigationController.navigationBar setTranslucent:NO];//半透明



//navigationItem
//self.navigationItem的设置是针对当前页面的
self.navigationItem.hidesBackButton = YES;//隐藏当前页面的导航按钮
self.navigationItem.title = @“第一页”;//设置当前页面的title，会影响下一个页面的back的按钮；
self.navigationItem.titleView = titleLabel;//设置一个view显示在当前页面的导航条的中间添加一个Label


//自定义返回按钮
-(void)setNavgationLeftItemBtnWithIcon:(NSString*)icon{
    
    UIImage* backImage = [UIImage imageNamed:icon];
    UIBarButtonItem* backItem = [[UIBarButtonItem alloc] initWithImage:backImage
                                                                 style:UIBarButtonItemStyleDone
                                                                target:self
                                                                action:@selector(leftBarItemClick)];
    backItem.tintColor = [UIColor redColor];//返回按钮内容的填充颜色
    self.navigationItem.leftBarButtonItem = backItem;
    
}

底部的工具条相关操做（UIToolbar）

 self.navigationController.toolbarHidden = NO; // 让底部的 UIToolbar（工具条） 显示出来，针对整个导航控制器默认高度是44
 self.navigationController.toolbar.barTintColor = [UIColor brownColor];//背景色
 self.navigationController.toolbar.tintColor = [UIColor redColor];//渲染色
 [self.navigationController.toolbar setBackgroundImage:[UIImage imageNamed:@"ccc"] forToolbarPosition:UIBarPositionBottom barMetrics:UIBarMetricsDefault];//背景图片
 self.toolbarItems = [NSArray arrayWithObjects:dbbi, abbi, dbbi, bbbi, dbbi, cbbi, dbbi, nil];
//设置当前页面里，导航自带的toolBar上的专用按钮组

UINavigation

UIScrollView *sv = [[UIScrollView alloc] initWithFrame:CGRectMake(40, 100, 240, 300)];
    //建立一个滚动视图（在内容的展示上，相似于浏览器）
sv.contentSize = CGSizeMake(480, 600);//设置可展现内容的size
sv.bounces = NO;//设置弹簧效果
sv.pagingEnabled = YES;//翻页效果
self.automaticallyAdjustsScrollViewInsets = NO;//关掉vc对sv的自动调整
sv.userInteractionEnabled = NO;//用户点击事件
sv.scrollEnabled = NO;//是否容许用户操做sv的滚动
sv.minimumZoomScale = 0.5;
sv.maximumZoomScale = 2;//设置容许sv里的子视图缩放的倍数

//告诉sv，容许缩放哪个子视图
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{   return [scrollView.subviews lastObject];
    return [scrollView viewWithTag:10];//经过tag值
}
UIPageControl:(页码控制器)
  UIPageControl *pc = [[UIPageControl alloc] initWithFrame:CGRectMake(20, 440, 280, 30)];//建立一个页码控制器（小圆点）
    pc.numberOfPages = 3;//小圆点的个数
    pc.userInteractionEnabled = NO;//用户事件
    pc.currentPage = 1;//让pc对应的圆点亮起来
    pc.currentPageIndicatorTintColor = [UIColor magentaColor];//被选中的小圆点颜色
    pc.pageIndicatorTintColor = [UIColor yellowColor];//没被选中的小圆点颜色

//结束滑行调用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{  sv.contentOffset = CGPointMake(240, 300);//设置偏移量
   [sv setContentOffset:CGPointMake(240, 300) animated:YES];//加动画设置偏移量
}
//滑行结束时调用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    UIPageControl *pc = (UIPageControl *)[self.view viewWithTag:1];
    pc.currentPage = scrollView.contentOffset.x / scrollView.frame.size.width;
  //根据x方向的偏移量计算当前是在第几页，而后让对应的小圆点亮起来
}

UIScrollView

UITextField *tf = [[UITextField alloc] initWithFrame:CGRectMake(20, 60, 280, 70)];
    //文本输入框，通常用做用户输入帐号，密码，我的信息等
    
    tf.placeholder = @"请输入账号";//提示语，文本输入框，通常用于输入帐号，密码，我的信息
[tf setValue:ColorHex_666666 forKeyPath:@"_placeholderLabel.textColor"];//提示语字体颜色
   tf.textColor = ColorHex_333333;//输入时的字体颜色
    tf.font = [UIFont systemFontOfSize:40];//文框标题的字体大小
    tf.borderStyle = UITextBorderStyleLine;//边框风格

    tf.backgroundColor = [UIColor redColor];
    tf.background = [UIImage imageNamed:@"aaa"];//设置背景图片，若是边框风格是圆角，那么背景图失效，不然边框风格失效
    
    tf.adjustsFontSizeToFitWidth = YES;//当文本的宽度超过tf的宽度时，文字会自动变小（系统默认是有下限的）
    tf.minimumFontSize = 30.0f;//文字变小的下限
    tf.textAlignment = NSTextAlignmentLeft; //左右对齐方式，（和label的设置方式同样）
    tf.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;//垂直对齐方式，（btn对齐方式的设置也是用这种方式）
    //tf的左右对齐和垂直对齐在工做中通常都不设置，直接使用默认的

    tf.keyboardType = UIKeyboardTypeEmailAddress;//键盘类型
    tf.returnKeyType = UIReturnKeyNext;//return键的类型，（这个属性只是设置外观，和功能毫无关系）
    tf.secureTextEntry = YES;//安全输入模式（暗文输入）
    tf.clearsOnBeginEditing =YES;    //从新输入时清空tf的文字    
    tf.clearButtonMode = UITextFieldViewModeAlways;//设置清空按钮出现的时机
    
    UIView *v = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
    v.backgroundColor = [UIColor blueColor];
    tf.leftView = v;//这个view用于显示密码前面的👦
    [v release];
    tf.leftViewMode = UITextFieldViewModeAlways;//tf左边的视图和出现的时机（好比说用户的头像或者一把锁）
    
    UIView *av = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
    av.backgroundColor = [UIColor magentaColor];
    tf.inputView = av;//代替键盘（工做中通常不用）
    tf.inputAccessoryView = av;//键盘的附属view（出如今键盘上面）
    [av release];
    [self.view sendSubviewToBack:_result.view];  //点击结果按钮就将....页放到下面

键盘的点击事件：
- (void)textFieldDidBeginEditing:(UITextField *)textField//当键盘弹出时调用
{     NSLog(@"end = %d",textField.tag);       }
- (void)textFieldDidEndEditing:(UITextField *)textField//键盘收起时调用
{   NSLog(@"end = %d",textField.tag);  }
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event//当被点击时时调用（触发）
{
    UITextField *tf = (UITextField *)[self.view viewWithTag:1];
    [tf resignFirstResponder];//收起键盘
           [self.view endEditing: YES];//无论点哪一个都能收起键盘
    [self.view sendSubviewToBack:_result.view];  //点击结果按钮就将....页放到下面

}
- (BOOL)textFieldShouldReturn:(UITextField *)textField//点击return键时调用
{}

UITextField

UITextField

-(void)viewDidLoad {
self.tableView = [[UITableView alloc]init];
self.tableView.delegate = self;
self.tableView.dataSource = self;
// self.tableView.emptyDataSetDelegate = self;
// self.tableView.emptyDataSetSource = self;
self.tableView.scrollsToTop = YES;
self.tableView.showsVerticalScrollIndicator = NO;//隐藏垂直方向滑动条
self.tableView.rowHeight = UITableViewAutomaticDimension;
self.tableView.estimatedRowHeight = 100;//预编译行高 提升cell建立效率
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;//cell不显示分割线
self.tableView.separatorColor = [UIColor orangeColor];//cell线的颜色
self.tableView.tableFooterView = [UIImageView new];
[self.tableView setLayoutMargins:UIEdgeInsetsZero];//分割线
self.tableView.contentInset = UIEdgeInsetsMake(0, 0,59, 0);//滚动范围
// if (self.isOpenHeaderRefresh){//是否开启下拉刷新
// __weak typeof(self)weakSelf = self;
// self.tabView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
// [weakSelf refreshData];
// }];
// }
//
// if (self.isOpenFooterRefresh){//是否开启上啦加载
// __weak typeof(self)weakSelf = self;
// self.tabView.mj_footer = [MJRefreshAutoStateFooter footerWithRefreshingBlock:^{
// [weakSelf loadMoreData];
// }];
// }
[self.view addSubview:self.tableView];
[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(0, 0, 0, 0));
}];
}

-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
if (indexPath.row==0) {
HomeMoreCell *cell = [tableView dequeueReusableCellWithIdentifier:@"HomeMoreCell"];
if (!cell){
cell= [[[NSBundle mainBundle] loadNibNamed:@"HomeMoreCell" owner:self options:nil] lastObject];
[tableView registerNib:[UINib nibWithNibName:@"HomeMoreCell" bundle:nil] forCellReuseIdentifier:@"HomeMoreCell"];
}
return cell;
}
UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:@"UITableViewCell"];
if (cell == nil) {
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"UITableViewCell"];
}
return cell;

}


//绘制cell圆角
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{

// 圆角弧度半径
CGFloat cornerRadius = 6.f;
// 设置cell的背景色为透明，若是不设置这个的话，则原来的背景色不会被覆盖
cell.backgroundColor = UIColor.clearColor;
cell.contentView.backgroundColor = UIColor.clearColor;

// 建立一个shapeLayer
CAShapeLayer *layer = [[CAShapeLayer alloc] init];
CAShapeLayer *backgroundLayer = [[CAShapeLayer alloc] init]; //显示选中
// 建立一个可变的图像Path句柄，该路径用于保存绘图信息
CGMutablePathRef pathRef = CGPathCreateMutable();
// 获取cell的size
// 第一个参数,是整个 cell 的 bounds, 第二个参数是距左右两端的距离,第三个参数是距上下两端的距离
CGRect bounds = CGRectInset(cell.bounds, 10, 0);

// CGRectGetMinY：返回对象顶点坐标
// CGRectGetMaxY：返回对象底点坐标
// CGRectGetMinX：返回对象左边缘坐标
// CGRectGetMaxX：返回对象右边缘坐标
// CGRectGetMidX: 返回对象中心点的X坐标
// CGRectGetMidY: 返回对象中心点的Y坐标

// 这里要判断分组列表中的第一行，每组section的第一行，每组section的中间行

// CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius);
if (indexPath.row == 1) {
// 初始起点为cell的左下角坐标
CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds));
// 起始坐标为左下角，设为p，（CGRectGetMinX(bounds), CGRectGetMinY(bounds)）为左上角的点，设为p1(x1,y1)，(CGRectGetMidX(bounds), CGRectGetMinY(bounds))为顶部中点的点，设为p2(x2,y2)。而后链接p1和p2为一条直线l1，链接初始点p到p1成一条直线l，则在两条直线相交处绘制弧度为r的圆角。
CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), cornerRadius);
CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);
// 终点坐标为右下角坐标点，把绘图信息都放到路径中去,根据这些路径就构成了一块区域了
CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds));

} else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) {
// 初始起点为cell的左上角坐标
CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds));
CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), cornerRadius);
CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);
// 添加一条直线，终点坐标为右下角坐标点并放到路径中去
CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds));
} else {
// 添加cell的rectangle信息到path中（不包括圆角）
CGPathAddRect(pathRef, nil, bounds);
}
// 把已经绘制好的可变图像路径赋值给图层，而后图层根据这图像path进行图像渲染render
layer.path = pathRef;
backgroundLayer.path = pathRef;
// 注意：但凡经过Quartz2D中带有creat/copy/retain方法建立出来的值都必需要释放
CFRelease(pathRef);
// 按照shape layer的path填充颜色，相似于渲染render
// layer.fillColor = [UIColor colorWithWhite:1.f alpha:0.8f].CGColor;
layer.fillColor = [UIColor whiteColor].CGColor;

// view大小与cell一致
UIView *roundView = [[UIView alloc] initWithFrame:bounds];
// 添加自定义圆角后的图层到roundView中
[roundView.layer insertSublayer:layer atIndex:0];
roundView.backgroundColor = UIColor.clearColor;
// cell的背景view
cell.backgroundView = roundView;

// 以上方法存在缺陷当点击cell时仍是出现cell方形效果，所以还须要添加如下方法
// 若是你 cell 已经取消选中状态的话,那如下方法是不须要的.
UIView *selectedBackgroundView = [[UIView alloc] initWithFrame:bounds];

backgroundLayer.fillColor = [UIColor clearColor].CGColor;//cell选中颜色

[selectedBackgroundView.layer insertSublayer:backgroundLayer atIndex:0];

selectedBackgroundView.backgroundColor = UIColor.clearColor;
cell.selectedBackgroundView = selectedBackgroundView;

//设置cell分割线距离屏幕边距的问题
if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
[cell setLayoutMargins:UIEdgeInsetsMake(0, 20, 0, 20)];
}
if ([cell respondsToSelector:@selector(setSeparatorInset:)]) {
[cell setSeparatorInset:UIEdgeInsetsMake(0,20, 0, 20)];
}
}


#pragma mark - DZNEmptyDataSetSource Methods
-(UIImage*)imageForEmptyDataSet:(UIScrollView *)scrollView
{
return [UIImage imageNamed:@"bg_noData"];
}
- (UIColor*)backgroundColorForEmptyDataSet:(UIScrollView*)scrollView
{
return [UIColor whiteColor];
}
-(void)emptyDataSet:(UIScrollView *)scrollView didTapView:(UIView *)view{

}

UITableView