先上效果图:
这个程序分2个层次,一个是顶部的带UITextField的bar,一个是下拉选择的view,下拉选择的view带有4个自定义的UIView
我们先定义一个UIViewController叫MyViewController,然后顶部的bar叫TopBarView,下拉选择的view叫TypeSelectView,像UIButton的自定义的view叫做TypeView
TypeView有两种状态,如果手指触摸到的item就是选中状态,所以TypeSelectView应该有个属性表示当前是哪个view被选中了,TypeView中有个属性叫做自己是否被选中
因为下拉框有收起和展示两种状态,所以TypeSelectedView有个属性表示自己现在在哪种状态
先来写TypeView:
#define TypeView_Width 76
#define TypeView_Height 76
@class TypeSelectView;
@interface TypeView : UIView
@property (nonatomic, assign) int typeId;
@property (nonatomic, assign) BOOL bSelected;
@property (nonatomic,strong) TypeSelectView *typesView;
@end
touch事件:
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
if (!_bSelected) {//如果触摸到的这项没被选中,那么我们就要把TypeSelectView中的当前选中项的选中状态取消
if (_typesView.curSelectedView) {
_typesView.curSelectedView.bSelected = NO;
[_typesView.curSelectedView setNeedsDisplay];
}
_bSelected = YES;
_typesView.curSelectedView = self;
[self setNeedsDisplay];
}
}
然后是draw:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [CCommon RGBColorFromHexString:@"#c5c4cc" alpha:1.0f].CGColor);
CGFontRef contextFont = CGFontCreateWithFontName((CFStringRef)[UIFont systemFontOfSize:14].fontName);
CGContextSetFont(context, contextFont);
CFRelease(contextFont);
CGContextSetFontSize(context, 14.0);
if (_bSelected) {
//显示select的背景
UIImage* bgImage = [UIImage imageNamed:@"change_icon_touch_bg.png"];
CGRect bgRc = rect;
bgRc.origin.x = (bgRc.size.width - bgImage.size.width)/2+1.0f; //找到背景图image的左上角的x坐标
bgRc.origin.y = (bgRc.size.height - bgImage.size.height)/2; <span style="font-family: Arial, Helvetica, sans-serif;">//找到背景图image的左上角的y坐标</span>
bgRc.size = bgImage.size; //ui给的背景图的大小作为控件的大小
[bgImage drawInRect:bgRc];
CGContextSetFillColorWithColor(context, [CCommon RGBColorFromHexString:@"#58baff" alpha:1.0f].CGColor); //中间填充颜色
}
//draw image
NSString* imageName = [NSString string];
NSString* text = [NSString string];
imageName = @"mbWWW.png";
if (_typeId == 0) {
text = @"web";
}else if(_typeId == 1){
text = @"weibo";
}else if(_typeId == 2) {
text = @"sina";
}else if(_typeId == 3){
text = @"sohu";
}
if (_bSelected) {
imageName = [imageName stringByReplacingOccurrencesOfString:@".png" withString:@"_touch.png"];
}
//imageName给的view里面的src image的名称,有选中和没选中两种状态
UIImage* typeImage = [UIImage imageNamed:imageName];
CGRect rc = rect;
rc.origin.x = (rc.size.width - typeImage.size.width) / 2;
rc.origin.y = 10;
rc.size = typeImage.size;
[typeImage drawInRect:rc];
//draw text 因为文字在image下面
CGPoint textPt = CGPointMake(rc.origin.x, rc.origin.y+rc.size.height+10);
[text drawAtPoint:textPt withFont:[UIFont systemFontOfSize:14.0f]];
}