Giter VIP home page Giter VIP logo

creating-adaptive-interfaces's Introduction

Creating Adaptive Interfcae in the Interface Builder

Task 1

Walkthrough on YouTube

  • Create authorization screen

  • The source project has a Do not change folder, the files need no change.

  • In the AppDelegate there is a RoundViewExtension, which adds to any object of this or a child class the ability to draw a frame as a circle with specified color and line thickness. The radius of the circle is half the smallest size of the view (width or height), and the center of the circle is the same as the center of the view itself.

  • RoundButton is a child class of UIButton, which creates a "round" button according to the algorithm described above. The color of the frame is darkText, and the thickness of the frame is 1pt. This class is used as a Custom Class in Interface Builder to create a keyboard button in the first task.

  • RoundView, a child class of UIView, creates a "round" view with the same parameters. Use this class in Interface Builder to create a view that displays the number of characters entered in the first task.

  • The application should support both portrait and landscape orientations.

  • The view showing the number of characters entered, the Enter passcode text and the center column of the numeric keypad (buttons 2, 5, 8, 0 in portrait orientation or buttons 3, 8 in landscape orientation) must be centered horizontally.

  • The digit 5 in portrait orientation must be vertically shifted upward from the center of the screen by 36pt.

  • The number 3 in landscape orientation should be vertically offset upward from the center of the screen by 25pt.

  • Enter Passcode text - System font 17, color - black, text alignment - center, number of lines - 1.

  • Delete - System font 25, color - black.

  • Numeric keypad items - System font 45, color - dark text.

  • All other parameters (colors, fonts, etc.) are default.

Screens

Task 2

Walkthrough on YouTube

  • Create a music playing screen

  • The UIImageView to display the photo must have an aspect ratio of 1:1 and contentMode = scaleAspectFill.

  • The UIImageView must be centered horizontally with respect to the main view (for portrait orientation)

  • ProgressView and UISlider must have slider start values equal to 0.5.

  • The UILabel displaying the band name and song should have System font 22, weight - medium, color - black, text alignment - center, number of lines - 1.

  • The name label is centered horizontally with respect to the main view (for portrait orientation).

  • The distance between the title label and ProgressView must be the same as the distance between the label and the UISlider.

  • All other parameters (colors, fonts, etc.) are default.

Screens

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.