Making an Interactive Card based UI using Swift (Part 2 / 2)

In the first part of this tutorial we set up the view controller and created a Glide class where we wrote code regarding segmentation, calculated the segmentation heights and implemented the pan gesture recognizer. In this part we will do the following things:

  1. Implement animations from one state to another.
  2. Animate alpha value with user’s swipe.
  3. Figure out a way to detect scrollViews inside the card view controller and handle the scroll view’s pan gesture and the card’s panGesture which we have implemented previously.

Continue reading “Making an Interactive Card based UI using Swift (Part 2 / 2)”

Making an Interactive Card based UI using Swift (Part 1/2)


Most apps nowadays use this card based UI to pop up information or show an action menu etc. Twitter, Instagram, Facebook all are using some sort of a multi-state, interactive, gesture based card flow to show information to users. I have always been intrigued by such a design element and thought I should try building one from scratch.

While building this, I also wanted to make sure that I make this in such a way that people could use it. As in if I ever want to release this as a framework, I could easily do it. So while I have not released this project as a framework, I have tried to code it in such a way to practice framework building skills and make it reusable.

The entire project is available on my Github here.

THE IDEA:

The whole project revolved around how reusable, and quickly a user can set up a card UI. There were few principles that this project had to follow:

  1. Make sure that the configuration and set up is quick.
  2. User should get two options. Segmented(multi states) or non segmented(dual states). (more on this later)
  3. Granular control over card visible height for each state.
  4. The gestures need to be smooth and intuitive / animating the background alpha values as well.
  5. The ability to show the card floating at the bottom as a closed state. (Something we see in Maps app, Uber etc)
  6. The ability to detect a scrollView inside the controller and switch between scrollView & Pan Gesture recognizer at right times.

Continue reading “Making an Interactive Card based UI using Swift (Part 1/2)”

Solving Min Stack Problem using Swift

It’s been a while since I last posted an article on an algorithm and data structure problem. This time I decided to solve the Min Stack problem. In Min Stack you need to find the minimum element inside a stack in constant time. An alternate question is Max Stack where you have to find the maximum element in a stack. Both are pretty similar conceptually.

The problem explicitly states that each stack method should run at constant time – O(1).

This is the problem statement:

Design a stack that supports push, pop, top, and retrieving the minimum element in constant time.

  • push(x) — Push element x onto stack.
  • pop() — Removes the element on top of the stack.
  • top() — Get the top element.
  • getMin() — Retrieve the minimum element in the stack.

Before continuing, make sure you try this problem yourself.

Continue reading “Solving Min Stack Problem using Swift”

Getting started with FaceID/TouchID and LocalAuthentication using Swift

Since 2013, all iPhones have been launched with some sort of biometric sensors. From iPhone 5s to iPhone 8, Apple embedded a Touch ID sensor in the home button and from iPhone X onwards they started using Face ID to detect user’s face before unlocking the device.

Apple provides APIs for developers to use these security features in their apps as well. Today I will talk about how to go about setting up biometric security features in your iOS app.

Continue reading “Getting started with FaceID/TouchID and LocalAuthentication using Swift”

WWDC Guide – Traveling, lodging, Scholarship orientation & lots more! (Part 2)

WWDC2019 scholarship results were announced earlier this week and I would like to congratulate everyone who got selected 🎉. For those who were unable to get the scholarship, don’t stress out and continue working, grinding and learning. Make sure to try next year.

This is going to be part 2 of WWDC series where I will talk about the traveling, lodging, other events that are going on along side WWDC in San Jose,  and more.

As you may tell from my Instagram, I love traveling. So let’s talk about it! ✈️

Continue reading “WWDC Guide – Traveling, lodging, Scholarship orientation & lots more! (Part 2)”

Making a Tinder-esque Card Swiping interface using Swift

 

Tinder – we all know that dating app where you can just reject or accept someone by swiping right or left. BAM! The whole card swiping idea is now used in tons of apps. It’s a way to show data if you have grown tired of using table views and collection views. There are tons of tutorial on this and this project took me good bit of time.

