I created the Navigation View, but when you jump to the page, the navigation bar is very thick, although nothing happens.
I want the stick to be thinner. I do not know how to do it. I could not find the examples, I could not do it myself. Can you do it.
HStack(spacing: 10) {
NavigationLink(destination: PicturePage()){
Text("Kahve Falı")
.font(.title)
.foregroundColor(Color(#colorLiteral(red: 0.7239437103, green: 0.2440972626, blue: 0.4727140069, alpha: 1)))
.frame(maxWidth: geometry.size.width)
.frame(height: geometry.size.height / 5)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color(#colorLiteral(red: 0.8527825475, green:
0.821311295, blue: 0.8959596753, alpha: 1)), lineWidth: 3)
)
}.navigationBarTitle(Text("Geri"))
.navigationBarHidden(true)
}
Navigation page
struct PicturePage: View {
//3-1//
var body: some View {
GeometryReader { geometry in
Color.black.edgesIgnoringSafeArea(.all)
VStack {
VStack {
Text("Picture")
.font(.system(size: 60))
.frame(height: geometry.size.height / 10)
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
Spacer().frame(height: geometry.size.height / 15)
}
VStack {
Text("Merhaba").frame(width: geometry.size.width, height: geometry.size.height / 10)
.foregroundColor(Color.white)
}
VStack {
Image("AstroGirl").resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width, height: geometry.size.height / 3)
Spacer().frame(height: geometry.size.height / 15)
}
// This `HStack` is changed
HStack(spacing: 30) {
ForEach(0 ..< 3) { _ in
CircleView()
.frame(width: geometry.size.width / 5, height: geometry.size.height / 10)
.shadow(color: Color.yellow, radius: 10, x: 0, y: 0)
}
}
Spacer().frame(height: geometry.size.height / 10)
VStack {
Button(action: {}, label: {
Text("Gönder")
.frame(width: geometry.size.width / 3, height: 50)
.padding(10)
.font(Font.system(size: 30, weight: .medium, design: .serif))
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 30))
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
})
}
}
}
}
}
Look for property displayMode and set that to .inline
Here is a good overview of the options available and usage:
https://www.hackingwithswift.com/articles/216/complete-guide-to-navigationview-in-swiftui
More info on your follow up question...
You can extend the UINavigationController and make the background transparent for all your views. Add the below to a new swift file in your project.
extension UINavigationController {
override open func viewDidLoad() {
super.viewDidLoad()
let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground()
navigationBar.standardAppearance = appearance
navigationBar.compactAppearance = appearance
navigationBar.scrollEdgeAppearance = appearance
navigationBar.prefersLargeTitles = false // use inline titles on very view
// navigationBar.isHidden = true // hide the nav bar completely on every view
}
}
Related
I am trying to put a plus sign in a tight frame at a very specific spot (at the right of the title text) but i cannot seem to do so
Do you know how I can do so?
var body: some View {
VStack {
HStack {
Image(systemName: "plus")
VStack(alignment: .leading, spacing: 15) {
Text("This Month's Goal")
.bold()
.frame(width: 300, height: 10, alignment: .center)
Text("100 out of 2000")
.frame(width: 300, height: 10, alignment: .center)
//replace percent with percent and code percent to move with data
ProgressBarView(width: 300, height: 30, percent: 50, color1: Color(#colorLiteral(red: 0.01413772535, green: 0.2225477993, blue: 0.9861308932, alpha: 1)), color2: Color(#colorLiteral(red: 0.5605781674, green: 0.9172690511, blue: 0.8047055602, alpha: 1)))
}
Spacer()
}
.padding()
}
.background(Color.white)
.frame(width: 350, height: 120, alignment: .center)
.cornerRadius(25.0)
}
This is what it looks like right now, Somewhere in the circled spot in the same frame would be ideal.
struct TestView: View {
var body: some View {
VStack {
HStack {
Image(systemName: "plus")
VStack(alignment: .leading, spacing: 15) {
ZStack(alignment: .trailing) {
VStack {
Text("This Month's Goal")
.bold()
.frame(width: 300, height: 10, alignment: .center)
Text("100 out of 2000")
.frame(width: 300, height: 10, alignment: .center)
}
Button(
action: { },
label: { Image(systemName: "plus.circle") }
)
}
//replace percent with percent and code percent to move with data
ProgressBarView(width: 300, height: 30, percent: 50, color1: Color(#colorLiteral(red: 0.01413772535, green: 0.2225477993, blue: 0.9861308932, alpha: 1)), color2: Color(#colorLiteral(red: 0.5605781674, green: 0.9172690511, blue: 0.8047055602, alpha: 1)))
}
Spacer()
}
.padding()
}
.background(Color.white)
.frame(width: 350, height: 120, alignment: .center)
.cornerRadius(25.0)
}
}
Result:
Incidentally, your progress bar might look better if you calculate the width of the completion bar (the blue-green overlay) as height + (width - height) * percent / 100 instead of as width * percent / 100.
I created the NavigationBar, but when I perform .inline, I cannot make the background color completely black.
Do you have any information on this?
I could not find how to do it.
I would be glad if you could fix this.
likewise tabBar also have this color problem
I tried different ways but got the same result in all of them.
init() {
//Tabbar Renk bölümü
UITabBar.appearance().barTintColor = UIColor.black
UINavigationBar.appearance().barTintColor = .black
}
HStack(spacing: 10) {
NavigationLink(destination: PicturePage()) {
Text("Picture")
.font(.title)
.foregroundColor(Color(#colorLiteral(red: 0.7239437103, green: 0.2440972626, blue: 0.4727140069, alpha: 1)))
.frame(maxWidth: geometry.size.width)
.frame(height: geometry.size.height / 5)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color(#colorLiteral(red: 0.8527825475, green: 0.821311295, blue: 0.8959596753, alpha: 1)), lineWidth: 3)
)
}.navigationBarTitle(Text("Geri"),displayMode: .inline)
.navigationBarHidden(true)
}
struct PicturePage: View {
//3-1//
var body: some View {
GeometryReader { geometry in
Color.black.edgesIgnoringSafeArea(.all)
VStack {
VStack {
Text("Picture")
.font(.system(size: 60))
.frame(height: geometry.size.height / 10)
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
Spacer().frame(height: geometry.size.height / 15)
}
VStack {
Text("Merhaba").frame(width: geometry.size.width, height: geometry.size.height / 10)
.foregroundColor(Color.white)
}
VStack {
Image("AstroGirl").resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width, height: geometry.size.height / 3)
Spacer().frame(height: geometry.size.height / 15)
}
// This `HStack` is changed
HStack(spacing: 30) {
ForEach(0 ..< 3) { _ in
CircleView()
.frame(width: geometry.size.width / 5, height: geometry.size.height / 10)
.shadow(color: Color.yellow, radius: 10, x: 0, y: 0)
}
}
Spacer().frame(height: geometry.size.height / 10)
VStack {
Button(action: {}, label: {
Text("Gönder")
.frame(width: geometry.size.width / 3, height: 50)
.padding(10)
.font(Font.system(size: 30, weight: .medium, design: .serif))
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 30))
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
})
}
}
}
}
}
I added a text editor but couldn't center its position,
The text editor has shifted to the right as shown in the picture.
Sorry, I just noticed that the whole page has shifted to the right.
I don't know what I'm doing wrong. You can fix this.
I want it to stand in the middle.
struct TextSend: View {
#State private var inputText = ""
var body: some View {
GeometryReader { geometry in
VStack {
HStack {
Text("Picture")
.font(.system(size: 60))
.frame(width: geometry.size.width, height: geometry.size.height / 10)
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
Spacer().frame(height: geometry.size.height / 5)
}
VStack {
Text("Hi").frame(width: geometry.size.width, height: geometry.size.height / 10)
}
HStack {
ForEach(0 ..< 3) { _ in
CircleView()
.frame(width: geometry.size.width / 5, height: geometry.size.height / 10)
.shadow(radius: 10)
}
}
VStack {
TextEditor(text: $inputText) .frame(width: geometry.size.width, height:geometry.size.height / 3) .overlay(RoundedRectangle(cornerRadius: 30).stroke(Color.init( red: 45/255, green: 0/255, blue: 112/255), lineWidth: 1)).lineSpacing(10)
.autocapitalization(.words)
.disableAutocorrection(true)
.padding()
}
Spacer().frame(height: geometry.size.height / 15)
VStack {
Button(action: {}, label: {
Text("Gönder")
.frame(width: geometry.size.width / 3, height: 50)
.padding(10)
.font(Font.system(size: 30, weight: .medium, design: .serif))
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 30))
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
})
}
}
}
}
}
Remove frame(width: geometry.size.width from everywhere used, as such hardcoding breaks layout. Try to use geometry always only for calculable values.
Here is fixed parts (tested with Xcode 12.1 / iOS 14.1)
HStack {
Text("Picture")
.font(.system(size: 60))
.frame(height: geometry.size.height / 10) // << !!
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
Spacer().frame(height: geometry.size.height / 5)
}
VStack {
Text("Hi").frame(height: geometry.size.height / 10) // << !!
}
// ... other code
VStack {
TextEditor(text: $inputText)
.frame(height:geometry.size.height / 3) // << !!
.overlay(RoundedRectangle(cornerRadius: 30).stroke(Color.init( red: 45/255, green: 0/255, blue: 112/255), lineWidth: 1)).lineSpacing(10)
.autocapitalization(.words)
.disableAutocorrection(true)
.padding()
}
You need to add frame to your first child inside the GeometryReader which is VStack in your case
VStack{
}.frame(width:geometry.size.width , height: geometry.size.height)
ps : you can make it : geometry.size.width - 10 for example , for padding purpose
I could not adjust the appearance of the Text Editor I created.text will have margins.
I tried to do it myself but I messed it up, I couldn't.I want it to be like the picture.
VStack {
TextEditor(text: $inputText)
.background(Color.black)
.frame(height:geometry.size.height / 3, alignment: .center)
.cornerRadius(25)
.border(Color.yellow, width: 5)
.lineSpacing(10)
.autocapitalization(.words)
.disableAutocorrection(true)
.padding()
}
Spacer().frame(height: geometry.size.height / 15)
VStack {
Button(action: {}, label: {
Text("Gönder")
.frame(width: geometry.size.width / 3, height: 50)
.padding(10)
.font(Font.system(size: 30, weight: .medium, design: .serif))
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 30))
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
})
}
First , for changing TextEditor background color
I could not find a SwiftUI 100% solution for that (maybe apple will support this in future ) , so you need to change every UITextView.appearance().backgroundColor in the app
init() {
UITextView.appearance().backgroundColor = UIColor.black
}
don't miss import UIKit
Then for corner radius , you need to use overlay modifier for a rounded corners
VStack {
TextEditor(text: $inputText)
.frame(height:geometry.size.height / 3, alignment: .center)
.lineSpacing(10)
.autocapitalization(.words)
.disableAutocorrection(true)
.padding()
}.overlay(
RoundedRectangle(cornerRadius: 25)
.stroke(Color.yellow, lineWidth: 5)
)
.padding()
I am trying to figure out how to align my "Create" Button in the exact middle of my screen with my "share" button to the right of my centered "Create" Button, without using arbitrary numbers.
HStack (spacing: 40) {
Text("Create")
.fontWeight(.bold)
.frame(width: 185, height: 40, alignment: .center)
.cornerRadius(50)
.overlay(
Capsule(style: .circular)
.stroke(Color(red: 0.879, green: 0.369, blue: 0, opacity: 1), style: StrokeStyle(lineWidth: 2)))
Image(systemName:"square.and.arrow.up")
.resizable()
.frame(width: 25, height: 30)
.font(Font.title.weight(.light))
} .foregroundColor(Color(red: 0.879, green: 0.369, blue: 0, opacity: 1))
Here is how I would do it (no hardcoded numbers)
HStack {
Spacer()
Text("Create")
.fontWeight(.bold)
.frame(width: 185, height: 40, alignment: .center)
.cornerRadius(50)
.overlay(
Capsule(style: .circular)
.stroke(Color(red: 0.879, green: 0.369, blue: 0, opacity: 1), style: StrokeStyle(lineWidth: 2)))
Spacer()
.overlay(
HStack {
Image(systemName:"square.and.arrow.up")
.resizable()
.frame(width: 25, height: 30)
.font(Font.title.weight(.light))
Spacer()
}
.padding(.leading) // << here can be any distance to center button
)
}
.foregroundColor(Color(red: 0.879, green: 0.369, blue: 0, opacity: 1))
There's probably a better way, but this will do it. It just adds the action button as an overlay to the main Create button. But by using a PreferenceKey, the action button knows the size (and origin) of the Create button and can offset itself accordingly. Using rectangles here to represent the buttons so it's easier to read.
struct BoundsPreferenceKey: PreferenceKey {
typealias Value = CGRect
static var defaultValue: CGRect = .zero
static func reduce(value: inout CGRect, nextValue: () -> CGRect) {
value = value.union(nextValue())
}
}
struct CenteredView: View {
let spacing: CGFloat = 40
var body: some View {
HStack {
Rectangle().fill(Color.blue)
.frame(width: 185, height: 40)
.preference(key: BoundsPreferenceKey.self, value: CGRect(origin: .zero, size: CGSize(width: 185, height: 40)))
.overlayPreferenceValue(BoundsPreferenceKey.self) { rect in
Rectangle().fill(Color.green)
.frame(width: 25, height: 30)
.offset(x: rect.size.width/2 + self.spacing, y: 0)
}
}
}
}
You could use GeometryReader to avoid specifying the height and width, but you need to specify it for the frame anyway.
Alternatively, look at a custom alignment guide.
It could be like this:
HStack{
Spacer()
Spacer().overlay(Button("Create"){}.padding(10).border(Color.blue, width: 3.0))
Spacer()
}