Interesting UI of iOS development-UIScrollerView controls and cases, iosuiscrollerview

Interesting UI of iOS development-UIScrollerView controls and cases, iosuiscrollerview

This is a technical point for interesting UI modules in iOS development. If you are an iOS enthusiast who already has C basics, but you are not familiar with Objectiov C, you need to learn the Objective C series of the core iOS development language I shared earlier.
If you have no basic knowledge, we recommend that you start learning the C language series in minutes from the iOS development I shared earlier. In addition, I will share about 400 GB of iOS learning videos and learning materials I have sorted out for free. They are all useful! You can follow James on Sina Weibo's private letter and look forward to learning and exploring with you !! Due to limited time, it is inevitable that there are deficiencies in the daily study and sharing after work, and I hope you can correct them!

Made by geek James

In the previous sharing of data transfer models and MVC design patterns, we analyzed and implemented shopping cart cases and shared some design ideas. Due to the limited iPhone screen, we sometimes want to show more content on the screen. How can we achieve this. This is to solve the problem of displaying more content and some practical cases due to screen restrictions.

I. UIScrollerView Control

UIScrollView is a scrolling view control that can be used to display a large amount of content and view all the content through scrolling.

For example, in iPhone settings, the UIScrollerView control officially provides many practical methods, which are widely used in some specific scenarios, such as advertisement Scrolling on the e-commerce app homepage.

Ii. common attributes of UIScrollerView

@ Property (nonatomic) CGPoint contentOffset;
This attribute is used to indicate the scroll position of UIScrollView.
(In fact, it is the gap between the upper left corner of the content and the upper left corner of the scrollView)

@ Property (nonatomic) CGSize contentSize;
This attribute is used to indicate the size of UIScrollView content and the scroll range (how far can it be rolled)

@ Property (nonatomic) UIEdgeInsets contentInset;
This attribute can add an additional scroll area in the four weeks of UIScrollView. It is generally used to prevent scrollView contents from being blocked by other controls.

Other attributes
@ Property (nonatomic) BOOL bounces;
Set whether the UIScrollView requires Spring Effect

@ Property (nonatomic, getter = isScrollEnabled) BOOL scrollEnabled;
Set whether UIScrollView can be rolled

@ Property (nonatomic) BOOL showsHorizontalScrollIndicator;
Whether to display horizontal scroll bars

@ Property (nonatomic) BOOL showsVerticalScrollIndicator;
Show vertical scroll bars?

Iii. UIScrollerView project case

1. project requirements
Display a large image in the specified UIView to drag the image, and move the image from top to bottom, bottom left, and top right through the button.

2. Overall Thinking
To move an image, you must use the UIScrollerView control to change the position of the image by offset.

3. Project Implementation

4. Code implementation process
(1) first build the storyboard Interface

(2) connect the controls in the storyboard to the Controller.

@property (weak, nonatomic) IBOutlet UIScrollView *scrollerView;

(3) set attributes after the view is loaded.

-(Void) viewDidLoad {[super viewDidLoad]; // sets the image UIImageView * imageView = [[UIImageView alloc] init]; imageView. image = [UIImage imageNamed: @ "blog"]; imageView. frame = CGRectMake (0, 0,550,550); [self. scrollerView addSubview: imageView]; // sets the contentSize scroll range self. scrollerView. contentSize = CGSizeMake (550,550); // cancel the scroll bar self. scrollerView. showsHorizontalScrollIndicator = NO; self. scrollerView. showsVerticalScrollIndicator = NO;

(4) use the offset contentoffset (the difference between the upper left corner of the image and the upper left corner of the scrollerView) to set the position where the Click Event moves.

// Left-(IBAction) left {[self. scrollerView setContentOffset: CGPointMake (0, self. scrollerView. contentOffset. y) animated: YES];} // lower left corner-(IBAction) leftBotton {CGFloat setX = 0; CGFloat setY = self. scrollerView. contentSize. height-self. scrollerView. frame. size. height; [self. scrollerView setContentOffset: CGPointMake (setX, setY) animated: YES];} // Top-(IBAction) Top {[self. scrollerView setContentOffset: CGPointMake (self. scrollerView. contentOffset. x, 0) animated: YES];} // bottom-(IBAction) botton {CGFloat setX = self. scrollerView. contentOffset. x; CGFloat setY = self. scrollerView. contentSize. height-self. scrollerView. frame. size. height; [self. scrollerView setContentOffset: CGPointMake (setX, setY) animated: YES];} // upper right corner-(IBAction) rightTop {CGFloat setX = self. scrollerView. contentSize. width-self. scrollerView. frame. size. width; CGFloat setY = 0; [self. scrollerView setContentOffset: CGPointMake (setX, setY) animated: YES];} // right-(IBAction) right {CGFloat setY = self. scrollerView. contentOffset. y; CGFloat setX = self. scrollerView. contentSize. width-self. scrollerView. frame. size. width; [self. scrollerView setContentOffset: CGPointMake (setX, setY) animated: YES];}

Iv. UIScrollerView proxy

Many times, we want to perform some specific operations when UIScrollView is rolling or rolling to a certain position or stopping the rolling. To complete the above functions, the precondition is that you can monitor the entire Rolling Process of UIScrollView. When a series of rolling operations occur in UIScrollView, its proxy (delegate) object is automatically notified, send a message to its proxy to let the proxy know its rolling status. That is to say, to listen to the rolling process of UIScrollView, you must first set a proxy object for UIScrollView, then, the scrolling process of UIScrollView is known through the proxy.

1. The communication between UIScrollView and delegate should be shown in

2. Become a delegate Condition
UIScrollView defines all the methods to be implemented by delegate in the UIScrollViewDelegate protocol. Therefore, to become the delegate of UIScrollView, you must abide by the UIScrollViewDelegate protocol and then implement the corresponding methods in the Protocol, you can monitor the rolling process of UIScrollView.

3. Conditions for becoming delegate

4. UIScrollView and Controller
Generally, set the controller of UIScrollView to the delegate of UIScrollView.
There are two ways to set the Controller to UIScrollView's delegate:

Code (self is the Controller)
Self. scrollView. delegate = self;

Drag lines through storyboard

5. Methods in the Implementation Protocol
(1) zoom in and out of images
First, you need to set the maximum and minimum values for amplification and reduction, and then the method in the Compliance Protocol implementation protocol.

Self. scrollerView. maximumZoomScale = 2.0;
Self. scrollerView. minimumZoomScale = 0.2;

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{    return self.imageView；}

Copyright Disclaimer: this is an original article by bloggers. To promote and learn from each other, please pay attention to Sina Weibo: James