I am trying to fit an image to fit the entire of the Ui Image View. I want to do this because I want to round my image and it does not work because the image is smaller than the entire view. So rounding it rounds the outside of the image and is not visible. I have tried to add constraints but that does not seem to have workout.
Here is an image of what I am trying to do:
https://i.stack.imgur.com/mIGow.png
The problem images:
https://i.stack.imgur.com/LGDyx.png
https://i.stack.imgur.com/K3RVZ.png
OK - the problem is that you don't understand the Xcode interface.
When you have added a UIImageView, set its image, and then select it, you see this:
If you click the image view again, Xcode shows an additional "highlight" outline:
That has nothing to do with how it will look when you run your app.
Regarding the screen-cap from the video you are watching... You either didn't notice, or forgot, two things:
it's a tutorial for SwiftUI - the screen-caps you've posted for what you're trying to do is from a UIKit based app.
at 17:20 of Part 1 of that series, the author explains how he is setting the corner radius.
To get what you want with UIKit, you need to write some code to give the image view rounded corners. To have it show up at design-time, you need to use an #IBDesignable image view subclass.
Here's a very basic example:
#IBDesignable
class RoundedImageView: UIImageView {
override func layoutSubviews() {
layer.cornerRadius = 20
}
}
If you set the Custom Class of your image view to RoundedImageView, and then either select either Editor -> Refresh All Views or have Editor -> Automatically Refresh Designable Views checked, you'll see this:
Related
I have recently switched to Xcode 11 and Swift 5. Also switched my entire project from UISwift to Storyboard as I read it has many advantages.
Now I’m finding disadvantages, I can’t draw boxes/lines on my storyboard, I can do it using the code but that creates further problems with making changes to my project in storyboard and element constrains.
Does anyone know if it’s possible to draw background boxes/lines between text? In some instances I have 6 labels that would all go under one box, so I can’t use label background feature.
See the online example below, of grey boxes
Now I’m finding disadvantages, I can’t draw boxes/lines on my storyboard
The storyboard editor isn't a drawing program -- it's mainly for laying out views and connecting them to each other and to other objects e.g. view controllers. If you're trying to use it to draw lines and boxes, you're barking up the wrong tree.
The storyboard editor does let you configure the views you create, so for example you can set the image displayed by a UIImageView, or the text displayed in a label, or the background color of any view. The gray boxes in your example are easy to do by just setting the background color of a view to gray. Or better, use a table to display those views, and programmatically set the background color of the cells depending on their row.
Does anyone know if it’s possible to draw background boxes/lines between text?
There are some hacky options. For example, you could very easily create a view class that draws a horizontal or vertical line through it's center point, or a view class that draws a line around its perimeter for a box. (You can actually use key-value coding to set properties on the view's layer to do this even without creating a subclass, but it's not something you want to have to do every time you need a box.) Those are fine for occasional use, but if you have any complex drawing to do, it's probably time to write a view class that draws the necessary content in code.
In some instances I have 6 labels that would all go under one box, so I can’t use label background feature.
Those 6 labels should all be contained inside another view, so you'd just set the background color for the view that contains them. Again, from your example, it looks like those are rows in a table. Each row in a table is its own view (or "cell"), and it's easy to set the background color in the same code that configures the rest of the subviews in that cell.
In xcode, and tvos, the 3D parallax icons in the asset catalog are shown as image stacks. But this is not the case with the so called top shelf image.
Is it possible to convert the top shelf image to a multi layer image stack in xcode?
Only content that is focusable is multilayered and then you need to provide several of them.
There are 3 top shelf types, but unfortunately none of them fit your needs.
You can read more about them in apple tv human interface guide lines.
1) single, static top shelf image
Provide a visually rich static image. Your app’s static top shelf
image is used when dynamic content isn’t provided or is unavailable.
Use it as an opportunity to highlight your brand.
Don’t imply interactivity in a static image. The static top shelf
image isn’t focusable, so it shouldn't include elements that make it
appear interactive.
2) "Dynamic Content Layouts" - "Sectioned Content Row"
this is for content similar to portrait movie posters. those can be multilayered, but:
Provide enough content to constitute a complete row. At a minimum,
load enough images in a sectioned content row to span the full width
of the screen.
3) "Dynamic Content Layouts" - "Scrolling Inset Banner"
this is for content similat to wide screen advertising banners. those can be multilayered, but:
A minimum of three images is recommended for a scrolling banner to
feel effective.
To make Dynamic Content you need an Apple TV extension. To include a layered image in the content use the Apple Parallax Previewer app to load all the images in the layered image, and export as an LSR file. Drop the LSR into an Apple TV Extension target. Use the code below to create a scrolling inset (rather than a sectioned one as in the RW tutorial). Then read in the file from the app bundle.
Note that the Top Shelf will "scroll through" your images so you probably want 3 related layered images (as the above answer suggests). You can see what a single image looks like (pretty lame) in this video.
import Foundation
import TVServices
class ServiceProvider: NSObject, TVTopShelfProvider {
override init() {
super.init()
}
// MARK: - TVTopShelfProvider protocol
var topShelfStyle: TVTopShelfContentStyle {
// Return desired Top Shelf style.
return .inset
}
var topShelfItems: [TVContentItem] {
let v1Ident = TVContentIdentifier(identifier: "V1", container: nil)!
let v1Content = TVContentItem(contentIdentifier: v1Ident)!
v1Content.imageURL = Bundle.main.url(forResource: "v1", withExtension: ".lsr")
// Create an array of TVContentItems.
return [v1Content]
}
}
Posted is a picture of my issue.
I'm fairly new to Xcode and I have a UIImageView object in my View. I added another View (white rectangular box) within the View, and below the UIImageView object.
If I try to resize the inner View in any way using the cursor, the Image View resizes to 0 as shown below. However if I use the Size Inspector (ruler icon) on the right to resize the subview, the Image View stays the same size. What the heck?
Is there some setting I need to adjust? Thanks
Xcode 5
I'm trying to learn the auto-layout system. Thought I would start with something simple, but I'm already getting stumped :-)
Scene: Main View -> ImageView -> View
I want to support rotation such that the Image rotates and centers on the screen, using Aspect-Fit content.
I want the smaller view to maintain it's relative position to the top edge of the UIimage view. It does't seem to understand the aspect-fit, and it aligns the sub view along the top of the main view, not the fitted image.
I think it has something to do with the fact that the small view is a sibling of the Image, and not a sub-view. I can only seem to create constraints to the superview.
.
You haven't started with something simple!
An aspect fitted image view doesn't actually change its size under auto layout depending on the image, it fits the image into the bounds that the constraints have determined, leaving the rest of its frame blank. If you set a border or background colour on the image view you will see this.
To achieve the effect you're after you would need to do the aspect fitting calculation yourself and modify the sizing constraints on the image view appropriately.
How can I create a iPhoto like button like in the picture
I've tried out several things using round textured buttons or setting the button's image as template. But none of these approaches really works.
Thanks so far for your answers.
EDIT:
The image of the button should just be a simple pdf. The gradient and the white shadow should be drawn automatically.
As Justin mentioned you should create an NSButton with type Momentary Change. You should then indicate that it is a template image by including the suffix Template in the filename, e.g. EditTemplate.png.
I know you said you tried setting the image as template, but I found that this wasn't always effective if I wasn't using the Momentary Change button type.
You could subclass NSButtonCell. And implement these functions:
- (void)drawImage:(NSImage*)image
withFrame:(NSRect)frame
inView:(NSView*)controlView
{
// Draw the image of the pen.
}
- (NSRect)drawTitle:(NSAttributedString*)title
withFrame:(NSRect)frame
inView:(NSView*)controlView
{
// Draw the text.
}
- (void)drawBezelWithFrame:(NSRect)frame
inView:(NSView *)controlView
{
}
To setup the subclass just edit the "Custom Class" field of the Button Cell in Interface Builder from "NSButtonCell" to "YourSubClass"
I think the simplest solution is to create button with type: Momentary Change and add on it image with transparent background with .png type of file and when button is ON You can change to other picture with background.
For example to set/change image:
[_yourButton setImage:_image];
If I have understood correctly what You want to do.