IOS development Note 7: Text, UI interaction details, two animation effects, etc., iosui

IOS development Note 7: Text, UI interaction details, two animation effects, etc., iosui

Text mainly summarizes some issues related to UILabel, UITextField, UITextView, UIMenuController, and UIWebView/WKWebView.

UI details mainly summarize some details encountered in interactive interface development, including the Masonry section.

Two recently used animations are commonly used, which will be further summarized.

Finally, we will introduce two tools and three Xcode settings.

1. Text (1) UILabel displays multiple lines of Text and top-level Text

The height of UILabel is not limited (the width needs to be set to determine when the text will be wrapped), and numberOfLines can be set to 0 (set to 0 indicates no limit on the number of rows ).

(2) Use NSMutableAttributedString to meet personalized display requirements

For example, you can use NSMutableAttributedString to set the line spacing, the size and color of a text line, and so on.

(3) text line feed mode

Set the lineBreakMode. For example, NSLineBreakByWordWrapping and NSLineBreakByTruncatingTail with the ellipsis are displayed at the end of the line feed condition.

(4) typical textField application scenarios: clearButtonMode, placeholder, keyboardType, tintColor, tag, and secureTextEntry

ClearButtonMode: sets the display mode of the One-Click Clear button. This button is usually displayed in the editing status.

Placeholder/attributedPlaceholder: Set the placeholder text. If you have special requirements on the style, such as color, you can set attributedPlaceholder.

KeyboardType: Set the default keyboard type displayed when you enter the editing status. For example, if you enter a mobile phone number, use the UIKeyboardTypeNumberPad, if a third-party input method such as sogou input method is installed, setting UIKeyboardTypeNumberPad does not work, and the keyboard is still displayed as another type. setting this parameter to disabled takes effect. The difference is that UIKeyboardTypePhonePad allows the input * compared to uikeyboard *, #, but the basic style is the same.

Set the keyboard type after UIKeyboardTypePhonePad

 

TintColor. For example, if you have requirements on the color of the cursor in the textField editing status, set this attribute.

Tag. For a page that contains multiple textfields, you often need to separate the differences in the proxy method. You can use the tag attribute to indicate the differences. textView is also distinguished by tag.

SecureTextEntry: Set the font and shade of the input characters to display. If it is set to YES, it is displayed as *. It is generally used for Password Input. However, when it is important to note that it is applicable to the native textField of the system, if you have added a light/shade switch button to switch the display mode by controlling this attribute, there may be some problems. One is to switch the light/shade status to the dark text status (secureTextEntry = YES ), when a character is entered, the string is displayed in the dark text state. After the end of the editing State enters the editing state, if you click the delete button, all the entered characters are cleared. If you want to switch the status and enter "not cleared", click "delete" to edit the status again and delete the previous character. You need to overwrite textField for this attribute.

(5) textField

Unlike textView, textField does not have the DidChange event Method in the proxy method. However, you can listen to UIControlEventEditingChanged to achieve the same effect.

(6) textView changes the return key type and automatically determines the key Availability Based on Input conditions.

Set two properties.

(7) How does textView respond to the event of pressing the send button?

Identify and process in the shouldChangeTextInRange proxy method ---- if ([text isEqualToString: @ "\ n"]) {...}

(8) textView implements the placeholder effect in textField

TextView itself does not have this attribute. The implementation method is to add a UILabel on textView as a placeholder and control the display of the label in the proxy method. Note that UILabel

If the layout is directly added to textView, the devices on iOS7 may crash. We recommend that you add textView to a view and then add UILabel to the view for control.

(9) The height of textView varies dynamically according to the input content.

When writing comments with a large number of words, the height of the textView should increase with the increase of content. Of course, there must be a height limit, which cannot increase without limit.

You can dynamically adjust the height when entering characters in textView. The following methods are available for test under iOS7, 8, and 9.

There is another issue to be aware of. When the last draft input enters the editing status again, the textView cursor should be displayed at the end of the last word.

(10) use regular expressions to verify the validity of mobile phone number input

