您的位置: 首页  >  IT文章  >  Ios5 基础2 –丰富的用户界面

Ios5 基础2 –丰富的用户界面

分类: IT文章 • 2023-12-27 08:52:37
Ios5 基础二 –丰富的用户界面

Ios5 基础 –丰富的用户界面

  1. 一． 本节目标：
  1. 1.实现一个图像视图、一个滑块、两个文本段、一个分段控件、两个开关和一个IOSbutton;
  2. 2.学习如何检索和设置控件的值；
  1. 二． 控件分类：

用户界面的控件一般有三种基本形式：活动、静态、和被动；

1. 活动：上节的按钮，点击会触发某些动作或代码；

2. 静态：用户不能做任何操作，比如本节的图像（图像也是可以配置UIImageView控件的，也可以触发方法；）

3. 被动：比如网页上的本文字段。


所有IOS控件都是UIControl控件的子类，因此他们能够触发操作方法。大多数控件也能设置为静态和不可见。

虽然IOS和MAC上控件的行为有很大不同，触发方式也有很多，但是尽量一个方法对应一个控件的功能；不要一个控件对应过个方法；

  1. 三． 实例开始：

1） 实现图像视图和文本字段：

1.创建Simple View Application项目，自己找一个.png图像添加到项目文件supporting文件中；

2.在xib界面中拖入一个Image Vie控件，并且调整大小，然后在inspector中设置其image为我们的图片，

3. 再次调整image View的大小为图像的实际大小，点击图像两次，选择Editor ->size to fit Content;然后拖动到合适的位置；

4.视图的属性说明：上面是Image View的属性列，下面是View属性，属于父类UIView所对应的更为通用的属性；

①． Mode:图像在视图内部的对齐方式，以及是否缩放以适应视图。（尽量在导入前调整好大小，而不是进行缩放）

②．tag:与图像视图捆绑在一起的一个数值，供开发人员使用，可以用来在一个方法中通过sender参数区分不同的按钮；

③． interaction：

User interaction Enabled：是否可对此对象操作；

Multiple Touch:多点触控

④． alpha:图像的透明度；一般为1；

⑤． bachground:视图的背景颜色；

⑥． Drawing：Opaque:选中，通知IOS视图后的内容不需要绘制；Hidden：控件是否可见，不选中；Clear Graphics Context:一般不选中，选中后IOS先用透明黑色绘制控件的所有区域然后进行绘图；Clip SubView:如果选中，则只有父视图范围内的子视图将被绘制，默认不要选中；Autoresize Subview复选框，告诉IOS可以调整视图大小。

⑦．stretching：可拉伸区域设置

5. 添加文本字段：

在xib中拖入两个标签和两个文本字段，并调整合适的大小和位置；如图：

Ios5 基础2 –丰富的用户界面

文本字段是IOS控件中比较复杂的字段，先看一下文本字段的属性设置：

1)Text:在应用程序启动时默认显示；

2)Placeholder :文本字段中灰色显示的文本；

3)Background，Disabled定制文本字段的外观时使用；

4)Border Style：边框绘制方式；

5)Clear button:清除按钮显示时机；clear when editing begins用户触摸此字段时原先的内容清除；

6)Capitalization:期待文本；

7)Return key：键盘的最下边按钮设置；

8)Auto –enabled Return key:禁用return key;secure:密码显示内容；

6. 将文本字段关联输出口，定义两个属性nameField和numberField；


  1. 四． 关闭键盘的设置：.
  1. 1.完成文本字段输入后关闭键盘的设置：

①．添加操作：



- (IBAction)textFieldDoneEdting:(id)sender{
    [sender resignFirstResponder];
}









注：通知该控件放弃作为第一响应者的控制权，并将其返回给用户之前操作的控件。当文本失去了第一响应者的状态后，与之关联的键盘也将消失；







②．打开文本编辑框的检查器，然后将Did
 End On Exit旁边的圆圈拖向File‘s
 owner;


  1. 
2.通过触摸背景关闭键盘



    

  1. 
1)视图控制器有一个View属性，继承自UIViewController，这个View属性对应于xib文件的View图标，此属性指向xib文件的一个UIView实例，该实例充当用户界面中所有项的容器；在用户界面中没有外观，但是涵盖整个iphone窗口，位于其他用户的界面对象之下，有时候成为容器视图；
    2. 

  2. 
2)将view的创建实例由UIView改为UIControl，将能出发操作方法。UIControl是UIView的子类，
    3. 

  3. 
3)添加操作方法：
    4. 





	- (IBAction)backgroundTap:(id)sender{
    [nameField resignFirstResponder];
    [numberField resignFirstResponder];






}//即使控件并非第一响应者，对其调用resignFirstResponser方法也是安全的；


  1. 
4)打开View的连接检查器，将Touch Down连向File’s owner的方法；


  1. 五． 
添加滑块和标签




Ios5 基础2 –丰富的用户界面


    

  1. 1. 
拖动label和UISlider两个控件到xib界面中；
    2. 

  2. 2. 
