Bank iOS App template written in SwiftUI

This article provides a guide on designing a Bank iOS App using SwiftUI for iOS applications. It covers topics like working with HStack and VStack, as well as implementing dark mode support. Follow along to create a new SwiftUI project using XCode.

Bank iOS App template written in SwiftUI

Bank iOS templates written in swiftUI
Bank iOS templates
iOS app templates
iOS app template in SwiftUI

First, let’s create the required colors.
Let’s right click Assets.xcassets and create color with New Color Set. The point we should pay attention to here is Any Appearence and Dark Apperance colors. Dark mode automatically uses the Dark Apperance color on devices that are turned on.

iOS App template in SwiftUI
Bank iOS App Color Appearence

Dark Mode colors will look like this.

iOS App template
Bank iOS App Template Dark Mode appearance

It’s time for the coding parts;
Let’s create an extension. We will use the getRect() function to dynamically resize according to the dimensions of the iOS device.

import SwiftUI

extension View {
    func getRect() -> CGRect{
        return UIScreen.main.bounds
    }
}

Let’s create our views;
First, let’s create a NavigationView.

import SwiftUI

struct NavigationView: View {
    var body: some View {
        VStack {
            HStack(spacing: 10) {
                VStack(spacing: 5) {
                    Capsule()
                        .fill(Color("ColorPrimary"))
                        .frame(width: 30, height: 3)
                    Capsule()
                        .fill(Color("ColorPrimary"))
                        .frame(width: 30, height: 3)
                    Capsule()
                        .fill(Color("ColorPrimary"))
                        .frame(width: 30, height: 3)
                }
                Spacer()
                Image(systemName: "bell")
                    .foregroundColor(Color("ColorYellow"))
                Image(systemName: "text.bubble")
                    .foregroundColor(Color("ColorPrimary"))
            }
            .font(.title)
            .padding(.horizontal, 20)
            .padding(.vertical, 5)
            .overlay(
                Text("Bank App")
            )
            HStack(spacing: 0){
                Color("Color1")
                    .frame(minWidth: 0, maxWidth: .infinity)
                Color("Color2")
                    .frame(minWidth: 0, maxWidth: .infinity)
                Color("Color3")
                    .frame(minWidth: 0, maxWidth: .infinity)
                Color("Color4")
                    .frame(minWidth: 0, maxWidth: .infinity)
            }
            .frame(height:4)
        }
        .padding(.top, CGFloat(UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0))
    }
}

struct NavigationView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView()
            .previewLayout(.sizeThatFits)
    }
}

Let’s create a TopView.

import SwiftUI

struct TopView: View {
    var body: some View {
        HStack {
            HStack {
                Image(systemName: "gift")
                Text("Fırsatlarım")
            }
            .foregroundColor(Color("ColorBlue"))
            .frame(minWidth: 0, maxWidth: .infinity)
            .padding(10)
            .background(Color("ColorWhite").cornerRadius(10))
            HStack {
                Image(systemName: "rosette")
                Text("Ayın Bankalısı :)")
            }
            .foregroundColor(Color("ColorYellow"))
            .padding(10)
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color("ColorWhite").cornerRadius(10))
        }
    }
}

Let’s create an Accounts View.

import SwiftUI

struct AccountsView: View {
    var body: some View {
        VStack(spacing: 0){
            HStack {
                Text("Hesaplar")
                    .fontWeight(.semibold)
                    .foregroundColor(Color("ColorPrimary"))
                Spacer()
                Circle().foregroundColor(Color("ColorBackground"))
                    .frame(width: 40, height: 40, alignment: .center)
                    .overlay(Image(systemName: "chevron.right")
                                .foregroundColor(Color("ColorPrimary")))
                .offset(x: 18, y: -12)
            }
            .padding(.horizontal, 5)
            
            Color("ColorBackground").frame(height: 4)
            
            VStack(spacing: 10){
                HStack{
                    Text("Toplam")
                        .fontWeight(.semibold)
                    Spacer()
                    Text("19.363,97 TL")
                        .fontWeight(.semibold)
                }
                .foregroundColor(.black)
                HStack{
                    Text("Vadesiz TL")
                    Spacer()
                    Text("0,00 TL")
                }
                .foregroundColor(.black)
                HStack{
                    Text("Birikim TL")
                    Spacer()
                    Text("12.075,48 TL")
                }
                .foregroundColor(.black)
                
                HStack{
                    Spacer()
                    Circle().frame(width: 8, height: 8)
                        .foregroundColor(.black)
                    Circle().frame(width: 8, height: 8)
                        .foregroundColor(.gray.opacity(0.8))
                    Circle().frame(width: 8, height: 8)
                        .foregroundColor(.gray.opacity(0.8))
                    Circle().frame(width: 8, height: 8)
                        .foregroundColor(.gray.opacity(0.8))
                    
                    Spacer()
                }
            }
            .padding(5)
            
        }
        .background(Color("ColorWhite").cornerRadius(10))
    }
}

Let’s create a CreditCardView.

import SwiftUI

