iOS－仿網易新聞首頁（上篇）

高仿網易新聞，實作頭部滾動條的滾動和每個按鈕對應的界面（包括tableView,webView）以及有tableView的不同cell風格，在選中的按鈕下方訓示器。

首先建立一個類 “NewsHeadView.h”繼承于UIView，聲明相應的屬性：tagFromView－是Viewcontroller中頁面被拖動後穿過來的應該選中的按鈕的tag值；myScrollView－就是頁面頭部的滾動條；dataArray－作為滾動條上的按鈕的資料源；linVew：作為被選中按鈕下方的訓示器，

下面這段代碼是NewsHeadView.h檔案

#import <UIKit/UIKit.h>

@protocol NewsHeadViewDelegate <NSObject>

- (void)NewsHeadViewTransLatebuttonTag:(NSInteger)tag SubId:(NSString *)subId type:(NSString *)type;

@end

@interface NewsHeadView : UIView

@property (nonatomic,assign) NSInteger tagFromView;//要接收的按鈕的tag值

@property (nonatomic,strong) NSArray *dataArray;//資料

@property (nonatomic,strong) UIView *linVew;//按鈕的訓示View

@property (nonatomic,strong) UIScrollView *myScrollView;

@property (nonatomic,weak) id<NewsHeadViewDelegate>delegate;

@end

- (void)NewsHeadViewTransLatebuttonTag:(NSInteger)tag SubId:(NSString *)subId type:(NSString *)type;、

該方法作為代理傳值方法，把目前選中的按鈕的相關資料傳到congtroller中。其中tag－目前被選中的按鈕的tag值；subId－該ID作為請求對應按鈕的清單資料；type－用于判斷目前按鈕對應的要展示出的按鈕的類型。

在上面完成了NewsHeadView.h檔案後，下面就來實作NewsHeadView.m檔案，那麼就帶大家一步一步來實作：

第一部分：添加下面這段代碼來聲明幾個需要的變量

@property (nonatomic,strong) NSMutableArray *buttonArray;//存放建立的所有按鈕按鈕

@property (nonatomic,strong) NSMutableArray *btnOrignXArray;//存放每個按鈕的橫坐标的起點

@property (nonatomic,strong) NSMutableArray *btnWArray;//存放每個按鈕的寬度

@property (nonatomic,assign) NSInteger currentTag;//目前被選中按鈕的tag值

第二部分：對目前按鈕的tag值currentTag 初始化為 1 ；添加myScrollView滾動條，用來裝載多個按鈕

- (instancetype)initWithFrame:(CGRect)frame{

    self = [superinitWithFrame:frame];

    if (self) {

//初始化資料

        self.currentTag =1;

        self.buttonArray = [NSMutableArrayarray];

        self.btnOrignXArray = [NSMutableArrayarray];

        self.btnWArray = [NSMutableArrayarray];

//添加滾動條

        myScrollView = [[UIScrollViewalloc] initWithFrame:CGRectMake(0,0, myWidth,myHeight)];

        myScrollView.backgroundColor = [UIColorcolorWithWhite:0.90alpha:1];

        myScrollView.showsHorizontalScrollIndicator =NO;

        myScrollView.delegate =self;

        [selfaddSubview:myScrollView];

//添加訓示器

        linVew = [[UIViewalloc] init];

        linVew.backgroundColor = [UIColorcolorWithRed:0.1green:0.6blue:0.8alpha:1];

        [myScrollViewaddSubview:linVew];

    }

    returnself;

}

第三部分：當拿到按鈕菜單的資料後，下面就來建立按鈕；

orignX －每個按鈕的橫坐标起始值； buttonH－按鈕的高度； btnW－按鈕的寬度

#pragma mark - 按鈕

