黑馬程序員_iOS 的基礎控件之UILabel，UISlider，UIImageView

iOS，Android，Java培訓，期待與您的交流
iOS應用開發的一項內容就是用戶界面的開發。不管應用程序實際包含的邏輯有多複雜，如果這個應用程序沒有提供友好的圖形用戶界面，將很難吸引用戶。作爲一個程序設計者，必須優先考慮用戶的感受，一定要讓用戶感到爽，這個應用程序才有價值。
1    UILabel
UILabel的作用是顯示文本，不能編輯文本，它直接繼承UIView。除了UIView所支持的屬性外，現介紹UILbel常用的額外屬性：
1、Text：用於設置顯示的文本，可以設置任何字符串
2、Color：用於設置文本的顏色
3、Font：用於設置本文的字體，文字大小和字體風格
4、Alignment：用於設置文本的對齊方式
5、Lines用於設置文本行數，默認是1

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    //創建一個UILabel，座標(10,10),寬度100，高度50
    UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 100, 50)];
    label1.text = @"the first label";   //設置顯示的文本
    label1.textColor = [UIColor redColor];  //設置文本的顏色爲紅色
    label1.font = [UIFont systemFontOfSize:15]; //設置文本爲系統默認字體，大小爲15
    label1.textAlignment = NSTextAlignmentCenter;   //設置文本的對齊方式是居中對齊
    label1.numberOfLines = 0;   //設置文本的行數，0表示沒有限制，文本如果太長，會自動換行顯示
    label1.text = @"the first label this is test";  //顯示長文本
    
    [self.view addSubview:label1];
}

2    UISlider
UISlider通過滑塊的位置來標識數值，並且允許拖動滑塊。因此UISlider通常用於對系統的某種數值進行調節，比如調節音量，控制播放進度等。
1、Value:用於設置UISlider的位置範圍，包括Minimum和Maxmum
2、監聽事件Value Changed，當UISlider的位置發生變化，會觸發該事件

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    //創建UISlider，座標(10,200)，寬度200，高度20
    UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(10, 200, 200, 20)];
    
    //設置最小值和最大值
    slider.minimumValue = 0;
    slider.maximumValue = 7;
    
    //綁定UIControlEventValueChanged事件的處理方法
    [slider addTarget:self action:@selector(change:) forControlEvents:UIControlEventValueChanged];
    
    [self.view addSubview:slider];
}


- (void) change:(UISlider*)slider
{
    NSLog(@"UISlider的值%f",slider.value);
}

3    UIImageView
UIImageView用於顯示圖片，它直接繼承UIView。因此，UIImage只能作爲圖片的顯示控件，不能接受用戶輸入。

    //創建UIImageView，用於保存圖片，並且充滿整個屏幕
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
    
    //創建UIImage，代表一張圖片
    UIImage *image = [UIImage imageNamed:@"0.png"];
    
    //將圖片放到UIImageView
    imageView.image = image;
    
    [self.view addSubview:imageView];

4    圖片瀏覽器
圖片瀏覽器的界面如下圖所示，最上面的UILabel顯示第幾張圖片，中間的UIImageView用於顯示圖片，下面的UILabel顯示圖片的描述，最下面的UISlider則用來切換圖片。

ViewController定義成員變量_allDescs，它是NSArray，用於保存的圖片的描述信息。圖片的描述信息放在plist文件，需要解析該文件，將信息保存到NSArray成員變量。

    
- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 1.獲得所有的描述(通過解析plist文件來創建數組對象，比如傳入文件的全路徑)
    // 如果要訪問項目中資源包裏面的所有資源。應該用mainBundle
    NSBundle *bundle = [NSBundle mainBundle];
    // 獲得文件的全路徑
    NSString *path = [bundle pathForResource:@"descs" ofType:@"plist"];
    // 加載path對應的文件來創建數組 
    _allDescs = [NSArray arrayWithContentsOfFile:path];
    
    // 2.設置默認的描述
    _imageDesc.text = _allDescs[0];
    
    //self.set
}

拖動UISlider，切換圖片。原理是監聽UISlider的位置，如果位置發生了變化，在監聽事件中更換UIImageView的圖片，並且更換UILabel的顯示文本。

    
- (IBAction)sliderValueChange:(UISlider *)sender {
    // 1.設置中間的圖片
    // 獲得圖片名稱  %.f 不保留任何小數
    NSString *imageName = [NSString stringWithFormat:@"%.f.png", sender.value];
    _imageView.image = [UIImage imageNamed:imageName];
    
    // 2.設置序號（第幾張），即更改最上面的UILabel的顯示文本
    _imageNo.text = [NSString stringWithFormat:@"%.f/16", sender.value + 1];
    
    // 3.設置描述，更改下面UILabel的顯示文本
    int no = (int)(sender.value + 0.5);
    _imageDesc.text = _allDescs[no];  

iOS，Android，Java培訓，期待與您的交流