[iOS基础控件 - 5.3] 电台APP可滚动主界面(UIScrollView制作)

A.功能

1.上下可滚动的电台 2 x n 的图标集

2.顶部半透明标题

3.底部半透明功能按钮

 

B.实现思路

1.设置图标、启动画面

 

 

 

2.拖入UIScrollView，设置背景色

（1）设置contentSize, x=0阻止水平移动

 

3.加入电台图标（6个）

 

4.加入顶部标题和设置按钮，加入到总的View，不是UIScrollView

（1）设置半透明

（2）给UIScrollView顶部增加额外的滚动区域（不直接使用位置下移，是为了达到顶部标题区的穿透效果），区域和顶部标题区位置、尺寸一致

（3）初始化UIScrollView设置一开始的滚动位置contentOffset，一开始不要上升到顶部标题区

（4）状态栏高20个单位，注意标题和按钮位置

     // 取得最底端的Y值
     CGFloat maxY = CGRectGetMaxY(self.lastImage.frame);

     // 设置水平方向不可滚，垂直方向可滚动到最底端
     self.scrollView.contentSize = CGSizeMake(, maxY);

     // 设置顶部、底部间隔
     self.scrollView.contentInset = UIEdgeInsetsMake(, , , );

     // 设置初始滚动位置
     self.scrollView.contentOffset = CGPointMake(, -);

 

  

 

 

5.加入底部按钮

（1）使用CGRectGetMaxY等方法得到底部的最低位置，以设置contentSize

 

6.加入底部功能按钮区

 

 

 

主要代码

 //
 //  ViewController.m
 //  Radio
 //
 //  Created by hellovoidworld on 14/11/28.
 //  Copyright (c) 2014年 hellovoidworld. All rights reserved.
 //

 #import "ViewController.h"

 @interface ViewController ()
 @property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
 @property (weak, nonatomic) IBOutlet UIButton *lastImage;

 @end

 @implementation ViewController

 - (void)viewDidLoad {
     [super viewDidLoad];
     // Do any additional setup after loading the view, typically from a nib.

     [self initScrollView];
 }

 - (void)didReceiveMemoryWarning {
     [super didReceiveMemoryWarning];
     // Dispose of any resources that can be recreated.
 }

 - (void) initScrollView {
     // 取得最底端的Y值
     CGFloat maxY = CGRectGetMaxY(self.lastImage.frame);

     // 设置水平方向不可滚，垂直方向可滚动到最底端
     self.scrollView.contentSize = CGSizeMake(, maxY);

     // 设置顶部、底部间隔
     self.scrollView.contentInset = UIEdgeInsetsMake(, , , );

     // 设置初始滚动位置
     self.scrollView.contentOffset = CGPointMake(, -);
 }

 @end