Build your first basic Android game in just 7 minutes (with Unity)

Making a fully working game for Android is much easier than you might think. The key to successful Android development— or any kind of development— is to know what you want to achieve and find the necessary tools and skills to do it. Take the path of least resistance and have a clear goal in mind.

When it comes to creating games, the best tool in my opinion is Unity. Yes, you can make a game in Android Studio, but unless you’re experienced with Java and the Android SDK it will be an uphill struggle. You’ll need to understand what classes do. You’ll need to use custom views. You’ll be relying on some additional libraries. The list goes on.

Unity is a highly professional tool that powers the vast majority of the biggest selling titles on the Play Store.

Unity on the other hand does most of the work for you. This is a game engine, meaning that all the physics and many of the other features you might want to use are already taken care of. It’s cross platform and it’s designed to be very beginner-friendly for hobbyists and indie developers.

At the same time, Unity is a highly professional tool that powers the vast majority of the biggest selling titles on the Play Store. There are no limitations here and no good reason to make life harder for yourself. It’s free, too!

01.png

To demonstrate just how easy game development with Unity is, I’m going to show you how to make your first Android game in just 7 minutes.

No – I’m not going to explain how to do it in 7 minutes. I’m going to do it in 7 minutes. If you follow along too, you’ll be able to do the precise same thing!

Disclaimer: before we get started, I just want to point out that I’m slightly cheating. While the process of making the game will take 7 minutes, that presumes you’ve already installed Unity and gotten everything set up. But I won’t leave you hanging: you can find a full tutorial on how to do that over at Android Authority.

 

Adding sprites and physics

Start by double clicking on Unity to launch it. Even the longest journey starts with a single step.

Now create a new project and make sure you choose ‘2D’. Once you’re in, you’ll be greeted with a few different windows. These do stuff. We don’t have time to explain, so just follow my directions and you’ll pick it up as we go.

The first thing you’ll want to do is to create a sprite to be your character. The easiest way to do that is to draw a square. We’re going to give it a couple of eyes. If you want to be even faster still, you can just grab a sprite you like from somewhere.

02.png

Save this sprite and then just drag and drop it into your ‘scene’ by placing it in the biggest window. You’ll notice that it also pops up on the left in the ‘hierarchy’.

Now we want to create some platforms. Again, we’re going to make do with a simple square and we’ll be able to resize this freehand to make walls, platforms and what have you.

03.png

There we go, beautiful. Drop it in the same way you just did.

We already have something that looks like a ‘game’. Click play and you should see a static scene for now.

We can change that by clicking on our player sprite and looking over to the right to the window called the ‘inspector’. This is where we change properties for our GameObjects.

Choose ‘Add Component’ and then choose ‘Physics 2D > RigidBody2D’. You’ve just added physics to your player! This would be incredibly difficult for us to do on our own and really highlights the usefulness of Unity.

04.png

We also want to fix our orientation to prevent the character spinning and freewheeling around. Find ‘constraints’ in the inspector with the player selected and tick the box to freeze rotation Z. Now click play again and you should find your player now drops from the sky to his infinite doom.

Take a moment to reflect on just how easy this was: simply by applying this script called ‘RigidBody2D’ we have fully functional physics. Were we to apply the same script to a round shape, it would also roll and even bounce. Imagine coding that yourself and how involved that would be!

To stop our character falling through the floor, you’ll need to add a collider. This is basically the solid outline of a shape. To apply that, choose your player, click ‘Add Component’ and this time select ‘Physics 2D > BoxCollider2D’.

Take a moment to reflect on just how easy this was: simply by applying this script called ‘RigidBody2D’ we have fully functional physics.

Do the precise same thing with the platform, click play and then your character should drop onto the solid ground. Easy!

One more thing: to make sure that the camera follows our player whether they’re falling or moving, we want to drag the camera object that’s in the scene (this was created when you started the new project) on top of the player. Now in the hierarchy (the list of GameObjects on the left) you’re going to drag the camera so that it is indented underneath the player. The camera is now a ‘child’ of the Player GameObject, meaning that when the player moves, so too will the camera.

 

Your first script

We’re going to make a basic infinite runner and that means our character should move right across the screen until they hit an obstacle. For that, we need a script. So right click in the Assets folder down the bottom and create a new folder called ‘Scripts’. Now right click again and choose ‘Create > C# Script’. Call it ‘PlayerControls’.

