Improvements to the sections bar

MenuCollectionViewCell.swift

@@ -9,5 +9,7 @@
 import UIKit
 class MenuCollectionViewCell: UICollectionViewCell {
     
-    @IBOutlet weak var myLabel: UILabel!
+    @IBOutlet weak var label: UILabel!
+ 
+    @IBOutlet weak var bar: UIView!
 }

app/AppDelegate.swift

@@ -20,9 +20,6 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
         
         //Set a one line for collectionView
         
-        
-        //Navigation bar customization
-        //UINavigationBar.appearance().isTranslucent = false;
         return true
     }
 

app/Base.lproj/Main.storyboard

@@ -39,13 +39,13 @@
                                 </constraints>
                                 <color key="barTintColor" red="0.85979589512451782" green="0.95012098090369101" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                                 <items>
-                                    <navigationItem title="Title" id="isw-jq-8xu"/>
+                                    <navigationItem title="Gasteizko Margolariak" id="isw-jq-8xu"/>
                                 </items>
                             </navigationBar>
                             <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" pagingEnabled="YES" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" dataMode="prototypes" translatesAutoresizingMaskIntoConstraints="NO" id="Ikv-46-g2m">
                                 <color key="backgroundColor" red="0.85979589509999998" green="0.95012098089999997" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                                 <constraints>
-                                    <constraint firstAttribute="height" constant="40" id="D8o-cR-8qU"/>
+                                    <constraint firstAttribute="height" constant="45" id="D8o-cR-8qU"/>
                                 </constraints>
                                 <collectionViewFlowLayout key="collectionViewLayout" scrollDirection="horizontal" minimumLineSpacing="3" minimumInteritemSpacing="1000" id="uuj-Dg-Ftx">
                                     <size key="itemSize" width="100" height="50"/>
@@ -55,13 +55,13 @@
                                 </collectionViewFlowLayout>
                                 <cells>
                                     <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="cell" id="a4j-DF-epb" customClass="MenuCollectionViewCell" customModule="app" customModuleProvider="target">
-                                        <rect key="frame" x="0.0" y="-5" width="100" height="50"/>
+                                        <rect key="frame" x="0.0" y="-3" width="100" height="50"/>
                                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                                         <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
                                             <rect key="frame" x="0.0" y="0.0" width="100" height="50"/>
                                             <autoresizingMask key="autoresizingMask"/>
                                             <subviews>
-                                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text="Home" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="PbJ-gz-Ivz">
+                                                <label opaque="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text="Home" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="PbJ-gz-Ivz">
                                                     <frame key="frameInset" minX="6" minY="5" width="100" height="40"/>
                                                     <color key="backgroundColor" red="0.85979589509999998" green="0.95012098089999997" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                                                     <constraints>
@@ -72,28 +72,25 @@
                                                     <nil key="textColor"/>
                                                     <nil key="highlightedColor"/>
                                                 </label>
-                                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text="" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="0zD-5h-K1i">
-                                                    <frame key="frameInset" minX="29" minY="14" width="42" height="21"/>
-                                                    <color key="backgroundColor" red="0.39387386904777305" green="0.62796053144439012" blue="0.99835759401321411" alpha="1" colorSpace="calibratedRGB"/>
+                                                <view contentMode="scaleToFill" misplaced="YES" translatesAutoresizingMaskIntoConstraints="NO" id="ZNu-9N-o6K">
+                                                    <frame key="frameInset" minX="4" minY="30" width="80" height="5"/>
+                                                    <color key="backgroundColor" red="0.58073881930000004" green="0.8210679313" blue="0.99835759400000001" alpha="1" colorSpace="calibratedRGB"/>
                                                     <constraints>
-                                                        <constraint firstAttribute="height" constant="2" id="V9n-Wq-pBe"/>
+                                                        <constraint firstAttribute="height" constant="4" id="Si5-HX-bjR"/>
                                                     </constraints>
-                                                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                                    <nil key="textColor"/>
-                                                    <nil key="highlightedColor"/>
-                                                </label>
+                                                </view>
                                             </subviews>
                                         </view>
-                                        <color key="backgroundColor" red="0.58073881927014726" green="0.82106793130139011" blue="0.99835759401321411" alpha="1" colorSpace="calibratedRGB"/>
                                         <constraints>
-                                            <constraint firstItem="0zD-5h-K1i" firstAttribute="centerX" secondItem="a4j-DF-epb" secondAttribute="centerX" id="2n7-QU-CYC"/>
                                             <constraint firstItem="PbJ-gz-Ivz" firstAttribute="centerX" secondItem="a4j-DF-epb" secondAttribute="centerX" id="BgU-YL-9w0"/>
-                                            <constraint firstItem="0zD-5h-K1i" firstAttribute="width" secondItem="a4j-DF-epb" secondAttribute="width" constant="-8" id="SKa-0j-eNV"/>
-                                            <constraint firstAttribute="bottomMargin" secondItem="0zD-5h-K1i" secondAttribute="bottom" id="WfL-GN-Mgd"/>
+                                            <constraint firstItem="ZNu-9N-o6K" firstAttribute="width" secondItem="a4j-DF-epb" secondAttribute="width" constant="-8" id="FxK-Bg-b2j"/>
                                             <constraint firstItem="PbJ-gz-Ivz" firstAttribute="centerY" secondItem="a4j-DF-epb" secondAttribute="centerY" id="YZg-8N-4hG"/>
+                                            <constraint firstAttribute="bottomMargin" secondItem="ZNu-9N-o6K" secondAttribute="bottom" id="ebT-TP-iQL"/>
+                                            <constraint firstItem="ZNu-9N-o6K" firstAttribute="centerX" secondItem="a4j-DF-epb" secondAttribute="centerX" id="jUM-XF-fT7"/>
                                         </constraints>
                                         <connections>
