你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發基礎 >> iOS 仿熱門話題界面(tableView)

iOS 仿熱門話題界面(tableView)

編輯:IOS開發基礎

1.png

這個功能應該是挺常見的, 一個tableView到另一個tableView, 類似segment的一個東西, 我把它封裝起來了:

//
//  ViewController.m
//
//
//  Created by 高雅馨 on 16/6/3.
//  Copyright ? 2016年 高雅馨. All rights reserved.
//

#import "DCNavTabBarController.h"
#import "HTMacro.h"

@interface DCNavTabBarController ()
@property (nonatomic, weak) UIButton *oldBtn;
@property(nonatomic,strong) NSArray *VCArr;
@property (nonatomic, weak) UIScrollView *contentView;
@property (nonatomic, weak) UIScrollView *topBar;
@property(nonatomic,assign) CGFloat btnW ;
@property (nonatomic, weak) UIView *slider;

@end

@implementation DCNavTabBarController
-(UIColor *)sliderColor
{
    if(_sliderColor == nil)
    {
        _sliderColor = [UIColor colorWithRed:1.00 green:0.36 blue:0.25 alpha:1.00];
    }
    return  _sliderColor;
}
-(UIColor *)btnTextNomalColor
{
    if(_btnTextNomalColor == nil)
    {
        _btnTextNomalColor = [UIColor colorWithWhite:0.205 alpha:1.000];
    }
    return _btnTextNomalColor;
}
-(UIColor *)btnTextSeletedColor
{
    if(_btnTextSeletedColor == nil)
    {
        _btnTextSeletedColor = [UIColor colorWithRed:1.00 green:0.36 blue:0.25 alpha:1.00];
    }
    return _btnTextSeletedColor;
}
-(UIColor *)topBarColor
{
    if(_topBarColor == nil)
    {
        _topBarColor = [UIColor whiteColor];
    }
    return _topBarColor;
}
-(instancetype)initWithSubViewControllers:(NSArray *)subViewControllers
{
    if(self = [super init])
    {
        _VCArr = subViewControllers;
    }
    return self;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    //添加上面的導航條
    [self addTopBar];
    //添加子控制器
    [self addVCView];
    //添加滑塊
    [self addSliderView];
}
-(void)addSliderView
{
    if(self.VCArr.count == 0) return;
    UIView *slider = [[UIView alloc]initWithFrame:CGRectMake(25,41,self.btnW - 50, 3)];
    slider.backgroundColor = self.sliderColor;
    [self.topBar addSubview:slider];
    self.slider = slider;
}
-(void)addTopBar
{
    if(self.VCArr.count == 0) return;
    NSUInteger count = self.VCArr.count;
    UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 44)];
    scrollView.backgroundColor = self.topBarColor;
    self.topBar = scrollView;
    self.topBar.bounces = NO;
    [self.view addSubview:self.topBar];
    if(count <= 5) {
         self.btnW = SCREEN_WIDTH / count;
    } else {
         self.btnW = SCREEN_WIDTH / 5.0;
    }
    //添加button
    for (int i = 0; i=SCREEN_WIDTH  && sender.tag != self.VCArr.count + 10000 - 1)
    {
        [UIView animateWithDuration:0.3 animations:^{
            self.topBar.contentOffset = CGPointMake(maxX - SCREEN_WIDTH + self.btnW, -64);
        }];
    }else if(maxX < SCREEN_WIDTH)
    {
        [UIView animateWithDuration:0.3 animations:^{
            self.topBar.contentOffset = CGPointMake(0, 0);
        }];
    }
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //滑動導航條
    self.slider.frame = CGRectMake(scrollView.contentOffset.x / SCREEN_WIDTH *self.btnW +  25 , 41, self.btnW - 50, 3);
}
//判斷是否切換導航條按鈕的狀態
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    CGFloat offX =  scrollView.contentOffset.x;
    int tag = (int)(offX /SCREEN_WIDTH + 0.5) + 10000;
    UIButton *btn = [self.view viewWithTag:tag];
    if(tag != self.oldBtn.tag)
    {
        [self click:btn];
    }
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}
@end