设置slider的属性，设置最小值，最大值和初始值，选中Update Event 和Continuous选框，确保滑块的值可以出发一些时间。
    3. 

  3. 3. 
为label添加输出口；
    4. 

  4. 4. 
为slider添加操作方法，并连接；
    5. 





	- (IBAction)sliderChanged:(id)sender{
    UISlider *slider = (UISlider*)sender;
    int progressInt = roundf(slider.value);
    [sliderLabel setText:[NSString stringWithFormat:@"%d",progressInt]];
}






//将sender赋给UISlider指针，然后获取滑块的当前值，然后四舍五入为整数，；


  1. 
六．实现开关、按钮和分段控件


    

  1. 
1.首先将分段控件和switch按钮拖动到xib文件中，并调整其位置；
    2. 

  2. 
2.创建两个按钮的输出口，分别命名为leftSwitch,rightSwith,并为两个按钮添加同一个操作方法：
    3. 









- (IBAction)switchChanged:(id)sender {
    UISwitch *swi = (UISwitch*)sender;
    BOOL is = swi.isOn;
    [leftSwitch setOn:is animated:YES];
    [rightSwitch setOn:is animated:YES];
}





  1. 
3.在两个标签上防止button，覆盖两个switch按钮，并为button设置输出口和操作；；实现操作方法：




 (IBAction)toggleControls:(id)sender {
    if([sender selectedSegmentIndex] == 0){
        leftSwitch.hidden = NO;
        rightSwitch.hidden = NO;
        dosomethingButton.hidden = YES;
    }else{
        leftSwitch.hidden = YES;
        rightSwitch.hidden = YES;
        dosomethingButton.hidden = NO;
    }





}


  1. 七． 
实现操作表和警报


    

  1. 1. 
操作表和警报都用于向用户提供反馈。操作表会使用户在两个或多个选项之间作出选择。警报表出现在屏幕*，与操作表类似，迫使用户继续应用程序之前作出响应；
    2. 

  2. 2. 
操作表委托方法：在操作表退出时需要获得通知。需要让控制器类充当操作表的委托，控制器类需要遵从UIActionSheetDelegate协议；
    3. 




同样，一般警报表我们不需要知道其返回结果，如果要对返回结果进行响应，同样要遵从警报表对应的UIAlertViewDelegate协议；


  1. 3. 
先在do something button的按键响应函数中添加操作表的创建和显示：




- (IBAction)buttonPressed:(id)sender {
    UIActionSheet *actionSheet = [[UIActionSheet alloc]initWithTitle:@"Are you sure?" delegate:self cancelButtonTitle:@"No way" destructiveButtonTitle:@"yes,I'm sure" otherButtonTitles: nil];
    [actionSheet showInView:self.view];
}




  1. 
4.然后添加协议的实现方法：




	- (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex{
    if(buttonIndex != [actionSheet cancelButtonIndex]){
        NSString * str = nil;
        if(nameField.text.length > 0){
            str = [[NSString alloc] initWithFormat:@"you can breath easy,%@,everything is ok",nameField.text];
        }else{
            str = @"hahahahahah";
        }
        
        UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"something is done" message:str delegate:self cancelButtonTitle:@"phew" otherButtonTitles: nil];
        [alertView show];
            
        }






    }


    

  1. 5. 
3中创建操作表的第二个参数是委托，它将在操作表上的按钮被按下时收到通知，并调用- (void)actionSheet: clickedButtonAtIndex
 2方法；
    2. 

  2. 6. 
操作表始终有一个父视图，即对当前用户可见的视图。因此使用self.view;注意：view是私有成员变量，必须通过方法来访问；
    3. 

  3. 7. 
如何判断操作表的按键：使用UIActionSheet的属性判断：cancelButtonIndex；
    4. 



  1. 八． 
美化按钮：


    

  1. 
1.ios大多数按钮使用图像绘制；
    2. 

  2. 
2.程序是沙盒化的，不能访问ios设备其他应用程序的文件，或ios本身使用的图像；
    3. 

  3. 
3.实例：先将button的type改成custom类型，然后在项目中添加两个图片，然后在方法viewDidLoad方法中添加：
    4. 





 UIImage *buttonWhite = [UIImage imageNamed:@"whiteButton.png"];
    UIImage * stretchableButton = [buttonWhite stretchableImageWithLeftCapWidth:12 topCapHeight:0];
    [dosomethingButton setBackgroundImage:stretchableButton forState:UIControlStateNormal];
    
    UIImage *buttonBlue = [UIImage imageNamed:@"blueButton.png"];
    UIImage * stretchableBlue = [buttonBlue stretchableImageWithLeftCapWidth:12 topCapHeight:0];
    [dosomethingButton setBackgroundImage:stretchableBlue forState:UIControlStateHighlighted];




    

  1. 
4.控件的状态：普通，突出状态，禁用，选中；
    2. 

  2. 
5.可伸缩图像，是可以调整大小的图像，能智能的调整大小；
    3. 

															

																					

								

									相关推荐