When I change the text font size in the accessibility, one of the Table View Cell's title becomes left aligned instead of center aligned.
When turned off:
the table view cell button shows the text as it should (centered)
However, when the accessibility text size is set larger, like this:
The table view row cell shows title text of button left aligned:
I am using XLForm to create these buttons as rows with the XLFormRowDescriptor of XLFormRowDescriptorTypeImageButton
This is how I am defining this row:
let row = XLFormRowDescriptor(tag: FormTags.SubmitButton.rawValue, rowType: XLFormRowDescriptorTypeImageButton, title: "submit".localization())
styleRow(row: row)
configureImageRow(row: row, bgImage: UIImage(named: "greenButton")!, selectedBgImage: UIImage(named: "greenButton-pressed")!)
row.cellConfig["textLabel.textColor"] = UIColor.white
row.cellConfig["textLabel.numberOfLines"] = 1
row.cellConfig["textLabel.adjustsFontForContentSizeCategory"] = false
row.cellConfig["textLabel.textAlignment"] = NSTextAlignment.center.rawValue
row.cellStyle = UITableViewCell.CellStyle.default
section.addFormRow(row)
Related
(Xcode 11, Swift)
Being a newbie to iOS and Autolayout, I'm struggling with implementing a fairly simple (IMHO) view which displays a [vertical] list of items. The only problem is that items are decided dynamically and each of them could be either text or image (where either of those could be fairly large so scrolling would be required). WebView is not an option, so it has to be implemented natively.
This is how I understand the process:
Make in IB a UIScrollView and size it to the size of the outer frame.
Make a container view as a subview of UIScrollView (again, in IB) and size it the same.
Set constraint on equal width of both
At runtime, populate container view with UILabels/UIImageViews and also set constraints programmatically to ensure proper layout.
"Tell" scrollview about the subview height in order to make it manage the scrolling thereof.
Is this the right approach? It doesn't seem to work for me (for a toy example of dynamically adding a very tall image to a container view - I cannot get the scrolling to work). What would be the proper way to do the last step in the process above - just force the contentSize of the scrollview to the size of the populated container view (it doesn't seem to work for me). Any help would be appreciated.
When adding multiple elements to a scroll view at run-time, you may find it much easier to use a UIStackView... when setup properly, it will automatically grow in height with each added object.
As a simple example...
1) Start by adding a UIScrollView (I gave it a blue background to make it easier to see). Constrain it to Zero on all 4 sides:
Note that we see the "red circle" indicating missing / conflicting constraints. Ignore that for now.
2) Add a UIView as a "content view" to the scroll view (I gave it a systemYellow background to make it easier to see). Constrain it to Zero on all 4 sides to the Content Layout Guide -- this will (eventually) define the scroll view's content size. Also constrain it equal width and equal height to the Frame Layout Guide:
Important Step: Select the Height constraint, and in the Size Inspector pane select the Placeholder - Remove at build time checkbox. This will satisfy auto-layout in IB during design time, but will allow the height of that view to shrink / grow as necessary.
3) Add a Vertical UIStackView to the "content view". Constrain it to Zero on all 4 sides. Configure its properties to Fill / Fill / 8 (as shown below):
4) Add an #IBOutlet connection to the stack view in your view controller class. Now, at run-time, as you add UI elements to the stack view, all of your "scrollability" will be handled by auto-layout.
Here is an example class:
class DynaScrollViewController: UIViewController {
#IBOutlet var theStackView: UIStackView!
override func viewDidLoad() {
super.viewDidLoad()
// local var so we can reuse it
var theLabel = UILabel()
var theImageView = UIImageView()
// create a new label
theLabel = UILabel()
// this gets set to false when the label is added to a stack view,
// but good to get in the habit of setting it
theLabel.translatesAutoresizingMaskIntoConstraints = false
// multi-line
theLabel.numberOfLines = 0
// cyan background to make it easy to see
theLabel.backgroundColor = .cyan
// add 9 lines of text to the label
theLabel.text = (1...9).map({ "Line \($0)" }).joined(separator: "\n")
// add it to the stack view
theStackView.addArrangedSubview(theLabel)
// add another label
theLabel = UILabel()
// multi-line
theLabel.numberOfLines = 0
// yellow background to make it easy to see
theLabel.backgroundColor = .yellow
// add 5 lines of text to the label
theLabel.text = (1...5).map({ "Line \($0)" }).joined(separator: "\n")
// add it to the stack view
theStackView.addArrangedSubview(theLabel)
// create a new UIImageView
theImageView = UIImageView()
// this gets set to false when the label is added to a stack view,
// but good to get in the habit of setting it
theImageView.translatesAutoresizingMaskIntoConstraints = false
// load an image for it - I have one named background
if let img = UIImage(named: "background") {
theImageView.image = img
}
// let's give the image view a 4:3 width:height ratio
theImageView.widthAnchor.constraint(equalTo: theImageView.heightAnchor, multiplier: 4.0/3.0).isActive = true
// add it to the stack view
theStackView.addArrangedSubview(theImageView)
// add another label
theLabel = UILabel()
// multi-line
theLabel.numberOfLines = 0
// yellow background to make it easy to see
theLabel.backgroundColor = .green
// add 2 lines of text to the label
theLabel.text = (1...2).map({ "Line \($0)" }).joined(separator: "\n")
// add it to the stack view
theStackView.addArrangedSubview(theLabel)
// add another UIImageView
theImageView = UIImageView()
// this gets set to false when the label is added to a stack view,
// but good to get in the habit of setting it
theImageView.translatesAutoresizingMaskIntoConstraints = false
// load a different image for it - I have one named AquariumBG
if let img = UIImage(named: "AquariumBG") {
theImageView.image = img
}
// let's give this image view a 1:1 width:height ratio
theImageView.heightAnchor.constraint(equalTo: theImageView.widthAnchor, multiplier: 1.0).isActive = true
// add it to the stack view
theStackView.addArrangedSubview(theImageView)
}
}
If the steps have been followed, you should get this output:
and, after scrolling to the bottom:
Alignment constraints (leading/trailing/top/bottom)
The alignment constraint between Scroll View and Content View defines the scrollable range of the content. For example,
If scrollView.bottom = contentView.bottom, it means Scroll View is
scrollable to the bottom of Content View.
If scrollView.bottom = contentView.bottom + 100, the scrollable
bottom end of Scroll View will exceed the end of Content View by 100
points.
If scrollView.bottom = contentView.bottom — 100, the bottom of
Content View will not be reached even the scrollView is scrolled to
the bottom end.
That is, the (bottom) anchor on Scroll View indicates the (bottom) edge of the outer frame, i.e., the visible part of Content View; the (bottom) anchor on Content View refers to the edge of the actual content, which will be hidden if not scrolled to.
Unlike normal use cases, alignment constraints between Scroll View and Content View have nothing to do with the actual size of Content View. They affect only “scrollable range of content view” but NOT “actual content size”. The actual size of Content View must be additionally defined.
Size constraints (width/height)
To actually size Content View, we may set the size of Content View to a specific length, like width/height of 500. If the width/height exceeds the width/height of Scroll View, there will be a scrollbar for users to scroll.
However, a more common case will be, we want Content View to have the same width (or height) as Scroll View. In this case, we will have
contentView.width = scrollView.width
The width of Content View refers to the actual full width of content. On the other hand, the width of Scroll View refers to the outer container frame width of Scroll View. Of course, it doesn’t have to be the same width, but can be other forms like a * scrollView.width + b.
And if we have Content View higher (or wider) than Scroll View, a scrollbar appears.
Content View can not only be a single view, but also multiple views, as long as they are appropriately constrained using alignment and size constraints to Scroll View.
For details, you may follow this article: Link.
image illustration
I have a UITableViewCell. In the content view of this cell, from top to bottom, I have an avatar UIImageView(1), a UILabel(2), a button to fold/unfold the UILabel(3), a UICollectionView(4), a UIStackView(5), and a UIView pretending to be the margin between table cells(6).
The top constraint of each object is connected to the bottom constraint of the object above. Except the UILabel(2), all the other objects have a certain height. For the label, I gave it a constraint that its height is less than or equal to 96(height with 5 lines).
After I tapped the button(3), I deactivated the height constraint of the label and tried to update the frame, hoping the label will take as much height as it needed to show all the text.
#IBAction func foldButtonTapped(_ sender: UIButton) {
if isFoldContent {
checkinContentLabelBottomConstraint.isActive = false
sender.setTitle("收起", for: .normal)
} else {
checkinContentLabelBottomConstraint.isActive = true
sender.setTitle("展开", for: .normal)
}
isFoldContent = !isFoldContent
self.setNeedsUpdateConstraints()
self.setNeedsLayout()
self.setNeedsDisplay()
self.layoutIfNeeded()
}
Unfortunately, after I tap the button, although both the boolean value of the constraint.isActive and the label height value are changed to the correct value, the label area does not spread out, meaning still not showing the folded text.enter image description here
two things you need to do for this to work:
1. use “UITableViewAutomaticDimensions“
2. make sure your cell xib has defined vertical constraints from top to bottom.
When I click with the mouse I can get the cell position with myTableView.clickedRow and myTableView.clickedColumn.
However if I click on the first cell and then I press "Tab" key on my keyboard, the selection will stay on row = 0 and column = 0.
Is there a way to track the row and column index when changing cell with keyboard ?
When a text field in a cell is focused then the first responder is the field editor of the text field. Use row(for:) and column(for:) of NSTableView to get the row and column.
if let view = window.firstResponder as? NSView {
let column = tableView.column(for: view)
let row = tableView.row(for: view)
}
I am trying to understand how the focus is working when I have button inside Table.
The goal is to create a table view with custom cell, that has the same size as the table view size ( I want to see only one cell at the time ). When the button is getting focused, I want to scroll ( the table view is doing it automatically ), to the next cell and to see only the next cell.
I made sure that the button will be in focus and not table view cell, by override this method in the Table cell:
override var canBecomeFocused: Bool{
return false
}
The button is focused and when I am swipe up/down, the focus is moving between the buttons and not the Table it self ( great success ) ... BUT, the table view is being scrolling automatically, and I want to understand why is some cases ( when the Table and Table Cell are bigger then 360 pixel ) it's scrolling to the next cell and I can see only the next cell ( the table view and the cell in the same size ) , and sometimes ( when the Table and Cell are Smaller then 360 pixel ) the table view scrolling just a little bit, until the next cell is showing only the button ( meaning the cell is not fully shown )
So , I have:
Cell and table view cell size are Greater then 360, we can see that when the button is focused, the table view scrolling to the center of the cell, and we can see only 1 cell:
Cell and table view cell size is Smaller then 360, we can see that when the button is focused, the table view scrolling to some point, when the button is shown
FYI: I think the size of the button is not effecting the scroll, only the table view and table view cell size is effect the scrolling.
Some one? any idea ?
This is the test Project: in order to see it better please change the table view size and the cell size to be smaller then 360, and make sure the UIButton is centered: Project
You can put those methods in UITableViewCell's subclass. see
override var preferredFocusEnvironments: [UIFocusEnvironment]{
// Condition
}
override func shouldUpdateFocus(in context: UIFocusUpdateContext) -> Bool {
// Condition
}
override func didUpdateFocus(in context: UIFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator) {
// Condition
}
you can see more at this link: enter link description here
I'm writing an app for MacOS to display a string to a NSTextfield in a window when user click on the button in the status bar menu (application is an agent). The thing is I want to use the NSScrollView to embrace that NSTextview so that the NSTextview is scrollable. It sound simple but some thing happen:
(1) When I click the button on the menu, the window appear using the NSWindowController.showWindow(). But if the string is large (larger than the clipview), the NSScrollView isn't scrollable. If I select the text inside, then I can select the rest of the text that doesn't appear in the clipview
(2) If I leave the window there and click to the button again, then the the text is scrollable and the scrollbar appear!
(3) If I close the window by click on the red X button on top-left, then click to the button, then the window appear with the same situation at first (isn't scrollable). Notice that I don't recreate the new instance of NSWindowController of the window, at this time I just do the showWindow() with the old instance of the NSWindowController
This is the code:
if(newWC.window == nil){
let storyboard = NSStoryboard(name: "Main", bundle: nil)
newWC = storyboard?.instantiateControllerWithIdentifier("newWC") as! NewWindowController
newWC.window?.level = kCGStatusWindowLevelKey
println("new window")
}
newWC.showWindow(self)
//This is the ViewController contain the NSScrollView and the TextField
manualCopyView = newWC.window?.contentViewController as! ManualCopyViewController
var theScrollView = manualCopyView.theScrollView
var manualTextField = manualCopyView.manualEditTextField
//Calculate height of a block of string
manualTextField.stringValue = totalString.stringByAppendingString("")
var textFieldHeight = (manualTextField.cell() as! NSTextFieldCell).cellSizeForBounds(NSMakeRect(0, 0, 448, CGFloat(FLT_MAX))).height
if(textFieldHeight < 200){
textFieldHeight = 200
}
var frame = manualCopyView.manualEditTextField.frame
var clipViewFrame = theScrollView.contentView.frame
frame.size.height = textFieldHeight
//Change the frame of the textfield to fit the content string
manualTextField.frame = frame
//Gain focus to the new window
NSApp.activateIgnoringOtherApps(true)
It look like when the window first appear (or re-appear), the NSTextField is shrink even that I changed it's frame. But if I don't close it and show the window again, the frame expand as expected
I also used auto layout with constraints in the width and height of the scrollview and the width and minimum height (>= 200) of the textfield (because I think the height would be expanded)
Another question in this case: I have to set the scrollview Vertical Elasticity to No Elasticity or even the second case won't work. Is that normal?
Thank for any help.