Material Design Components for iOS

Overview

Material design is created by team of engineers and UX designers at Google.
MDC provides attractive and functional UI components and is available for Android, iOS, Web and Flutters.
Material design is system for building beautiful apps in iOS(swift) by using Material components.
Material components for iOS(MDC-IOS) creates consistency between apps & websites.

Installation of Material Components in Project

Installation with cocoapods

Add the following to your pod file.
pod ‘MaterialComponents
Then run the following command
pod install
Importing
Then import the Material components.
For ex. import MaterialComponents.MaterialBottomAppBar

List of Useful Material Components(MDC)

  1. Buttons
  2. Textfield
  3. Chip view
  4. Bottom view
  5. Snack bar(Bottom toast)
  6. Tab bar
  7. Slider
  8. Spinner(Loader)
  9. Highlighted view
  10. Page control

1. Buttons

  • There are three types of button in Material components.
  • Flat, raised and floating button.
  • All buttons show ink splashes when user interacts with the button.
  • You can set elevation for particular control state of button.
  • Floating action button can be animated using collapse and expand method.

material_design_image3

2. TextField

  • There are two main types of Text Fields in material components.
  • MDCTextfield and MDCMultilineTextField.
  • MDCTextfield is used for single line text input and MDCMultilineTextField for multiline text input.
  • We have to add textfield in ‘MDCTextInputControllerUnderline(textInput:)’ as text input for floating placeholder and underline.

3. Chip View

  • There are two main types of chip view: Action chips and Choice chips.
  • Action chip offer action related to primary content. You can change UI according to action.
  • Choice chips allow selection from multiple chips.
  • Choice chips clearly indicate exact position and display options in a compact area.
  • You can use chips as toggle, radio button and single selection menu by customizing chip view.

material_design_image2

4. BottomView

  • Bottom View works much like a UITabBar and both are populated with an array of UITabBarItems.
  • It is to be suggested that at most three to five bar items are to be used.
  • User can add title as well as image in BottomView.

material_design_image4

5. SnackBar

  • Snackbars provide brief feedback about an operation through a message at the bottom of the screen.
  • It shows up normal readable text upto two lines.
  • Pop ups only contains text action.

material_design_image1

6. TabBar

  • These tabs act like bar buttons, used to navigate between Screens.
  • On the selected tab user is redirected to related Subject Content.
  • It works on the behaviour of MDCTabBar that communicates via a delegate.

material_design_image7

7. Slider

  • MDCSlider is a third party control used to propagate between range or discrete set of values.
  • The current slider height is set to 27pt, to make enough space so that touches don’t affect other elements.
  • Discrete sliders shows value indicator by set numberOfDiscreteValues property.

material_design_image5

8. Spinner(Loader)

  • Material Design allows user to display a loading indicator with multi color support.
  • User can use two styles of indicator :- linear and circular
  • It has a property to set multiple colors, i.e cycleColors which allow to add colors property.

material_design_image9

9. Highlighted View

  • The Highlight view component is a way to visually highlight a part of the screen in order to introduce users to new features and functionality.
  • Through this you can highlight a view, and at a time display another view with different animations.
  • For example :- Switching the main view with highlighted view.

material_design_image8

10. Page Control

  • MDCPageControl is designed in replacement of Native UIPageControl
  • MDCPageControl shows current page index, with its positioned indicator.
  • As the user scroll the page, the indicator in MDCPageControl navigates it’s indicator towards the next indicator position that is being scrolled towards.

material_design_image6

Advantages and Disadvantages of Material Design and Material components(MDC) for iOS

Advantages:

  • Material design are minimalistic and stylish as compared to native components of iOS.
  • More intuitive and Material design is great both for experienced users and new users.
  • Material components looks Moderately skeuomorphic.
  • Material components uses animation so animations help users grasp the UI better.

Disadvantages:

  • Owned by google so it will be hard to improve something that you are not satisfied with without asking the proprietor.
  • Material components may take long time to implement compared to native iOS components.
  • Motion can be very energy-consuming.
mm

Harshad Nayak iOS Developer

I am Harshad Nayak, iOS Developer at Yudiz Solutions Pvt. Ltd. - leading iPhone App development company. I am a tech savvy Guy. Passionate about Singing, Cricket and Chess.

Comments are closed.

Top