05.png

For the most part the scripts we create will define specific behaviors for our GameObjects.

Now double click on your new script and it will open up in Visual Studio if you set everything up correctly.

There’s already some code here, which is ‘boiler plate code’. That means that it’s code that you will need to use in nearly every script, so its ready-populated for you to save time. Now we’ll add a new object with this line above void Start():

06.JPG

Then place this next line of code within the Start() method to find the rigidbody. This basically tells Unity to locate the physics attached to the GameObject that this script will be associated with (our player of course). Start() is a method that is executed as soon as a new object or script is created. Locate the physics object:

XMLSELECT ALL

XMLSELECT ALL

rb = GetComponent<Rigidbody2D>();

Add this inside Update():

JAVASELECT ALL

JAVASELECT ALL

rb.velocity = new Vector2(3, rb.velocity.y);

Update() refreshes repeatedly and so any code in here will run over and over again until the object is destroyed. This all says that we want our rigidbody to have a new vector with the same speed on the y axis (rb.velocity.y) but with the speed of ‘3’ on the horizontal axis. As you progress, you’ll probably use ‘FixedUpdate()’ in future.

Save that and go back to Unity. Click your player character and then in the inspector select Add Component > Scripts and then your new script. Click play, and boom! Your character should now move towards the edge of the ledge like a lemming.

Note: If any of this sounds confusing, just watch the video to see it all being done – it’ll help!

 

Very basic player input

If we want to add a jump feature, we can do this very simply with just one additional bit of code:

JAVASELECT ALL

JAVASELECT ALL

if (Input.GetMouseButtonDown(0))  {
         rb.velocity = new Vector2(rb.velocity.x, 5);
         }

This goes inside the Update method and it says that ‘if the player clicks’ then add velocity on the y axis (with the value 5). When we use if, anything that follows inside the brackets is used as a kind of true or false test. If the logic inside said brackets is true, then the code in the following curly brackets will run. In this case, if the player clicks the mouse, the velocity is added.

Android reads the left mouse click as tapping anywhere on the screen! So now your game has basic tap controls.

 

Finding your footing

This is basically enough to make a Flappy Birds clone. Throw in some obstacles and learn how to destroy the player when it touches them. Add a score on top of that.

If you get this down, no challenge will be too great in future

But we have a little more time so we can get more ambitious and make an infinite runner type game instead. The only thing wrong with what we have at the moment is that tapping jump will jump even when the player isn’t touching the floor, so it can essentially fly.

07.png

Remedying this gets a little more complex but this is about as hard as Unity gets. If you get this down, no challenge will be too great in future.

Add the following code to your script above the Update() method:

CPPSELECT ALL

CPPSELECT ALL

public Transform groundCheck;
public Transform startPosition;
public float groundCheckRadius;
public LayerMask whatIsGround;
private bool onGround;

Add this line to the Update method above the if statement:

SELECT ALL

SELECT ALL

onGround = Physics2D.OverlapCircle(groundCheck.position, groundCheckRadius, whatIsGround);

Finally, change the following line so that it includes && onGround:

JAVASELECT ALL

JAVASELECT ALL