- (void)setDataArray:(NSArray *)dataArray{

    _dataArray = dataArray;

    CGFloat orignX =0;

    CGFloat buttonH =myHeight-CGRectGetHeight(linVew.frame);

    for (NSInteger i =0; i < self.buttonArray.count; i++) {

        UIButton *btn =self.buttonArray[i];

        [btn removeFromSuperview];

    }

    [self.buttonArrayremoveAllObjects];

    [self.btnOrignXArrayremoveAllObjects];

    [self.btnWArrayremoveAllObjects];

    for (NSInteger i =0; i < dataArray.count; i++) {

        UIButton *button = [UIButtonbuttonWithType:UIButtonTypeCustom];

        NSString *title = [NSStringstringWithFormat:@"%@",[dataArray[i]objectForKey:@"name"]];

        CGSize size = [titlesizeWithfont:[UIFontsystemFontOfSize:17.0f]maxSize:CGSizeMake(CGFLOAT_MAX, buttonH)];

        CGFloat btnW = size.width+20;

        [self.btnWArrayaddObject:@(btnW)];

        button.frame =CGRectMake(orignX, 0, btnW, buttonH);

        [button setTitle:titleforState:UIControlStateNormal];

        button.titleLabel.font = [UIFontsystemFontOfSize:15.0f];

        if (i ==self.currentTag-1) {

            button.selected =YES;

            button.titleLabel.font = [UIFontsystemFontOfSize:17.0f];

            linVew.frame =CGRectMake(orignX, myHeight-2, btnW,2);

        }

        [self.btnOrignXArrayaddObject:@(orignX)];        orignX += btnW;

        [button setTitleColor:[UIColorblackColor] forState:UIControlStateNormal];

        [button setTitleColor:[UIColorcolorWithRed:0.1green:0.6blue:0.8alpha:1]forState:UIControlStateSelected];

        button.tag = i+1;

        [button addTarget:selfaction:@selector(btnClicked:)forControlEvents:UIControlEventTouchUpInside];

        [myScrollViewaddSubview:button];

        [self.buttonArrayaddObject:button];

        if (i == dataArray.count-1) {

            myScrollView.contentSize = CGSizeMake(CGRectGetMaxX(button.frame),myHeight);

        }

    }

}

第四部分：對滾動條上的每個按鈕的點選事件的進行處理

- (void)btnClicked:(UIButton *)sender{

    if (self.currentTag != sender.tag) {

        sender.selected = !sender.selected;

        sender.titleLabel.font = [UIFontsystemFontOfSize:17.0f];

        [selfchangeSelectButtonWithTag:sender.tag];

        [selfsetScrollViewContentOffsetWithButton:sender];

        NSString * subid = [self.dataArray[sender.tag-1]objectForKey:@"subid"];

        NSString *type = [self.dataArray[sender.tag-1]objectForKey:@"type"];

        [self.delegateNewsHeadViewTransLatebuttonTag:sender.tagSubId:subid type:type];

    }else{

        return;

    }

}

第五部分：設定從controller傳來的按鈕的的tag值

- (void)setTagFromView:(NSInteger)tagFromView{

    _tagFromView = tagFromView;

    if (tagFromView !=self.currentTag) {

        //找到對應的按鈕

        UIButton *button = (UIButton *)[selfviewWithTag:tagFromView];

        button.selected =YES;

        button.titleLabel.font = [UIFontsystemFontOfSize:17.0f];

        [selfchangeSelectButtonWithTag:tagFromView];

        [selfsetScrollViewContentOffsetWithButton:button];

        NSString * subid = [NSStringstringWithFormat:@"%@",[self.dataArray[tagFromView-1]objectForKey:@"subid"]];

        NSString *type = [self.dataArray[tagFromView-1]objectForKey:@"type"];

        [self.delegateNewsHeadViewTransLatebuttonTag:tagFromViewSubId:subid type:type];

    }else{

        return;

    }

}

第六部分：交換目前尋中的按鈕和之前選中的按鈕

- (void)changeSelectButtonWithTag:(NSInteger)tag{

    UIButton *btn = (UIButton *)[selfviewWithTag:self.currentTag];

    btn.selected =NO;

    btn.titleLabel.font = [UIFontsystemFontOfSize:15.0f];

    CGFloat orignX = [[self.btnOrignXArrayobjectAtIndex:tag-1]floatValue];

    CGFloat btnW = [[self.btnWArrayobjectAtIndex:tag-1]floatValue];

    linVew.frame =CGRectMake(orignX, myHeight-2, btnW,2);

    self.currentTag = tag;

}

第七部分：

#pragma mark - 調整滾動按鈕顯示

- (void)setScrollViewContentOffsetWithButton:(UIButton *)sender{

    CGFloat offsetX =CGRectGetMaxX(sender.frame) -myWidth/3*2;

    if (self.myScrollView.contentSize.width-offsetX < myWidth) {

        [self.myScrollViewsetContentOffset:CGPointMake(self.myScrollView.contentSize.width-myWidth,0) animated:YES];

    }else{

        if(offsetX >0){

            [self.myScrollViewsetContentOffset:CGPointMake(offsetX,0) animated:YES];

        }

        if(offsetX <0){

            [self.myScrollViewsetContentOffset:CGPointMake(0,0) animated:YES];

        }

    }

}

到此，就實作了NewsHeadView.h和NewsHeadView.m兩個檔案中的所有屬性和方法，接下來就是congtroller中的具體實作，請參考下篇文章