-                                            <outlet property="myLabel" destination="PbJ-gz-Ivz" id="Qtp-JE-TDT"/>
+                                            <outlet property="bar" destination="ZNu-9N-o6K" id="VHR-kp-QRc"/>
+                                            <outlet property="label" destination="PbJ-gz-Ivz" id="vh3-yZ-ISb"/>
                                         </connections>
                                     </collectionViewCell>
                                 </cells>
@@ -103,7 +100,7 @@
                                 </connections>
                             </collectionView>
                             <containerView opaque="NO" contentMode="scaleToFill" misplaced="YES" translatesAutoresizingMaskIntoConstraints="NO" id="FfD-xR-Ufj">
-                                <frame key="frameInset" height="380" maxY="-5"/>
+                                <frame key="frameInset" height="381" maxY="-5"/>
                                 <connections>
                                     <segue destination="aNc-O2-1Df" kind="embed" id="QXk-51-7xE"/>
                                 </connections>
@@ -133,7 +130,7 @@
             <objects>
                 <viewController storyboardIdentifier="homeViewControllerScene" id="aNc-O2-1Df" sceneMemberID="viewController">
                     <view key="view" contentMode="scaleToFill" id="12o-6g-8cT">
-                        <rect key="frame" x="0.0" y="0.0" width="320" height="380"/>
+                        <rect key="frame" x="0.0" y="0.0" width="320" height="381"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <color key="backgroundColor" red="0.9425276964" green="1" blue="0.35931510379999998" alpha="1" colorSpace="calibratedRGB"/>
                     </view>

app/ViewController.swift

@@ -11,6 +11,7 @@ import UIKit
 class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
 
     override func viewDidLoad() {
+        print("LOAD")
         super.viewDidLoad()
         // Do any additional setup after loading the view, typically from a nib.
     }
@@ -20,25 +21,43 @@ class ViewController: UIViewController, UICollectionViewDataSource, UICollection
         // Dispose of any resources that can be recreated.
     }
     
-    let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard
+    let reuseIdentifier = "cell"
+    var selected = 0
     var items = ["Home", "Location", "La Blanca", "Actividades", "Blog", "Gallery"]
     
     // MARK: - UICollectionViewDataSource protocol
     
-    // tell the collection view how many cells to make
+    //Tell the collection view how many cells to make
     func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
         return self.items.count
     }
     
-    // make a cell for each cell index path
+    //Make a cell for each section
     func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
         
-        // get a reference to our storyboard cell
+        print("SET: \(selected)/\(indexPath.item)")
+        
+        //Get a reference to our storyboard cell
         let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MenuCollectionViewCell
         
-        // Use the outlet in our custom class to get a reference to the UILabel in the cell
-        cell.myLabel.text = self.items[indexPath.item]
-        cell.backgroundColor = UIColor.cyan // make cell more visible in our example project
+        //Make the updatable
+        //cell.setNeedsDisplay()
+        //cell.setNeedsLayout()
+        
+        //Set text
+        cell.label.text = self.items[indexPath.item]
+        
+        
+        
+        //Mark the first cell as selected
+        if indexPath.item == selected{
+            cell.bar.backgroundColor = UIColor(red: 90/255, green: 180/255, blue: 255/255, alpha: 1)
+            cell.label.font = UIFont.boldSystemFont(ofSize: cell.label.font.pointSize)
+        }
+        else{
+            cell.bar.backgroundColor = UIColor(red: 148/255, green: 209/255, blue: 255/255, alpha: 1)
+            cell.label.font = UIFont.systemFont(ofSize: cell.label.font.pointSize)
+        }
         
         return cell
     }
@@ -46,7 +65,40 @@ class ViewController: UIViewController, UICollectionViewDataSource, UICollection
     // MARK: - UICollectionViewDelegate protocol
     
     func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
-        // handle tap events
+        // Return all labels to their original state, and mark the selected as such
+        var i = 0
+        selected = indexPath.item
+        for cell in collectionView.visibleCells as! [MenuCollectionViewCell]{
+            print("\(i)/\(indexPath.item)")
+            if i == indexPath.item{
+                print("CHANGE")
+                cell.bar.backgroundColor = UIColor(red: 90/255, green: 180/255, blue: 255/255, alpha: 1)
+                cell.label.font = UIFont.boldSystemFont(ofSize: cell.label.font.pointSize)
+            }
+            else{
+                cell.bar.backgroundColor = UIColor(red: 148/255, green: 209/255, blue: 255/255, alpha: 1)
+                cell.label.font = UIFont.systemFont(ofSize: cell.label.font.pointSize)
+                
+            }
+            //cell.superview?.superview?.setNeedsDisplay()
+            //cell.setNeedsLayout()
+            //DispatchQueue.main.async{cell.setNeedsDisplay()}
+            i = i + 1
+        }
+        print("REDRAW")
+        //collectionView.setNeedsDisplay()
+        collectionView.layoutIfNeeded()
+        //collectionView.setNeedsLayout()
+        //DispatchQueue.main.async{collectionView.setNeedsDisplay()}
+        //dispatch_async(dispatch_get_main_queue(), {collectionView.setNeedsDisplay()})
+        
+            
+        
+        //Mark the selected one
+        //let sel = collectionView.visibleCells as! [[MenuCollectionViewCell]indexPath]
+        
+        
+        //let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MenuCollectionViewCell
         print("You selected cell #\(indexPath.item)!")
     }