One is to determine whether the first digit is 1, the other is to determine the validity of the second digit based on the existing situation, and the third is to verify whether the subsequent nine characters are numbers

 

(11) UIMenuController

(12) UIWebView

Note three points. One is to set the circle of the top status bar in the proxy method, that is, [UIApplication sharedApplication]. networkActivityIndicatorVisible

Second, some processing needs to be done in willDisappear.

Third, when loadRequest, ignore the cache. Otherwise, the page may not be the latest data.

(13) WKWebView

The same engine as safari is used. We recommend that you use WKWebView to replace UIWebView in iOS8 and later systems. It is much easier to use than UIWebView and supports progress bar display.

2. UI interaction details (1) dynamically calculate the height based on the cell display content

Note that when using Masonry to layout cells, do not ignore the bottom attribute because the height is calculated based on the size of the content, the distance from the top to the bottom can be determined based on the content in the cell, that is, the height of the cell.

(2) Update the layout using Masonry

If the mas_updateConstraints method is used to update the configured layout attribute, use mas_remakeConstraints to clear the original layout settings and relayout.

(3) Click the blank area to close the dialog box.

Determine the click area. When the click area is out of the pop-up box, close the area.

 

(4) view level management

It is commonly used to move a view to the top layer.

 

The second is to move the view to the bottom layer.

3. Load the view to the window

(5) Enable the userInteractionEnabled attribute when using UIImageView as the background View.

The default userInteractionEnabled attribute is NO and must be enabled. Otherwise, the Click Event added to the preceding UIButton will not respond.

(6) UIButton click area settings

For example, you can click a small icon. You need to increase the UIButton response area and consider the user's click experience.

(7) SDWebImage loading progress bar display

SDWebImage encapsulates methods to monitor loading progress

(8) disable the userInteractionEnabled attribute of UIPageControl.

When using carousel images, pay attention to disable the userInteractionEnabled attribute. Otherwise, click the pageControl area, and the dot index will change.

(9) Replacing ALAssetsLibrary with PHPhotoLibrary for photo album Processing

PHPhotoLibrary must be used for iOS 8 and later versions.

(10) use code to stretch Images

3. Two Animations (1) Loading pending circles

Select a line of Incrementally loaded circled images and set the animation effect for the images.

(2) CAShapeLayer + UIBezierPath implement gradient button

Use UIBezierPath to draw a rectangle and add the control point to the center. Note that the last vertex must be closed. Based on the sliding distance, the X coordinate of the control point changes accordingly.

The effect is as follows:

4. Other (1) dSYM

After the app uses umeng statistics to go online, you can use the "dSYM" tool to track and handle problems based on the error crash information.

(2) Network Link Conditioner

You can download this tool on mac to simulate the network environment for testing. On a real machine, you can find these tools by setting the developer options.

(3) black area on the top and bottom of the app after startup

The system determines the display size based on the LaunchImage size because the boot image loading method is set to LaunchImage but the image is not given. After the LaunchImage is added, the image is displayed normally.

(4) third-party plug-ins cannot be used after Xcode upgrade

Obtain the UUID of Xcode, add it to the project corresponding to the plug-in, and run it again.

Obtain Xcode UUID: "defaults read/Applications/Xcode. app/Contents/Info DVTPlugInCompatibilityUUID"

(5) use code blocks to improve efficiency

For some code that is frequently input repeatedly, such as some proxy methods and layout code, managing code blocks can improve efficiency. For the variables in the code block, when setting the code block, you can set it in the format of <# variable name #>. The compiler will be able to identify the value that needs to be input next time.

5. Reference

(1) Text Programming Guide for iOS

(2) AssetsLibrary framework broken on iOS 8

(3) Network Link Conditioner

(4) XCODE7 real machine debugging problems

(5) detailed explanation of iOS development regular expressions

(6) use a regular expression to verify the email address and mobile phone number

(7) Understanding and Analyzing iOS Application Crash Reports

(8) Xcode plugin info. plist/DVTPlugInCompatibilityUUIDs

(9) dSYM File Analysis Tool

(10) Use UIBezierPath and CAShapeLayer to draw various images.