CGRect function is not working while placing image in textfield - ios

I am trying to set image inside the textfield , and for that i am creating an image view in code but when i am trying to adjust its width and height via CGRect(x:int, y:int, width:int, height:int) , its not being applied and the image size is still original. I ve seen so many tutorials for putting image in text field and all of them are using CGRect and its working for them, as size of image gets what they apply in CGRect, but not for me. Below is the code i m trying to use. Image is also attached. Textfield style is rounded (Default) and icon size is 50px.
UIViewController
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var email: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
update()
// Do any additional setup after loading the view.
}
func update() {
email.leftViewMode = .always
let imageview = UIImageView()
let image = UIImage(named: "icon")
imageview.image = image
imageview.frame = CGRect(x: 15, y: 0, width: 50 , height: 50)
email.leftView = imageview
}
}
Also, i ve tried to change 'Render as' to 'template' in image assets but its still not working.

Hey I’ve tried to do it programmatically and it works for me. Quickly drafted it on iPad playgrounds. Try this:
class Test: UIViewController {
let lable = UITextField()
let image = UIImage()
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = .white
lable.frame = CGRect(x: 200, y: 200, width: 300 , height: 50)
lable.backgroundColor = .black
update()
self.view.addSubview(lable)
}
func update() {
lable.leftViewMode = .always
let imageview = UIImageView()
let image = UIImage(systemName: "icloud")
imageview.image = image
imageview.frame = CGRect(x: 15, y: 0, width: 50 , height: 50)
lable.leftView = imageview
self.view.addSubview(imageview)
}
}

Related

Size of image inside textfield is not resizing

I have a custom text field and i want to place image on its left side, but when ever i am running the app, the size of image is not adjusting , i.e its full scale and not taking the width and height being provided. The code and pictures are attached
ViewController class:(In which text field is present)
import UIKit
class Signup2ViewController: UIViewController {
#IBOutlet weak var Email: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
Email.leftViewMode = .always
let imageview = UIImageView()
imageview.frame = CGRect(x: 0, y: 0, width: 5.0, height: 5.0)
view.addSubview(imageview)
let icon = UIImage(named: "c.png")
imageview.image = icon
Email.leftView = imageview
// Do any additional setup after loading the view.
}
}
To set the frame for your imageView you need to subclass UITextField and override leftViewRect(forBounds:). The code below will result in a 20x20 view offset 10 points from the left and centered vertically.
class AwesomeTextField: UITextField {
override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
let leftViewHeight: CGFloat = 20
let y = bounds.size.height / 2 - leftViewHeight / 2
return .init(x: 10, y: y, width: leftViewHeight, height: leftViewHeight)
}
}
To add an imageView to the textField you would do this:
class ViewController: UIViewController {
#IBOutlet weak var textField: AwesomeTextField!
override func viewDidLoad() {
super.viewDidLoad()
let imageView = UIImageView()
imageView.image = UIImage(named: "c")
textField.leftView = imageView
textField.leftViewMode = .always
}
}
Make sure you set the appropriate class name for the textField in the identity inspector of your storyboard.

How can I update a UIView width with a UISlider?

I'm trying to change the width of a UIView with a slider. My problem is that instead of updating the views width my code is adding new views. I don't know how to update the view with swift playgrounds.
import UIKit
import PlaygroundSupport
class MyViewController : UIViewController {
var feelings01Slider: UISlider!
var feelingsWidth01 = 100
var dayFeelings01: UIView!
var dayFeelings02: UIView!
var dayFeelings03: UIView!
override func loadView() {
let view = UIView()
view.backgroundColor = .white
self.view = view
feelings01Slider = UISlider()
feelings01Slider.frame = CGRect(x: 62, y: 375, width: 250, height: 20)
feelings01Slider.minimumValue = 1
feelings01Slider.maximumValue = 248
feelings01Slider.value = 100
feelings01Slider.isContinuous = true
feelings01Slider.addTarget(self, action: #selector(sliderValueDidChange(sender:)), for: .valueChanged)
setUpFeelings()
view.addSubview(feelings01Slider)
}
func setUpFeelings() {
feelingsWidth01 = Int(feelings01Slider.value)
var feelingsX02 = feelingsWidth01 + 62
var feelingsWidth02 = 80
var feelingsX03 = feelingsX02 + feelingsWidth02
var feelingsWidth03 = 70
dayFeelings01 = UIView(frame: CGRect(x: 62, y: 100, width: feelingsWidth01, height: 250))
dayFeelings01.backgroundColor = .yellow
dayFeelings02 = UIView(frame: CGRect(x: feelingsX02, y: 100, width: feelingsWidth02, height: 250))
dayFeelings02.backgroundColor = .blue
dayFeelings03 = UIView(frame: CGRect(x: feelingsX03, y: 100, width: feelingsWidth03, height: 250))
dayFeelings03.backgroundColor = .red
view.addSubview(dayFeelings01)
view.addSubview(dayFeelings02)
view.addSubview(dayFeelings03)
}
#objc func sliderValueDidChange(sender:UISlider) {
feelingsWidth01 = Int(sender.value)
dayFeelings03.removeFromSuperview()
dayFeelings02.removeFromSuperview()
dayFeelings01.removeFromSuperview()
setUpFeelings()
}
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()
I'm new to programming so excuse me if my code seems messy.
You don't need to replace the views with new, differently-sized views . You can just change their frames. Replace your slider selector action with this:
#objc func sliderValueDidChange(sender:UISlider) {
dayFeelings01.frame.size.width = CGFloat(sender.value)
}
Note: because the yellow view was added first, it is expanding underneath the other views. That's why you can't see it get wider. Try changing the order so it's added last and you'll see it. If you want the other views to adjust to the available space, you can update their frames too, a UIStackView might make that easy.
Good luck!

how to make designable textfield code class in swift

I am a beginner in programming and in iOS development. I want to make a swift file that contains a code to make Designable textfield, so I will not edit the UI element display by coding, all the UI that will be edited, I will edit it in Interface builder.
I need to input an image in UITextfield, and I follow along a tutorial in here https://www.youtube.com/watch?v=PjXOUd4hI6U&t=932s to put an image in the left side of the UITextField, like the lock image in the picture above. here is the the to do this
import UIKit
#IBDesignable
class DesignableTextField: UITextField {
#IBInspectable var leftImage : UIImage? {
didSet {
updateView()
}
}
#IBInspectable var leftPadding : CGFloat = 0 {
didSet {
updateView()
}
}
#IBInspectable var cornerRadiusOfField : CGFloat = 0 {
didSet {
layer.cornerRadius = cornerRadiusOfField
}
}
func updateView() {
if let image = leftImage {
leftViewMode = .always
// assigning image
let imageView = UIImageView(frame: CGRect(x: leftPadding, y: 0, width: 20, height: 20))
imageView.image = image
var width = leftPadding + 20
if borderStyle == UITextBorderStyle.none || borderStyle == UITextBorderStyle.line {
width += 5
}
let view = UIView(frame: CGRect(x: 0, y: 0, width: width, height: 20)) // has 5 point higher in width in imageView
view.addSubview(imageView)
leftView = view
} else {
// image is nill
leftViewMode = .never
}
}
}
but now I need add another image on the right side only and both of them (i.e on the the right side AND left side). how do I edit those code? I have tried but it doesn't appear and to be honest I little bit confused to adjust the x and y coordinate of the view. I need your help :)
There are two solutions for this
The First solution is the easiest one. You can have a view and insert inside the view a UIImageView, UITextField, UIImageView. Add constraints to set the desired sizes. You can make the text field transparent. With this method, you can customize it how you want.
The Second solution is how you are doing it.
The first thing you need to do is add the properties to the right image and right padding. Under the left padding property add the following code:
#IBInspectable var rightImage : UIImage? {
didSet {
updateRightView()
}
}
#IBInspectable var rightPadding : CGFloat = 0 {
didSet {
updateRightView()
}
}
With this new properties, you can choose the image and edit the x location.
After the update function create a new function called updateRigthView
Like this:
func updateRightView() {
if let image = rightImage {
rightViewMode = .always
// assigning image
let imageView = UIImageView(frame: CGRect(x: rightPadding, y: 0, width: 20, height: 20))
imageView.image = image
var width = rightPadding - 20
if borderStyle == UITextBorderStyle.none || borderStyle == UITextBorderStyle.line {
width -= 5
}
let view = UIView(frame: CGRect(x: 0, y: 0, width: width, height: 20)) // has 5 point higher in width in imageView
view.addSubview(imageView)
rightView = view
} else {
// image is nill
rightViewMode = .never
}
}
You had to edit the right properties.Now head to storyboard and try it out. To move the image to the left decrease the right padding 0,-1,-2,-3, etc. To move the image to the right increase the right padding 0,1,2,3.

