音乐界面简单布局

作者: 您079 | 来源:发表于2018-04-08 10:06 被阅读0次

在 AppDelegate.m 中
导入头文件

#import "ViewController.h"  //  在 ViewController 中写引导页

在 didFinishLaunchingWithOptions 方法中更改主窗口

// 更改主窗口
    self.window.rootViewController = [[ViewController alloc] init];

引导页
在 ViewController.m 中
导入主页面的头文件 - 创建一个类 :例类名为：MainViewController

#import "MainViewController.h"  // 显示主页面的内容

定义宏定义

// 屏幕的宽度和高度
#define WIDTH self.view.frame.size.width
#define HEIGHT self.view.frame.size.height

设置滚动视图的协议

<UIScrollViewDelegate>

定义属性

@property (nonatomic ,strong) NSArray *imgArr;  // 图片数组
@property (nonatomic ,strong) UIScrollView *ydyScrollView;  // 大的滚动视图
@property (nonatomic ,strong) UIPageControl *pageControl;   // 分页控件

在 viewDidLoad 中创建

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 创建滚动视图
    _ydyScrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
    _ydyScrollView.delegate = self;
    _ydyScrollView.backgroundColor = [UIColor redColor];
    [self.view addSubview:_ydyScrollView];
    
    _imgArr = @[@"1.jpg",@"2.jpg",@"3.jpg"];
    // for 循环加入图片
    for (int i = 0; i < _imgArr.count; i ++) {
        
        UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(WIDTH * i, 0, WIDTH, HEIGHT)];
        imgView.image = [UIImage imageNamed:_imgArr[i]];
        [_ydyScrollView addSubview:imgView];
        
        imgView.userInteractionEnabled = YES;
        // 在最后一张图片上添加完成按钮
        if (i == _imgArr.count - 1) {
            
            // 创建按钮
            UIButton *finishBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
            finishBtn.frame = CGRectMake((WIDTH - 100) / 2, 580, 100, 40);
            [finishBtn setTitle:@"完成" forState:UIControlStateNormal];
            [finishBtn setTitleColor:[UIColor magentaColor] forState:UIControlStateNormal];
            finishBtn.titleLabel.font = [UIFont systemFontOfSize:20];
            // 点击事件
            [finishBtn addTarget:self action:@selector(didClickFinishBtn) forControlEvents:UIControlEventTouchUpInside];
            [imgView addSubview:finishBtn];
        }
        
    }
    
    // 设置滚动视图的相关属性
    _ydyScrollView.contentSize = CGSizeMake(WIDTH * _imgArr.count, 0);
    _ydyScrollView.pagingEnabled = YES;
    _ydyScrollView.bounces = NO;
    _ydyScrollView.showsVerticalScrollIndicator = NO;
    _ydyScrollView.showsHorizontalScrollIndicator = NO;
    
    // 创建分页控件 并设置其相关的属性
    _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake((WIDTH - 100) / 2, 660, 100, 50)];
    _pageControl.numberOfPages = _imgArr.count;
    _pageControl.pageIndicatorTintColor = [UIColor blackColor];
    _pageControl.currentPageIndicatorTintColor = [UIColor redColor];
    [self.view addSubview:_pageControl];
    
}

// 滚动视图的代理方法
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    _pageControl.currentPage = scrollView.contentOffset.x / WIDTH;
}

// 按钮的点击事件
-(void)didClickFinishBtn
{
    // 跳转到下一页
    MainViewController *mainVC = [[MainViewController alloc] init];
    UINavigationController *mainNav = [[UINavigationController alloc] initWithRootViewController:mainVC];
    [self presentViewController:mainNav animated:YES completion:nil];
}

在 MainViewController.m 中

// 宏定义
// 屏幕的宽度和高度
#define WIDTH self.view.frame.size.width
#define HEIGHT self.view.frame.size.height

设置表格的协议

<UITableViewDelegate, UITableViewDataSource>

定义属性，创建两个表格

@property (nonatomic ,strong) UITableView *leftTableView;
@property (nonatomic ,strong) UITableView *rightTableView;

在 viewDidLoad 中设置

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 设置视图的背景颜色
    self.view.backgroundColor = [UIColor whiteColor];
    
    // 设置导航条的左侧按钮
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemSearch target:self action:nil];
    
    // 导航条右侧按钮
    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"more_n"] style:UIBarButtonItemStylePlain target:self action:nil];
    
    // 更改导航条的背景颜色
    self.navigationController.navigationBar.barTintColor = [UIColor colorWithRed:(16/255.0) green:(36/255.0) blue:(86/255.0) alpha:1.0];
    // 设置导航条上的控件的颜色
    self.navigationController.navigationBar.tintColor = [UIColor whiteColor];
    
    // 导航条上的按钮
    [self createNavBtn];
    
    // 主体部分
    [self createTableView];
    
}

// 创建导航条上的按钮的方法

-(void)createNavBtn
{
    // 创建按钮标题
    NSArray *navTitArr = @[@"我的",@"乐库",@"唱歌"];
    // for 循环加入按钮
    for (int i = 0; i < navTitArr.count; i ++) {
        
        // 创建按钮
        UIButton *navTitBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        navTitBtn.frame = CGRectMake(WIDTH / 5 + WIDTH / 5 * i, 0, WIDTH / 5, 40);
        [navTitBtn setTitle:navTitArr[i] forState:UIControlStateNormal];
        [navTitBtn setTitleColor:[UIColor colorWithRed:(89/255.0) green:(103/255.0) blue:(136/255.0) alpha:1.0] forState:UIControlStateNormal];
        navTitBtn.titleLabel.font = [UIFont systemFontOfSize:20];
        
        [self.navigationController.navigationBar addSubview:navTitBtn];
        
        // 判断中间默认字体
        if (i == 1) {
            
            [navTitBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
            navTitBtn.titleLabel.font = [UIFont systemFontOfSize:21];
        }
    }
}

创建表格和主体内容的方法

// 创建表格和主体内容
-(void)createTableView
{
    // 创建大的图片框
    UIImageView *mainImgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 64, WIDTH, HEIGHT - 64)];
    mainImgView.image = [UIImage imageNamed:@"3.jpg"];
    [self.view addSubview:mainImgView];
    // 允许与用户交互
    mainImgView.userInteractionEnabled = YES;
    
    // for 循环加入标题按钮 - 顶部
    NSArray *topTitArr = @[@"排行",@"歌手",@"电台",@"儿歌",@"MV"];
    for (int i = 0; i < topTitArr.count; i ++) {
        
        UIButton *topBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        topBtn.frame = CGRectMake(WIDTH / 6 * i, 0, WIDTH / 6, 50);
        [topBtn setTitle:topTitArr[i] forState:UIControlStateNormal];
        [topBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        topBtn.titleLabel.font = [UIFont systemFontOfSize:18];
        [mainImgView addSubview:topBtn];
        // 判断默认选中为 电台
        if (i == 2) {
            
            [topBtn setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
            topBtn.titleLabel.font = [UIFont systemFontOfSize:19];
        }
    }
    // 创建移动小视图
    UIView *moveView = [[UIView alloc] initWithFrame:CGRectMake(WIDTH / 6 * 2, 48, WIDTH / 6, 2)];
    moveView.backgroundColor = [UIColor orangeColor];
    [mainImgView addSubview:moveView];
    
    // 创建右侧的更多小按钮
    UIButton *moreBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    moreBtn.frame = CGRectMake(WIDTH - WIDTH / 6, 0, WIDTH / 6, 50);
    [moreBtn setImage:[[UIImage imageNamed:@"more_1"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] forState:UIControlStateNormal];
    [mainImgView addSubview:moreBtn];
    
    
    // 左边表格
    _leftTableView = [[UITableView alloc] initWithFrame:CGRectMake(10, 50, WIDTH * 0.3 - 10, HEIGHT - 64 - 50 - 80) style:UITableViewStylePlain];
    _leftTableView.delegate = self;
    _leftTableView.dataSource = self;
    _leftTableView.backgroundColor = [UIColor clearColor];
    _leftTableView.rowHeight = (HEIGHT - 64 - 50 - 80)/10;
    _leftTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    [mainImgView addSubview:_leftTableView];
    
    // 右边表格
    _rightTableView = [[UITableView alloc] initWithFrame:CGRectMake(WIDTH * 0.3, 60, WIDTH * 0.7, HEIGHT - 64 - 50 - 80) style:UITableViewStylePlain];
    _rightTableView.delegate = self;
    _rightTableView.dataSource = self;
    _rightTableView.backgroundColor = [UIColor clearColor];
    _rightTableView.rowHeight = (HEIGHT - 64 - 50 - 80)/7;
    _rightTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    [mainImgView addSubview:_rightTableView];
    
    
    // 创建底部视图
    UIView *bottomView = [[UIView alloc] initWithFrame:CGRectMake(0, HEIGHT - 64 - 60, WIDTH, 60)];
    bottomView.backgroundColor = [UIColor blackColor];
    bottomView.alpha = 0.6;
    [mainImgView addSubview:bottomView];
    
    // 创建图片
    UIImageView *bottImg = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 60, 60)];
    bottImg.image = [UIImage imageNamed:@"22.jpg"];
    [bottomView addSubview:bottImg];
    // 创建标题
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(75, 10, 60, 20)];
    label.text = @"好好";
    label.textColor = [UIColor whiteColor];
    [bottomView addSubview:label];
    // 创建子标题
    UILabel *nameLabe = [[UILabel alloc] initWithFrame:CGRectMake(75, 35, 60, 20)];
    nameLabe.text = @"崔长春";
    nameLabe.textColor = [UIColor lightGrayColor];
    nameLabe.font = [UIFont systemFontOfSize:14];
    [bottomView addSubview:nameLabe];
    
    // 创建播放按钮
    UIButton *playerBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    playerBtn.frame = CGRectMake(WIDTH / 3 * 2, 10, 40, 40);
    [playerBtn setImage:[UIImage imageNamed:@"player_n"] forState:UIControlStateNormal];
    playerBtn.tintColor = [UIColor orangeColor];
    [bottomView addSubview:playerBtn];
    
    // 创建下一曲按钮
    UIButton *nextBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    nextBtn.frame = CGRectMake(WIDTH / 3 * 2 + 40, 10, 40, 40);
    [nextBtn setImage:[UIImage imageNamed:@"next_n"] forState:UIControlStateNormal];
    nextBtn.tintColor = [UIColor orangeColor];
    [bottomView addSubview:nextBtn];
    
    // 创建下一曲按钮
    UIButton *moreBtn1 = [UIButton buttonWithType:UIButtonTypeCustom];
    moreBtn1.frame = CGRectMake(WIDTH / 3 * 2 + 40 + 40, 10, 40, 40);
    [moreBtn1 setImage:[UIImage imageNamed:@"more_1"] forState:UIControlStateNormal];
    moreBtn1.tintColor = [UIColor orangeColor];
    [bottomView addSubview:moreBtn1];
}

