美文网首页
1.页面搭建

1.页面搭建

作者: fwlong | 来源:发表于2016-07-07 21:12 被阅读25次
    image.png

    利用代码来搭建界面。

    image.png

    plist文件内容

    可见视图所需要的属性

    
    *  左上的button
    @property (nonatomic , strong) UIButton *leftUpButton;
    
    *  右上的button
    @property (nonatomic , strong) UIButton *rightUpButton;
    
    *  左下的button
    @property (nonatomic , strong) UIButton *leftDownButton;
    
    *  右下的button
    @property (nonatomic , strong) UIButton *rightDownButton;
    
    *  右上方显示金币图片及数量的button
    @property (nonatomic , strong) UIButton *iconButton;
    
    *  最上方显示张数 / 总数的label
    @property (nonatomic , strong) UILabel *indexLabel;
    
    *  标题label
    @property (nonatomic , strong) UILabel *titleLabel;
    
    *  答案视图
    @property (nonatomic , strong) UIView *answerView;
    
    *  选项视图
    @property (nonatomic , strong) UIView *optionView;
    
    *  图片button
    @property (nonatomic , strong) UIButton *imageButton;
    
    *  存放解析各种数据
    @property (nonatomic , strong) NSMutableArray *dataArray;
    
    *  按钮计数器
    @property (nonatomic , assign) NSInteger index;
    
    *  帮助计数器
    @property (nonatomic , assign) NSInteger helpIndex;
    
    *  覆盖类的视图
    @property (nonatomic , strong) CoverView *funcView;
    
    *  滚动类图片
    @property (nonatomic , strong) UIScrollView *changeView;
    
    *  多图页数控制
    @property (nonatomic , strong) UIPageControl *pageControl;
    
    *  设置定时器
    @property (nonatomic , strong) NSTimer *timer;
    

    解析plist文件,创建模型

    AppModel.h

    @property(nonatomic,copy)NSString * answer;
    
    @property(nonatomic,copy)NSString * icon;
    
    @property(nonatomic,strong)NSArray * options;
    
    @property(nonatomic,copy)NSString * title;
    //外部调用接口
    +(instancetype)appModelWithDic:(NSDictionary *)dic;
    //存放答案
    @property (nonatomic , strong) NSArray *answerArray;
    
    

    AppModel.m

    -(instancetype)initWithDic:(NSDictionary *)dic
    {
        if (self = [super init]) {
            _answer = dic[@"answer"];
            _title = dic[@"title"];
            _options = dic[@"options"];
            _icon = dic[@"icon"];
            
            _answerArray = [self cutWithAnswer:dic[@"answer"]];
        }
        return self;
    }
    
    
    +(instancetype)appModelWithDic:(NSDictionary *)dic
    {
        return [[self alloc] initWithDic:dic];
    }
    
    - (NSString *)description
    {
        return [NSString stringWithFormat:@"icon === %@", _icon];
    }
    //剪切并放入数组
    -(NSArray *)cutWithAnswer:(NSString *)answer{
        
        NSMutableArray *arr = [NSMutableArray array];
        
        for (int i = 0; i < answer.length; i++) {
            [arr addObject:[answer substringWithRange:NSMakeRange(i, 1)]];
        }
        
        return arr;
        
    }
    
    

    懒加载解析plist文件

    -(NSMutableArray *)dataArray
    {
        if (!_dataArray) {
            _dataArray = [NSMutableArray array];
            
            NSArray * temp = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"questions" ofType:@"plist"]];
            for (NSDictionary * dic in temp) {
                AppModel * model = [AppModel appModelWithDic:dic];
                [_dataArray addObject:model];
            }
        }
        return _dataArray;
    }
    

    来搭建视图

    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //背景色
        self.view.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"bj"]];
        //总数label
        _indexLabel = [[UILabel alloc] initWithFrame:CGRectMake(self.view.frame.size.width / 2 - 25, 20, 50, 15)];
        
        _indexLabel.text = @"1/7";
        
        _indexLabel.textAlignment = NSTextAlignmentCenter;
        
        _indexLabel.textColor = [UIColor whiteColor];
        
        [self.view addSubview:_indexLabel];
        //金币button
        _iconButton = [[UIButton alloc] initWithFrame:CGRectMake(self.view.frame.size.width - 95, 20, 90, 15)];
        
        [_iconButton setImage:[UIImage imageNamed:@"coin"] forState:UIControlStateNormal];
        
        [_iconButton setTitle:@"10000" forState:UIControlStateNormal];
        
        [self.view addSubview:_iconButton];
        //标题
        _titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 75, self.view.frame.size.width, 20)];
        
        _titleLabel.text = @"电影图片";
        
        _titleLabel.lineBreakMode = 0;
        
        _titleLabel.textAlignment = NSTextAlignmentCenter;
        
        _titleLabel.textColor = [UIColor whiteColor];
        
        [self.view addSubview:_titleLabel];
        //图片button
        _imageButton = [[UIButton alloc] initWithFrame:CGRectMake(self.view.frame.size.width / 2 - 100, 150, 200, 200)];
        
        [_imageButton setBackgroundImage:[UIImage imageNamed:@"center_img"] forState:UIControlStateNormal];
        
        [_imageButton setImage:[UIImage imageNamed:@"movie_zghhr"] forState:UIControlStateNormal];
        
        UIEdgeInsets inset = {1,1,1,1};
        
        [_imageButton setImageEdgeInsets:inset];
        
        [self.view addSubview:_imageButton];
       
        
        //答案View
        _answerView = [[UIView alloc] initWithFrame:CGRectMake(0, _imageButton.frame.origin.y + _imageButton.frame.size.height + 25, self.view.frame.size.width, 40)];
        
        _answerView.backgroundColor = [UIColor clearColor];
       
        [self.view addSubview:_answerView];
         //选项视图
        _optionView = [[UIView alloc] initWithFrame:CGRectMake(0, _answerView.frame.origin.y + _answerView.frame.size.height + 25, self.view.frame.size.width, self.view.frame.size.height - (_answerView.frame.origin.y + _answerView.frame.size.height + 25) - 25)];
        
        _optionView.backgroundColor = [UIColor clearColor];
        
        [self.view addSubview:_optionView];
        /****************/
        [self addButton];
        [self loadData];
    

    addButton(应该封装一个方法创建,暂时没写)

    -(void)addButton
    {
        
        _leftUpButton = [[UIButton alloc] initWithFrame:CGRectMake(5, 150 + 5, 50,17)];
        
        [_leftUpButton setImage:[UIImage imageNamed:@"icon_tip"] forState:UIControlStateNormal];
        
        [_leftUpButton setTitle:@"提示" forState:UIControlStateNormal];
        
        _leftUpButton.titleLabel.font = [UIFont systemFontOfSize:14];
        
        [_leftUpButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        
        [_leftUpButton setBackgroundImage:[UIImage imageNamed:@"btn_left"] forState:UIControlStateNormal];
        
        [_leftUpButton setBackgroundImage:[UIImage imageNamed:@"btn_left_highlighted"] forState:UIControlStateHighlighted];
        
        [self.view addSubview:_leftUpButton];
        
        _rightUpButton = [[UIButton alloc] initWithFrame:CGRectMake(self.view.frame.size.width - 55, 150 + 5, 50, 17)];
        
        [_rightUpButton setImage:[UIImage imageNamed:@"icon_img"] forState:UIControlStateNormal];
        
        [_rightUpButton setTitle:@"多图" forState:UIControlStateNormal];
        
        [_rightUpButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        
        _rightUpButton.titleLabel.font = [UIFont systemFontOfSize:14];
        
        [_rightUpButton setBackgroundImage:[UIImage imageNamed:@"btn_right"] forState:UIControlStateNormal];
        
        [_rightUpButton setBackgroundImage:[UIImage imageNamed:@"btn_right_highlighted"] forState:UIControlStateHighlighted];
        
        [self.view addSubview:_rightUpButton];
        
        _leftDownButton = [[UIButton alloc] initWithFrame:CGRectMake(5, 150 + 200 - 17 - 5, 50, 17)];
        
        [_leftDownButton setImage:[UIImage imageNamed:@"icon_help"] forState:UIControlStateNormal];
        
        [_leftDownButton setTitle:@"帮助" forState:UIControlStateNormal];
        
        [_leftDownButton setTintColor:[UIColor whiteColor]];
        
        _leftDownButton.titleLabel.font = [UIFont systemFontOfSize:14];
        
        [_leftDownButton setBackgroundImage:[UIImage imageNamed:@"btn_left"] forState:UIControlStateNormal];
        
        [_leftDownButton setBackgroundImage:[UIImage imageNamed:@"btn_left_highlighted"] forState:UIControlStateHighlighted];
        
        [self.view addSubview:_leftDownButton];
        
        _rightDownButton = [[UIButton alloc] initWithFrame:CGRectMake(self.view.frame.size.width - 55 , 150 + 200 - 17 - 5, 50, 17)];
        
        [_rightDownButton setTitle:@"下一题" forState:UIControlStateNormal];
        
        _rightDownButton.titleLabel.textAlignment = NSTextAlignmentCenter;
        
        _rightDownButton.titleLabel.font = [UIFont systemFontOfSize:14];
        
        [_rightDownButton setBackgroundImage:[UIImage imageNamed:@"btn_right"] forState:UIControlStateNormal];
        
        [_rightDownButton setBackgroundImage:[UIImage imageNamed:@"btn_right_highlighted"] forState:UIControlStateHighlighted];
        
        [self.view addSubview:_rightDownButton];
        
        [_leftUpButton addTarget:self action:@selector(buttonTip) forControlEvents:UIControlEventTouchUpInside];
        
        [_leftDownButton addTarget:self action:@selector(buttonHelp) forControlEvents:UIControlEventTouchUpInside];
        
        [_rightUpButton addTarget:self action:@selector(multipleImageButton) forControlEvents:UIControlEventTouchUpInside];
        
        [_rightDownButton addTarget:self action:@selector(buttonRightDown) forControlEvents:UIControlEventTouchUpInside];
    }
    

    loadData

    -(void)loadData
    {
        self.helpIndex = 0;
    
        AppModel *model = self.dataArray[_index];
        
         _indexLabel.text = [NSString stringWithFormat:@"%ld/%lu",_index + 1,self.dataArray.count];
        
        _titleLabel.text = model.title;
        _titleLabel.alpha = 0;
        
        [_imageButton setImage:[UIImage imageNamed:model.icon] forState:UIControlStateNormal];
        
        CGFloat x = (_answerView.frame.size.width - 40 * model.answer.length - marginWidth * (model.answer.length - 1)) / 2;
        
        //答案按钮
        for (int i = 0; i<model.answer.length; i++) {
            UIButton * tempButton = [[UIButton alloc] initWithFrame:CGRectMake(x + i*(marginWidth + 40) , 5, 40, 40)];
            [tempButton setBackgroundImage:[UIImage imageNamed:@"btn_answer"] forState:UIControlStateNormal];
            
            [tempButton setBackgroundImage:[UIImage imageNamed:@"btn_answer_highlighted"] forState:UIControlStateHighlighted];
        
            tempButton.tag = AnswerButton + i;
            
            [_answerView addSubview:tempButton];
            
            [tempButton addTarget:self action:@selector(answerViewButton:) forControlEvents:(UIControlEventTouchUpInside)];
        }
        //选择的按钮
        CGFloat y =0;
        NSInteger lineNumber = model.options.count/6 + 1;
        if (lineNumber > 1) {
            x = (_optionView.frame.size.width - 40 * 6 - marginWidth * (6 - 1)) / 2;
            y = (_optionView.frame.size.height - 40 * lineNumber - marginWidth*(lineNumber-1))/2;
        }else{
            x = (_optionView.frame.size.width - 40*model.options.count - marginWidth*(model.options.count - 1))/2;
            y = (_optionView.frame.size.height - 40)/2;
        }
        for (int i =0; i<lineNumber; i++) {
            for (int j =0; j<6; j++) {
                if ((i*6 +j +1)>model.options.count) {
                    break;
                }
                UIButton * tmpButton = [[UIButton alloc] initWithFrame:CGRectMake(x+j*(40+marginWidth), y + i*(40 + marginHeight), 40, 40)];
                
                [tmpButton setBackgroundImage:[UIImage imageNamed:@"btn_option"] forState:(UIControlStateNormal)];
                
                [tmpButton setBackgroundImage:[UIImage imageNamed:@"btn_option_highlighted"] forState:(UIControlStateHighlighted)];
                
                [tmpButton setTitle:model.options[i*6 +j] forState:(UIControlStateNormal)];
                
                [tmpButton setTitleColor:[UIColor blackColor] forState:(UIControlStateNormal)];
                
                tmpButton.tag = OptionButton + i*6 +j;
                
                [_optionView addSubview:tmpButton];
                
                [tmpButton addTarget:self action:@selector(optionViewButtonClicked:) forControlEvents:(UIControlEventTouchUpInside)];
            }
        }
    }
    
    

    基本的视图搭建完成。下一章来搭建逻辑方面

    相关文章

      网友评论

          本文标题:1.页面搭建

          本文链接:https://www.haomeiwen.com/subject/immljttx.html