IOS Swift Question posted in
The official documentation can be found here.

Ios swift – How to create page with launcher view like iPhone Home Screen?

What should I do if I want to achieve icon management for iPhone types, with both large and small icons that can be dragged and deleted?

I tried using UICollectionview, but it doesn’t seem to achieve the desired effect. Because these icons vary in size, what layout should be used? When the large icon moves towards the small icon, how to calculate the surrounding small icons and exchange the positions of the four small icons with the large icon?

Tags:

2

Answers


  1. 0

    You can implement icon management using UICollectionview as follows:

    1. Use UICollectionview to display the icons.
    2. As the icons have varying sizes, utilize UICollectionviewFlowLayout to arrange the icons. UICollectionviewFlowLayout enables you to align the icons in a grid layout.
    3. When a larger icon moves towards smaller icons, you need to calculate the surrounding smaller icons and exchange their positions. Implement the collectionView(_:moveItemAt:to:) method of UICollectionviewDelegate to exchange the positions of the larger and smaller icons. Update the display to reflect the changed icon arrangement.
    4. To implement the drag and delete functionality, enable the dragInteractionEnabled property of UICollectionview and implement the collectionView(_:itemsForBeginning:at:) method to specify the icons that can be dragged and deleted. After designating the icons to be dragged and deleted, handle the deletion of the dragged icons accordingly.

    By following these previous steps, you can achieve icon management using UICollectionview.

    Login or Signup to reply.
  2. 0

    You can achieve your objectives by using UICollectionView. However, Compositional Layout might be easier to use (instead of the Flow Layout) as it doesn’t require you to provide exact sizes of each icon in your view. You can provide estimates instead. You might also find this library useful as it simplifies the implementation of Compositional Layout further. You would use this library by creating an enum and define the sections like this example:

    import UIKit
import Composure

enum LayoutSections: Int, CaseIterable, DefinesCompositionalLayout {
    //list the number of sections in your layout. in this example 
    //there are 2 sections with different layout requirements.
    case section1
    case section2
    
    func layoutInfo(using layoutEnvironment: NSCollectionLayoutEnvironment) -> CompositionalLayoutOption {
        switch self {
        case .section1:
            return .fixedWidthDynamicHeight(fixedWidth: 180, estimatedHeight: 75)
        case .section2:
            return .dynamicWidthDynamicHeight(estimatedWidth: 150, estimatedHeight: 150)
        }
    }
}

    And then in your view controller where the collection view is, you would generate the layout like so:

    import UIKit
import Composure

class MyViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //...
        //generate the compositional layout with one line of code
        collectionView.collectionViewLayout = generateCompositionalLayout(with: LayoutSections.allCases)
    }
}

    If you want to reorder items in your collection view, your data source must implement collectionView(_:moveItemAt:to:). As the documentation reads, if you don’t implement this method, you cannot reorder items in your collection view.

    Lastly, if you want to support the drag and drop effect in your collection view, you must implement the functions specified in UICollectionViewDragDelegate protocol.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search