You can check out the full project on my Github.

First of all, I would like to give credit to Phill Farrugia’s medium post on this and then Big Mountain Studio’s YouTube series on a similar topic. So how do we go about making this interface. I got quite a lot of help from Phill’s medium post on this front. Basically the idea is to create UIViews and insert them as subviews in a container view. Then using the index we will give each UIView some horizontal and vertical inset and tweak its width a bit. Then when we swipe away one card, all the views frames will be rearranged according to the new index value.

Continue reading “Making a Tinder-esque Card Swiping interface using Swift”

My WWDC18 Scholarship Project (Part 1)

Apple just announced WWDC 2019 and I couldn’t be more excited. WWDC is an experience of a lifetime. As an iOS developer and someone who loves software, WWDC gave me a platform to meet and interact with creative and bright developers from around the globe. I learned so many new software tips and concepts from Apple engineers; and it further motivated me to design and create apps for iPhones and iPads.

In this first of two parts series regarding WWDC, I will be talking about my last year’s scholarship submission, how I made it and some useful tips for anyone looking to create Swift Playground for this year’s scholarship. The second part will be all about traveling + packing, lodging, and events that take place around San Jose during WWDC week and all the non technical stuff.

Continue reading “My WWDC18 Scholarship Project (Part 1)”

Creating Pull to Dismiss / Pull to Reach animation using Swift

One of my most used app on my iPhone is Bear app. It’s a beautiful and simple notes-taking app with tons of neat UI / UX features. One of which is being able to pull down on a scroll view to dismiss a view or select a button. As phones are getting taller, buttons on the top navigation bar are getting difficult to access using just one hand. Such gestures help users access these buttons just by swiping down or scrolling down on a scroll view which is embedded in collection view or tableviews by default.

Not only accessing navigation items, you can dismiss views containing scroll views by similar gestures. I decided to create such an animation and in this post I will take you through the entire process of analyzing the animation and then building it from scratch.

Complete project is available on GitHub. I have also incorporated protocol / delegate so that I can communicate between the pop up view and the controller. More on this later.

The project also contains some code through which I am setting up the view controller, applying dark view on the background and animating the pop up view as the user taps on the “Action” button in the top navigation bar. We are going to dismiss this view by using scroll view which is embedded in that view.

I am creating the pop up view in a separate file that goes by the name of ActionMenu. I have wrapped it in a NSObject subclass. The entire animation of the pop up view appearing from the bottom of the screen, creating the UI components and the entire code for this particular animation is written in this NSObject class file. Through the use of encapsulation, we are creating an instance of this class in the view controller and calling the configureActionMenu() and showActionMenu() functions when the “Action” button is tapped.

Continue reading “Creating Pull to Dismiss / Pull to Reach animation using Swift”

Using UIStackView & Custom UIButton Class to add buttons to TwitterCard Interface (Part 2)

In last week’s post, we created the Twitter card interface and used UIPanGestureRecognizers to drag and dismiss the card. In this article we will take a look at how to set up buttons on the card view.

There are many ways to set up UIButtons in a vertical stack – you can simply use auto layout and individually set up constraints for each button. However, if you notice there are 8 buttons that we need to lay out and setting up constraints for each button will be a pretty tedious task.

UIStackView helps in laying out UI components. It does most of the auto layout stuff itself, so if you want the card to show buttons in both portrait and landscape orientation, the UIStackView will help you in making sure that all the buttons are perfectly visible in both orientations.

Continue reading “Using UIStackView & Custom UIButton Class to add buttons to TwitterCard Interface (Part 2)”

How to create Twitter card-like menu using Swift (Part 1)

Let’s create this Twitter card-like menu interface that you can invoke by tapping on the three dots on the top right hand cornerwhen you visit someone’s profile.  The initial setup is simple by creating a custom UIView which you can populate with buttons or a table view or whatever you want. I will go over that bit some day later. The main topic of discussion will be the gesture and dragging.

Continue reading “How to create Twitter card-like menu using Swift (Part 1)”