if (Input.GetMouseButtonDown(0) && onGround) {

The entire thing should look like this:

CSSELECT ALL

CSSELECT ALL

public class PlayerControls : MonoBehaviour
 {
     public Rigidbody2D rb;
     public Transform groundCheck;
     public Transform startPosition;
     public float groundCheckRadius;
     public LayerMask whatIsGround;
     private bool onGround;

void Start() {
     rb = GetComponent<Rigidbody2D>();
     }

    void Update() {
         rb.velocity = new Vector2(3, rb.velocity.y);
         onGround = Physics2D.OverlapCircle(groundCheck.position, groundCheckRadius, whatIsGround);        
         if (Input.GetMouseButtonDown(0) && onGround) {
                 rb.velocity = new Vector2(rb.velocity.x, 5);
                 }

    }

}

What we’re doing here is creating a new transform – a position in space – then we’re setting its radius and asking if it is overlapping a layer called ground. We’re then changing the value of the Boolean (which can be true or false) depending on whether or not that’s the case.

So, onGround is true if the transform called groundCheck is overlapping the layer ground.

If you click save and then head back to Unity, you should now see that you have more options available in your inspector when you select the player. These public variables can be seen from within Unity itself and that means that we can set them however we like.

08.png

Right-click in the hierarchy over on the left to create a new empty object and then drag it so that it’s just underneath the player in the Scene window where you want to detect the floor. Rename the object ‘Check Ground’ and then make it a child of the player just as you did with the camera. Now it should follow the player, checking the floor underneath as it does.

Select the player again and, in the inspector, drag the new Check Ground object into the space where it says ‘groundCheck’. The ‘transform’ (position) is now going to be equal to the position of the new object. While you’re here, enter 0.1 where it says radius.

09.png

Finally, we need to define our ‘ground’ layer. To do this, select the terrain you created earlier, then up in the top right in the inspector, find where it says ‘Layer: Default’. Click this drop down box and choose ‘Add Layer’.

Now click back and this time select ‘ground’ as the layer for your platform (repeat this for any other platforms you have floating around). Finally, where it says ‘What is Ground’ on your player, select the ground layer as well.

You’re now telling your player script to check if the small point on the screen is overlapping anything matching that layer. Thanks to that line we added earlier, the character will now only jump when that is the case.

And with that, if you hit play, you can enjoy a pretty basic game requiring you to click to jump at the right time.

With that, if you hit play you can enjoy a pretty basic game requiring you to click to jump at the right time. If you set your Unity up properly with the Android SDK, then you should be able to build and run this and then play on your smartphone by tapping the screen to jump.

 

The road ahead

Obviously there’s a lot more to add to make this a full game. The player should to be able to die and respawn. We’d want to add extra levels and more.

10.png

My aim here was to show you how quickly you can get something basic up and running. Following these instructions, you should have been able to build your infinite runner in no time simply by letting Unity handle the hard stuff, like physics.

Source: https://www.androidauthority.com/can-build...

How to Create Your Own Slide-Out Navigation Panel in Swift

This tutorial will show you how to build a slide-out navigation panel, which is a popular alternative to using a UINavigationController or a UITabBarController that allows users to slide content on or off screen.

01.png

The slide-out navigation panel design pattern lets developers add permanent navigation to their apps without taking up valuable screen real estate. The user can choose to reveal the navigation at any time, while still seeing their current context.

In this tutorial you’ll take a less-is-more approach so you can apply the slide-out navigation panel technique to your own applications with relative ease.

 

Getting Started

You’re going to build a slide-out navigation panel into a cute kitten and puppy photo browser. To get started, download the starter project for this tutorial. It’s a zip file, so save it to a convenient location and then extract it to get the project.

Next open the project in Xcode and take a look at how it’s organized. The Assets folder contains a couple of asset catalogs of all of the kitten and puppy images that’ll be displayed in the app. Notice too there’s three main view controllers. When the time comes to adapt this tutorial to your own projects, here’s what you should keep in mind:

  • ContainerViewController: This is where the magic happens! This contains the views of the left, center, and right view controllers and handles things like animations and swiping. In this project, it’s created and added to the window in application(_:didFinishLaunchingWithOptions:) in AppDelegate.swift
  • CenterViewController: The center panel. You can replace it with your own view controller (make sure you copy the button actions).
  • SidePanelViewController: Used for the left and right side panels. This could be replaced with your own view controller.

The views for the center, left, and right view controllers are all defined within Main.storyboard, so feel free to take a quick look to get an idea of how the app will look.

Now you’re familiar with the structure of the project, it’s time to start at square one: the center panel.

Finding Your Center

In this section, you’re going to place the CenterViewController inside the ContainerViewController, as a child view controller.

Note: This section uses a concept called View Controller Containment introduced in iOS 5. If you’re new to this concept, check out Chapter 22 in iOS 5 by Tutorials, “UIViewController Containment.”

Open ContainerViewController.swift. At the bottom of the file there’s a small extension for UIStoryboard. It adds a few static methods which make it a bit more concise to load specific view controllers from the app’s storyboard. You’ll make use of these methods soon.

Add a couple of properties to ContainerViewController for the CenterViewController and for a UINavigationController, above viewDidLoad():

var centerNavigationController: UINavigationController!
var centerViewController: CenterViewController!

Note: These are implicitly-unwrapped optionals (as denoted by the !). They have to be optional because their values won’t be initialized until after init() has been called, but they can be automatically unwrapped because once they’re created you know they will always have values.

Next, add the following block of code to viewDidLoad(), beneath the call to super:

centerViewController = UIStoryboard.centerViewController()
centerViewController.delegate = self

// wrap the centerViewController in a navigation controller, so we can push views to it
// and display bar button items in the navigation bar
centerNavigationController = UINavigationController(rootViewController: centerViewController)
view.addSubview(centerNavigationController.view)
addChildViewController(centerNavigationController)

centerNavigationController.didMove(toParentViewController: self)

The code above creates a new CenterViewController and assigns it to the centerViewController property you just created. It also creates a UINavigationController to contain the center view controller. It then adds the navigation controller’s view to ContainerViewController‘s view and sets up the parent-child relationship using addSubview(_:), addChildViewContoller(_:) and didMove(toParentViewController:).

It also sets the current view controller as the center view controller’s delegate. This will be used by the center view controller to tell its container when to show and hide the left and right side panels.

If you try to build now, you’ll see an error when the code assigns the delegate. You need to modify this class so it implements the CenterViewControllerDelegate protocol. You’ll add an extension to ContainerViewControllerto implement it. Add the following code above the UIStoryboard extension near the bottom of the file (this also includes a number of empty methods which you’ll fill out later):

// MARK: CenterViewController delegate

extension ContainerViewController: CenterViewControllerDelegate {

  func toggleLeftPanel() {
  }

  func toggleRightPanel() {
  }

  func addLeftPanelViewController() {
  }

  func addRightPanelViewController() {
  }

  func animateLeftPanel(shouldExpand: Bool) {
  }

  func animateRightPanel(shouldExpand: Bool) {
  }
}

Now is a good time to check your progress. Build and run the project. If all went well, you should see something similar to the screen below:

02.png

 

Yes, those buttons at the top will eventually bring you kitties and puppies. What better reason could there be for creating sliding navigation panels? But to get your cuteness fix, you’ve got to start sliding. First, to the left!

Kittens to the Left of Me…

You’ve created your center panel, but adding the left view controller requires a different set of steps. There’s quite a bit of set up to get through here, so bear with it. Think of the kittens!

To expand the left menu, the user will tap on the Kitties button in the navigation bar. So head on over to CenterViewController.swift.

In the interests of keeping this tutorial focused on the important stuff, the IBActions and IBOutlets are pre-connected for you in the storyboard. However, to implement your DIY slide-out navigation panel, you need to understand how the buttons are configured.

Notice there’s already two IBAction methods, one for each of the buttons. Find kittiesTapped(_:) and add the following implementation to it:

delegate?.toggleLeftPanel?()

As previously mentioned, the method is already hooked up to the Kitties button.

This uses optional chaining to only call toggleLeftPanel() if delegate has a value and it has implemented the method.

You can see the definition of the delegate protocol in CenterViewControllerDelegate.swift. As you’ll see, there’s optional methods toggleLeftPanel() and toggleRightPanel(). If you remember, when you set up the center view controller instance earlier, you set its delegate as the container view controller. Time to go and implement toggleLeftPanel().

Note: For more information on delegate methods and how to implement them, please refer to Apple’s Developer Documentation.

Open ContainerViewController.swift. First add an enum to the ContainerViewController class, right below the class name:

class ContainerViewController: UIViewController {

  enum SlideOutState {
    case bothCollapsed
    case leftPanelExpanded
    case rightPanelExpanded
  }

// ...

This will let you keep track of the current state of the side panels, so you can tell whether neither panel is visible, or one of the left or right panels are visible.

Next, add two more properties below your existing centerViewController property:

var currentState: SlideOutState = .bothCollapsed
var leftViewController: SidePanelViewController?

These will hold the current state, and the left side panel view controller itself:

The current state is initialized to be .bothCollapsed – that is, neither of the side panels are visible when the app first loads. The leftViewController property is an optional, because you’ll be adding and removing the view controller at various times, so it might not always have a value.

Next, add the implementation for the toggleLeftPanel() delegate method:

let notAlreadyExpanded = (currentState != .leftPanelExpanded)

if notAlreadyExpanded {
  addLeftPanelViewController()
}

animateLeftPanel(shouldExpand: notAlreadyExpanded)

First, this method checks whether the left side panel is already expanded or not. If it’s not already visible, then it adds the panel to the view hierarchy and animates it to its ‘open’ position. If the panel is already visible, then it animates the panel to its ‘closed’ position.

Next, you’ll include the code to add the left panel to the view hierarchy. Locate addLeftPanelViewController(), and add the following code inside it:

guard leftViewController == nil else { return }

if let vc = UIStoryboard.leftViewController() {
  vc.animals = Animal.allCats()
  addChildSidePanelController(vc)
  leftViewController = vc
}

The code above first checks to see if the leftViewController property is nil. If it is, then creates a new SidePanelViewController, and sets its list of animals to display – in this case, cats!

Next, add the implementation for addChildSidePanelController(_:) below addLeftPanelViewController():

func addChildSidePanelController(_ sidePanelController: SidePanelViewController) {

  view.insertSubview(sidePanelController.view, at: 0)
    
  addChildViewController(sidePanelController)
  sidePanelController.didMove(toParentViewController: self)
}

This method inserts the child view into the container view controller. This is much the same as adding the center view controller earlier. It simply inserts its view (in this case it’s inserted at z-index 0, which means it will be belowthe center view controller) and adds it as a child view controller.

It’s almost time to try the project out again, but there’s one more thing to do: add some animation! It won’t take long!

And sliiiiiiide!

First, add a constant below your other properties in ContainerViewController.swift:

let centerPanelExpandedOffset: CGFloat = 60

This value is the width, in points, of the center view controller left visible once it has animated offscreen. 60 points should do it.

Next, locate the method stub for animateLeftPanel(shouldExpand:) and add the following block of code to it:

if shouldExpand {
  currentState = .leftPanelExpanded
  animateCenterPanelXPosition(
    targetPosition: centerNavigationController.view.frame.width - centerPanelExpandedOffset)

} else {
  animateCenterPanelXPosition(targetPosition: 0) { finished in
    self.currentState = .bothCollapsed
    self.leftViewController?.view.removeFromSuperview()
    self.leftViewController = nil
  }
}

This method simply checks whether it’s been told to expand or collapse the side panel. If it should expand, then it sets the current state to indicate the left panel is expanded, and then animates the center panel so it’s open. Otherwise, it animates the center panel closed and then removes its view and sets the current state to indicate it’s closed.

Finally, add animateCenterPanelXPosition(targetPosition:completion:) underneath animatedLeftPanel(shouldExpand:):

func animateCenterPanelXPosition(targetPosition: CGFloat, completion: ((Bool) -> Void)? = nil) {

  UIView.animate(withDuration: 0.5,
                 delay: 0,
                 usingSpringWithDamping: 0.8,
                 initialSpringVelocity: 0,
                 options: .curveEaseInOut, animations: {
      self.centerNavigationController.view.frame.origin.x = targetPosition
    }, completion: completion)
  }

This is where the actual animation happens. The center view controller’s view is animated to the specified position, with a nice spring animation. The method also takes an optional completion closure, which it passes on to the UIView animation. You can try tweaking the duration and spring damping parameters if you want to change the appearance of the animation.

OK… It’s taken a little while to get everything in place, but now is a great time to build and run the project. So do it!

When you’ve run the project, try tapping on the Kitties button in the navigation bar. The center view controller should slide over – whoosh! – and reveal the Kitties menu underneath. D’aww, look how cute they all are.

03.png

 

But too much cuteness can be a dangerous thing! Tap the Kitties button again to hide them!

Me and my shadow

When the left panel is open, notice how it’s right up against the center view controller. It would be nice if there were a bit more of a distinction between them. How about adding a shadow?

Still in ContainerViewController.swift, add the following method below your animation methods:

func showShadowForCenterViewController(_ shouldShowShadow: Bool) {

  if shouldShowShadow {
    centerNavigationController.view.layer.shadowOpacity = 0.8
  } else {
    centerNavigationController.view.layer.shadowOpacity = 0.0
  }
}

This adjusts the opacity of the navigation controller’s shadow to make it visible or hidden. You can implement a didSet observer to add or remove the shadow whenever the currentState property changes.

Next, scroll to the top of ContainerViewController.swift and change the currentState declaration to:

var currentState: SlideOutState = .bothCollapsed {
  didSet {
      let shouldShowShadow = currentState != .bothCollapsed
      showShadowForCenterViewController(shouldShowShadow)
    }
}

The didSet closure will be called whenever the property’s value changes. If either of the panels are expanded, then it shows the shadow.

Build and run the project again. This time when you tap the kitties button, check out the sweet new shadow! Looks better, huh?

04.png

 

Up next, adding the same functionality but for the right side, which means… puppies!

Puppies to the Right…

To add the right panel view controller, simply repeat the steps for adding the left view controller.

Open ContainerViewController.swift, and add the following property below the leftViewController property:

var rightViewController: SidePanelViewController?

Next, locate toggleRightPanel(), and add the following implementation:

let notAlreadyExpanded = (currentState != .rightPanelExpanded)

if notAlreadyExpanded {
  addRightPanelViewController()
}

animateRightPanel(shouldExpand: notAlreadyExpanded)

Next, replace the implementations for addRightPanelViewController() and animateRightPanel(shouldExpand:) with the following:

func addRightPanelViewController() {

  guard rightViewController == nil else { return }

  if let vc = UIStoryboard.rightViewController() {
    vc.animals = Animal.allDogs()
    addChildSidePanelController(vc)
    rightViewController = vc
  }
}

func animateRightPanel(shouldExpand: Bool) {

  if shouldExpand {
    currentState = .rightPanelExpanded
    animateCenterPanelXPosition(
      targetPosition: -centerNavigationController.view.frame.width + centerPanelExpandedOffset)

  } else {
    animateCenterPanelXPosition(targetPosition: 0) { _ in
      self.currentState = .bothCollapsed
        
      self.rightViewController?.view.removeFromSuperview()
      self.rightViewController = nil
    }
  }
}

The code above is almost an exact duplicate of the code for the left panel, except of course for the differences in method and property names and the direction. If you have any questions about it, review the explanation from the previous section.

Just as before, the IBActions and IBOutlets have been connected in the storyboard for you. Similar to the Kitties button, the Puppies button is hooked up to an IBAction method named puppiesTapped(_:). This button controls the sliding of the center panel to reveal the right-side panel.

Finally, switch to CenterViewController.swift and add the following snippet to puppiesTapped(_:):

delegate?.toggleRightPanel?()

Again, this is the same as kittiesTapped(_:), except it’s toggling the right panel instead of the left.

Time to see some puppies!

Build and run the program again to make sure everything is working. Tap on the Puppies button. Your screen should look like this:

05.png

 

Looking good, right? But remember, you don’t want to expose yourself to the cuteness of puppies for too long, so tap that button again to hide them away.

You can now view both kitties and puppies, but it would be great to be able to view a bigger picture of each one, wouldn’t it? MORE CUTENESS :]

Pick An Animal, Any Animal

The kitties and puppies are listed within the left and right panels. These are both instances of SidePanelViewController, which essentially just contain table views.

Head over to SidePanelViewControllerDelegate.swift to take a look at the SidePanelViewControllerdelegate method. A side panel’s delegate can be notified via this method whenever an animal is tapped. Let’s use it!

In SidePanelViewController.swift, first add an optional delegate property at the top of the class, underneath the table view IBOutlet:

var delegate: SidePanelViewControllerDelegate?

Then fill in the implementation for tableView(_:didSelectRowAt:) within the UITableViewDelegate extension:

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
  let animal = animals[indexPath.row]
  delegate?.didSelectAnimal(animal)
}

If there’s a delegate set, this will tell it an animal has been selected. Currently there’s no delegate yet! It would make sense for CenterViewController to be the side panel’s delegate, as it can then display the selected animal photo and title.

Open up CenterViewController.swift to implement the delegate protocol. Add the following extension to the bottom of the file, beneath the existing class definition:

extension CenterViewController: SidePanelViewControllerDelegate {

  func didSelectAnimal(_ animal: Animal) {
    imageView.image = animal.image
    titleLabel.text = animal.title
    creatorLabel.text = animal.creator
    
    delegate?.collapseSidePanels?()
  }
}

This method simply populates the image view and labels in the center view controller with the animal’s image, title, and creator. Then, if the center view controller has a delegate of its own, you can tell it to collapse the side panel away so you can focus on the selected item.

collapseSidePanels() is not implemented yet. Open, ContainerViewController.swift and add the following method below toggleRightPanel():

func collapseSidePanels() {

  switch currentState {
    case .rightPanelExpanded:
      toggleRightPanel()
    case .leftPanelExpanded:
      toggleLeftPanel()
    default:
    	break
  }
}

The switch statement in this method simply checks the current state of the side panels, and collapses whichever one is open (if any!).

Finally, update addChildSidePanelViewController(_:) to the following implementation:

func addChildSidePanelController(_ sidePanelController: SidePanelViewController) {
  sidePanelController.delegate = centerViewController
  view.insertSubview(sidePanelController.view, at: 0)
    
  addChildViewController(sidePanelController)
  sidePanelController.didMove(toParentViewController: self)
}

