表头视图放大,TableView下拉之视图放大及图片展

作者:计算机知识
轻易易行利用TableView的头视图实现下拉增添

#import "ViewController.h"@interface ViewController (){

作者们在成千上万软件中都来看过,底部视图为一张图纸,下拉的时候图片放大,效果挺棒的。在相近的应用中都是TableView中落到实处这种效果。 tableView中完结相对轻便一些,也与webView中相像,在这里笔者只提供二个TableView完结这种意义的笔触,就不写实现代码了。具体能够参见上面webView中的实现1、给tableView增添头视图,设置头视图为透明色 2、把ImageView加在self.view上(注意加在tableView上面) 3、设置tableVIew的backgroundcolor为透明色 4、依据tableView的offset改革imageView的frame就可以

下边是动漫效果

动画.gif

话十分的少说,直接上代码


视图的始建

    //UITableView顶部的ImageView
    self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, V_Width, V_height/3)];
    self.imageView.image = [UIImage imageNamed:@"3"];
    //设置imageView的填充模式
    self.imageView.contentMode = UIViewContentModeScaleAspectFill;
    self.imageView.userInteractionEnabled = YES;
    UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(createAllImageView)];
    [self.imageView addGestureRecognizer:tap];

    //UITableView
    self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, V_Width, V_height) style:UITableViewStylePlain];
    //设置tableView的内边距
    self.tableView.contentInset = UIEdgeInsetsMake(V_height/3, 0, 0, 0);
    self.tableView.delegate = self;
    self.tableView.dataSource = self;

    [self.view addSubview:self.tableView];

    [self.view addSubview:self.imageView];

拖动TableView时的事件

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

    CGPoint point = scrollView.contentOffset;
    //下拉图片放大
    if (point.y < -V_height/3 && point.y >= -V_height/3-60) {
        CGRect rect = self.imageView.frame;
        rect.origin.y = 0;
        rect.size.height = -point.y;
        self.imageView.frame = rect;
    }
    //上拉图片跟随移动
    if (point.y > -V_height/3) {
        CGRect rect = self.imageView.frame;
        rect.origin.y = -point.y - V_height/3;
        self.imageView.frame = rect;
    }
    //下拉到一定程度,创建新的View
    if (point.y <= -V_height/3-60) {
        [self createAllImageView];
    }
}

创办新的视图

/**
 *  在Window上创建新的View
 */
- (void)createAllImageView{
    //V_Width 屏幕宽的宏定义
    //V_height 屏幕高的宏定义

    //判断如果已经创建_allView,则不在创建
    if (_allView) {
        return;
    }

    //Window上的View
    _allView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, V_Width, V_height/3)];
    _allView.backgroundColor = [UIColor blackColor];

    UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(removeAllImageView:)];
    [_allView addGestureRecognizer:tap];

    //新视图上的ImageView
    _likeImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, V_Width, V_height/3)];
    _likeImageView.image = [UIImage imageNamed:@"3"];
    [_allView addSubview:_likeImageView];

    //在Window上添加视图
    [[UIApplication sharedApplication].keyWindow addSubview:_allView];

    CGRect rect1 = _allView.frame;
    rect1.size.height = V_height;

    CGRect rect2 = _likeImageView.frame;
    rect2.origin.y = (V_height - V_height/3)/2;

    //动画显示
    [UIView animateWithDuration:0.8 animations:^{
        _allView.frame = rect1;
        _likeImageView.frame = rect2;
    }];
}

Window上视图销毁

/**
 *  移除Window上的View
 *
*/
- (void)removeAllImageView:(UITapGestureRecognizer *)tap{

    CGRect rect1 = _allView.frame;
    rect1.size.height = V_height/3;

    CGRect rect2 = _likeImageView.frame;
    rect2.origin.y = 0;

    //动画显示
    [UIView animateWithDuration:0.5 animations:^{
        _allView.frame = rect1;
        _likeImageView.frame = rect2;
        _allView.alpha = 0;
    } completion:^(BOOL finished) {
        [_likeImageView removeFromSuperview];
        [_allView removeFromSuperview];
        _allView = nil;
    }];
}

tableView的有的代管事人件这里就不在详细的写了,招待我们指正

规律很简短,下拉时候增添头视图,输入实现后,移除

图片 1Untitled.gif

