美文网首页iOS分享的demoIOS | MAC
IOSUITableView上移覆盖视图下拉显示

IOSUITableView上移覆盖视图下拉显示

作者: 尕qin | 来源:发表于2016-10-23 17:22 被阅读941次
    最近看APP时看到一个新的功能就是TableView上拉覆盖视图,这样TableView界面显示的就跟多

    先看下图吧

    bbbb.gif

    最近也做了这个功能给大家分享一下吧

    属性、宏定义

    //屏幕宽高
    #define SCREEN_WIDTH [[UIScreen mainScreen] bounds].size.width
    #define SCREEN_HEIGHT [[UIScreen mainScreen] bounds].size.height
    //一个tableView,一个手势,
    @property(weak,nonatomic)UITableView *tableView;
    @property(strong,nonatomic)UIPanGestureRecognizer *pan;
    //这个地图你们可以换ImageView
    @property(weak,nonatomic)MKMapView *mapView;
    

    #######这的mapView tableView可能有些不完全,需要你们补一下,大家都懂的东西

    注意SCREEN_WIDTH*3/5##是mapView的高度

    -(void)setMapView{
        [self locManager];
        MKMapView *mapView=[[MKMapView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_WIDTH*3/5)];
        mapView.userTrackingMode=MKUserTrackingModeFollow;
        mapView.mapType=MKMapTypeStandard;
        mapView.delegate=self;
        //显示比例尺
        mapView.showsScale=YES;
        [self.view addSubview:mapView];
        self.mapView=mapView;
    }
    -(void)setTableView{
    //去除控制器的默认约束
        self.automaticallyAdjustsScrollViewInsets=NO;
        UITableView *tableView=[[UITableView alloc] initWithFrame:CGRectMake(0, SCREEN_WIDTH*3/5, SCREEN_WIDTH, SCREEN_HEIGHT-10) style:UITableViewStyleGrouped];
        tableView.delegate=self;
        tableView.dataSource=self;
        
        UIView *view=[[UIView alloc]initWithFrame:CGRectMake(0, 0, 100, 30)];
        UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(10, 0, 200, 30)];
        label.text=@"附近美食";
        label.textColor=[UIColor lightGrayColor];
        label.font=[UIFont systemFontOfSize:14 weight:0.1];
        [view addSubview:label];
        tableView.tableHeaderView=view;
        
        [tableView registerNib:[UINib nibWithNibName:@"UITableViewCell" bundle:nil] forCellReuseIdentifier:@"CellId"];
        [self.view addSubview:tableView];
        self.tableView=tableView;
    //注意是这个手势
        UIPanGestureRecognizer *pan=[[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panAction:)];
    //添加手势
        [tableView addGestureRecognizer:pan];
        self.pan=pan;
    }
    

    核心部分

    #######手势执行的方法

    -(void)panAction:(UIPanGestureRecognizer *)sender{
        //获取手势一点的点
        CGPoint point=[sender translationInView:sender.view];
        //改变tableView视图的位置
        if (self.tableView.y>0) {
            sender.view.transform=CGAffineTransformTranslate(sender.view.transform, 0, point.y);
        }
        //重置
        [sender setTranslation:CGPointZero inView:sender.view];
        //滑到顶部时,上移
        if (self.tableView.y<=0) {
            self.tableView.y=0;
            //禁止手势,否则tableView滚动手势会被拦截,无法响应
            sender.enabled=NO;
        }
        //限制下移最低
        if (self.tableView.y>=SCREEN_WIDTH*3/5) {
            self.tableView.y=SCREEN_WIDTH*3/5;
        }
    }
    

    #######scrollView代理

    -(void)scrollViewDidScroll:(UIScrollView *)scrollView{
        //下拉
        if (scrollView.contentOffset.y<=0) {
            //开启手势
            self.pan.enabled=YES;
            if (self.tableView.y<SCREEN_WIDTH*3/5) {
                //让tableView下移
                self.tableView.y-=scrollView.contentOffset.y;
                if (self.tableView.y>SCREEN_WIDTH*3/5) {
                    self.tableView.y=SCREEN_WIDTH*3/5;
                }
            }
        }
    //上拉
    if (scrollView.contentOffset.y>0) {
            if (self.tableView.y<0) {
                self.tableView.y=0;
                self.pan.enabled=NO;
            }
        }
        //防止用户上移到顶部后不松手后继续,下移,再上移来回弄的BUG,因为那时候自定义的手势开启了,当tableView的滑动手势还一直响应者,
        if (self.pan.enabled==YES) {
            //响应这个上移
            if (scrollView.contentOffset.y>0) {
                self.tableView.y-=scrollView.contentOffset.y;
                //让tableView的scrollView别跟着上移
                self.tableView.contentOffset=CGPointZero;
            }
        }
    }
    

    还有疑问的留言,觉得不错的支持一下,谢谢!

    相关文章

      网友评论

      • 辉过来辉过去:上移到顶部隐藏, 再下拉的时候过渡有点不顺, 会先调用didscroll, 然后再换成手势pan, 我在想着用scrollview去嵌套tableview会不会好一点
      • SSSDDDDKKK: self.tableView.y是啥

      本文标题:IOSUITableView上移覆盖视图下拉显示

      本文链接:https://www.haomeiwen.com/subject/tpdkuttx.html