In addition to what it was doing previously, the method will now set the center view controller as the side panels’ delegate.

That should do it! Build and run the project again. View kitties or puppies, and tap on one of the cute little critters. The side panel should collapse itself again and you should see the details of the animal you chose.

06.png

 

Move Your Hands Back and Forth

The navigation bar buttons are great, but most apps also allow you to “swipe” to open the side panels. Adding gestures to your app is surprisingly simple. Don’t be intimated; you’ll do fine!

Open ContainerViewController.swift and locate viewDidLoad(). Add the following to the end of the method:

let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture(_:)))
centerNavigationController.view.addGestureRecognizer(panGestureRecognizer)

The above code defines a UIPanGestureRecognizer and assigns handlePanGesture(_:) to it to handle any detected pan gestures. (You will write the code for that method in a moment.)

By default, a pan gesture recognizer detects a single touch with a single finger, so it doesn’t need any extra configuration. You just need to add the newly created gesture recognizer to centerNavigationController view.

Note: Refer to our Using UIGestureRecognizer with Swift Tutorial for more information about gesture recognizers in iOS.

Next make this class a UIGestureRecognizerDelegate by adding the following extension at the bottom of the file, above the UIStoryboard extension:

// MARK: Gesture recognizer

extension ContainerViewController: UIGestureRecognizerDelegate {

