Foreword

DETAILED code demo follows:

GitHub_Swift version: Demo specific code

Collectionview simple design and background in different colors according to different settings sectionTop, collection, horizontal support styles, custom offset projection.
Because of the diversity APP design style, many times we need to use some special styles, such as projection, rounded corners, a space under increased background and projectors and other combinations of these seemingly simple style, in fact, you do not need to spend less time to style and layout adjustment.
For example, I encountered need collectionView, depending on the section set different background color, you need to dynamically set contains headerview, also need to set up the projector and so on, so this design can be configured and dynamically updated collection background color controls. Can basically meet the various requirements.

Design ideas

1, inheritance UICollectionViewFlowLayout, prepareLayout override method calculates the size of each section in the method according sectiooninset set by the user, for supplementary frame.
2, inheritance UICollectionViewLayoutAttributes, increased background, projectors and other parameters.
3, calculated for each section and disposed in prepareLayout UICollectionViewLayoutAttributes background parameters, and save,
4, determines whether the acquired attr rect performed in layoutAttributesForElementsInRect.
5, the pattern disposed applyLayoutAttributes machine.

Renderings:

Support type:

1, collectionView section background.
2, contains headerview.
3, contains footerview.
4, support borderWidth, borderColor.
5, support for shadow projection.
6, support collectionView, Vertical, Horizontal.
7, is provided to support different background depending on the display section, respectively.

Core code

/// 计算默认不包含headerview和footerview的背景大小

/// @paramframeframe description
/// @paramsectionInsetsectionInset description
//MARK: 默认section无偏移大小
extension JJCollectionViewRoundFlowLayout_Swift{
    func calculateDefaultFrameWithSectionFrame(_ frame:CGRect ,sectionInset:UIEdgeInsets) -> CGRect{
        var sectionFrame = frame;
        sectionFrame.origin.x -= sectionInset.left;
        sectionFrame.origin.y -= sectionInset.top;
        if (self.scrollDirection == UICollectionView.ScrollDirection.horizontal) {
            sectionFrame.size.width += sectionInset.left + sectionInset.right;
            //减去系统adjustInset的top
            if #available(iOS 11, *) {
                sectionFrame.size.height = self.collectionView!.frame.size.height - self.collectionView!.adjustedContentInset.top;
            } else {
                sectionFrame.size.height = self.collectionView!.frame.size.height - abs(self.collectionView!.contentOffset.y)/*适配iOS11以下*/;
            }
        }else{
            sectionFrame.size.width = self.collectionView!.frame.size.width;
            sectionFrame.size.height += sectionInset.top + sectionInset.bottom;
        }
        return sectionFrame;
    }
}

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    var attrs = super.layoutAttributesForElements(in: rect) ?? []
    for attr in self.decorationViewAttrs {
        attrs.append(attr)
    }
    return attrs
}

  override public func prepare() 代码有点多，就不贴出来了。下面有demo。

how to use:

pod 'JJCollectionViewRoundFlowLayout_Swift'

//可选设置
open var isCalculateHeader : Bool = false    // 是否计算header
open var isCalculateFooter : Bool = false    // 是否计算footer


/// 设置底色偏移量(该设置只设置底色，与collectionview原sectioninsets区分）
/// - Parameter collectionView: collectionView description
/// - Parameter collectionViewLayout: collectionViewLayout description
/// - Parameter section: section description
func collectionView(_ collectionView : UICollectionView , layout collectionViewLayout:UICollectionViewLayout,borderEdgeInsertsForSectionAtIndex section : Int) -> UIEdgeInsets;

/// 设置底色相关
/// - Parameter collectionView: collectionView description
/// - Parameter collectionViewLayout: collectionViewLayout description
/// - Parameter section: section description
func collectionView(_ collectionView : UICollectionView, layout collectionViewLayout : UICollectionViewLayout , configModelForSectionAtIndex section : Int ) -> JJCollectionViewRoundConfigModel_Swift;

On collectionview page code to the agent (JJCollectionViewDelegateRoundFlowLayout)

And achieve the following two methods:


#pragma mark - JJCollectionViewDelegateRoundFlowLayout

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, borderEdgeInsertsForSectionAtIndex section: Int) -> UIEdgeInsets {
    return UIEdgeInsets.init(top: 5, left: 12, bottom: 5, right: 12)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, configModelForSectionAtIndex section: Int) -> JJCollectionViewRoundConfigModel_Swift {
    let model = JJCollectionViewRoundConfigModel_Swift.init();
    
    model.backgroundColor = UIColor.init(red: 233/255.0, green:233/255.0 ,blue:233/255.0,alpha:1.0)
    model.cornerRadius = 10;
    return model;
}

Results are as follows:

DETAILED code demo follows:

GitHub_OC version: Demo specific code

GitHub_Swift version: Demo specific code

Code cloud _OC: Demo specific code have time to be star.

Follow-up may be individually updated swift release, so stay tuned.

If you have questions, you are provided directly DELINQUENCY, or email [email protected], or reply directly. Thank you.

Swift a few lines of code set UIcollectionView background section, rounded