Implement a Custom Control In this lesson, you’ll implement a custom rating control for the FoodTracker app, and add it to the scene. Learning Objectives At the end of the lesson, you’ll be able to: • Create and associate custom source code files with elements in a storyboard • Define a custom class • Implement an initializer on a custom class • Use UIStackView as a container • Understand how to create views programmatically • Add accessibility information to a custom control • Work with @IBInspectable and @IBDesignable to display and control a custom view in Interface Builder Create a Custom View To be able to rate a meal, users need a that lets them select the number of stars they want to assign to the meal. There are many ways to implement this, but this lesson focuses on a straightforward approach, building a custom control by combining existing views and controls. You’ll create a stack view subclass that manages a row of buttons representing the stars. You’ll define your custom control entirely in code, and then add it to your. The rating control appears as a row of stars. Users can choose a rating for a meal.

When a user taps a star, that star and the stars preceding it are filled in. If the user taps the rightmost filled in star (the star associated with the current rating), the rating is cleared and all stars are displayed as empty.

Download half, rating, star icon in.PNG or.ICO format. Icon designed by Iconlicious found in the icon set Corner Stone.

To begin designing the, interaction, and behavior of this control, start by creating a custom stack view ( UIStackView). To create a subclass of UIStackView • Choose File >New >File (or press Command-N). • At the top of the dialog that appears, select iOS. • Select Cocoa Touch Class, and click Next.

• In the Class field, type RatingControl. • In the “Subclass of” field, select UIStackView. • Make sure the Language option is set to Swift. • Click Next. The save location defaults to your project directory. The Group option defaults to your app name, FoodTracker. In the Targets section, your app is selected and the tests for your app are unselected.

• Leave these defaults as they are, and click Create. Xcode creates a file that defines the RatingControl class: RatingControl.swift. RatingControl is a custom view subclass of UIView.

• If necessary, in the Project navigator, drag the RatingControl.swift file so that it’s positioned under the other Swift files. • In RatingControl.swift, delete the comments that come with the template so you can start working with a blank slate. The implementation should look like this. Note Swift handles initializers differently than other methods. If you don’t provide any initializers, Swift classes automatically inherit all of their super class’s designated initializers. If you implement any initializers, you not longer inherit any of the superclasses initializers; however, the superclass can mark one or more of its initializers as required.

The subclass must implement (or automatically inherit) all of the required initializers. Furthermore, the subclass must mark their initializers as required, indicating that their subclasses must also implement the initializers. • Add this line to call the superclass’s initializer. • // Create the button • let button = UIButton() • button. BackgroundColor = UIColor. Red Here, you are using one of the UIButton class’s convenience initializers. Download Lagu Kaulah Ibuku Farhan.

This initializer calls init(frame:) and passes in a zero-sized rectangle. Starting with a zero-sized button is fine, because you’re using Auto Layout. The stack view will automatically define the button’s position, and you will add constraints to define the button’s size.

You are using red so it’s easy to see where the view is. If you’d like, use one of the other predefined UIColor values instead, like blue or green. • Below the last line, add the button’s constraints. • // Add constraints • button. TranslatesAutoresizingMaskIntoConstraints = false • button. Constraint( equalToConstant: 44.0).

IsActive = true • button. Constraint( equalToConstant: 44.0). IsActive = true The first line of code disables the button’s automatically generated constraints. When you programmatically instantiate a view, its translatesAutoresizingMaskIntoConstraints property defaults to true. This tells the layout engine to create constraints that define the view’s size and position based on the view’s frame and autoresizingmask properties.

Typically, when you are using Auto Layout, you want to replace these autogenerated constraints with your own. To remove the autogenerated constraints, set the translatesAutoresizingMaskIntoConstraints property to false. Note This line is not strictly necessary. When you add a view to a stack view, the stack view automatically sets the view’s translatesAutoresizingMaskIntoConstraints property to false.

However, when using Auto Layout, it’s a good habit to explicitly disable the autogenerated constraints whenever you programmatically create a view. That way you won’t accidentally forget to disable them when it actually matters. The lines starting with button.heightAnchor and button.widthAnchor create the constraints that define the button’s height and width. Each line performs the following steps: • The button’s heightAnchor and widthAnchor properties give access to layout anchors. You use layout anchors to create constraints—in this case, constraints that define the view’s height and width, respectively. • The anchor’s constraint(equalToConstant:) method returns a constraint that defines a constant height or width for the view.

• The constraint’s isActive property activates or deactivates the constraint. When you set this property to true, the system adds the constraint to the correct view, and activates it. Together, these lines define the button as a fixed-size object in your layout (44 point x 44 point). • Finally, add the button to the stack. • // Setup the button action • button. AddTarget( self, action: #selector( RatingControl.

RatingButtonTapped( button:)), for:. TouchUpInside) In the previous lesson, you used the target-action pattern to link elements in your storyboard to action methods in your code. The addTarget(_, action:, for:) method does the same thing in code.

You’re attaching the ratingButtonTapped(_:) action method to the button object, which will be triggered whenever the.TouchDown event occurs. There’s a lot going on in this code. Here’s a breakdown: • The target is self, which refers to the current instance of the enclosing class.

In this case, it refers to the RatingControl object that is setting up the buttons. • The #selector expression returns the Selector value for the provided method.

A selector is an opaque value that identifies the method. Older APIs used selectors to dynamically invoke methods at runtime.

While newer APIs have largely replaced selectors with blocks, many methods—like performSelector(_:) and addTarget(_:action:forControlEvents:)—still take selectors as arguments. In this example, the #selector(RatingControl.ratingButtonTapped(_:)) expression returns the selector for your ratingButtonTapped(_:) action method. This lets the system call your action method when the button is tapped. • The UIControlEvents option set defines a number of events that controls can respond to. Typically buttons respond to the.touchUpInside event. This occurs when the user touches the button, and then lifts their finger while the finger is still within the button’s bounds.

This event has an advantage over.touchDown, because the user can cancel the event by dragging their finger outside the button before lifting it. • Note that because you’re not using Interface Builder, you don’t need to define your action method with the IBAction attribute; you just define the action like any other method. You can use a method that takes no arguments, that takes a single sender argument, or that takes both a sender and an event argument. • //MARK: Properties • private var ratingButtons = [ UIButton]() • • var rating = 0 This creates two properties. The first is a property that contains the list of buttons. You don’t want to let anything outside the RatingControl class access these buttons; therefore, you declare them as private. The Second property contains the control’s rating.

You need to be able to both read and write this value from outside this class. By leaving it as internal access (the default), you can access it from any other class inside the app. Right now, you have one button in the view, but you need five total. To create a total of five buttons, use a for- in loop.

