UITableView topview渐变的效果

//
//  ViewController.m
//  CDTableViewHeaderDemo
//
//  Created by Alex on 15/8/21.
//  Copyright (c) 2015年 Alex. All rights reserved.
//

#define KScreen_Width [UIScreen mainScreen].bounds.size.width
#define KScreen_Height [UIScreen mainScreen].bounds.size.height

#import "ViewController.h"

const CGFloat BackGroupHeight = 200;
const CGFloat HeadImageHeight= 80;

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate,UIScrollViewDelegate>
{

    UITableView *demoTableView;

    UIImageView *imageBG;
    UIView *BGView;

    UIImageView *headImageView;
    UILabel *nameLabel;
    UILabel *titleLabel;

    UIButton *leftBtn;
    UIButton *rightBtn;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.automaticallyAdjustsScrollViewInsets=NO;
    [self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];

    [self setupUI];
}

-(void)setupUI
{
    demoTableView=[[UITableView alloc]init];
    demoTableView.delegate=self;
    demoTableView.dataSource=self;
    [demoTableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cell"];
    demoTableView.frame=[UIScreen mainScreen].bounds;
    demoTableView.contentInset=UIEdgeInsetsMake(BackGroupHeight, 0, 0, 0);

    [self.view addSubview:demoTableView];

    //
    imageBG=[[UIImageView alloc]init];
    imageBG.frame=CGRectMake(0, -BackGroupHeight, KScreen_Width, BackGroupHeight);
    imageBG.image=[UIImage imageNamed:@"BGimage.jpg"];

    [demoTableView addSubview:imageBG];
//    demoTableView.tableHeaderView = imageBG;
    //
    BGView=[[UIView alloc]init];
    BGView.backgroundColor=[UIColor clearColor];
    BGView.frame=CGRectMake(0, -BackGroupHeight, KScreen_Width, BackGroupHeight);

    [demoTableView addSubview:BGView];

    //
    headImageView=[[UIImageView alloc]init];
    headImageView.image=[UIImage imageNamed:@"myheadimage.jpg"];
    headImageView.frame=CGRectMake((KScreen_Width-HeadImageHeight)/2, 50, HeadImageHeight, HeadImageHeight);

    [BGView addSubview:headImageView];

    //

    nameLabel=[[UILabel alloc]init];
    nameLabel.text=@"Alex";
    nameLabel.textAlignment=NSTextAlignmentCenter;
    nameLabel.frame=CGRectMake((KScreen_Width-HeadImageHeight)/2, CGRectGetMaxY(headImageView.frame), HeadImageHeight, 20);
    nameLabel.backgroundColor=[UIColor whiteColor];
    [BGView addSubview:nameLabel];

    titleLabel=[[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 30)];
    titleLabel.textColor=[UIColor whiteColor];
    titleLabel.text=@"title";

    titleLabel.textAlignment=NSTextAlignmentCenter;

    self.navigationItem.titleView=titleLabel;
     titleLabel.alpha=0;

    leftBtn=[[UIButton alloc]initWithFrame:CGRectMake(0, 0, 40, 30)];
    [leftBtn setTitle:@"left" forState:UIControlStateNormal];
    [leftBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [leftBtn addTarget:self action:@selector(leftBtnAction) forControlEvents:UIControlEventTouchUpInside];

    UIBarButtonItem *leftItem=[[UIBarButtonItem alloc]initWithCustomView:leftBtn];
    self.navigationItem.leftBarButtonItem=leftItem;

    rightBtn=[[UIButton alloc]initWithFrame:CGRectMake(0, 0, 40, 30)];
    [rightBtn setTitle:@"right" forState:UIControlStateNormal];
    [rightBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [rightBtn addTarget:self action:@selector(rightBtnAction) forControlEvents:UIControlEventTouchUpInside];

    UIBarButtonItem *rightItem=[[UIBarButtonItem alloc]initWithCustomView:rightBtn];
    self.navigationItem.rightBarButtonItem=rightItem;

}

-(void)leftBtnAction
{
    NSLog(@"leftClick");
}

-(void)rightBtnAction
{
    NSLog(@"rightClick");
}

#pragma mark - tableViewDelegate&DataSource

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 30;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];

    if (cell==nil) {
        cell=[[UITableViewCell alloc]init];
    }

    return cell;
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat yOffset  = scrollView.contentOffset.y;
    CGFloat xOffset = (yOffset + BackGroupHeight)/2;
    NSLog(@"%f",yOffset);
    if (yOffset < -BackGroupHeight) {

        CGRect rect = imageBG.frame;
        rect.origin.y = yOffset;
        rect.size.height =  -yOffset ;
        rect.origin.x = xOffset;
        rect.size.width = KScreen_Width + fabs(xOffset)*2;

        imageBG.frame = rect;
    }

    CGFloat alpha = (yOffset+BackGroupHeight)/BackGroupHeight;
    [self.navigationController.navigationBar setBackgroundImage:[self imageWithColor:[[UIColor orangeColor]colorWithAlphaComponent:alpha]] forBarMetrics:UIBarMetricsDefault];
    titleLabel.alpha=alpha;
    alpha=fabs(alpha);
    alpha=fabs(1-alpha);

    alpha=alpha<0.2? 0:alpha-0.2;

    BGView.alpha=alpha;

}

- (UIImage *)imageWithColor:(UIColor *)color
{
    // 描述矩形
    CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);

    // 开启位图上下文
    UIGraphicsBeginImageContext(rect.size);
    // 获取位图上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 使用color演示填充上下文
    CGContextSetFillColorWithColor(context, [color CGColor]);
    // 渲染上下文
    CGContextFillRect(context, rect);
    // 从上下文中获取图片
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
    // 结束上下文
    UIGraphicsEndImageContext();

    return theImage;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
时间: 2024-10-12 14:02:14

UITableView topview渐变的效果的相关文章

CAGradientLayer实现图片渐变透明效果

CAGradientLayer实现图片渐变透明效果 要实现的效果如下: 源码: // // RootViewController.m // CAGradientLayer // // Copyright (c) 2014年 Y.X. All rights reserved. // #import "RootViewController.h" #import "YXGCD.h" @interface RootViewController () @property (n

小tip:CSS3下的渐变文字效果实现——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果: 相应的HTML代码如下: <h2 class="text-gradient" data-text=

使用XML的方式为背景添加渐变的效果

为背景实现渐变效果,最传统的方法是用PS制作一张渐变的效果图,但我人懒 没去学PS技术,也懒得更增加一个图片在应用里面,这里使用了Google 提供的一个非常棒的方法来解决背景渐变的功能.首先,在Drawable 文件夹里面添加一个xml文件,然后写入如下代码:<?xml version="1.0" encoding="UTF-8"?><shape xmlns:android="http://schemas.android.com/apk

使用UITableView实现图片视差效果

视差效果如下: 原理: 根据偏移量计算不同的移动速度,so easy! // // RootTableViewController.h // TableView // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @interface RootTableViewController : UITableViewController @end // // RootTableViewContro

UITableView添加波浪动画效果

- (void)reloadDataAnimateWithWave:(WaveAnimation)animation; { [self setContentOffset:self.contentOffset animated:NO]; [UIView animateWithDuration:.2 animations:^{ [self setHidden:YES]; [self reloadData]; } completion:^(BOOL finished) { //Do something

css3实现文字渐变动画效果

利用css3这个属性(背景剪裁): background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webkit-background-clip:text; 栗子: 1. <style> .masked{ text-align: center; background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #

如果模拟一种图标被删除时一种颜色渐变的效果,采用TransitionDrawable实现

效果图: TransitionDrawable 可以用来实现两个Drawable直接的交错渐变的过渡效果 接着上篇,我们这样来实现: public class MyDragLayer extends FrameLayout { /** * The bitmap that is currently being dragged */ private Bitmap mDragBitmap = null; private float mLastMotionX; private float mLastMo

CircularTools view渐变呈现效果

CircularTools view渐变呈现效果 介绍: CircularTools view渐变呈现效果,这是一个基本的activity 运行效果: 相关代码 CircularTools view渐变呈现效果 AppIntroAnimation 切换view动画 DraggableView GridView项目拖拽效果 PullDownListView高仿微信下拉眼睛出现动画 仿iOS的PickerView控件,有时间选择和选项选择并支持一二三级联动效果 Meizhi-master 妹子客户端

颜色渐变的效果如何实现

有一个CAGradientLayer的层,可以设置初始和终点颜色值,初始和终点位置,根据这个来完成颜色效果的设置. CAGradientLayer *gra = [[CAGradientLayer alloc] init]; gra.frame = CGRectMake(0, 0, SCREEN_WIDTH, 64); gra.colors = @[(id)UIColorFromRGB(0xff6b00).CGColor,(id)UIColorFromRGB(0xff8a02).CGColor]