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()
Related
I'm trying to create a cardView that has a Date on it. Right now, I have the below look, with today's Date within a Square.
I would like to add 2 parallel lines (shown as RED coloured Lines in below pic) such that it looks like a Calendar Icon. Is it possible to do it using Rectangle() instead of using path()
Q: How do I draw the 2 lines thru the top, centre of the Square?
I've tried permutations of this
Rectangle().frame(width: 3, height: 5, alignment: .top).opacity(0.9)
but obviously, it didn't work as the line ended up in the middle of the Date.
VStack {
Text(FormatDisplay.yyyymmdd_day0(inputDate: workout.date))
.padding(2)
.background(RoundedRectangle(cornerRadius: 2).stroke(Color(UIColor.label).opacity(0.8), lineWidth: 2))
.font(.footnote)
.minimumScaleFactor(0.5)
if workout.icuId != "" {
Image("intervalsLogo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 20, height: 20, alignment: .top)
.clipShape(Circle())
}
if workout.priorityCompliance > 0 {
RingView(compliancePct: workout.priorityCompliance, lineWidth: 2, primaryColor: Color.orange, secondaryColor: Color.orange, size: .tiny)
.frame(width: 20, height: 20)
.font(.caption)
}
Spacer()
}
}
This is what the end result I'm looking for. (the horizontal line above the number is an added bonus if possible)
I have bit modified your code. get This if useful.
RoundedRectangle(cornerRadius: 3)
.stroke(Color(UIColor.label).opacity(0.8), lineWidth: 3)
.frame(width: 35, height: 35, alignment: .center)
.overlay(
VStack(spacing: 2.5) {
HStack(spacing: 8) {
ForEach(0..<3) { _ in
RoundedRectangle(cornerRadius: 3)
.stroke(Color.black.opacity(0.8), lineWidth: 1.5)
.frame(width: 1, height: 7, alignment: .top)
}
}
.offset(y: -3.5)
RoundedRectangle(cornerRadius: 3)
.stroke(Color.black.opacity(0.8), lineWidth: 1.5)
.frame(height: 1)
.padding(.horizontal, 5)
Text(date)
.font(.system(size: 15))
.fontWeight(.bold)
}
,alignment: .top
)
preview
So yeah.. couple hours after I posted this.. figured out the solution.
Key was using the .offset(x: y:) modifier
VStack {
ZStack {
Text(FormatDisplay.yyyymmdd_day0(inputDate: workout.date))
.offset(y: 1)
RoundedRectangle(cornerRadius: 2)
.stroke(Color(UIColor.label).opacity(0.8), lineWidth: 2)
.frame(width: 20, height: 20, alignment: .center)
.offset(y: 0)
RoundedRectangle(cornerRadius: 2)
.stroke(Color.black.opacity(0.8), lineWidth: 2)
.frame(width: 1, height: 6, alignment: .top)
.offset(x: 4, y: -10)
RoundedRectangle(cornerRadius: 2)
.stroke(Color.black.opacity(0.8), lineWidth: 2)
.frame(width: 1, height: 6, alignment: .top)
.offset(x: -4, y: -10)
}
I am beginner in SwiftUI, updating my app and remaking it on SWIFTUI.
Here is the screenshot what I had to do...
Screenshot
I've successfully done actually the same, but the problem is that I have a bunch of this white boxes with text and etc. the Idea was to make it using foreach loop, and I didn't realize that there Rectangles, and I will be needed to always change the number of them. How can I make it using foreach or maybe there is another way of doing this? Here is the screenshot what I've done on Swift UI and the code.
SwiftUI screenshot
VStack(spacing: 32){
HStack(alignment: .center,spacing: 8){
Rectangle()
.frame(width: 24, height: .infinity)
.foregroundColor(Color(red: 0.098, green: 0.303, blue: 0.476))
.padding(.leading, 20)
.padding(.top, 28)
.padding(.bottom, 12)
Rectangle()
.frame(width: 24, height: .infinity)
.foregroundColor(Color(red: 0.098, green: 0.303, blue: 0.476))
.padding(.trailing, 20)
.padding(.top, 28)
.padding(.bottom, 12)
Spacer()
Image("high_volume_blue")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 32, height: 32, alignment: .center)
.padding(.top, 8)
.padding(.trailing, 8)
}
Text(NSLocalizedString("SoundSignals_In_Description_1", comment: ""))
.font(.system(size: 20))
.fontWeight(.light)
.foregroundColor(Color.black)
.multilineTextAlignment(.center)
.padding(.horizontal, 16)
.padding(.bottom, 20)
}
.frame(width: UIScreen.screenWidth - 25, height: .infinity, alignment: .center)
.background(Color.white)
This is only the white box code.
Thanks!
if you want to display a list of Text views you can do this:
ScrollView {
VStack(alignment: .leading, spacing: 10) {
ForEach(boxes, id: \.self) { box in //Boxes is whatever Array of values you have to display
Text("Write your text here")
.font(.title)
.onTapGesture { } // Also a possibility to tap on each box and execute some functionality
// You can add here more views: Rectangle() or Image() or whatever
}
}
}
.padding(25)
.background(.white)
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
My Button requires a couple overlays to get the style it needs (stroke, shadow etc).
However these overlays then go over the Button text.
View:
struct ProfileTest: View {
var body: some View {
Button(action: {
}){
HStack {
Text("OFFLINE")
.font(.custom("Seravek-Bold", size: 25))
.fontWeight(.bold)
.foregroundColor(Color.blue)
}
}.padding(EdgeInsets(top: 12, leading: 15, bottom: 12, trailing: 15))
.cornerRadius(50)
.overlay(
RoundedRectangle(cornerRadius: 50)
.stroke(Color.black, lineWidth: 1)
)
.overlay(
RoundedRectangle(cornerRadius: 50)
.fill(Color.red)
.shadow(color: Color.black.opacity(1), radius: 1)
)
.opacity(0.7)
.padding(.bottom, 100)
.padding(.bottom, 20)
}
}
How can I adjust my view so that the blue text shows above the background?
You can use a custom ButtonStyle.
Create your own shape and add .overlay(configuration.label) on top of it:
struct CustomButtonStyle: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.hidden()
.padding(EdgeInsets(top: 12, leading: 15, bottom: 12, trailing: 15))
.cornerRadius(50)
.overlay(
RoundedRectangle(cornerRadius: 50)
.stroke(Color.black, lineWidth: 1)
)
.overlay(
RoundedRectangle(cornerRadius: 50)
.fill(Color.red)
.shadow(color: Color.black.opacity(1), radius: 1)
)
.opacity(0.7)
.overlay(configuration.label)
.padding(.bottom, 100)
.padding(.bottom, 20)
}
}
You can also use configuration.isPressed to customise your label behaviour on button press.
Apply it to your Button:
struct ContentView: View {
var body: some View {
Button(action: {}) {
HStack {
Text("OFFLINE")
.font(.custom("Seravek-Bold", size: 25))
.fontWeight(.bold)
.foregroundColor(Color.blue)
}
}
.buttonStyle(CustomButtonStyle())
}
}
I am trying to achieve this layout https://gyazo.com/9714f8f1bff98edb3365338563b28fe8 in Swift UI using V and H Stacks. So far I have achieved this https://gyazo.com/fec9ae229e59a41add6542c9a8ad31af. I haven't found the right approach just yet on what to do here for more manipulation. What properties would help me achieve the desired layout?
Update! Here is what I have figured out so far... Almost there.
UPDATED CODE AND CANVAS HERE: https://gyazo.com/d12b9a831f50c25f8f854dc2143c93dc
import SwiftUI
struct CustomBlock: View {
var leading: String
var trailing: String
var body: some View {
VStack {
HStack (alignment: .firstTextBaseline, spacing: 18){
Button(action: {}){
Text(leading)
.bold()
.font(Font.custom("Helvetica Neue", size: 21.0))
.padding(25)
.foregroundColor(Color.white)
.background(Color.green)
.cornerRadius(12)
.multilineTextAlignment(.center)
.fixedSize()
.frame(width: 150, height: 50, alignment: .center)
}
Button(action: {}){
Text(trailing)
.bold()
.font(Font.custom("Helvetica Neue", size: 21.0))
.padding(25)
.foregroundColor(Color.white)
.background(Color.green)
.cornerRadius(12)
.multilineTextAlignment(.center)
.fixedSize()
.frame(width: 150, height: 50, alignment: .center)
}
}
}.padding()
}
}
struct ContentView: View {
var body: some View {
ZStack {
Color.init(hue: 0.2722, saturation: 0.89, brightness: 0.29, opacity: 1.0) .edgesIgnoringSafeArea(.all)
VStack {
HStack {
StrokeText(text: "Dividend Chaser", width: 0.5, color: .black)
.foregroundColor(.white)
.font(.system(size: 45, weight: .bold))
}
ZStack {
RoundedRectangle(cornerRadius: 25, style: .continuous)
.fill( Color.init(red: 0.33, green: 0.56, blue: 0.27))
.frame(width: 350, height: 240)
}
CustomBlock(leading: "Today's List", trailing: "Tomorrow's List").lineLimit(2)
CustomBlock(leading: "This Month", trailing: "Next Month").lineLimit(2)
CustomBlock(leading: "3% Yeild Or Higher", trailing: "5% Yeild Or Higher").lineLimit(2)
CustomBlock(leading: "App Help", trailing: "More Apps").lineLimit(2)
}
}
}
}
Here is a demo of approach. Tested with Xcode 12 / iOS 14.
struct DemoButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.foregroundColor(.white).font(Font.body.bold())
.frame(maxWidth: .infinity).padding(.vertical, 10)
.background(RoundedRectangle(cornerRadius: 8).fill(Color.green))
.multilineTextAlignment(.center)
.frame(maxWidth: .infinity)
}
}
struct TestButtonsGridLayout: View {
var body: some View {
VStack(spacing: 1) {
HStack(spacing: 1) {
Button("Today's\nList") {}
Button("Tomorrow's\nList") {}
}
HStack(spacing: 1) {
Button("This\nMonth") {}
.overlay(RoundedRectangle(cornerRadius: 8)
.stroke(lineWidth: 4).foregroundColor(.white).padding(2))
Button("Next\nMonth") {}
}
// .. other same here
}.buttonStyle(DemoButtonStyle())
}
}
Note: a) button style can be applied per-button b) show overlay selection can be also moved in style and activated by some state variable.