A for- in loop iterates over a sequence, such as ranges of numbers, to execute a set of code multiple times. Instead of creating one button, the loop will create five. To create a total of five buttons • In RatingControl.swift, find the setupButtons() method, and add a for- in loop around the method’s contents, like this. • @IBDesignable class RatingControl: UIStackView { • Rebuild the project by typing Command-B (or choosing Product >Build). • Open Main.storyboard. Once the build completes, the storyboard shows a live view of your rating control. Notice that the canvas now correctly sizes and places your RatingControl view.

As a result, the warnings and errors are now gone. Interface Builder can do more than just display your custom view. You can also specify properties that can then be set in the Attributes inspector.

Add the @IBInspectable attribute to the desired properties. Interface Builder supports the inspection of basic types (and their corresponding optionals), including: Booleans, numbers, strings, as well as CGRect, CGSize, CGPoint, and UIColor. To add inspectable properties • In RatingControl.swift, add the following properties to the bottom of the //MARK: Properties section. • @IBInspectable var starSize: CGSize = CGSize( width: 44.0, height: 44.0) • @IBInspectable var starCount: Int = 5 These lines define the size of your buttons and the number of buttons in your control. • Now you need to use these values. Locate the setupButtons() method, and make the following changes: • In the for- in declaration, change 5 to starCount.

• In the button.heightAnchor. Free Download Duplicate File Remover Crack more. constraint() method call, change 44.0 to starSize.height. • In the button.widthAnchor.constraint() method call, change 44.0 to starSize.width.

The method should appear as shown below. Note Ripping out and replacing all of the buttons is not necessarily the best idea from a performance standpoint. However, the didSet observers should only be called by Interface Builder at design time. When the app is running, the setupButtons() method is only called once, when the control is first loaded from the storyboard. Therefore, there’s no need to create a more-complex solution to update the existing buttons in place.

Checkpoint: Open Main.storyboard and select the RatingControl object. Try changing the Star Size and Star Count attributes. The control in the canvas should change to match the new settings. Run the app, and you should see the changes in the simulator.

Be sure to reset these settings to their default values when you are done testing them. Explore Further For more information on working with custom views, see Lay out user interfaces >Add objects and media >Render custom views in Xcode help. Add Star Images to the Buttons Next, you’ll add images of an empty, filled, and highlighted star to the buttons. You can find the star images used in this lesson in the Images/ folder of the complete project file at the end of this lesson, or use your own images. (Make sure the names of the images you use match the image names in the code later.) To add images to your project • In the, select Assets.xcassets to view the asset catalog.

Recall that the is a place to store and organize your image assets for an app. • In the bottom left corner, click the plus ( +) button and choose New Folder from the pop-up menu.

• Double-click the folder name and rename it Rating Images. • With the folder selected, in the bottom left corner, click the plus ( +) button and choose New Image Set from the pop-up menu.

An image set represents a single image asset, but can contain different versions of the image to display at different screen resolutions. • Double-click the image set name and rename it emptyStar. • On your computer, select the empty star image you want to add. • Drag and drop the image into the 2x slot in the image set. 2x is the display resolution for iPhone 7 Simulator that you’re using in these lessons, so the image will look best at this resolution.

• In the bottom left corner, click the plus ( +) button and choose New Image Set from the pop-up menu. • Double-click the image set name and rename it filledStar.

• On your computer, select the filled-in star image you want to add. • Drag and drop the image into the 2x slot in the image set. • In the bottom left corner, click the plus ( +) button and choose New Image Set from the pop-up menu. • Double-click the image set name and rename it highlightedStar. • On your computer, select the filled-in star image you want to add. • Drag and drop the image into the 2x slot in the image set.

Your Rating images folder should now contain all three star images. Next, write the code to set the appropriate image for a button at the right time. To set star images for the buttons • In RatingControl.swift, navigate to the setupButtons() method, and add this code just above the for- in loop that creates the buttons. • // Load Button Images • let bundle = Bundle( for: type( of: self)) • let filledStar = UIImage( named: 'filledStar', in: bundle, compatibleWith: self. TraitCollection) • let emptyStar = UIImage( named: 'emptyStar', in: bundle, compatibleWith: self.

TraitCollection) • let highlightedStar = UIImage( named: 'highlightedStar', in: bundle, compatibleWith: self. TraitCollection) These lines load the star images from the assets catalog.

Note that the assets catalog is located in the app’s main bundle. This means that the app can load the images using the shorter UIImage(named:) method.

However, because the control is @IBDesignable, the setup code also needs to run in Interface Builder. For the images to load properly in Interface Builder, you must explicitly specify the catalog’s bundle. This ensures that the system can find and load the image.

• Find the line that sets the background color ( button.backgroundColor = UIColor.redColor()) and replace it with the following. • // Set the button images • button. SetImage( emptyStar, for:. Normal) • button. SetImage( filledStar, for:. Selected) • button.

SetImage( highlightedStar, for:. Highlighted) • button. SetImage( highlightedStar, for: [. Selected]) Buttons have five different states: normal, highlighted, focused, selected, and disabled.

By default, the button modifies its appearance based on its state, for example a disabled button appears grayed out. A button can be in more than one state at the same time, such as when a button is both disabled and highlighted. Buttons always start in the normal state (not highlighted, selected, focused, or disabled). A button is highlighted whenever the user touches it. You can also programmatically set a button to be selected or disabled.

The focused state is used by focus-based interfaces, like Apple TV. In the code above, you are telling the button to use the empty star image for the normal state.

This is the button’s default image. The system uses this image (possibly with an added effect) whenever a state or combination of states doesn’t have an image of their own. Next, the code above sets the filled image for the selected state.

If you programmatically set the button as selected, it will change from the empty star to the filled star. Finally, you set the highlighted image for both the highlighted and the selected and highlighted states. When the user touches the button, whether or not it is selected, the system will show the highlighted button image. Your setupButtons() method should look like this.