你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發綜合 >> IOS之基本UI控件

IOS之基本UI控件

編輯:IOS開發綜合
IOS之基本UI控件

目錄(?)[+]

    31 Button控件32 開關控件33 滑塊控件34 分段控件34 工具欄35 WebView

    3.1 Button控件

    3.2 開關控件

    3.3 滑塊控件

    3.4 工具欄

    3.5 WebView

    3.1 Button控件

    iPhone的Button控件可以做的很絢麗,Button可以有多種狀態:

    " Default State

    " Highlighted State

    " Selected State

    " Disabled State

    wps_clip_image-10832wps_clip_image-10655

    實現上圖的效果:新建ButtonsBackground項目:

    ButtonsBackgroundViewController.h文件

    復制代碼
    @interface ButtonsBackgroundViewController : UIViewController {
        UIButton * clearButton;
        UIButton * smallButton;
    }
    
    @property (nonatomic, retain) IBOutlet UIButton * clearButton;
    @property (nonatomic, retain) IBOutlet UIButton * smallButton;
    
    - (IBAction) disableBut: (id) sender;
    
    @end
    復制代碼

    ButtonsBackgroundViewController.m文件

    復制代碼
    @synthesize clearButton;
    @synthesize smallButton;
    
    - (IBAction) disableBut: (id) sender {
        if(clearButton.enabled == YES) {
            clearButton.enabled = NO;
            smallButton.enabled = NO;
            [((UIButton *) sender) setTitle:@"Enable" forState:UIControlStateNormal];
        }
        else {
            clearButton.enabled = YES;
            smallButton.enabled = YES;
            [((UIButton *) sender) setTitle:@"Disable" forState:UIControlStateNormal];
        }
    }
    
    - (void)dealloc {
        [clearButton release];
        [smallButton release];
        [super dealloc];
    }
    復制代碼

    點擊Disable按鈕時候,調用disableBut方法,在該方法中實現了clearButton按鈕和smallButton按鈕“可用”狀態和“不可用”狀態的切換。在狀態發生切換時候還要改變Disable按鈕的上面的“標題”和“狀態”:

    [((UIButton *) sender) setTitle:@"Enable"forState:UIControlStateNormal];

    sender是事件源即點擊的按鈕對象本身。

    Interface Builder設計頁面 :

    點擊Disable按鈕的時候,會改變clearButton和smallButton的標題,因此需要連接File’s Owner到兩個按鈕(clearButton和smallButton)的輸出口。

    為了響應Disable按鈕的事件需要,從Disable按鈕連接到File’s Owner定義的disableBut事件。

    clearButton屬性設定

    屬性框,使Shows Touch on Highlight is checked 選項被選中。

    Default State Configuration選中時候,設置按鈕圖片power.png背景圖片butbackgray.png。

    Highlighted State Configuration 選中時候,設置按鈕圖片power.png ,背景圖butbackbluegray.png。

    Disabled State Configuration 選中時候,設置按鈕圖片powerdisabled.png背景圖片,butbackgraydisabled.png。

    smallButton屬性設定

    Default State Configuration選中時候,設置按鈕圖片butbackgray.png背景圖片, 設置title“Shock”。

    Highlighted State Configuration 選中時候,設置圖片butbackbluegray.png背景圖片,設置title“Shocking”。

    3.2 開關控件

    開關控件(Switch),有些相windows中的checkbox,它只有兩種狀態,true和false。

    可以通過該方法改變開關控件的狀態。

    -(void) setOn: (BOOL) on animated: (BOOL) animated

    wps_clip_image-17636

    3.3 滑塊控件

    滑塊控件(Slider),水平放置,可以用手觸摸改變它的值。

    默認情況下它的最小值0最大值1.00,而.50是初始值,我們可以通過下面的方法設定值:

    - (void) setValue:(float) value animated:(BOOL) animated

    wps_clip_image-28926

    開關和滑塊實例

    我們通過在頁面放在開關和滑塊控件了解他們的使用情況。

    wps_clip_image-6113

    新建項目SwitchSlider:

    SwitchSliderViewController.h

    復制代碼
    @interface SwitchSliderViewController : UIViewController {
         UISwitch * mySwitch;
    }
    
    @property(nonatomic, retain)IBOutlet UISwitch * mySwitch;
    
    -(IBAction) handleSwitch: (id) sender; 
    -(IBAction) handleSlider: (id) sender;
    
    @end
    復制代碼

    SwitchSliderViewController.m

    復制代碼
    @implementation SwitchSliderViewController
    
    @synthesize mySwitch;
    
    - (IBAction) handleSwitch: (id) sender {
        if( [((UISwitch *) sender) isOn] == YES){
            NSLog(@"It's on");
        } else {
            NSLog(@"It's off");
        }
    } 
    
    - (IBAction) handleSlider: (id) sender {
        NSLog(@"value: %f", ((UISlider *)sender).value);
        if( [((UISlider *) sender) value] == ((UISlider *) sender) .maximumValue) {
            [mySwitch setOn:YES animated:YES];
        }
    }
    
    - (void)dealloc {
        [mySwitch release]; 
        [super dealloc];
    } 
    復制代碼

    連接輸出口和動作事件

    連接開關控件到的handleSwitch: 動作。

    連接滑塊控件到的handleSlider: 動作。

    制定開關控件輸出口。

    3.4 分段控件

    分段控件(Segment),是有2個或更多段構成的組,它相當與獨立的按鈕。

    wps_clip_image-21321

    新建項目Segment:

    SegmentViewController.h

    定義一個動作事件

    @interface SegmentViewController : UIViewController {
    
    }
    
    - (IBAction) handleSegment: (id) sender;

    SegmentViewController.m

    復制代碼
    - (IBAction) handleSegment: (id) sender {
        UISegmentedControl * myseg = (UISegmentedControl *) sender;
        if(myseg.selectedSegmentIndex == 0) {
            NSLog(@"selected zero index...");
        }
        else if(myseg.selectedSegmentIndex == 1) {
            NSLog(@"selected one index...");
        }
        else {
            NSLog(@"selected two index...");
        }
    }
    復制代碼

    IB設計視圖

    wps_clip_image-13150

    連接動作事件

    連接段控件到File’s Owner的handleSegment: 動作。

    3.4 工具欄

    工具欄(UIToolBar),一般是放置在屏幕的底部,在工具欄的內部可以放置多個按鈕和控件。

    wps_clip_image-29488

    新建項目ToolBar:

    ToolBarViewController.h

    定義兩個動作事件

    復制代碼
    @interface ToolBarViewController : UIViewController {
    
        IBOutlet UIActivityIndicatorView * myActivityView;
    }
    
    @property (nonatomic, retain) IBOutlet UIActivityIndicatorView * myActivityView;
    
    -(IBAction)onClickStartButton: (id)sender;
    -(IBAction)onClickOpenButton: (id)sender;
    
    @end
    復制代碼

    ToolBarViewController.m

    復制代碼
    @implementation ToolBarViewController
    
    @synthesize myActivityView;
    
    -(IBAction)onClickStartButton: (id)sender {
        if ([myActivityView isAnimating]) {
            [myActivityView stopAnimating];            
        } else {
            [myActivityView startAnimating];
        }
    }
    
    -(IBAction)onClickOpenButton: (id)sender {
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示信息" 
                                        message:@"您點擊了打開按鈕" delegate:self 
                                        cancelButtonTitle:@"Done" 
                                        otherButtonTitles:nil];
        [alert show];
        [alert release];
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
    }
    
    - (void)viewDidUnload {
    }
    
    
    - (void)dealloc {
        [myActivityView release];
        [super dealloc];
    }
    
    @end
    復制代碼

    IB設計視圖

    wps_clip_image-5458

    連接動作事件

    連接到打開按鈕的onClickOpenButton: 動作。

    連接到開始按鈕的onClickStartButton: 動作。

    連接到UIActivityIndicatorView輸出口。

    3.5 WebView

    WebView可以幫助我們構建Web的iPhone應用程序。 很多網站的iPhone和iPad客戶端程序都是使用WebView開

    發的。 WebView能夠支持HTML5,不支持Flash等。

    wps_clip_image-31354

    新建項目MyWeb:

    MyWebViewController.h

    復制代碼
    @interface MyWebViewController : UIViewController  {
        IBOutlet UITextField * myTextField;
        IBOutlet UIWebView * myWebView;
    }
    
    @property(nonatomic, retain) UIWebView * myWebView;
    @property(nonatomic, retain) UITextField * myTextField;
    
    - (IBAction) changeLocation: (id) sender;
    
    @end
    復制代碼

    MyWebViewController 需要實現協議UIWebViewDelegate,它一個委托對象。委托是一種設計模式,在iPhone中主要用於回調事件。在委托中定義了一下方法,實現了該委托的對象,要提供該方法的實現。

    UIWebViewDelegate的方法是webViewDidFinishLoad: 它上在異步情況一個網址,當應答回來後回調該方法。

    MyWebViewController.m

    復制代碼
    @implementation MyWebViewController
    
    @synthesize myWebView;
    @synthesize myTextField;
    
    - (void) viewDidLoad {
        myWebView.delegate = self;
    }
    
    - (void)dealloc {
        myWebView.delegate = nil;
        [myTextField release];
        [myWebView release];
        [super dealloc];
    }
    
    - (IBAction) changeLocation: (id) sender {
        [myTextField resignFirstResponder];
        NSURL * url = [NSURL URLWithString: myTextField.text];
        NSURLRequest * request = [NSURLRequest requestWithURL:url];
        [myWebView loadRequest:request];
    }
    
    #pragma mark WebView 委托
    #pragma mark --
    - (void)webViewDidFinishLoad: (UIWebView *) webView {
        NSLog(@"%@", [webView stringByEvaluatingJavaScriptFromString:
                      @"document.body.innerHTML"]);
    }
    
    @end
    復制代碼

    在viewDidLoad 方法中的myWebView.delegate =self是指定為自身。

    webViewDidFinishLoad方法中實現委托回調功能。

    [myWebView stringByEvaluatingJavaScriptFromString:

    @"document.documentElement.textContent”]

    是運行一個JavaScript腳本程序,document.body.innerHTML獲得頁面中的HTML代碼。

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