struct CreditCardView: View {
    var body: some View {
        VStack(spacing: 0){
            HStack {
                Text("Kredi Kartı")
                    .fontWeight(.semibold)
                    .foregroundColor(Color("ColorPrimary"))
                Spacer()
                Circle().foregroundColor(Color("ColorBackground"))
                    .frame(width: 40, height: 40, alignment: .center)
                    .overlay(Image(systemName: "chevron.right")
                                .foregroundColor(Color("ColorPrimary")))
                .offset(x: 18, y: -12)
            }
            .padding(.horizontal, 5)
            
            Color("ColorBackground").frame(height: 4)
            
            VStack(spacing: 10){
                HStack{
                    Text("Son eksreden kalan borç")
                    Spacer()
                    Text("0,00 TL")
                }
                .foregroundColor(.black)
                HStack{
                    Text("Son ödeme tarihi")
                    Spacer()
                    Text("05/02/2021")
                }
                .foregroundColor(.black)
                HStack(spacing:5){
                    Text("Güncel dönem borcu")
                    Circle()
                    .frame(width: 20, height: 20, alignment: .center).foregroundColor(.gray)
                        .overlay(Text("?")
                                    .foregroundColor(.white))
                    
                    Spacer()
                    Text("406,98 TL")
                }
                .foregroundColor(.black)
                HStack{
                    Text("Kullanılabilir limit")
                    Spacer()
                    Text("23.863,27 TL")
                }
                .foregroundColor(.black)
                
            }
            .padding(5)
            
        }
        .background(Color("ColorWhite").cornerRadius(10))
    }
}

Let’s create an OffersView.

import SwiftUI

struct OffersView: View {
    var body: some View {
        VStack(spacing: 0){
            HStack {
                Text("Teklifler ve başvurular")
                    .fontWeight(.semibold)
                    .foregroundColor(Color("ColorPrimary"))
                    .padding(.vertical, 10)
                Spacer()
            }
            .padding(.horizontal, 5)
            
            Color("ColorBackground").frame(height: 4)
            
            VStack(spacing: 10){
                HStack{
                    Text("İhtiyaç kredisi")
                    Spacer()
                    Text("Başvur")
                    Image(systemName: "chevron.right")
                        .foregroundColor(Color("ColorPrimary"))
                }
                .foregroundColor(.black)
                HStack{
                    Text("Kredi kartı yeni limit")
                    Spacer()
                    Text("10.000,00 TL")
                    Image(systemName: "chevron.right")
                        .foregroundColor(Color("ColorPrimary"))
                }
                .foregroundColor(.black)
                
            }
            .padding(5)
            
        }
        .background(Color("ColorWhite").cornerRadius(10))
    }
}

Let’s create the LastTransactionsView.

import SwiftUI

struct LastTransactionsView: View {
    var body: some View {
        VStack(spacing: 0){
            HStack {
                Text("Kredi Kartı")
                    .fontWeight(.semibold)
                    .foregroundColor(Color("ColorPrimary"))
                Spacer()
                Circle().foregroundColor(Color("ColorBackground"))
                    .frame(width: 40, height: 40, alignment: .center)
                    .overlay(Image(systemName: "chevron.right")
                                .foregroundColor(Color("ColorPrimary")))
                .offset(x: 18, y: -12)
            }
            .padding(.horizontal, 5)
            
            Color("ColorBackground").frame(height: 4)
            
            VStack(spacing: 10){
                VStack(alignment: .leading, spacing: 5) {
                    HStack{
                        Image(systemName: "banknote")
                        Text("Bugün")
                        Spacer()
                        Text("-1000,00 TL")
                    }
                    Text("Giden Transfer - Birikim TL hesap açılışı")
                }
                .foregroundColor(.black)
                VStack(alignment: .leading, spacing: 5) {
                    HStack{
                        Image(systemName: "banknote")
                        Text("Bugün")
                        Spacer()
                        Text("+1000,00 TL")
                    }
                    Text("Gelen Transfer - Birikim TL hesabımdan")
                }
                .foregroundColor(.black)
                
            }
            .padding(5)
            
        }
        .background(Color("ColorWhite").cornerRadius(10))
    }
}

Let’s add the Views we created to our ContentView. As a result our ContentView should look like this.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            NavigationView()
            Spacer()
            ScrollView(.vertical, showsIndicators: false, content: {
                TopView()
                    .padding(.horizontal)
                    .padding(.vertical,5)
                
                AccountsView()
                    .padding(.horizontal)
                    .padding(.vertical,5)
                
                CreditCardView()
                    .padding(.horizontal)
                    .padding(.vertical,5)
                
                OffersView()
                    .padding(.horizontal)
                    .padding(.vertical,5)
                
                LastTransactionsView()
                    .padding(.horizontal)
                    .padding(.vertical,5)
            })
        }
        .background(Color("ColorBackground").ignoresSafeArea())
        .edgesIgnoringSafeArea(.top)
    }
}

You can find the finished project here.

Download

Bank iOS App Template

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *