UI練習之簡易新聞

IOS-NewsApp

本項目是用于熟悉UI控件而學習的一個小項目

此項目沒有適配其他屏幕 使用UIView來模仿視圖控制器

公共部分

  • 加入了一個constant.h文件,用來放常量,方便其他地方調(diào)用
// 屏幕的寬高
#define UISCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define UISCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
  1. 完成頂部的TopView
    • 對TopView.m里面的label位置的計算
    • 外放了一個方法給外部調(diào)用,用來修改label的值
    -(void)setTitle:(NSString*) title {
    UILabel *label = [[UILabel alloc]init];
    label.text = title;
    // 清除color
    label.backgroundColor = [UIColor clearColor];
    label.textColor = [UIColor whiteColor];
    UIFont *font = [UIFont systemFontOfSize:20.0];
    label.font = font;
    
    // 動態(tài)計算位置,字典類型
    CGSize labelHW = [title sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:font,NSFontAttributeName, nil]];
    
    label.frame = CGRectMake((UISCREEN_WIDTH-labelHW.width)/2, 20, labelHW.width, labelHW.height);
    [self addSubview:label];
}
  1. 中間部分的輪播圖
  • 新建一個MiddleView類
  • 使用一個自定義構造方法,傳遞列表數(shù)組進去即可,方法簡單,直接看代碼即可
  1. 分類消息提示
    • 新建一個PromprView類,繼承UILabel ,在里面自定義構造方法,并且在h文件中公開
    • 具體適用法看MiddleView.m文件
-(id)initWithPoint:(CGPoint)point meaasge:(int) message {
    CGRect rect;
    NSString *labelStr = nil;
    if (message < 10) {
        rect = CGRectMake(point.x, point.y, 20, 20);
        labelStr = [NSString stringWithFormat:@"%d",message];
    } else if (message < 100) {
        rect = CGRectMake(point.x, point.y, 40, 20);
        labelStr = [NSString stringWithFormat:@"%d",message];
    } else {
        rect = CGRectMake(point.x, point.y, 40, 20);
        labelStr = [NSString stringWithFormat:@"%@",@"99+"];
    }
    
    self = [super initWithFrame:rect];
    
    if (self) {
        self.textColor = [UIColor whiteColor];
        self.textAlignment = NSTextAlignmentCenter;
        self.backgroundColor = [UIColor redColor];
        self.text = labelStr;
        self.layer.cornerRadius = 10.0;
        self.layer.masksToBounds = true; // UIView layer剪切
    }
    return self;
    
}

  1. 蒙板的設計
  • 新建一個MaskView類并且繼承UIView
  • 數(shù)據(jù)使用字典來保存每一個圖文的信息
...
    NSDictionary *newsinfo0 = [NSDictionary dictionaryWithObjectsAndKeys:@"1.png",@"image",@"iOS9的那些神坑",@"info", nil];
    NSDictionary *newsinfo1 = [NSDictionary dictionaryWithObjectsAndKeys:@"2.png",@"image",@"iOS9的攝像頭",@"info", nil];
    NSDictionary *newsinfo2 = [NSDictionary dictionaryWithObjectsAndKeys:@"3.png",@"image",@"iOS9UiStackView",@"info", nil];
    
    NSArray *newsInfo = [[NSArray alloc]initWithObjects:newsinfo0,newsinfo1,newsinfo2,nil];
...

  • MaskView 放出2個方法給外部調(diào)用,具體實現(xiàn)方法看m文件
#import <UIKit/UIKit.h>

@interface MaskView : UIView
-(void) setTitle:(NSString*) title;
-(void) setPageControlNum:(int)pageNum;
@end

  1. 圖文描述

    • 添加MixImageText類,用來初始化整個圖文列表
    • 在MiddleView里面調(diào)用即可
  2. 搜索功能界面

    • TopView上新增Search按鈕
    • 因為沒有用視圖控制器,所以就使用addSubView的方法來模擬
  3. 暗夜模式

    • 主要是背景色的變換
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明AI閱讀 16,229評論 3 119
  • 1.ios高性能編程 (1).內(nèi)層 最小的內(nèi)層平均值和峰值(2).耗電量 高效的算法和數(shù)據(jù)結構(3).初始化時...
    歐辰_OSR閱讀 30,282評論 8 265
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 15,650評論 4 61
  • 第一,要自信,而且不要給自己設限。第二,關于寫作,所以最重要的是要寫持續(xù)不斷的寫,一直寫。第三,自己的老板,怎么能...
    帥帥寶貝閱讀 187評論 0 0
  • 愛的兩顆心不斷的吸引 牽引的那條線越來越短 我們只顧著享受愛情帶來的快樂 卻忽略了愛情也需要呼吸 在我們看不見的瞬...
    秦雨希閱讀 383評論 0 0

友情鏈接更多精彩內(nèi)容