আমি ইউআইটিেক্সটফিল্ডে আইকন / চিত্র যুক্ত করতে চাই। আইকন / চিত্রটি স্থানধারকের কাছে রেখে দেওয়া উচিত।
আমি এটি চেষ্টা করেছি:
var imageView = UIImageView();
var image = UIImage(named: "email.png");
imageView.image = image;
emailField.leftView = imageView;
ধন্যবাদ
emailField.leftView = UIImageView(image: UIImage(named: "search")):)
@IBDesignable: আমরা এই উদাহরণ হিসাবে একটি মার্জিত ভাবে এটা করতে পারেন stackoverflow.com/a/51841433/8238512
উত্তর:
যোগ করার চেষ্টা করুন emailField.leftViewMode = UITextFieldViewMode.Always
(ডিফল্ট leftViewModeহয় Never)
সুইফট 4-এর আপডেট হওয়া উত্তর
emailField.leftViewMode = UITextFieldViewMode.always
emailField.leftViewMode = .always
UITextFieldViewMode.Always) দিয়ে চেষ্টা করেছেন ? এটি কী কাজ করে নি সে সম্পর্কে আপনার কোনও ধারণা আছে? (উদাহরণস্বরূপ এটি সংকলন করেছেন?)
emailTextFieldতবে এটি কি সত্যিই পরিবর্তিত হয়? এবং আপনি কি নিশ্চিত যে ছবিটি সেখানে রয়েছে? উদাহরণস্বরূপ, অন্য একটি ইউআইআইমেজভিউ তৈরি করুন imageএবং এটি কার্যকর করে যাচাই করতে এটিতে লোড করুন ।
imageView1.frame = CGRect(x: 5, y: 0, width: userName.frame.height, height: userName.frame.height) view.addSubview(imageView1)
সাহিলের দুর্দান্ত উত্তর রয়েছে এবং আমি এটি নিতে এবং এটি একটি @ আইবিডি ডিজাইনেবল হিসাবে প্রসারিত করতে চেয়েছিলাম যাতে বিকাশকারীরা স্টোরিবোর্ডে তাদের ইউআইটিেক্সটফিল্ডগুলিতে চিত্রগুলি যুক্ত করতে পারে।
import UIKit
@IBDesignable
class DesignableUITextField: UITextField {
// Provides left padding for images
override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
var textRect = super.leftViewRect(forBounds: bounds)
textRect.origin.x += leftPadding
return textRect
}
@IBInspectable var leftImage: UIImage? {
didSet {
updateView()
}
}
@IBInspectable var leftPadding: CGFloat = 0
@IBInspectable var color: UIColor = UIColor.lightGray {
didSet {
updateView()
}
}
func updateView() {
if let image = leftImage {
leftViewMode = UITextField.ViewMode.always
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
imageView.contentMode = .scaleAspectFit
imageView.image = image
// Note: In order for your image to use the tint color, you have to select the image in the Assets.xcassets and change the "Render As" property to "Template Image".
imageView.tintColor = color
leftView = imageView
} else {
leftViewMode = UITextField.ViewMode.never
leftView = nil
}
// Placeholder text color
attributedPlaceholder = NSAttributedString(string: placeholder != nil ? placeholder! : "", attributes:[NSAttributedString.Key.foregroundColor: color])
}
}
এখানে কি হচ্ছে?
এই নকশাযোগ্য আপনাকে অনুমতি দেয়:
মন্তব্য
স্টোরিবোর্ডে ডিজাইনযোগ্য
রানটাইম এ
আমি এখানে আরও কিছু যুক্ত করতে চাই:
আপনি যদি ছবিটি UITextFieldবাম দিকে যুক্ত করতে চান তবে তার leftViewসম্পত্তি ব্যবহার করুনUITextField
উল্লেখ্য: দো সেট করতে ভুলবেন না leftViewModeকরতে UITextFieldViewMode.Alwaysএবং এর জন্য ডান rightViewModeথেকে UITextFieldViewMode.Always andডিফল্টUITextFieldViewModeNever
যেমন
বাম পাশে একটি চিত্র যুক্ত করার জন্য
textField.leftViewMode = UITextFieldViewMode.Always
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
let image = UIImage(named: imageName)
imageView.image = image
textField.leftView = imageView
ডান পাশে একটি ইমেজ যুক্ত করার জন্য
textField.rightViewMode = UITextFieldViewMode.Always
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
let image = UIImage(named: imageName)
imageView.image = image
textField.rightView = imageView
দ্রষ্টব্য:UITextField বাম দিকে বা ডানদিকে কোনও চিত্র যুক্ত করার সময় আপনার কিছু যত্ন নেওয়া উচিত ।
আপনি একটি ফ্রেম ImageViewযোগ করতে যাচ্ছেন তা দিতে ভুলবেন নাUITextField
ইমেজভিউ = ইউআইআইমেজভিউ (ফ্রেম: সিজিআরেক্ট (x: 0, y: 0, প্রস্থ: 20, উচ্চতা: 20%))
যদি আপনার চিত্রের পটভূমি সাদা হয় তবে চিত্রটি দৃশ্যমান হবে না UITextField
আপনি যদি নির্দিষ্ট অবস্থানে কোনও চিত্র যুক্ত করতে চান তবে আপনার সংক্ষিপ্তসার ImageViewহিসাবে আপনাকে যুক্ত করতে হবে UITextField।
সুইফট 3.0 এর জন্য আপডেট
@ মার্ক মোয়েকেন্স সুন্দরভাবে এটিকে ব্যয় করেছেন এবং এটি @ আইবিডি ডিজাইনযোগ্য করুন ।
আমি এতে আরও কয়েকটি বৈশিষ্ট্য সংশোধন করেছি এবং যুক্ত করেছি (ডান চিত্রের জন্য নীচে লাইন এবং প্যাডিং যুক্ত করুন)।
দ্রষ্টব্য আপনি যদি ডানদিকে কোনও চিত্র যুক্ত করতে চান তবে আপনি ইন্টারফেস বিল্ডারের Force Right-to-Leftবিকল্পটি নির্বাচন করতে পারেন semantic(তবে ডান চিত্রের জন্য প্যাডিং কাজ করবে না যতক্ষণ না আপনি ডানদর্শন সংক্রান্ত পদ্ধতিটি ওভাররাইড করবেন)।
আমি এটি সংশোধন করেছি এবং উত্সটি ডাউনলোড করতে পারি এখান থেকে ইমেজটেক্সটফিল্ড
পূর্ববর্তী পোস্টগুলি থেকে একটি এক্সটেনশন তৈরির জন্য অনুপ্রাণিত অন্য উপায়।
আমরা চিত্রটি ডান বা বামে রাখতে পারি
extension UITextField {
enum Direction {
case Left
case Right
}
// add image to textfield
func withImage(direction: Direction, image: UIImage, colorSeparator: UIColor, colorBorder: UIColor){
let mainView = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 45))
mainView.layer.cornerRadius = 5
let view = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 45))
view.backgroundColor = .white
view.clipsToBounds = true
view.layer.cornerRadius = 5
view.layer.borderWidth = CGFloat(0.5)
view.layer.borderColor = colorBorder.cgColor
mainView.addSubview(view)
let imageView = UIImageView(image: image)
imageView.contentMode = .scaleAspectFit
imageView.frame = CGRect(x: 12.0, y: 10.0, width: 24.0, height: 24.0)
view.addSubview(imageView)
let seperatorView = UIView()
seperatorView.backgroundColor = colorSeparator
mainView.addSubview(seperatorView)
if(Direction.Left == direction){ // image left
seperatorView.frame = CGRect(x: 45, y: 0, width: 5, height: 45)
self.leftViewMode = .always
self.leftView = mainView
} else { // image right
seperatorView.frame = CGRect(x: 0, y: 0, width: 5, height: 45)
self.rightViewMode = .always
self.rightView = mainView
}
self.layer.borderColor = colorBorder.cgColor
self.layer.borderWidth = CGFloat(0.5)
self.layer.cornerRadius = 5
}
}
ব্যবহার:
if let myImage = UIImage(named: "my_image"){
textfield.withImage(direction: .Left, image: myImage, colorSeparator: UIColor.orange, colorBorder: UIColor.black)
}
উপভোগ করুন :)
প্যাডিং তৈরি করতে, আমি চিত্রটি একটি ধারক দৃশ্যের ভিতরে রাখতে চাই। আইকন স্থান নির্ধারণের সাথে আপনি খুশি হয়ে গেলে আপনি পটভূমির রঙ সরিয়ে ফেলতে পারেন।
let imageView = UIImageView(frame: CGRect(x: 8.0, y: 8.0, width: 24.0, height: 24.0))
let image = UIImage(named: "my_icon")
imageView.image = image
imageView.contentMode = .scaleAspectFit
imageView.backgroundColor = UIColor.red
let view = UIView(frame: CGRect(x: 0, y: 0, width: 32, height: 40))
view.addSubview(imageView)
view.backgroundColor = .green
textField.leftViewMode = UITextFieldViewMode.always
textField.leftView = view
সুইফট ৩.০-এর জন্য টেক্সটফিল্ডের বাম পাশে সন্নিবেশ করুন
textField.leftView = UIImageView(image: "small-calendar")
textField.leftView?.frame = CGRect(x: 0, y: 5, width: 20 , height:20)
textField.leftViewMode = .always
সুইফট 5
@IBOutlet weak var paswd: UITextField! {
didSet{
paswd.setLeftView(image: UIImage.init(named: "password")!)
paswd.tintColor = .darkGray
paswd.isSecureTextEntry = true
}
}
আমি এক্সটেনশন তৈরি করেছি
extension UITextField {
func setLeftView(image: UIImage) {
let iconView = UIImageView(frame: CGRect(x: 10, y: 10, width: 25, height: 25)) // set your Own size
iconView.image = image
let iconContainerView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 35, height: 45))
iconContainerView.addSubview(iconView)
leftView = iconContainerView
leftViewMode = .always
self.tintColor = .lightGray
}
}
ফলাফল
অ্যাপল থেকে এই উন্মাদনা সম্পর্কে।
এটি করার জন্য সম্ভবত এখানে "সবচেয়ে পরিষ্কার", সহজতম উপায়:
প্রথমত, আপনাকে অবশ্যই পাঠ্যটি সঠিকভাবে সরিয়ে ফেলতে হবে।
এই সমালোচনামূলক QA নোট করুন: https://stackoverflow.com/a/27066764/294884
class TidyTextField: UITextField {
@IBInspectable var leftImage: UIImage? = nil
@IBInspectable var leftPadding: CGFloat = 0
@IBInspectable var gapPadding: CGFloat = 0
private var textPadding: UIEdgeInsets {
let p: CGFloat = leftPadding + gapPadding + (leftView?.frame.width ?? 0)
return UIEdgeInsets(top: 0, left: p, bottom: 0, right: 5)
}
override open func textRect(forBounds bounds: CGRect) -> CGRect {
return bounds.inset(by: textPadding)
}
override open func placeholderRect(forBounds bounds: CGRect) -> CGRect {
return bounds.inset(by: textPadding)
}
override open func editingRect(forBounds bounds: CGRect) -> CGRect {
return bounds.inset(by: textPadding)
}
অবিরত, আমাদের এখন বাম চিত্রটি তৈরি করতে এবং সরাতে হবে:
override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
var r = super.leftViewRect(forBounds: bounds)
r.origin.x += leftPadding
return r
}
override func layoutSubviews() {
super.layoutSubviews()
setup()
}
private func setup() {
if let image = leftImage {
if leftView != nil { return } // critical!
let im = UIImageView()
im.contentMode = .scaleAspectFit
im.image = image
leftViewMode = UITextField.ViewMode.always
leftView = im
} else {
leftViewMode = UITextField.ViewMode.never
leftView = nil
}
}
}
এটি এটি করার সবচেয়ে পরিষ্কার, সবচেয়ে নির্ভরযোগ্য উপায় সম্পর্কে বলে মনে হচ্ছে।
আমি একটি সাধারণ আইবিডিজিনেবল তৈরি করেছি। আপনার পছন্দ মত এটি ব্যবহার করুন। কেবল আপনার ইউআইটিেক্সটফিল্ডকে এই শ্রেণীর কাছে নিশ্চিত করুন।
import UIKit
@IBDesignable
class RoundTextField : UITextField {
@IBInspectable var cornerRadius : CGFloat = 0{
didSet{
layer.cornerRadius = cornerRadius
layer.masksToBounds = cornerRadius > 0
}
}
@IBInspectable var borderWidth : CGFloat = 0 {
didSet{
layer.borderWidth = borderWidth
}
}
@IBInspectable var borderColor : UIColor? {
didSet {
layer.borderColor = borderColor?.cgColor
}
}
@IBInspectable var bgColor : UIColor? {
didSet {
backgroundColor = bgColor
}
}
@IBInspectable var leftImage : UIImage? {
didSet {
if let image = leftImage{
leftViewMode = .always
let imageView = UIImageView(frame: CGRect(x: 20, y: 0, width: 20, height: 20))
imageView.image = image
imageView.tintColor = tintColor
let view = UIView(frame : CGRect(x: 0, y: 0, width: 25, height: 20))
view.addSubview(imageView)
leftView = view
}else {
leftViewMode = .never
}
}
}
@IBInspectable var placeholderColor : UIColor? {
didSet {
let rawString = attributedPlaceholder?.string != nil ? attributedPlaceholder!.string : ""
let str = NSAttributedString(string: rawString, attributes: [NSForegroundColorAttributeName : placeholderColor!])
attributedPlaceholder = str
}
}
override func textRect(forBounds bounds: CGRect) -> CGRect {
return bounds.insetBy(dx: 50, dy: 5)
}
override func editingRect(forBounds bounds: CGRect) -> CGRect {
return bounds.insetBy(dx: 50, dy: 5)
}
}
স্থানধারক আইকন সেট করার জন্য আরেকটি উপায় এবং টেক্সটফিল্ডে প্যাডিং সেট করুন।
let userIcon = UIImage(named: "ImageName")
setPaddingWithImage(image: userIcon, textField: txtUsername)
func setPaddingWithImage(image: UIImage, textField: UITextField){
let imageView = UIImageView(image: image)
imageView.contentMode = .scaleAspectFit
let view = UIView(frame: CGRect(x: 0, y: 0, width: 60, height: 50))
imageView.frame = CGRect(x: 13.0, y: 13.0, width: 24.0, height: 24.0)
//For Setting extra padding other than Icon.
let seperatorView = UIView(frame: CGRect(x: 50, y: 0, width: 10, height: 50))
seperatorview.backgroundColor = UIColor(red: 80/255, green: 89/255, blue: 94/255, alpha: 1)
view.addSubview(seperatorView)
textField.leftViewMode = .always
view.addSubview(imageView)
view.backgroundColor = .darkGray
textField.leftViewMode = UITextFieldViewMode.always
textField.leftView = view
}
সুইফট ৩.১
extension UITextField
{
enum Direction
{
case Left
case Right
}
func AddImage(direction:Direction,imageName:String,Frame:CGRect,backgroundColor:UIColor)
{
let View = UIView(frame: Frame)
View.backgroundColor = backgroundColor
let imageView = UIImageView(frame: Frame)
imageView.image = UIImage(named: imageName)
View.addSubview(imageView)
if Direction.Left == direction
{
self.leftViewMode = .always
self.leftView = View
}
else
{
self.rightViewMode = .always
self.rightView = View
}
}
}
আপনি এই ফাংশনটিকে আপনার বিশ্বব্যাপী ফাইল বা আপনার শ্রেণীর উপরে রাখতে পারেন যাতে আপনি এটি সম্পূর্ণ প্রয়োগে অ্যাক্সেস করতে পারেন। এই পদ্ধতির পরে আপনি আবেদনে আপনার প্রয়োজন অনুযায়ী এই ফাংশনটি কল করতে পারেন।
func SetLeftSIDEImage(TextField: UITextField, ImageName: String){
let leftImageView = UIImageView()
leftImageView.contentMode = .scaleAspectFit
let leftView = UIView()
leftView.frame = CGRect(x: 20, y: 0, width: 30, height: 20)
leftImageView.frame = CGRect(x: 13, y: 0, width: 15, height: 20)
TextField.leftViewMode = .always
TextField.leftView = leftView
let image = UIImage(named: ImageName)?.withRenderingMode(.alwaysTemplate)
leftImageView.image = image
leftImageView.tintColor = UIColor(red: 106/255, green: 79/255, blue: 131/255, alpha: 1.0)
leftImageView.tintColorDidChange()
leftView.addSubview(leftImageView)
}
SetLeftSIDEImage(TextField: Your_textField, ImageName: “YourImageName”) // call function
সুইফট ৪-এ এক্সটেনশনটি ব্যবহার করে আমরা টেক্সটফিল্ডে প্যাডিং সহ চিত্রটি ডান বা বামে সহজেই রাখতে পারি।
extension UITextField {
//MARK:- Set Image on the right of text fields
func setupRightImage(imageName:String){
let imageView = UIImageView(frame: CGRect(x: 10, y: 10, width: 20, height: 20))
imageView.image = UIImage(named: imageName)
let imageContainerView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 55, height: 40))
imageContainerView.addSubview(imageView)
rightView = imageContainerView
rightViewMode = .always
self.tintColor = .lightGray
}
//MARK:- Set Image on left of text fields
func setupLeftImage(imageName:String){
let imageView = UIImageView(frame: CGRect(x: 10, y: 10, width: 20, height: 20))
imageView.image = UIImage(named: imageName)
let imageContainerView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 55, height: 40))
imageContainerView.addSubview(imageView)
leftView = imageContainerView
leftViewMode = .always
self.tintColor = .lightGray
}
}
বাম ইমেজ সেটআপ হিসাবে কোড ব্যবহার করুন: -
self.password_text_field.setupLeftImage(imageName: "unlock")
আউটপুট :)
আপনি কেন সহজ পদ্ধতির জন্য যান না। বেশিরভাগ ক্ষেত্রে আপনি হ'ল ফন্টের মতো আইকন যুক্ত করতে চান ... হরফ ফন্টটি দুর্দান্ত লাইব্রেরি ব্যবহার করুন এবং পাঠ্যের ক্ষেত্রে একটি আইকন যুক্ত করা যেমন সহজ হবে:
myTextField.setLeftViewFAIcon(icon: .FAPlus, leftViewMode: .always, textColor: .red, backgroundColor: .clear, size: nil)
আপনাকে প্রথমে এই সুইফ্ট লাইব্রেরিটি ইনস্টল করতে হবে: https://github.com/Vaberer/Font-Awesome-Swift
চিত্র এবং পাঠ্যের মধ্যে যোগ করা প্যাডিং এবং কারওর ক্ষেত্রে এটির প্রয়োজন অনুসারে সামঞ্জস্যযোগ্য চিত্রের আকার সহ এটি মার্ক মোয়েকেন্সের উত্তরের একটি পরিবর্তিত সংস্করণ।
সুইফট 4
import UIKit
@IBDesignable
class TextFieldWithImage: UITextField {
override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
return super.leftViewRect(forBounds: bounds)
}
@IBInspectable var leftImage: UIImage? {
didSet {
updateView()
}
}
@IBInspectable var leftPadding: CGFloat = 0 {
didSet {
updateView()
}
}
@IBInspectable var rightPadding: CGFloat = 0 {
didSet {
updateView()
}
}
@IBInspectable var imageMaxHeight: CGFloat = 0 {
didSet {
updateView()
}
}
@IBInspectable var color: UIColor = UIColor.lightGray {
didSet {
updateView()
}
}
func updateView() {
if let image = leftImage {
leftViewMode = UITextField.ViewMode.always
let containerSize = calculateContainerViewSize(for: image)
let containerView = UIView(frame: CGRect(x: 0, y: 0, width: containerSize.width, height: containerSize.height))
let imageView = UIImageView(frame: .zero)
containerView.addSubview(imageView)
setImageViewConstraints(imageView, in: containerView)
setImageViewProperties(imageView, image: image)
leftView = containerView
} else {
leftViewMode = UITextField.ViewMode.never
leftView = nil
}
attributedPlaceholder = NSAttributedString(string: placeholder != nil ? placeholder! : "",
attributes: [NSAttributedString.Key.foregroundColor: color])
}
private func calculateContainerViewSize(for image: UIImage) -> CGSize {
let imageRatio = image.size.height / image.size.width
let adjustedImageMaxHeight = imageMaxHeight > self.frame.height ? self.frame.height : imageMaxHeight
var imageSize = CGSize()
if image.size.height > adjustedImageMaxHeight {
imageSize.height = adjustedImageMaxHeight
imageSize.width = imageSize.height / imageRatio
}
let paddingWidth = leftPadding + rightPadding
let containerSize = CGSize(width: imageSize.width + paddingWidth, height: imageSize.height)
return containerSize
}
private func setImageViewConstraints(_ imageView: UIImageView, in containerView: UIView) {
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
imageView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor).isActive = true
imageView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -rightPadding).isActive = true
imageView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: leftPadding).isActive = true
}
private func setImageViewProperties(_ imageView: UIImageView, image: UIImage) {
imageView.contentMode = .scaleAspectFit
imageView.image = image
imageView.tintColor = color
}
}
সুইফটুই
RoundedRectangle(cornerRadius: 50)
.frame(height: 40)
.colorInvert() // sets the background white
.padding()
.shadow(radius: 12) // adds shadow to the rectangle
.overlay(
HStack(spacing: 20){
Image(systemName: "person")
.resizable()
.aspectRatio(contentMode: .fit)
TextField("Username ", text: $username)
.font(Font.custom("Arial", size: 25))
.font(.title)
}
.padding()
.padding()
)