這個很容易看懂的, 是不是, 就不在這裡多解釋.

2.png


上面這張呢, 則是把導航欄隱藏, 自定義一個小UIView截取網絡圖片作為導航欄, 又自定義一個大View作為tableView頭視圖.並且我還運用了觀察者注冊消息通知, 代碼有點長, 不過我寫注釋了哦, 可以看懂的.

//
//  BookMarksViewController.m
//  HotTopic
//
//  Created by dllo on 16/9/7.
//  Copyright ? 2016年 高雅馨. All rights reserved.
//

#import "BookMarksViewController.h"
#import "HTMacro.h"
#import "UIView+Extension.h"
#import "BookTableViewCell.h"
#import "EssayViewController.h"
#import "SubscriberViewController.h"
#import "UMSocial.h"
#import "DCNavTabBarController.h"
#import "UIImageView+WebCache.h"
#import "AFNetworking.h"
#import "HotTopicsModel.h"
#import "TopicModel.h"
#import "NodeModel.h"
#import "UserModel.h"
#import "Source.h"
#import "DisposeViewController.h"
#import "HeadImageView.h"
static CGFloat const headViewHeight = 280;
@interface BookMarksViewController ()
@property (nonatomic, strong) BookTableViewCell * mainTableView;
@property (nonatomic, strong) HeadImageView * headImageView;//頭部圖片
@property (nonatomic, strong) UIImageView * avatarImage;
@property (nonatomic, strong) UILabel * countentLabel;
@property (nonatomic, strong) UIImageView *img;
@property (nonatomic, strong) HotTopicsModel *hotTopic;
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, assign) BOOL canScroll;
@property (nonatomic, assign) BOOL isTopIsCanNotMoveTabView;
@property (nonatomic, assign) BOOL isTopIsCanNotMoveTabViewPre;
@property (nonatomic, strong)  UIView *barView;
@property (nonatomic, strong) UILabel *titleText;

@end

@implementation BookMarksViewController
@synthesize mainTableView;

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    [self.navigationController setNavigationBarHidden:YES];
}
- (void)viewDidLoad {
    [super viewDidLoad];
// 這個api功能就是在NavigationController堆棧內的UIViewController可以支持右滑手勢,也就是不用點擊右上角的返回按鈕,輕輕在屏幕左邊一
滑,屏幕就會返回,隨著ios設備屏幕的增大,這個小功能讓手指短,拇指大和手殘人士看到了福音。
    self.navigationController.interactivePopGestureRecognizer.delegate = (id)self;
    [self.navigationController setNavigationBarHidden:YES];
    self.automaticallyAdjustsScrollViewInsets = NO;
    [self.view addSubview:self.mainTableView];
    // 設置tableView頭視圖
    self.mainTableView.tableHeaderView = self.headImageView;
    // 將導航欄隱藏使其變為透明
    [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    // 將導航欄那條黑線隱藏
    [self.navigationController.navigationBar setShadowImage:[UIImage new]];
    /** 觀察者注冊消息通知 */
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(leaveTop:) name:@"leaveTop" object:nil];
    [self creatView];
}
// 把導航欄寫成自定義View
- (void)creatView {
    _barView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 64)];
    UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
    backButton.frame = CGRectMake(10, 30, 30, 30);
    [backButton setImage:[UIImage imageNamed:@"backBar"] forState:UIControlStateNormal];
    [backButton addTarget:self action:@selector(clickBackBtn:) forControlEvents:UIControlEventTouchUpInside];
    UIButton *shareBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    shareBtn.frame = CGRectMake(SCREEN_WIDTH - 50, 30, 30, 30);
    [shareBtn setImage:[UIImage imageNamed:@"shareBar"] forState:UIControlStateNormal];
    [shareBtn addTarget:self action:@selector(clickShareBtn:) forControlEvents:UIControlEventTouchUpInside];
    _titleText = [[UILabel alloc] initWithFrame:CGRectMake(50, 30, SCREEN_WIDTH - 100, 30)];
    _titleText.text = @"收藏夾";
    _titleText.textAlignment = 1;
    _titleText.textColor = [UIColor whiteColor];
    // 毛玻璃效果
    UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
    UIVisualEffectView *effectview = [[UIVisualEffectView alloc] initWithEffect:blur];
    effectview.backgroundColor = [UIColor colorWithWhite:0.508 alpha:1.000];
    effectview.alpha = 0.65;
    effectview.frame = CGRectMake(0, 0, SCREEN_WIDTH, 64);
    [_barView addSubview:effectview];
    [_barView addSubview:backButton];
    [_barView addSubview:shareBtn];
    [_barView addSubview:_titleText];
    [self.view addSubview:_barView];
}
/**
 * notificationObserver 觀察者 : self
 * notificationSelector 處理消息的方法名: getUserProfileSuccess
 * notificationName 消息通知的名字: Notification_GetUserProfileSuccess
 * notificationSender 消息發送者 : 表示接收哪個發送者的通知,如果第四個參數為nil,接收所有發送者的通知
 */
