你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發綜合 >> IOS的一個帶動畫的多項選擇的控件(一)

IOS的一個帶動畫的多項選擇的控件(一)

編輯:IOS開發綜合

先上效果圖:

\


這個程序分2個層次,一個是頂部的帶UITextField的bar,一個是下拉選擇的view,下拉選擇的view帶有4個自定義的UIView

我們先定義一個UIViewController叫MyViewController,然後頂部的bar叫TopBarView,下拉選擇的view叫TypeSelectView,像UIButton的自定義的view叫做TypeView<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+VHlwZVZpZXfT0MG91tbXtMyso6zI57n7ytbWuLSlw/61vbXEaXRlbb7NysfRodbQ17TMrKOsy/nS1FR5cGVTZWxlY3RWaWV306a4w9PQuPbK9NDUse3KvrWxx7DKx8TEuPZ2aWV3sbvRodbQwcujrFR5cGVWaWV31tDT0Lj2yvTQ1L3Q1/bX1Ly6yse38bG70aHW0DwvcD4KPHA+0vLOqs/CwK2/8tPQytXG8LrN1bnKvsG91tbXtMyso6zL+dLUVHlwZVNlbGVjdGVkVmlld9PQuPbK9NDUse3KvtfUvLrP1tTa1NrExNbW17TMrDwvcD4KPHA+PGJyPgo8L3A+CjxwPs/IwLTQtFR5cGVWaWV3o7o8L3A+CjxwPjxwcmUgY2xhc3M9"brush:java;">#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;  //找到背景圖image的左上角的y坐標

        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]];
}



  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved