Swift Card Ui Design

Question

I am just wondering what are a component to make a Ui design card for ios apps? cause I saw a lot of these cool card design on pinterest and I was wondering how to make it. Like what are the component to make such a design.

I surf the web and found that mostly they using the new SwiftUI to make that kinda design, but i was wondering is there any possible way to make it with just a regular Storyboard? and i still don't get it the component like is it using button that custom design with Xib or it using regular tableview or what?

If there's any good Library from cocoapods I would like to know either.

this is the type of card design that I want to ask :

[

also there's a link of the kinda same design as well that I saw from pinterest :

https://pin.it/694Q8hb

If anyone knows how to make this with a standard Storyboard, like what the components are and maybe if there are any libraries from cocoapods please let me know okay, cause i wanna make this type of design for my thesis, which I'm already half way of development and I just want to make a good design, and I think this card design type looks perfect on my apps. Cheers Guys :)

Answer 1

I am Giving you the view hierarchy I hope you understand it.

Addressing First Screen from first Pic

• View
• TableView
• Section 1 : User Profile
• Section 2 : Bucket
  • TableViewCell.xib
    • Header
    • CollectionView
    • CollectionViewCell1.xib
• Section 3 : Shots
  • TableViewCell.xib
    • Header
    • CollectionView
    • CollectionViewCell2.xib

Addressing the Second Screen from first pic

• View
• CollectionView for Options (change tableview datasource on didSelectItem)
• TableView
  • TableViewCell.xib

Addressing Screen from Second pic

• View
  • TableView
    • Header
    • TableViewCell
      • Label
      • CollectionView
        • CollectionViewCell

Answer 2

This can be done pretty easily in SwiftUI. You can use a VStack (or LazyVStack or LazyVGrid) to set up the list view (much easier than TableViews) and then make a custom, reusable view that looks like one of the views and set it as the Label in a Button. Here's some code (simplified) to get you started:

import SwiftUI

struct CustomView: View {
    var body: some View {
        VStack {
            Button(action: {
                print("First button pressed")
            }, label: {
                CustomRowView(buttonTitle: "First Button")
            })
            
            Button(action: {
                print("Second button pressed")
            }, label: {
                CustomRowView(buttonTitle: "Second Button")
            })
            
            Button(action: {
                print("Third button pressed")
            }, label: {
                CustomRowView(buttonTitle: "Third Button")
            })

            
            Spacer()
        }
        .padding()
    }
}

struct CustomRowView: View {
    
    @State var buttonTitle: String
    
    var body: some View {
        Text(buttonTitle)
            .frame(maxWidth: .infinity)
            .foregroundColor(.white)
            .padding(.vertical, 40)
            .background(Color.blue)
            .cornerRadius(12)
    }
}


struct CustomViewsz_Previews: PreviewProvider {
    static var previews: some View {
        CustomView()
    }
}

Answer 3

The easiest way to get the look from those images is a UIView with:

• A custom background
• Set the corner radius with view.layer.cornerRadius
• A shadow effect
• UILabels and UIImageViews as children views
• Probably a custom touchesBegan and touchesEnded implementation to make it behave like a button.

The views can be contained in a tableview, removing the custom dividers and stuff.

Also: Code reuse is your friend! Put these specifications in a reusable class that you can reuse whenever you need that design.