I am using CosmicMind - Material Framework to create a Card. titleLabel and DetailLabel do not wrap to a new line.
My question is: What do I need to do to accomplish such task and is it supposed to be automatically adjusted by the framework?
This is what I have so far:
let card = Card()
var heartIcon = IconButton()
heartIcon = IconButton(image: Icon.favoriteBorder, tintColor: Color.red.base)
//Title Bar
let toolbar = Toolbar(rightViews: [heartIcon])
toolbar.title = cardData.cardTitleText
toolbar.titleLabel.textAlignment = .left
toolbar.titleLabel.numberOfLines = 0
toolbar.detail = "Company: " + cardData.cardTitleSubtitle
toolbar.detailLabel.font = RobotoFont.regular(with: 14)
toolbar.detailLabel.textColor = Color.grey.base
toolbar.detailLabel.textAlignment = .left
toolbar.detailLabel.numberOfLines = 0
And this is my output:
Update:
I managed to achieve what I wanted by increasing the size of the toolbar frame.
toolbar.frame = CGRect(x:0,y:0,width: view.frame.width,height: 100)
My goal was to at least show 2 lines of text.
Thanks!
I have no experience with the CosmicMind framework but usually, the label.numberOfLines property defines the maximum number of lines that the label text can have. You can set it to 2 instead of 0 and it should wrap.
Related
I'm using fscalender on my project which I have to use both month scope and week scope on different view controller.so when I'm using week scope date title size is getting smaller, but when I increase the view height its getting perfect.but my view should have an fixed size so how can I fix this problem.
this is my calendar now
here I converted the round background to rectangle by
calendarObj.appearance.borderRadius = 0
The above week title is implemented with stackview.
This is actually I want
the rectangle border is not showing full.How to resolve this?Im new to this iOS
I Tried This On A view, I have Added only Few Lines, an it is working as you want.
calendarView.dataSource = self
calendarView.delegate = self
calendarView.scrollDirection = .vertical
calendarView.scope = .week
calendarView.backgroundColor = .clear
calendarView.allowsMultipleSelection = false
calendarView.appearance.selectionColor = .none
calendarView.appearance.borderSelectionColor = .red
calendarView.appearance.todayColor = .clear
calendarView.appearance.titleTodayColor = .black
calendarView.appearance.weekdayTextColor = .black
calendarView.appearance.borderRadius = 0.2
I Hope This Will Help.
I'm wanting to move my labels wherever I want on my external display. (eg. displayRunsLabel at the top and centered or perhaps 40px from right and top)
I have my labels showing on the screen. I'm currently using text alignment.
What's the best way to do this?
Here's my external display:
ExternalDisplayScreenshot
Here's the code:
// CUSTOMISE VIEW
secondScreenView.backgroundColor = UIColor.black
displayWicketLabel.textAlignment = NSTextAlignment.left
displayWicketLabel.font = UIFont(name: "Arial-BoldMT", size: 200.0)
displayWicketLabel.textColor = UIColor.white
displayWicketLabel.frame = secondScreenView.bounds
secondScreenView.addSubview(displayWicketLabel)
displayRunsLabel.textAlignment = NSTextAlignment.center
displayRunsLabel.font = UIFont(name: "Arial-BoldMT", size: 200.0)
displayRunsLabel.textColor = UIColor.white
displayRunsLabel.frame = secondScreenView.bounds
secondScreenView.addSubview(displayRunsLabel)
displayOversLabel.textAlignment = NSTextAlignment.right
displayOversLabel.font = UIFont(name: "Arial-BoldMT", size: 200.0)
displayOversLabel.textColor = UIColor.white
displayOversLabel.frame = secondScreenView.bounds
secondScreenView.addSubview(displayOversLabel)
}
The position of a label or any other UIView is the origin of its frame, which is a CGPoint representing its top left corner.
So, you are currently saying:
displayWicketLabel.frame = secondScreenView.bounds
displayRunsLabel.frame = secondScreenView.bounds
displayOversLabel.frame = secondScreenView.bounds
Well, that's pretty silly, because you have given all three labels the same frame! Thus they overlay one another, and (as you rightly say) you can only read them by giving them different text alignments.
Instead, give them each a different frame — one that puts the label where you want it. For example:
displayWicketLabel.sizeToFit()
displayWicketLabel.frame.origin = CGPoint(x:30, y:20) // or whatever
displayRunsLabel.sizeToFit()
displayRunsLabel.frame.origin = CGPoint(x:30, y:100) // or whatever
displayOversLabel.sizeToFit()
displayOversLabel.frame.origin = CGPoint(x:30, y:200) // or whatever
Now, having said all that, a clear flaw in the code I just showed you is that we have hard-coded the positions arbitrarily, without taking account of what the size of the window is (the external display). For that reason, a much better way would be for you to learn about auto layout, which will let you lay the three labels out in nice positions automatically based on the size of the window.
The best way to describe my situations is with images. What I have is a view which contains several UILabels and UIImage. The red box is a UILabel and if the content is too big it should go to the second line.
From the storyboard I have a working case when the content fits but the problem is that I am not sure how to handle the case when the last (red box) should go to the second line. I am using autolayout and cartography.
If someone can point me to the right direction I will be very grateful.
First calcululate width of text as per your current label's position.
If text width is more than current label's width then see my answer from below link:
Auto Layout how to move the view2 from right to the bottom?
Calculate width:
func widthForView1(_ text:String, font:UIFont, height:CGFloat) -> CGFloat
{
let label:UILabel = UILabel(frame: CGRect(x: 0, y: 0, width: your_label_width, height: your_lable_height))
label.numberOfLines = 0
label.lineBreakMode = NSLineBreakMode.byWordWrapping
label.text = text
label.font = font
label.sizeToFit()
return label.frame.width
}
You cannot do that with constraints only. To change the entire position of the element on the screen, you need to do it programmatically.
Use of tag View can solve this issue. TagListView is an external library.
When u add a view as subclass of taglistView, its height automatically increases accordingly.
ADD this to pod file : pod 'TagListView'
func addTags() {
let str1 = "Hi"
tagListView.addTag(str1)
let str2 = "Helloo"
tagListView.addTag(str2)
let str3 = "How Are u ? "
tagListView.addTag(str2)
tagListView.isUserInteractionEnabled = false
}
I have 2 UILabels. lbl1's text can change, while lbl2's text is static.
They are both initially set on the same line. I have lbl1's numberOfLines set to 0 (infinity). I would like lbl2 to push down and align its top to lbl1's bottom when lbl1's width encroaches on lbl2's space. I have a current solution, but feel there's a pure autolayout way I'm missing. Any help would be great!
Both labels fit on 1 line:
lbl2 does not shift down in my attempts at pure autolayout:
Desired:
Current solution works, but feels un-ideal:
import XCPlayground
import SnapKit
import UIKit
let screen: UIView = UIView(frame: CGRectMake(0,0,320,568))
XCPlaygroundPage.currentPage.liveView = screen
XCPlaygroundPage.currentPage.needsIndefiniteExecution = true
let lbl1: UILabel = UILabel()
lbl1.text = "Short Text asnoetuha 1 1 1 1 "
lbl1.numberOfLines = 0
lbl1.backgroundColor = UIColor.whiteColor()
let lbl2: UILabel = UILabel()
lbl2.text = "Amount Text"
lbl2.backgroundColor = UIColor.yellowColor().colorWithAlphaComponent(0.5)
screen.addSubview(lbl1)
screen.addSubview(lbl2)
lbl1.snp_makeConstraints { (make: ConstraintMaker) in
make.top.leading.equalTo(screen)
make.width.lessThanOrEqualTo(screen.snp_width)
}
lbl2.snp_makeConstraints { (make: ConstraintMaker) in
// Below lines feel un-ideal
let lbl2X: CGFloat = screen.frame.width - lbl2.intrinsicContentSize().width
let lbl1RightX: CGFloat = screen.frame.origin.x + lbl1.intrinsicContentSize().width
let hasOverlap: Bool = lbl1RightX >= lbl2X
make.top.equalTo(hasOverlap ? lbl1.snp_bottom : lbl1.snp_top).priorityLow()
make.trailing.equalTo(screen)
}
I do believe you are not approaching this the right way. You should be able to create a function that listens for when lbl1 has its right anchor come into contact with lbl2's left anchor (very easy with SnapKit).
When this does happen, you call a function that remakes the constraints to how fit the image you provided. This is done with a call to snap_updateConstraints or snp_remakeConstraints. Then your constraint code should be straight forward as you would just pin the bottom anchor of lbl1 to the top anchor of lbl2 and then just make the other constraints until you get that desired effect.
I'm trying to create a scrollView where u scroll between different labels. As an illustration i have this image:
I want to make the bottom scrollView i've tried creating a replicate, but in my case it is only adding "Book" to the scrollView and how can i make a smaller spacing between the labels. because in my code there are one label per self.view.frame.width
categoryArray = NSArray(objects: "Book", "Elektronik")
var textWidth = 0
for val in categoryArray!
{
var textLabel: UILabel = UILabel(frame: CGRectMake(0, CGFloat(textWidth), categoryScrollView!.frame.width, categoryScrollView!.frame.height))
textLabel.textAlignment = NSTextAlignment.Center
textLabel.text = val as NSString
categoryScrollView?.addSubview(textLabel)
textWidth = textWidth + Int(textLabel.frame.size.width)
if textWidth > Int(self.view.frame.width) {
categoryScrollView?.contentSize = CGSizeMake(CGFloat(textWidth), categoryScrollView!.frame.height);
}
}
I don't read swift very well, but it looks to me like the code is advancing the y position of the label frame on each iteration, rather than the x. In other words, change:
CGRectMake(0, CGFloat(textWidth), categoryScrollView!.frame.width, categoryScrollView!.frame.height)
to:
CGRectMake(CGFloat(textWidth), 0, categoryScrollView!.frame.width, categoryScrollView!.frame.height))