欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

IOS 自定义UIPickView详解及实例代码

程序员文章站 2023-12-21 13:35:58
ios 自定义uipickview 苹果一直推崇使用原生的组件,自带的uipickview其实也很漂亮了,看起来也很美观。但是有时候,产品会有一些特殊的设计和需求。本...

ios 自定义uipickview

苹果一直推崇使用原生的组件,自带的uipickview其实也很漂亮了,看起来也很美观。但是有时候,产品会有一些特殊的设计和需求。本文将会讲解如何修改苹果原生的组件的属性,达到自定义uipickview的效果。

需求如下。需要自定义一个tab。自定义选中文字的颜色。自定义选中颜色背景,自定义未选中文字颜色。
IOS 自定义UIPickView详解及实例代码

修改未选中的文字的字体和颜色

经过分析,上面的取消和确定按钮实现起来还是很简单的。加一个条就好了,我就不介绍具体步骤,下面的没有选中时候文字的样色,已经字体大小,我们都可以在下面的代理方法里面修改。
IOS 自定义UIPickView详解及实例代码

//change style
- (uiview *)pickerview:(uipickerview *)pickerview viewforrow:(nsinteger)row forcomponent:(nsinteger)component reusingview:(uiview *)view{


  cgfloat width = [self pickerview:self.pickerview widthforcomponent:component];
  cgfloat rowheight =[self pickerview:self.pickerview rowheightforcomponent:(component)];

  uiview *myview = [[uiview alloc]init];
  myview.frame =cgrectmake(0.0f, 0.0f, width, rowheight);
  uilabel *txtlabel = [[uilabel alloc] init];
  txtlabel.textcolor = self.plaincolor;
  txtlabel.tag=200;
  txtlabel.font = [uifont systemfontofsize:15*scale_6];
  txtlabel.textalignment = nstextalignmentcenter;
  txtlabel.frame = myview.frame;
  txtlabel.text = [self pickerview:pickerview titleforrow:row forcomponent:component];

  [myview addsubview:txtlabel];  
  return myview;
}

这样就可以修改未选中文字的颜色了。

修改选中的背景颜色和字体

但是背景颜色和字体如何修改呢。就是下图这个颜色和自体:
IOS 自定义UIPickView详解及实例代码

我一开始尝试了在这种方法,就是在上面加一层label。然后在代理方法中改变label的值。

-(nsstring*)pickerview:(uipickerview *)pickerview titleforrow:(nsinteger)row forcomponent:(nsinteger)component
{
  if (component==0) {
    return self.leftarray[row];

  }else if(component==1){
    return self.rightarray[row];
  }else {
  return self.rightarray[row];
  }
}

不过这个方法在如果使用手指点击的话,索引值是对不上的,这样的后果就是,label会一卡一卡的。如果只在这个方法设置label的值,那快速滑动的时候获取不到值,label值变化就会很慢。完全没有了原生的那种效果了。

最后,我才用的是获取系统图层的方法,在选择器的代理方法里面获取相应的图层,然后进行修改。我们先看一下pickview的图层。
IOS 自定义UIPickView详解及实例代码

我们只需要在代理方面里面拿到对应的视图然后修改就好

 //change style
- (uiview *)pickerview:(uipickerview *)pickerview viewforrow:(nsinteger)row forcomponent:(nsinteger)component reusingview:(uiview *)view{


  cgfloat width = [self pickerview:self.pickerview widthforcomponent:component];
  cgfloat rowheight =[self pickerview:self.pickerview rowheightforcomponent:(component)];

  uiview *myview = [[uiview alloc]init];
  myview.frame =cgrectmake(0.0f, 0.0f, width, rowheight);
  uilabel *txtlabel = [[uilabel alloc] init];
  txtlabel.textcolor = self.plaincolor;
  txtlabel.tag=200;
  txtlabel.font = [uifont systemfontofsize:15*scale_6];
  txtlabel.textalignment = nstextalignmentcenter;
  txtlabel.frame = myview.frame;
  txtlabel.text = [self pickerview:pickerview titleforrow:row forcomponent:component];

  [myview addsubview:txtlabel];

  uiview* topline  =  [pickerview.subviews objectatindex:1];
  uiview* botomline  =  [pickerview.subviews objectatindex:2];
  topline.hidden = yes;
  botomline.hidden = yes;

  bool issetttingbackcolor = no;

  uiview *subview = [self.pickerview.subviews firstobject];

  for ( uiview *pickercolumnview in subview.subviews) {

    nslog(@"pickercolumnview class %@",[pickercolumnview class]);

    uiview *pickerview = [pickercolumnview.subviews lastobject];
    if (!issetttingbackcolor) {
       pickerview.backgroundcolor = self.selectedbackcolor;
      issetttingbackcolor = !issetttingbackcolor;
    }

    uiview *tableview = [pickerview.subviews lastobject];
    for (uiview *cell in tableview.subviews) {
      nslog(@"cell class %@",[cell class]);
      uiview *cellview = [cell.subviews lastobject];
      uiview *labelsuper = [cellview.subviews lastobject];
      uilabel *label = [labelsuper.subviews lastobject];
      label.textcolor = [uicolor whitecolor];
    }

  }
  return myview;
}

下面的代码是用户隐藏pickview自带的两根细线。

 uiview* topline  =  [pickerview.subviews objectatindex:1];
  uiview* botomline  =  [pickerview.subviews objectatindex:2];
  topline.hidden = yes;
  botomline.hidden = yes;

设置是否修改颜色bool issetttingbackcolor = no;这个变量是为了防止多次设置背景颜色。造成相互遮盖。

最后效果如下:
IOS 自定义UIPickView详解及实例代码

demo地址:http://xiazai.jb51.net/201612/yuanma/jsdcustompickview-master(jb51.net).rar

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

上一篇:

下一篇: