How to scale a view up or down in SwiftUI
By shagrafnasheetIf we want to scale any view in SwiftUI. There is a Scale effect modifier in SwiftUI that we use for scaling. It can be an imageView or textView, or any other UIView that can be scaled using the scaleEffect modifier. We can scale a view UP or Down using the Scale effect modifier. We can also flip the view or reverse it using this Scale effect modifier.
What this blog will cover
- Scaling the view vertically
- Scaling the view horizontally
- flipping the view
- What is the Anchor point of view
Scaling a View in SwiftUI
Scaling equally from both sides
The scaleEffect modifier has different constructors that take different parameters and give different results.
Let’s see how we can scale the view equally from all sides.
struct ContentView: View {
var body: some View {
VStack(spacing: 20 ){
Text("text").fontWeight(.bold)
Text("___________________________")
// equally scaled
Text("text").scaleEffect(5).padding()
Text("___________________________")
Text("text").scaleEffect(8).padding()
Text("___________________________")
Text("text").scaleEffect(10).padding()
//-------------------------------------//
}
}
}
Scaling the view vertically in SwiftUI
We can scale the view horizontally by giving value to the x-axis and vertically by giving value to the y-axis.
For scaling the view vertically we give value to the y-axis parameter in the scaling effect modifier. It will scale the view up or down depending on the anchor point.
The anchor point is an optional parameter which means it can be nil. If the anchor point is not given it will scale the view equally from the center point.
struct ContentView: View {
var body: some View {
VStack(spacing: 20 ){
Text("text").fontWeight(.bold)
Text("___________________________")
//-------------------------------------//
//Scale the Y-axis
Text("text").scaleEffect(y: 5).padding()
Text("___________________________")
Text("text").scaleEffect(y: 8).padding()
Text("___________________________")
Text("text").scaleEffect(y: 10).padding(30)
}
}
}
Scaling the X-axis
struct ContentView: View {
var body: some View {
VStack(spacing: 20 ){
Text("text").fontWeight(.bold)
Text("___________________________")
//-------------------------------------//
//Scale the X-axis
Text("text").scaleEffect(x: 5).padding()
Text("___________________________")
Text("text").scaleEffect(x: 8).padding()
Text("___________________________")
Text("text").scaleEffect(x: 10).padding(30)
}
}
}
Scaling both X and Y axis simultaneously – scaleEffect SwiftUI
We can scale the view vertically and horizontally at the same time by giving values to both the x and the y-axis parameters simultaneously in the Scaling Effect modifier.
struct ContentView: View {
var body: some View {
VStack(spacing: 20 ){
Text("text").fontWeight(.bold)
Text("___________________________")
//-------------------------------------//
//Scale both sides
Text("text").scaleEffect(x: 5,y:5).padding()
Text("___________________________")
Text("text").scaleEffect(x: 8,y:8).padding()
Text("___________________________")
Text("text").scaleEffect(x: 10,y:8).padding(30)
}
}
}
Scaling with Anchor Value – SwiftUI
We can scale and change the rendering position of the view by giving a value for an anchor point parameter in the Scale Effect modifier. Rendering position means the point where the view will appear on the screen.
struct ContentView: View {
var body: some View {
VStack(spacing: 20 ){
Text("text").fontWeight(.bold)
Text("___________________________")
//-------------------------------------//
// scaling and changing the view point by setting an anchor value
Text("text").scaleEffect(x: 4.0,anchor:.leading).padding()
Text("___________________________")
Text("text").scaleEffect(x: 4.0,anchor:.trailing).padding()
Text("___________________________")
Text("text").scaleEffect(4.0,anchor:.center).padding()
}
}
}- Anchor point values can be top, bottom,
topTrailing, etc. It will change the viewpoint after scaling the view.
Flip or Reverse the UIVIew
If we want to flip or reverse the view that can also be done using the scaling effect modifier. Just give the modifier a negative value.
For flipping the view Horizontally, we give the X-axis a negative value.
struct ContentView: View {
var body: some View {
VStack(spacing: 20 ){
Text("text").fontWeight(.bold)
Text("___________________________")
//-------------------------------------//
//flip horizontally
Text("text").scaleEffect(x: -2.0)
Text("___________________________")
//Scale and flip horizontally
Text("text").scaleEffect(x: -5.0)
Text("___________________________"
}
}
}
Flip the View Vertically – SwiftUI
For flipping the view vertically, we give the Y-axis a negative value. It can be any negative value.
struct ContentView: View {
var body: some View {
VStack(spacing: 20 ){
Text("text").fontWeight(.bold)
Text("___________________________")
//-------------------------------------//
//flip vertically
Text("text").scaleEffect(y: -2.0)
Text("___________________________")
//Scale and flip vertically
Text("text").scaleEffect(y: -5.0).padding(20)
Text("___________________________")
}
}
}
Here’s the code for reference
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(){
Text("text").padding()
//-------------------------------------//
//flip horizontally
Text("text").scaleEffect(y: -1.0).padding()
//Scale and flip horizontally
Text("text").scaleEffect(y: -5.0).padding()
//-------------------------------------//
//flip vertically
Text("text").scaleEffect(y: -1.0).padding()
//Scale and flip vertically
Text("text").scaleEffect(y: -5.0).padding()
//-------------------------------------//
// scaling and changing the viewpoint by setting an anchor value
/* Text("text").scaleEffect(x: 4.0,anchor:.leading).padding()
Text("text").scaleEffect(x: 4.0,anchor:.trailing).padding()
Text("text").scaleEffect(4.0,anchor:.center).padding()
*/
//-------------------------------------//
//Scale the Y-axis
/*
Text("text").scaleEffect(x: 5).padding(60)
Text("text").scaleEffect(x: 8).padding(60)
Text("text").scaleEffect(x: 10).padding(60)
*/
//----------------------------------//
//Scale the x-axis
/* Text("text").scaleEffect(x: 5).padding(60)
Text("text").scaleEffect(x: 8).padding(60)
Text("text").scaleEffect(x: 10).padding(60)
*/
//-------------------------------------//
//Scale both axis at the same time
/* Text("text").scaleEffect(x: 5,y: 5).padding(60)
Text("text").scaleEffect(x: 8,y: 8).padding(60)
Text("text").scaleEffect(x: 10,y: 10).padding(60)
*/
//-------------------------------------//
// equally scaled
/* Text("text").scaleEffect(5).padding()
Text("text").scaleEffect(8).padding()
Text("text").scaleEffect(10).padding()
*/
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Leave a Reply