  @objc func handlePanGesture(_ recognizer: UIPanGestureRecognizer) {
  }
}

Didn’t I tell you it’d be simple? There’s only one move remaining in your slide-out navigation panel routine.

Now Move That View!

The gesture recognizer calls handlePanGesture(_:) when it detects a gesture. So your last task for this tutorial is to implement the method.

Add the following block of code to the method stub you just added above (it’s a big one!):

let gestureIsDraggingFromLeftToRight = (recognizer.velocity(in: view).x > 0)
    
  switch recognizer.state {

    case .began:
      if currentState == .bothCollapsed {
        if gestureIsDraggingFromLeftToRight {
          addLeftPanelViewController()
        } else {
          addRightPanelViewController()
        }
        
        showShadowForCenterViewController(true)
      }
      
  case .changed:
    if let rview = recognizer.view {
      rview.center.x = rview.center.x + recognizer.translation(in: view).x
      recognizer.setTranslation(CGPoint.zero, in: view)
    }
      
  case .ended:
    if let _ = leftViewController,
      let rview = recognizer.view {
      // animate the side panel open or closed based on whether the view
      // has moved more or less than halfway
      let hasMovedGreaterThanHalfway = rview.center.x > view.bounds.size.width
      animateLeftPanel(shouldExpand: hasMovedGreaterThanHalfway)
        
    } else if let _ = rightViewController,
      let rview = recognizer.view {
      let hasMovedGreaterThanHalfway = rview.center.x < 0
      animateRightPanel(shouldExpand: hasMovedGreaterThanHalfway)
    }
      
  default:
    break
}

