How to do multiple image anchoring/alignment

Question

Gilllissie OP

Created Jan ’22

Replies 3

Boosts 0

Views 2.4k

Participants 2

I'm new to SwiftUI, and struggling to figure out what seems like should be a very easy thing to do.

Let's say I have a HStack with two images. I want one image to always be anchored to the top left of the area and one images to always be anchored to the top center.

I think most peoples' first thought is "easy, just add a Spacer() after the second image." That doesn't keep the center image centered.

I have resorted to making two VStacks inside a ZStack, and each VStack has one image with a Spacer() below it to make the images align at the top like I want, and the VStack for the top-left image has an HStack inside so I can add a Spacer() to force it to align left.

This seems extremely hacky just to have two images with two basically anchoring points, and isn't very flexible as far as putting it into a new swift view class to modularize it since the whole thing relies on the full height of the screen.

Boost

Answer 1

Claude31 OP

Jan ’22

Could you show the code ? I would try to use GeometryReader in such a case, but better try with your sample code.

0

Answer 2

Gilllissie OP

Jan ’22

This is how I'm currently doing it. There's a separate VStack just for the top right and top left elements ("007LogoWhite" and PancakeMenu)

struct ContentView: View {
  var body: some View {
		ZStack {
			GeometryReader { geometry in
				Image("BackingTexture100")
					.resizable()
					.aspectRatio(contentMode: .fill)
					.scaledToFill()
					.ignoresSafeArea()
			}
			
			// Top left & right
			VStack
			{
				HStack {
					Image("007LogoWhite")
						.resizable()
						.scaledToFit()
						.frame(width: 120, height: 40, alignment: .topLeading)
					Spacer()

					PancakeMenu()
				}
				Spacer()
			}
			.padding(.horizontal, 8)

			// Horizontally centered from top to bottom of screen.
			VStack
			{
				Image("MI6logo")

				DB5LogoTitle()
					.padding(.top)

				Spacer()
			}
			.padding(.horizontal, 8)
		}
  }
}

Here's what it loooks like so far... obviously it will have more things in the second VStack for more content under the DB5LogoTitle() element. Screen Shot 2022-01-08 at 12.22.33 PM.jpg

0

Answer 3

Gilllissie OP

Jan ’22

I think I found the answer I wanted in "overlay", which allows anchoring additional items within the space of another item, at corners or centered along edges.

//
// MainView.swift
// DB5 Remote
//
// Created by Todd Gillissie on 1/10/22.
//

import SwiftUI

struct MainView: View {
	@State private var playingVideoId = ""
	@State private var mode = AppMode.MODIFICATIONS

  var body: some View {
		ZStack {
			GeometryReader { geometry in
				Image("BackingTexture100")
					.resizable()
					.aspectRatio(contentMode: .fill)
					.scaledToFill()
					.ignoresSafeArea()
			}
			
			// Top left & right
//			VStack
//			{
//				HStack {
//					Image("007LogoWhite")
//						.resizable()
//						.scaledToFit()
//						.frame(width: 120, height: 40, alignment: .topLeading)
//					Spacer()
//
//					PancakeMenu()
//				}
//				Spacer()
//			}
//			.padding(.horizontal, 8)

			// Horizontally centered from top to bottom of screen.
			VStack
			{
				Image("MI6logo")
					.padding(.bottom, 6.0)

				DB5LogoTitle(mode: mode)

				// switch statements don't work in views for some reason..
				if (mode == AppMode.MODIFICATIONS)
				{
					ModificationsView()
				}
				else if (mode == AppMode.VIDEOS)
				{
					VideoList()
				}
				else if (mode == AppMode.CREDITS)
				{
					Rectangle().foregroundColor(.yellow)
				}
			}
			.overlay(alignment: .topLeading) {
				Image("007LogoWhite").resizable()
					.scaledToFit()
					.frame(width: 120, height: 40, alignment: .topLeading)
				}
			.overlay(alignment: .topTrailing) { PancakeMenu() }
			.padding(.horizontal, 8)
			
			if (playingVideoId != "")
			{
				VStack
				{
					Spacer()
					PlayingVideo()
				}
				.padding(.horizontal, -4.0)
				.ignoresSafeArea()
			}
		}
  }
}

enum AppMode: Int {
	case MODIFICATIONS = 0
	case VIDEOS = 1
	case CREDITS = 2
}

struct MainView_Previews: PreviewProvider {
  static var previews: some View {
    MainView()
  }
}

0