preface

I wrote a demo today to learn technical skills and record knowledge. I hope you will like it and give me a thumbs up.

Technical Implementation Principle

Technical Implementation Principle

  • UITableView

It’s actually a UITableView that changes the display range up and down

I don’t mince words, the code is very simple to implement as follows

支那

_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, -SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT * 5)];
_tableView.contentInset = UIEdgeInsetsMake(SCREEN_HEIGHT, 0, SCREEN_HEIGHT * 3, 0);
Copy the code
  1. When you initialize it, you put the TableView out of the screen.
  2. ContentInset displays the inside margin of the content, as ison.On the left.Under the.right, the top distance from the screen height, the bottom is the top margin (3 times the screen height) easy to slide, left and right respectively top to both sides.

Let me draw a picture to show you.

See this diagram you may already understand, the most core place is to control the TableView on the bottom distance, the top distance left enough for a screen height, the bottom distance left enough to slide 3 screens or so of the buffer.

So let’s talk about the technique that’s used

Creating a tableView is pretty easy and if you don’t understand it you can download the demo at the end of this article

So there’s a little trick about how you can swipe up and down so that you can fully fill up the screen like turning on pagingEnabled for UIScrollView.

Implement sliding proxy methods

You first need to declare a member variable for the current sliding page number

支那

@property (nonatomic, assign) NSInteger  currentIndex;
Copy the code

Then determine when the sliding agent stops

支那

#pragma mark - #pragma mark - ScrollView delegate - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{ dispatch_async(dispatch_get_main_queue(), ^{ CGPoint translatedPoint = [scrollView.panGestureRecognizer translationInView:scrollView]; / / UITableView other sliding gesture scrollView response prohibited. PanGestureRecognizer. Enabled = NO; if(translatedPoint.y < -50 && self.currentIndex < (kDataSourceCount - 1)) { self.currentIndex ++; } if(translatedPoint.y > 50 && self.currentIndex > 0) {self.currentIndex --; / / slide up index decreasing} [UIView animateWithDuration: delay 0.15:0.0 options: UIViewAnimationOptionCurveEaseOut animations: ^ { / / UITableView sliding to a specified cell [self tableView scrollToRowAtIndexPath: [NSIndexPathindexPathForRow: self currentIndex inSection: 0] AtScrollPosition: UITableViewScrollPositionTop animated: NO];} completion: ^ (BOOL finished) {/ / UITableView can slide response other gestures scrollView.panGestureRecognizer.enabled = YES; }]; }); }Copy the code

So 50 here is actually the maximum trigger that you can allow to slide. You can download the demo and play it yourself.

Add or subtract the current page number based on the sliding range. And then I’m going to do a simple UIView animation.

Note: It is best not to use the pan gesture at the beginning of the animation, and then revert to the pan gesture at the end of the animation to avoid unnecessary clean up and sliding problems.

Why slide page numbersself.currentIndexWhy slide page numbersself.currentIndex

Because we are going to use KVO to achieve page change driven sliding animation

So in the viewDidLoad: method we have a setupView: method that has the next piece of code

支那

[self addObserver:self forKeyPath:@"currentIndex" options:NSKeyValueObservingOptionInitial|NSKeyValueObservingOptionNew context:nil];
Copy the code

Yeah we have to listen to our own member variables to do something.

支那

// observe currentIndex change -(void) observeforkeypath :(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context { if ([keyPath IsEqualToString :@"currentIndex"]) {AwemeListCell *cell = [self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:_currentIndex inSection:0]]; __weak typeof (cell) wcell = cell; __weak typeof (self) wself = self; / / associated with cell control video playback} else {return [super observeValueForKeyPath: keyPath ofObject: object change: change the context: context]; }}Copy the code

The demo actually has this code in it for the purpose of controlling the behavior of pausing or stopping or whatever when the cell is in the palyerView. Here we improve later

Click on the status bar to slide to the top

How do we listen for status bar events?

We can of course set the TableView to slide to the top automatically. But how do we intercept this event and set our relevant page number to 0

Why is it 0? Take a look at the graph below

So even though we can automatically slide the TableView to the top, we can’t intercept the top status bar click event, put the current page number where the event is called0.

Listen for clicking status bar events

This is done by overriding the touchesBagan: method in an AppDelegate

支那

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { [super touchesBegan:touches withEvent:event]; / / send touch when touch the status bar notification This controller has received the click event CGPoint touchLocation = [[[event allTouches] anyObject] locationInView: self. The window]; CGRect statusBarFrame = [UIApplication sharedApplication].statusBarFrame; if (CGRectContainsPoint(statusBarFrame, touchLocation)) { [[NSNotificationCenter defaultCenter] postNotificationName:StatusBarTouchBeginNotification object:nil]; }}Copy the code

Here we determine whether the click area is within the range of the status bar and send a notification if it is.

Register this notification in the VC where we’re using the TableView, and set it to 0.

支那

#pragma mark - #pragma mark - event Response - (void)statusBarTouchBegin {_currentIndex = 0; //KVO }Copy the code

So we’re going to do 0 here.

Here is a simple and crude way to handle, you have a better implementation can comment at the bottom, thank you very much.

conclusion

The above is a simple implementation of douyin slide up. If you need to slide down a Demo on Douyin, you can click circle to get the Demo and more iOS learning materials. I hope to make friends with all guest officers and discuss interesting and interesting things together.

circle

Reproduced: original address