The pan gesture recognizer detects pans in any direction, but you're only interested in horizontal movement. First, you set up the gestureIsDraggingFromLeftToRight Boolean to check for this using the x component of the gesture velocity.

There's three states that need to be tracked: UIGestureRecognizerState.began, UIGestureRecognizerState.changed, and UIGestureRecognizerState.ended:

  • .began: If the user starts panning, and neither panel is visible then shows the correct panel based on the pan direction and makes the shadow visible.
  • .changed: If the user is already panning, moves the center view controller's view by the amount the user has panned
  • .ended: When the pan ends, check whether the left or right view controller is visible. Depending on which one is visible and how far the pan has gone, perform the animation.

You can move the center view around, and show and hide the left and right views using a combination of these three states, as well as the location and velocity / direction of the pan gesture.

For example, if the gesture direction is right, then show the left panel. If the direction is left, then show the right panel.

Build and run the program again. At this point, you should be able to slide the center panel left and right, revealing the panels underneath. If everything is working... you're good to go!

Where to Go from Here?

Congratulations! If you made it all the way through, you're a slide-out navigation panel ninja!

I hope you enjoyed this tutorial. Feel free to download the completed project file. I'm sure you'll enjoy being stuck in the middle of kitties and puppies!

If you want to try a pre-built library over the DIY solution, be sure to check out SideMenu. For an in-depth discussion of the origins of this UI control (and a trip down memory lane), check out iOS developer and designer Ken Yarmosh's post New iOS Design Pattern: Slide-Out Navigation. He does a great job of explaining the benefits of using this design pattern and showing common uses in the wild.

