iOS 个人页面展示(导航条操作)

1.搭建基本界面

搭建界面

  • 在storyboard中自定义一个导航控制器,移除自带的根控制器UITableViewController,重新拖入一个UIViewController,在根控制器上方拖入一个UIView,在UIView内部拖入图片,完成上图界面,建立好约束。
  • 自定义一个AZViewController文件用来管理界面,对背景图片的UIView的高度约束和tableView与文件中的属性进行连线

2.在AZViewController中进行界面操作

  • 首先让控制器成为tableView的代理,实现tableView的数据源和代理协议,实现对应的方法.
  • 这里需要注意的是修改导航栏和导航栏标题的透明度不能直接修改alpha值,可以给其添加控件,通过修改控件的颜色的方式对其透明度进行修改
// 设置tableView的代理和数据源
    self.tableView.delegate=self;
    self.tableView.dataSource=self;
    // 设置tableView的位置
    self.tableView.contentInset=UIEdgeInsetsMake(244, 0, 0, 0);
    self.automaticallyAdjustsScrollViewInsets=NO;
    // 注册tableViewCell的引用标识
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:ID];
    // 设置导航栏样式
    [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc]init] forBarMetrics:UIBarMetricsDefault];
    [self.navigationController.navigationBar setShadowImage:[[UIImage alloc]init]];
    // 设置导航栏的标题
    UILabel *title=[[UILabel alloc]init];
    title.text=@"个人详情页";
    [title sizeToFit];
    title.textColor=[UIColor colorWithWhite:0 alpha:0];

    self.navigationItem.titleView=title;

3.页面效果实现

  • 通过UIScrollView的方法-(void)scrollViewDidScroll:(UIScrollView *)scrollView对tableView的滚动进行监听,实现页面效果的展示
  • 这里需要注意scrollView的contentOffset往y轴正方向走的值是减小的
  • 当控件的透明度alpha值大于1时会出现有一点透明的效果,这里需要处理一下
#pragma mark - UIScrollView的代理方法
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // y轴位移
    CGFloat offset=scrollView.contentOffset.y-(oriOfftY);
    // 图片底部距离上方高度
    CGFloat h=oriHeight-offset;
    // 滚动到导航栏位置停止滚动
    self.bgImageHeight.constant=h<64?64:h;
    // 根据位移量设置透明度
    CGFloat alpha=offset*1/136.0;
    if (alpha>=1) {
        alpha=0.99;
    }
    // 设置导航栏标题的透明度,设置导航栏标题的alpha无法直接修改,可以通过修改label的文字颜色的方式来修改
    UILabel *titleL=(UILabel *)self.navigationItem.titleView;
    titleL.textColor=[UIColor colorWithWhite:0 alpha:alpha];

    self.navigationItem.titleView=titleL;

    // 设置导航条的透明,同样无法直接修改alpha,通过设置背景图片的alpha值来修改导航栏的透明度
    UIImage *alphaColor=[UIImage imageWithColor:[UIColor colorWithWhite:1 alpha:alpha]];

    [self.navigationController.navigationBar setBackgroundImage:alphaColor forBarMetrics:UIBarMetricsDefault];

}

页面效果

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值