Update Readme

Author: muukii

README.md

@@ -6,12 +6,72 @@
 [![Platform](https://img.shields.io/cocoapods/p/StackScrollView.svg?style=flat)](http://cocoapods.org/pods/StackScrollView)
 [![Carthage compatible](https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat)](https://github.com/Carthage/Carthage)
 
+<img width=320 src="Resources/shot.png">
+
+<img width=320 src="Resources/sample.gif">
+
 ## What is this?
 
 StackScrollView builds form UI easily.
 
-StackScrollView has internal UICollectionView.
-Internal CollectionView calculates size of view by AutoLayout, then that display.
+StackScrollView includes UICollectionView.
+UICollectionView calculates size of view by AutoLayout, then that display.
+(Use `systemLayoutSizeFitting`)
+
+- We call `StackCell` instead of `Cell` on StackScrollView.
+- We no longer need to consider reusing Cells.
+- `StackCell` requires constraint based layout.
+
+## Usage
+
+### Basic usage
+
+```swift
+let stack = StackScrollView()
+stack.append(view: UIView())
+```
+
+### Create CustomCell from Code
+
+*We have to set constraints completely.*
+
+```swift
+final class LabelStackCell: UIView {
+  
+  private let label = UILabel()
+  
+  init(title: String) {
+    super.init(frame: .zero)
+    
+    addSubview(label)
+    label.translatesAutoresizingMaskIntoConstraints = false
+    
+    label.topAnchor.constraint(greaterThanOrEqualTo: topAnchor, constant: 8).isActive = true
+    label.bottomAnchor.constraint(lessThanOrEqualTo: bottomAnchor, constant: 8).isActive = true
+    label.rightAnchor.constraint(equalTo: rightAnchor, constant: 8).isActive = true
+    label.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
+    label.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
+    heightAnchor.constraint(greaterThanOrEqualToConstant: 40).isActive = true
+    
+    label.font = UIFont.preferredFont(forTextStyle: .body)
+    label.text = title
+  }
+}
+```
+
+```swift
+let stack = StackScrollView()
+stack.append(view: LabelStackCell(title: "Label"))
+```
+
+### Create CustomCell from XIB
+
+// TODO:
+
+### Create everything
+
+You can create any Cell.
+Please, check `StackScrollView-Demo`
 
 ## Author
 

Resources/sample.gif

@@ -1,8 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="11201" systemVersion="16B2555" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="7T2-uk-2HS">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="12120" systemVersion="16E195" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="7T2-uk-2HS">
+    <device id="retina4_7" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
     <dependencies>
-        <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="11161"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12088"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -37,7 +39,8 @@
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="XRJ-Za-6jO">
-                                <state key="normal" title="Button"/>
+                                <rect key="frame" x="168.5" y="318.5" width="38" height="30"/>
+                                <state key="normal" title="Open"/>
                                 <connections>
                                     <segue destination="BYZ-38-t0r" kind="presentation" id="P88-30-pnT"/>
                                 </connections>

Resources/shot.png

@@ -16,18 +16,20 @@ final class LabelStackCell: StackCellBase {
 
   private let label = UILabel()
 
-  override init() {
+  init(title: String) {
     super.init()
 
     addSubview(label)
-    label <- Edges(UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8))
+    label.translatesAutoresizingMaskIntoConstraints = false
 
-    self <- Height(>=40)
+    label.topAnchor.constraint(greaterThanOrEqualTo: topAnchor, constant: 8).isActive = true
+    label.bottomAnchor.constraint(lessThanOrEqualTo: bottomAnchor, constant: 8).isActive = true
+    label.rightAnchor.constraint(equalTo: rightAnchor, constant: 8).isActive = true
+    label.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
+    label.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
+    heightAnchor.constraint(greaterThanOrEqualToConstant: 40).isActive = true
 
     label.font = UIFont.preferredFont(forTextStyle: .body)
-  }
-  
-  func set(value: String) {
-    label.text = value
+    label.text = title
   }
 }

StackScrollView-Demo/Base.lproj/Main.storyboard

@@ -24,6 +24,12 @@ class ViewController: UIViewController {
 
     views.append(MarginStackCell(height: 96, backgroundColor: marginColor))
 
+    views.append(HeaderStackCell(title: "LabelStackCell", backgroundColor: marginColor))
+
+    views.append(LabelStackCell(title: "Label"))
+    
+    views.append(MarginStackCell(height: 40, backgroundColor: marginColor))
+    
     views.append(HeaderStackCell(title: "TextFieldStackCell", backgroundColor: marginColor))
 
     views.append(fullSeparator())

StackScrollView-Demo/LabelStackCell.swift

@@ -1,7 +1,7 @@
 Pod::Spec.new do |s|
   s.name             = 'StackScrollView'
-  s.version          = '0.5.0'
-  s.summary          = 'Scalable form builder with UIScrollView'
+  s.version          = '0.9.0'
+  s.summary          = 'Scalable form builder with UICollectionView'
   s.homepage         = 'https://github.com/muukii/StackScrollView'
   s.license          = { :type => 'MIT', :file => 'LICENSE' }
   s.author           = { 'muukii' => '[email protected]' }