class TableViewController: UITableViewController,UITextFieldDelegate { var TestData = [String]() var textField: UITextField! { let textField = UITextField(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 64)) textField.textAlignment = .Center textField.placeholder = "输入新的项目" textField.becomeFirstResponder() textField.delegate = self return textField } override func viewDidLoad() { super.viewDidLoad() self.tableView.backgroundColor = UIColor(red: 245/255, green: 254/255, blue: 255/255, alpha: 1) let tapGestureRecongizer = UITapGestureRecognizer(target: self, action: #selector(TableViewController.hideTextField)) tapGestureRecongizer.cancelsTouchesInView = false //点击继续传递到下层,防止Cell无法点击 self.tableView.addGestureRecognizer(tapGestureRecongizer) } func hideTextField() { textField.resignFirstResponder() UIView.animateWithDuration(0.5, animations: { self.tableView.tableHeaderView = nil }) {  in self.tableView.reloadData() } } //MARK: 原理 -> 下拉显示头视图 -> 输入完成 —> 收回键盘 -> 移除头视图 override func scrollViewWillBeginDecelerating(scrollView: UIScrollView) { if scrollView.contentOffset.y < -88 { tableView.tableHeaderView = textField tableView.tableHeaderView?.alpha = 0 UIView.animateWithDuration(1, animations: { self.tableView.tableHeaderView?.alpha = 1 }) } } // MARK: - TextField Delegate func textFieldShouldReturn(textField: UITextField) -> Bool { TestData.append(textField.text!) hideTextField() return true } // MARK: - Table view data source override func numberOfSectionsInTableView(tableView: UITableView) -> Int { return 1 } override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return TestData.count } override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCellWithIdentifier(String(UITableViewCell), forIndexPath: indexPath) cell.textLabel?.text = TestData.reverse()[indexPath.row] return cell }}

UITableView * _TabView;

表头视图放大,TableView下拉之视图放大及图片展示。webView是三个复合视图,里面包含有二个scrollView,scrollView里面是二个UIWebBrowserView(担负呈现WebView的内容)如下图所示:

NSArray * MessageArr;

图片 2显示器快照2016-05-05 早晨3.44.06.png

UITapGestureRecognizer * tapGest;

不得以把headImageView放在scrollView里面,那样就能把headImageView一起往下活动,变成地点空白

}

UIView *webBrowserView = self.webView.scrollView.subviews[0];//拿到webView的webBrowserView self.backHeadImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenWidth*2/3.0)]; [_backHeadImageView sd_setImageWithURL:[NSURL URLWithString:self.imageUrl] placeholderImage:[UIImage imageNamed:@"placeholderImage"]]; [self.webView insertSubview:_backHeadImageView belowSubview:self.webView.scrollView]; //把backHeadImageView插入到webView的scrollView下面 CGRect frame = self.webBrowserView.frame; frame.origin.y = CGRectGetMaxY(_backHeadImageView.frame); self.webBrowserView.frame = frame; //更改webBrowserView的frame向下移backHeadImageView的高度,使其可见

- scrollViewDidScroll:(UIScrollView *)scrollView{ CGPoint offSet = scrollView.contentOffset; CGFloat change = offSet.y; //拿到scrollView的偏移量 if (offSet.y < 0) { //偏移量小于0,即下拉就改变headImageView的frame CGSize size = CGSizeMake(kScreenWidth-change, kScreenWidth*2/3.f-change); self.backHeadImageView.frame = CGRectMake(0, 0, size.width , size.height); self.backHeadImageView.center = CGPointMake(kScreenWidth/2.f, size.height/2.f); }else{ //上滑时改变位置 self.backHeadImageView.center = CGPointMake(kScreenWidth/2.f, (kScreenWidth*2/3.f)/2.f-change); }}

#define KHIGHT  200

上边是终极效果

@end

图片 3Untitled.gif

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

MessageArr =[NSArray arrayWithObjects:@"abc",@"abc",@"abc", nil];

_TabView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];

_TabView.delegate = self;

_TabView.dataSource = self;

[self.view addSubview:_TabView];

_TabView.contentInset = UIEdgeInsetsMake(KHIGHT, 0, 0, 0);

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, -KHIGHT, [UIScreen mainScreen].bounds.size.width, KHIGHT)];

本文由bwin必赢发布,转载请注明来源

关键词: tablevi... 日记 iOS 视图 TableView