Source: https://www.raywenderlich.com/177353/creat...

Aspect Ratios for Grid Items

We've covered Aspect Ratio Boxes before. It involves trickery with padding such that an element's width and height are in proportion to your liking. It's not an ultra-common need, since fixing an element's height is asking for trouble, but it comes up.

One way to lower the risk is The Psuedo Element Tactic, in which a pseudo element pushes its parent element to the aspect ratio, but if the content inside pushes it taller, it will get taller, aspect ratio be damned.

You can use that technique in CSS grid with grid items! Although there are a couple of different ways to apply it that are worth thinking about.

#Remember that grid areas and the element that occupy them aren't necessarily the same size.

We just covered this. That article started as a section in this article but felt important enough to break off into its own concept.

Knowing this, it leads to: do you need the grid area to have an aspect ratio, and the element will stretch within? Or does the element just need an aspect ratio regardless of the grid area it is in?

#Scenario 1) Just the element inside needs to have an aspect ratio.

Cool. This is arguably easier. Make sure the element is 100% as wide as the grid area, then apply a pseudo element to handle the height-stretching aspect ratio.

<div class="grid">
  <div style="--aspect-ratio: 2/1;">2/1</div>
  <div style="--aspect-ratio: 3/1;">3/1</div>
  <div style="--aspect-ratio: 1/1;">1/1</div>
</div>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: start;
}
.grid > * {
  background: orange;
  width: 100%;
}
.grid > [style^='--aspect-ratio']::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}

Which leads to this:

01.JPG

Note that you don't need to apply aspect ratios through custom properties necessarily. You can see where the padding-bottom is doing the heavy lifting and that value could be hard-coded or whatever else.

#Scenario 2) Span as many columns as needed for width

I bet it's more likely that what you are needing is a way to make a, say 2-to-1 aspect ratio element, to actually span two columns, not be trapped in one. Doing this is a lot like what we just did above, but adding in rules to do that column spanning.

[style="--aspect-ratio: 1/1;"] {
  grid-column: span 1;
}
[style="--aspect-ratio: 2/1;"] {
  grid-column: span 2;
}
[style="--aspect-ratio: 3/1;"] {
  grid-column: span 3;
}

If we toss grid-auto-flow: dense; in there too, we can get items with a variety of aspect ratios packing in nicely as they see fit.

02.JPG

Now is a good time to mention there little ways to screw up exact aspect ratios here. The line-height on some text might push a box taller than you want. If you want to use grid-gap, that might throw ratios out of whack. If you need to get super exact with the ratios, you might have more luck hard-coding values.

Doing column spanning also gets tricky if you're in a grid that doesn't have a set number of rows. Perhaps you're doing a repeat/auto-fill thing. You might end up in a scenario with unequal columns that won't be friendly to aspect ratios. Perhaps we can dive into that another time.

#Scenario 3) Force stuff

Grid has a two-dimensional layout capability and, if we like, we could get our aspect ratios just by forcing the grid areas to the height and width we want. For instance, nothing is stopping you from hard-coding heights and widths into columns and rows:

.grid {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-template-rows: 100px 200px 300px;
}

We normally don't think that way, because we want elements to be flexible and fluid, hence the percentage-based techniques used above for aspect ratios. Still, it's a thing you can do.

03.JPG

 

This example forces grid areas to be the size they are and the elements stretch to fill, but you could fix the element sizes as well.

#Real world example

Ben Goshow wrote to me trying to pull this off, which is what spurred this:

04.JPG

Part of the issue there was not only getting the boxes to have aspect ratios, but then having alignment ability inside. There are a couple of ways to approach that, but I'd argue the easiest way is nested grids. Make the grid element display: grid; and use the alignment capabilities of that new internal grid.

05.JPG

Note in this demo instead of spanning rows, the elements are explicitly placed (not required, an example alternative layout method).

Source: https://css-tricks.com/aspect-ratios-grid-...