Show UIImage inside UITextfield, tried but doesn't work

I am using xcode8.3 and Swift3 in my project.
I have a UITextField in storyboard, I created a IBOutlet in corresponding controller class:
#IBOutlet weak var myTextField: UITextField!
I would like to show a small image on the right side inside the text field, I found a solution here (though it shows image on left side).
THis is what I tried:
override func viewDidLoad() {
super.viewDidLoad()
let imageView = UIImageView();
let image = UIImage(named: "my_icon");
imageView.image = image;
self.myTextField.rightView = imageView
self.myTextField.rightViewMode = .always
}
(In xcode Assets.xcassets folder I have my_icon.png, my_icon#2x.png, my_icon#3x.png)
When I run the code on iPhone, I don't see my_icon showing anywhere in UITextField. I also tried to add the ".png" suffix when loading image let image = UIImage(named: "my_icon.png");, it doesn't help either.
Why the solution in the link doesn't work for me?
I had similar issue, it sounds funny but it can cause the issue. I believe your imageView's frame is 0.
So
let imageView = UIImageView();
let image = UIImage(named: "my_icon");
imageView.image = image;
imageView.frame = CGRect(x: 0, y: 0, width: imageView.intrinsicContentSize.width, height: imageView.intrinsicContentSize.height)
self.myTextField.rightView = imageView
self.myTextField.rightViewMode = .always
Set frame:
imageView.frame = CGRect(x: 0, y: 0, width: 20, height: 20)

Making Image Slider with UIScrollView in Swift

I am making an app that the user can upload 1 to 3 photos.
I want the user to be able to see them it as a slider in with Page Control,
I started to code it but for some reason the images do not added to the scrollView (I see nothing when running the app).
This is my code so far:
class dogProfileViewController: UIViewController {
var imagesArray = [UIImageView()]
#IBOutlet var scrollView: UIScrollView!
override func viewDidLoad() {
super.viewDidLoad()
let image1: UIImageView = UIImageView(image: UIImage(named: "image1.png"))
let image2: UIImageView = UIImageView(image: UIImage(named: "image2.png"))
imagesArray.append(image1)
imagesArray.append(image2)
var countIndex = CGFloat(0)
for image in imagesArray {
image.frame = CGRectMake(countIndex*view.frame.width, 0, view.frame.width, 100)
scrollView.addSubview(image)
countIndex = countIndex + 1
}
// Do any additional setup after loading the view.
}
}
Add the following line after the for loop ends
scrollView.contentSize = CGSizeMake(countIndex*view.frame.width,0)
I think this will work.
#IBOutlet var mainScrollView: UIScrollView!
var imageArray = [UIImage]()
override func viewDidLoad() {
super.viewDidLoad()
mainScrollView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 175)
imageArray = [#imageLiteral(resourceName: "cake"),#imageLiteral(resourceName: "food")]
for i in 0..<imageArray.count{
let imageView = UIImageView()
imageView.image = imageArray[i]
imageView.contentMode = .scaleToFill
let xPosition = self.view.frame.width * CGFloat(i)
imageView.frame = CGRect(x: xPosition, y: 0, width: self.mainScrollView.frame.width, height: self.mainScrollView.frame.height)
mainScrollView.contentSize.width = mainScrollView.frame.width * CGFloat(i + 1)
mainScrollView.addSubview(imageView)
}
}
Well, according to what you provided, you haven't added the scrollView to the view. So, first step, make sure the scrollView is added to the view. self.view.addSubiew(scrollView). Change the scrollView background to make sure it is there.
Also, I don't see that you have initialized the scrollView frame. The scrollView has no frame, so it won't show anywhere. Make sure that you initialize the scrollView.

Resources