I'm trying to make a grid view on iOS with adaptive column width.
On Android it's possible to do this by setting stretchMode attribute to spacingWidth .
This attribute take the cell width as minimum width and grow cell automatically if there is free space available but no enough to add another column keeping the same space between column everywhere.
I didn't found any way to do that on iOS.
It look like that (left image) on iPhone 6, but on iPhone 5 (right image) the space is very big and ugly. I wan't to auto resize cells to avoid this big space.
How can i do that on iOS ?
(I'm using Xcode 6.1)
Thanks
EDIT :
This i why i wan't (black space is approximatively desired additional cell width, sorry my draw is ugly I did it quickly)
EDIT 2:
I tried to calculate new size with this code, but the result is "strange" (wrong size, position) , i think i missed something
let CELL_SIZE : Float = 92
let CELL_MARGIN : Float = 10
let COLLECTION_VIEW_MARGIN : Float = 20 //Left right margin
let screenWidth = Float(UIScreen.mainScreen().bounds.width)
let numberOfCell = Float(Int(screenWidth / (CELL_SIZE + CELL_MARGIN + COLLECTION_VIEW_MARGIN)))
let oldCellSize = Float(cell.frame.width)
var newCellSize : Float
if(numberOfCell >= 2){
newCellSize = (screenWidth / numberOfCell) - (CELL_MARGIN * (numberOfCell-1))
} else {
newCellSize = (screenWidth / numberOfCell) }
let indexPathRow = Float(indexPath.row)
var xOffsetMultiplier = indexPathRow % numberOfCell
if(xOffsetMultiplier == 0){
xOffsetMultiplier = numberOfCell
}
var newX : Float = 0
if(xOffsetMultiplier == 1){
newX = COLLECTION_VIEW_MARGIN / 2
} else {
newX = (newCellSize + CELL_MARGIN) * (xOffsetMultiplier-1) + (COLLECTION_VIEW_MARGIN / 2)
}
var frame = CGRectMake(CGFloat(newX), cell.frame.minY, CGFloat(newCellSize), cell.frame.height)
cell.frame = frame
This code is written in func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell in my ViewController
You should use UICollectionViewFlowLayout to adopt cell size according to collection view size.
Related
I am creating a UICollectionView that has paging enabled and scrolls from left to right. I am using an NSFetchedResultsController to retrieve results from CoreData, which means it uses collection view sections rather than rows. The collection view has 2 rows and therefore appears like the following screenshot (where the order goes top row, bottom row, top row, bottom row etc):
However, I need the collection view to read from left to right like the following 2 screen shots:
Could you please advise on how I would do this in Swift?
What I would do is this:
1) Sort your data the same way you do it now so that your collection view would look like this:
---------
|0|2|4|6|
---------
|1|3|5|7|
---------
2) In your cellForIndexPath method of your collection view data source return the correct element so that your collection view turns into this:
---------
|0|1|2|3|
---------
|4|5|6|7|
---------
To do that you can use this logic:
public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
var elementIndex: Int!
if indexPath.row % 2 == 0 {
// 0 / 2 = 0
// 2 / 2 = 1
// 4 / 2 = 2, etc
elementIndex = indexPath.row / 2
}
else {
// (1 / 2) + round(8.0 / 2.0) = 4
// (3 / 2) + round(8.0 / 2.0) = 5
// (5 / 2) + round(8.0 / 2.0) = 6, etc
elementIndex = (indexPath.row / 2) + Int(round(Double(elements.count) / 2.0))
}
// Dequeue your cell
// let cell = ...
cell.element = elements[elementIndex]
return cell
}
Basically this should return your elements in the correct order.
First, I think it could help if you provide an example how your cells are sectioned currently (e.g. section 0: a, b, c, d, section 1: e, f, ...) and how you want the different sections to be displayed/layouted.
I'd suggest to create a custom UICollectionViewLayout subclass.
In the prepareLayout method you should calculate and cache the UICollectionViewLayoutAttributes for each cell.
Create variables:
let xOffset = 0.0 // leftContentInset within collectionView.bounds
let yOffsetRow0 = 0.0 // y offset of first row within collectionView.bounds
let yOffsetRow1 = 50.0 // y offset of second row within collectionView.bounds
var currentXOffset : CGFloat = xOffset
var currentPage : Int = 0
calculate the frames until first row is filled to right screen edge (CGRect(currentXOffset, yOffsetRow0, cellWidth, cellHeight), increase currentXOffset)
reset currentXOffset = xOffset
repeat 1. with yOffsetRow1 for second row
increment currentPage += 1
reset currentXOffset = xOffset + (collectionView.frame.width * currentPage) // for next page
repeat steps 1-5 until layout for all cells is calculated
As you said, you need
1. Paging enabled
2. Scrolling from left to right
3. Multiple sections.
It's a little bit confusing what exactly you want to design. It will be much better if can share proper UI screenshot.
As I understand your problem.
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
Check have you assign the horizontal layout to your collectionView.
I'm making an app chat and I have a problem with the chat message's size.
I've calculate my message's height like this and I've got the correct height
maximumMessageWidth = 300.0
let size = CGSize(width: maximumMessageWidth, height: 1000.0)
let messageAttributeText = messageBody.attributedText
let height = messageAttributeText?.boundingRect(with: size, options: .usesLineFragmentOrigin, context: nil).height
To avoid the special case like this image. I have to calculate the width
It has the big space after my message
I want it to look like this:
This is the code I use to calculate the message width (I used the correct height which I've calculated the width)
let size = CGSize(width: 1000.0, height: height)
let messageAttributeText = messageBody.attributedText
var width = messageAttributeText?.boundingRect(with: size, options: .usesLineFragmentOrigin, context: nil).width
but width in this code seem not right. Because I think it does care about my height property. It assume that my text is in only 1 line.
But I want to calculate the width, so that my text will `fill the whole label' just like the second image
Does anyone know how to calculate the width in my case ?
You can do that by casting String to NSString
var string = "Hello, World"
let nsString = string as NSString
let size = nsString.size(attributes: [NSFontAttributeName: UIFont.systemFont(ofSize: 14)])
The size will give you width and height of the string.
You can apply this to your NSAttributedStrings string property.
After a bit of research, I find out this:
The calculate width code doesn't work right because it do not care about the height property.
If height = 100 or height = 1000 it will return the same result because it assume to draw all the text in just one line.
So to calculate the width, I used binary search
var minWidth:CGFloat = 0.0
var maxWidth = maxWidth
while true {
if (minWidth >= maxWidth) {
width = minWidth
break
}
let testWidth = (maxWidth + minWidth) / 2.0
if calculateMessageHeight(width: testWidth) > messageHeight {
minWidth = testWidth + 2.0
continue
} else {
maxWidth = testWidth - 2.0
continue
}
I'm trying to make some UIImageViews in Xcode that fill the screen based on different conditions. For example, I might have a 3x3 square of images that have to fill the screen, or a 4x4 square that must fill the screen, based on different initial conditions. Every time I try to accomplish this, the ImageViews just end up being the same size for both conditions. I've tried many different solutions but the one I'm currently trying is:
if fieldDimensions == 3 {
let spacing = screenWidth / 16
let boxsize = screenWidth / 4
let xadjust = spacing / 2 //Value to help align view
let interval = spacing + boxsize
Button1Image.translatesAutoresizingMaskIntoConstraints = false
button1height.constant = boxsize
button1width.constant = boxsize
button2height.constant = boxsize
button2width.constant = boxsize
}
else if fieldDimensions == 4 {
let spacing = screenWidth / 20
let boxsize = screenWidth * 3/16
let interval = spacing + boxsize
button1height.constant = boxsize
button1width.constant = boxsize
button2height.constant = boxsize
button2width.constant = box size
All of the button heights and widths are linked to the height and width constraints in the storyboard (I just control-dragged them). Any help would be really appreciated, I've been working on this problem for almost a week now, thanks!!
I'm creating an iOS app using Swift, one with checkboxes. Currently, I've placed them inside a view (constrained and all), in the hopes that they would stay there and not mess up the rest of my app. Here's my code so far:
// UI
let lCheckboxHeight: CGFloat = 44.0;
let lCheckboxWidth: CGFloat = 180.0;
let waterSampleTreatmentTitles = ["i - Untreated", "ii - Acidified", "iii - Airfree", "iv - Filtered, Untreated","v - Filtered, Acidified","Stable Isotopes","Others"];
let lNumberOfCheckboxes = waterSampleTreatmentTitles.count
var lFrame = CGRectMake(0, 0, self.view.frame.size.width, lCheckboxHeight);
for (var counter = 0; counter < lNumberOfCheckboxes; counter++) {
let lCheckbox = Checkbox(frame: lFrame, title: waterSampleTreatmentTitles[counter], selected: false);
lCheckbox.mDelegate = self;
lCheckbox.tag = counter;
if (waterSampleTreatmentTitles[counter] == "i - Untreated" && self.flagUntreated == true){
lCheckbox.selected = true
}
else if (waterSampleTreatmentTitles[counter] == "ii - Acidified" && self.flagAcidified == true){
lCheckbox.selected = true
}
else if (waterSampleTreatmentTitles[counter] == "iii - Airfree" && self.flagAirfree == true){
lCheckbox.selected = true
}
else if (waterSampleTreatmentTitles[counter] == "iv - Filtered, Untreated" && self.flagFilterUntreat == true){
lCheckbox.selected = true
}
else if (waterSampleTreatmentTitles[counter] == "v - Filtered, Acidified" && self.flagFilterAcid == true){
lCheckbox.selected = true
}
else if (waterSampleTreatmentTitles[counter] == "Stable Isotopes" && self.flagStabIso == true){
lCheckbox.selected = true
}
else if (waterSampleTreatmentTitles[counter] == "Others" && self.flagOthers == true){
lCheckbox.selected = true
}
self.chemistryProductionWell.viewSampTreat.addSubview(lCheckbox);
lFrame.origin.y += lFrame.size.height;
}
Currently, this creates a list of checkboxes, which spills past the view I made, and just generally makes a mess of the app. The view is long enough for maybe two checkboxes vertically, but not eight.
How do I make it such that the checkboxes are arranged horizontally? I've tried replacing the following code:
lFrame.origin.y += lFrame.size.height;
With this:
lFrame.origin.x += lCheckboxWidth
But that doesn't take into account that the text for the checkboxes aren't the same length, and of course ignores the width restriction as well.
How do I make it such that if the checkbox length exceeds the view, it would drop down to the next line?
Thanks.
If the checkbox has no way to determine its own intrinsic size, you'll have to determine the width that each title would take, then factor that value into that checkbox's frame width.
However, wrapping a row of checkboxes will lead to a couple issues. First, the layout would need to be updated upon autorotation. Second, each row's checkboxes would not be vertically aligned with the previous row's checkboxes.
What you preferably want is a checkbox that can determine its own intrinsic size. Now you'd be able to take advantage of the Auto Layout system, and both the checkboxes, and their containing view could size themselves. This would have avoided the problem where the checkboxes are located outside their container's bounds (as well as having to hard code frames).
At that point, you could benefit from an easier solution like UIStackView, instead of having to code their layout on your own.
If you are using Storyboard, the ideal option would be be a checkbox that could not only self-size, but supported IBDesignable. You could then just setup outlets to IB checkboxes, instead of doing any of this in code.
If you aren't able to find a better control, then the easiest way to do what you ask would be as follows.
let lCheckboxHeight: CGFloat = 44.0
// Make the width as wide as necessary to accommodate the largest title
let lCheckboxWidth: CGFloat = 180.0
// Spacing between checkboxes or rows
let xSpacing: CGFloat = 10
let ySpacing: CGFloat = 10
// Current offset for next checkbox
var xOffset: CGFloat = 0
var yOffset: CGFloat = 0
for counter in 0..<lNumberOfCheckboxes {
var lFrame = CGRect(x: xOffset, y: yOffset, width: lCheckboxWidth, height: lCheckboxHeight);
// Advance offset for upcoming checkbox
xOffset += lCheckboxWidth + xSpacing
// Determine if there is enough room for another horizontal checkbox
let maxX = xOffset + lCheckboxWidth + xSpacing
if maxX >= chemistryProductionWell.viewSampTreat.bounds.maxX {
// Move to start of next row
xOffset = 0
yOffset += lCheckboxHeight + ySpacing
}
// ... Other code here
}
This still doesn't do anything to support autorotation, which is why you should look into an Auto Layout/Adaptive UI approach, and not directly work with frames.
As an aside, although you placed them in a viewSampTreat container, you had based their width on something other than their container, i.e. self.view.frame.size.width. This would have led to a clipping problem.
In an app I am attempting to have a view move within another view to a random location. I have been able to do this as follows:
mySmallerView.center = randomizeLocation()
func randomizeLocation() -> CGPoint {
let randomX = arc4random_uniform(UInt32(mainView.frame.width))
let randomY = arc4random_uniform(UInt32(mainView.frame.height))
return CGPointMake(CGFloat(randomX), CGFloat(randomY))
}
This moves it around quite nicely, BUT it uses center, so sometimes, the left is off the screen, or the right, top and/or bottom go off the screen because its center can be pushing the limits of the view's frame.
How would I improve randomizeLocation() to where it would ensure the BOUNDS/FRAME of the view to be moved do not exceed the bounds/frame of its superview?
Is there a way to do this?
i think it should be like this the max randomX must not able to be the mianView.frame.width
func randomizeLocation() -> CGPoint {
let randomX = arc4random_uniform(UInt32(mainView.frame.width - (mySmallerView.frame.width))) + (mySmallerView.frame.width / 2)
let randomY = arc4random_uniform(UInt32(mainView.frame.height - (mySmallerView.frame.height))) + (mySmallerView.frame.height / 2)
}
I think you need to make sure you don't put your smaller view too far out or down (by adding - (mySmallerView.frame.width / 2)). You also want to make sure you don't go too far to the left or up (by adding + (mySmallerView.frame.width / 2)).
func randomizeLocation() -> CGPoint {
let randomX = arc4random_uniform(UInt32(mainView.frame.width - (mySmallerView.frame.width / 2))) + (mySmallerView.frame.width / 2)
let randomY = arc4random_uniform(UInt32(mainView.frame.height - (mySmallerView.frame.height / 2))) + (mySmallerView.frame.height / 2)
return CGPointMake(CGFloat(randomX), CGFloat(randomY))
}