- (void)leaveTop:(NSNotification *)notification{
    NSDictionary *userInfo = notification.userInfo;
    NSString *canScroll = userInfo[@"canScroll"];
    if ([canScroll isEqualToString:@"1"]) {
        _canScroll = YES;
    }
}
/** 將自定義View的背景圖設置tableView頭視圖的背景圖*/
- (UIImage *)clipImageInOffsetY:(CGFloat)y
{
    if (_headImageView.image == nil) {
        return [UIImage new];
    }
    CGRect rect = CGRectMake(0, y, SCREEN_WIDTH, 64);
    CGImageRef imageRef = CGImageCreateWithImageInRect([_headImageView.image CGImage], rect);
    self.blurView.frame = CGRectMake(0, 0, SCREEN_WIDTH, 64);
    self.blurView.alpha = 0.7;
    [self.navigationController.navigationBar addSubview:_blurView];
    UIImage *thumbScale = [UIImage imageWithCGImage:imageRef];
    return thumbScale;
}
// 用scrollView的偏移量來判斷
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGFloat yOffset  = scrollView.contentOffset.y;
    if (yOffset >= _headImageView.height - 64)  {
        yOffset = _headImageView.height - 64;
    }
    UIImage *image = [self clipImageInOffsetY:yOffset];
    _barView.backgroundColor = [UIColor colorWithPatternImage:image];
    //獲取滾動視圖y值的偏移量
    self.navigationController.navigationBar.alpha = (headViewHeight+yOffset)/(headViewHeight-64);
    CGFloat tabOffsetY = [mainTableView rectForSection:0].origin.y - 64.0f;
    CGFloat offsetY = scrollView.contentOffset.y;
    _isTopIsCanNotMoveTabViewPre = _isTopIsCanNotMoveTabView;
    if (offsetY >= tabOffsetY) {
        //不能滑動
        scrollView.contentOffset = CGPointMake(0, tabOffsetY);
        _isTopIsCanNotMoveTabView = YES;
        _titleText.text = self.urlTitle;
    }else{
        //可以滑動
        _isTopIsCanNotMoveTabView = NO;
        _titleText.text = @"收藏夾";
    }
    if (_isTopIsCanNotMoveTabView != _isTopIsCanNotMoveTabViewPre) {
        if (!_isTopIsCanNotMoveTabViewPre && _isTopIsCanNotMoveTabView) {
            [[NSNotificationCenter defaultCenter] postNotificationName:@"goTop" object:nil userInfo:@{@"canScroll":@"1"}];
            _canScroll = NO;
        }
        if(_isTopIsCanNotMoveTabViewPre && !_isTopIsCanNotMoveTabView){
            if (!_canScroll) {
                scrollView.contentOffset = CGPointMake(0, tabOffsetY);
            }
        }
    }

}
// 頭視圖
- (UIImageView *)headImageView
{
    if (_headImageView == nil)
    {
        _headImageView = [[HeadImageView alloc]initWithFrame:CGRectMake(0, 0,SCREEN_WIDTH,headViewHeight)];
        _headImageView.userInteractionEnabled = YES;
        [_headImageView sd_setImageWithURL:[NSURL URLWithString:self.urlHeadImg] placeholderImage:[UIImage imageNamed:@"touxiang"]completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {

        }];
        UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
        UIVisualEffectView *effectview = [[UIVisualEffectView alloc] initWithEffect:blur];
        effectview.backgroundColor = [UIColor colorWithWhite:0.508 alpha:1.000];
        effectview.alpha = 0.7;
        effectview.frame = CGRectMake(0, 0, SCREEN_WIDTH, headViewHeight);
        [_headImageView addSubview:effectview];
        self.navigationController.hidesBarsOnSwipe = NO;
        _avatarImage = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20 + 64, SCREEN_WIDTH / 3.3, SCREEN_WIDTH / 3.3)];
        [_headImageView addSubview:_avatarImage];
        _avatarImage.userInteractionEnabled = YES;
        _avatarImage.layer.masksToBounds = YES;
        [ _avatarImage sd_setImageWithURL:[NSURL URLWithString:self.urlHeadImg] placeholderImage:[UIImage imageNamed:@"detailViewDefaultMidImage"]];
        _countentLabel = [[UILabel alloc] initWithFrame:CGRectMake(_avatarImage.frame.size.width + 40, 20 + 64, SCREEN_WIDTH - (SCREEN_WIDTH / 3 + 20 + 10), _avatarImage.frame.size.height / 4)];
        _countentLabel.font = [UIFont systemFontOfSize:15];
        _countentLabel.textColor = [UIColor whiteColor];
        _countentLabel.lineBreakMode = NSLineBreakByWordWrapping;
        _countentLabel.numberOfLines = 0;
        _countentLabel.text = self.urlTitle;
        [_headImageView addSubview:_countentLabel];

        _img = [[UIImageView alloc] initWithFrame:CGRectMake(_countentLabel.frame.origin.x, _countentLabel.frame.size.height + _avatarImage.frame.origin.y +  10, 30, 30)];
        _img.layer.cornerRadius = 15;
        _img.layer.masksToBounds = YES;
        _img.backgroundColor = [UIColor yellowColor];
        [_headImageView addSubview:_img];
        _titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(_img.frame.size.width + _img.frame.origin.x + 5, _img.frame.origin.y, SCREEN_WIDTH / 1.9 , 30)];
        _titleLabel.textColor = [UIColor whiteColor];
        _titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
        _titleLabel.numberOfLines = 0;
        _titleLabel.font = [UIFont systemFontOfSize:12];
        [_headImageView addSubview:_titleLabel];
        UILabel *contextLabel = [[UILabel alloc] initWithFrame:CGRectMake(_img.frame.origin.x , _img.frame.origin.y + _img.frame.size.height + 6, SCREEN_WIDTH / 2 , SCREEN_WIDTH / 8)];
        contextLabel.textColor = [UIColor whiteColor];
        contextLabel.text = self.urlContect;
        contextLabel.lineBreakMode = NSLineBreakByWordWrapping;
        contextLabel.numberOfLines = 0;
        contextLabel.font = [UIFont systemFontOfSize:12];
        [_headImageView addSubview:contextLabel];
        UIButton *takeBtn = [UIButton buttonWithType:UIButtonTypeSystem];
        takeBtn.frame = CGRectMake(_img.frame.origin.x - 20 , contextLabel.frame.size.height + contextLabel.frame.origin.y + 10, SCREEN_WIDTH / 4, _avatarImage.frame.size.height / 3.2);
        [takeBtn setTitle:@"+ 訂閱" forState:UIControlStateNormal];
        [takeBtn setTitleColor:[UIColor whiteColor]  forState:UIControlStateNormal];
        takeBtn.backgroundColor = [UIColor colorWithRed:1.00 green:0.36 blue:0.25 alpha:1.00];
        takeBtn.titleLabel.font = [UIFont systemFontOfSize:14];
        takeBtn.layer.cornerRadius = 10;
        [_headImageView addSubview:takeBtn];
        UIButton *contributeBtn = [UIButton buttonWithType:UIButtonTypeSystem];
        contributeBtn.frame = CGRectMake(takeBtn.frame.origin.x + takeBtn.frame.size.width + 5, contextLabel.frame.size.height + contextLabel.frame.origin.y + 10, SCREEN_WIDTH / 8, _avatarImage.frame.size.height / 3.2);
        [contributeBtn setTitle:@"投稿" forState:UIControlStateNormal];
        [contributeBtn setTitleColor:[UIColor whiteColor]  forState:UIControlStateNormal];
        contributeBtn.layer.borderWidth = 1.0;
        contributeBtn.titleLabel.font = [UIFont systemFontOfSize:14];
        contributeBtn.layer.borderColor = [UIColor whiteColor].CGColor;
        contributeBtn.layer.cornerRadius = 5;
        [_headImageView addSubview:contributeBtn];
        UIButton *manageLabel = [[UIButton alloc] initWithFrame:CGRectMake(contributeBtn.frame.size.width + contributeBtn.frame.origin.x, contributeBtn.frame.origin.y + 5, SCREEN_WIDTH / 5 , 30)];
        [manageLabel setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [manageLabel setTitle:@"0未處理?" forState:UIControlStateNormal];
        manageLabel.titleLabel.textAlignment = 0;
        manageLabel.titleLabel.font = [UIFont systemFontOfSize:12];
        [manageLabel addTarget:self action:@selector(clickManageBtn:) forControlEvents:UIControlEventTouchUpInside];
        [_headImageView addSubview:manageLabel];

    }
    return _headImageView;
}
// 大tableView
-(UITableView *)mainTableView
{
    if (mainTableView == nil)
    {
        mainTableView= [[BookTableViewCell alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH,SCREEN_HEIGHT)];
        mainTableView.delegate = self;
        mainTableView.dataSource=self;
        mainTableView.bounces = NO;
        mainTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
        mainTableView.showsVerticalScrollIndicator = NO;
        mainTableView.backgroundColor = [UIColor clearColor];
        mainTableView.rowHeight = SCREEN_HEIGHT;
    }
    return mainTableView;
}