设置表格的行数

// 设置表格的行数
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    if (tableView == _leftTableView) {
        
        return 9;
    }else if (tableView == _rightTableView){
        return 7;
    }else{
        return 0;
    }
}

设置表格的单元格内容

// 设置表格的单元格内容
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if (cell == nil) {
        
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell"];
    }
    
    if (tableView == _leftTableView) {
        // 创建左侧区域的内容
        NSArray *leftArr = @[@"推荐",@"心情",@"主题",@"人群",@"场景",@"曲风",@"语种",@"乐器",@"歌手"];
        cell.textLabel.text = leftArr[indexPath.row];
        cell.textLabel.font = [UIFont systemFontOfSize:18];
        if (indexPath.row == 0) {
            
            cell.textLabel.textColor = [UIColor orangeColor];
        }
    }else if (tableView == _rightTableView){
        
        NSArray *imgArr = @[@"11.jpg",@"12.jpg",@"21.jpg",@"22.jpg",@"31.jpg",@"32.jpg",@"11.jpg"];
        // 设置标题
        NSArray *titArr = @[@"一人一首成名曲",@"经典怀旧",@"网络热歌",@"秋天",@"90后电台",@"雨天",@"理发店"];
        // 设置副标题
        NSArray *detalArr = @[@"522.77万人在听",@"2344.0万人在听",@"521.4万人在听",@"21532.2万人在听",@"5321.2万人在听",@"53123万人在听",@"621.2万人在听"];
        cell.imageView.image = [UIImage imageNamed:imgArr[indexPath.row]];
        cell.textLabel.text = titArr[indexPath.row];
        cell.detailTextLabel.text = detalArr[indexPath.row];
        cell.detailTextLabel.textColor = [UIColor grayColor];
        cell.detailTextLabel.font = [UIFont systemFontOfSize:15];
    }
    cell.backgroundColor = [UIColor clearColor];
    
    return cell;
}

1.jpg

2.jpg

3.jpeg

11.jpg

12.jpg

21.jpg

22.jpg

31.jpg

32.jpg

音乐界面简单布局

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读