#pragma marl -tableDelegate
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return 1;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return SCREEN_HEIGHT;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    //添加pageView
    [cell.contentView addSubview:self.setPageViewControllers];
    return cell;
}
// 調用兩個小VC
-(UIView *)setPageViewControllers{
    EssayViewController *essay = [[EssayViewController alloc] init];
    essay.urlStr = self.urlStr;
    essay.title = [NSString stringWithFormat:@"文章\n%@", self.articleCount];
    SubscriberViewController *subscribe = [[SubscriberViewController alloc] init];
    subscribe.urlStr = self.urlStr;
    subscribe.title = [NSString stringWithFormat:@"訂閱者\n%@", self.subscriberCount];
    NSArray *subViewControllers=@[essay, subscribe];
    DCNavTabBarController *tabBarVC = [[DCNavTabBarController alloc]initWithSubViewControllers:subViewControllers];
    tabBarVC.view.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    [self.view addSubview:tabBarVC.view];
    [self addChildViewController:tabBarVC];
    return tabBarVC.view;
}
@end

寫到這裡, 就完成了, 下面讓我們來看一下成果吧!

2061020-cb592a1433636498.gif


是不是特別棒呢, 喜歡的話就來試試看吧!????有什麼不足和建議可以評論哦, 我會虛心接受的, 喜歡給個贊????哦!



文章轉自 Devil雅馨的簡書
  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved