cosmicmind / samples

Sample projects using Material, Graph, and Algorithm.

Samples is a collection of example projects that use Material, Motion, Graph, and Algorithm.

Photos Sample

Using Material and Motion, a dynamic photo gallery is created with dynamic animations used during transitions.

• Download Photos Sample.

Cards & Tabs

In this sample project, Material is used to create a tabbing layout with dynamically sized Cards within a TableView.

• Download Cards & Tabs Sample.

Graph Search

Using the Graph Search API is incredibly flexible. In the following example, Search is used to create a live search on user names with a dynamic UI provided by Material's SearchBar.

• Download Graph Search Sample.

Learn, Enjoy, Create

Many more sample projects are available within the Samples repository.

Requirements

• iOS 8.0+ / Mac OS X 10.10+
• Xcode 8.0+

Communication

• If you need help, use Stack Overflow. (Tag 'cosmicmind')
• If you'd like to ask a general question, use Stack Overflow.
• If you found a bug, and can provide steps to reliably reproduce it, open an issue.
• If you have a feature request, open an issue.
• If you want to contribute, submit a pull request.

Installation

• All projects use CocoaPods
• Download Samples

Read Material - It's time to download to learn how to install Material & Motion using GitHub, CocoaPods, and Carthage.

To install all pods, use the following script:

$ ./install_all_pods.sh

License

Copyright (C) 2015 - 2018, Daniel Dahan and CosmicMind, Inc. http://cosmicmind.com. All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

• Redistributions of source code must retain the above copyright notice, this
  list of conditions and the following disclaimer.

• Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

• Neither the name of CosmicMind nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

samples's Issues

Best practice to use controls

All given controls are great individually but how to implement when all controls are come to gather?

Like in my app I have status bar + Tool bar + page tab bar. And each tab contain collection view. To achieve above I have done below code.
AppDelegate

var window: UIWindow?
    
    lazy var movieVillaViewController: MovieVillaViewController = {
        return UIStoryboard.viewController(identifier: "MovieVillaViewController") as! MovieVillaViewController
    }()
    
    lazy var upcomingViewController: UpcomingViewController = {
        return UIStoryboard.viewController(identifier: "UpcomingViewController") as! UpcomingViewController
    }()
    
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {                
        let viewControllers = [playingNowViewController, upcomingViewController] as [UIViewController]
        
        let pageTabBarController = MVPageTabBarController(viewControllers: viewControllers, selectedIndex: 0)
        let toolbarController = AppToolbarController(rootViewController: pageTabBarController)
               
        window = UIWindow(frame: UIScreen.main.bounds)
        window!.rootViewController = toolbarController
        window!.makeKeyAndVisible()
        
        return true
    }

So my view is looking somthing like below

Now when user click on blue search button. It should open new view with only search bar on top and containing collection view under it, and don't want toolbar, page tab bar control.

Issue is in given example on git hub for search bar is added in AppDelegate as rootViewController but I do have some other controls as rootViewController as you can see above.

So can you please suggest best way how to implement these great controls which can work with each other.

May be my question is silly to you but I am beginner in iOS.

Thanks

How to dynamically set TableViewCell with Cards

Hi,
I am reopenning it as height is not working properly. how to send you screenshot?

TextField build failed using Material 2.3.4

When I tried to build TextField Sample using Materail 2.3.4, it failed and Xcode 8 report that there had an error in Material+UIImage.swift at line 309. The information as follows:

"Material+UIImage.swift:309:30: Expression was too complex to be solved in reasonable time; consider breaking up the expression into distinct sub-expressions"

Help with MenuController

Hi Daniel,

Firstly, I love Material, I'm really enjoying using it in my project. I'm new to iOS and Swift, so Material is a great kickstart to getting me up and running.

I have a requirement where I want to use the MenuController in a single View Controller in the app, as the menu items are specific to that view controller. The example shows how it is used as a application wide MenuController.

Currently, similar to the example, I have a SearchMenuViewController which is equivalent to the example AppMenuViewController, and I have a SearchMenuItemsViewController which is the equivalent to the example RootViewController. In my parent view controller, I have a property for my SearchMenuViewController which I instantiate in the same way as the example -

searchMenuVC = SearchMenuViewController(rootViewController: SearchMenuItemsViewController())

When I debug the app, I see the trace drops into ViewDidLoad on the SearchMenuItemsViewController, but never drops into ViewDidAppear, so the prepareMenuController function never gets called, and thus doesn't add the menu item subviews and set the delegate. If I move the prepareMenuController call to happen in ViewDidLoad, I can see the menu item fab button in my parent VC, but it doesn't respond to taps.

Do you have an example that I can follow for using the MenuController in a single parent view controller, or can you give me any pointers where I might be going wrong?

Thanks
Alex

Issue building projects using CocoaPods.

I am trying to run the sample programs that are present in this repo but I am facing problems
According to the installation instructions mentioned in the link I have executed the shell script but I get the following errors on command line. The cococapods version is 1.1.0.beta.1
https://github.com/CosmicMind/Samples/wiki/Installation
I

Then I tried to go the folder BottomNavigationController and then did "pod install" . It installed the dependencies but when I open xcworkspace file I get many errors. I am using Xcode 8.1.
Please help. Thanks

Why not create one project include all samples?

I want to review some samples, but I must build many project.
Why you not create one project include all samples?
Example: Have a main view include list of buttons link to samples.

Is it possible to setup cards for a list view in the storyboard? or does it have to be done programatically ?

search bar clarification example

made some headway with tweaking designs on page.
But no so clear on rest of implementation details.
If I want a tableview inside view / how to rig this up?

I dropped in a tableview inside AppSearchBarController

the rootViewcontroller appears to not work.
Am I supposed to nest this in its own navigation controller?
is the back button supposed to pop / dismiss?

        let app = AppSearchBarController(rootViewController: UIViewController())
        
        
        let vc = OnboardingSuperstarsVC()
        let nc = UINavigationController(rootViewController: vc)
        nc.navigationBar.isTranslucent = false
        window?.rootViewController = nc
        window?.makeKeyAndVisible()
        
        nc.present(app, animated: true, completion: { 
            
        })

import UIKit
import Material
import Dotzu


class AppSearchBarController: SearchBarController,SearchBarDelegate {
    fileprivate var menuButton: IconButton!
    fileprivate var moreButton: IconButton!
    
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        Notificator.fireNotification(named: kFilterPressedClose)
    }
    
    open override func prepare() {
        super.prepare()
        prepareBackButton()
        prepareSearchBar()
        
      
        self.view.backgroundColor = wweColors.onyx
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        focusingSearchBar()
    }
    
    func focusingSearchBar() {
        
        guard let searchBar = searchBarController?.searchBar else {
            return
        }
        
        DispatchQueue.main.async {
            searchBar.textField.becomeFirstResponder()
        }
        
    }
    
    func reloadData(){
        
    }
    
    
  
    func searchBar(searchBar: SearchBar, willClear textField: UITextField, with text: String?){
         Logger.verbose("text:",text ?? "")
    }
    
    func searchBar(searchBar: SearchBar, didChange textField: UITextField, with text: String?) {
        guard let pattern = text?.trimmed, 0 < pattern.utf16.count else {
            reloadData()
            return
        }
        
        //https://github.com/lazarte/GraphSearch/blob/b8d7ea54a074838acba63f1fe084e71373ccfe77/Search/RootViewController.swift
        /*search.async { [weak self, pattern = pattern] (users) in
            guard let regex = try? NSRegularExpression(pattern: pattern, options: []) else {
                return
            }
            
            var data = [Relationship]()
            
            for user in users {
                if let name = user.object?["name"] as? String {
                    let matches = regex.matches(in: name, range: NSRange(location: 0, length: name.utf16.count))
                    if 0 < matches.count {
                        data.append(user)
                    }
                }
            }
            
            self?.tableView.data = data
        }*/
    }
    
    
}

extension AppSearchBarController {
    func didPressBackButton() {
        
        
//        self.transitionFromRootViewController(self.rootViewController)
        searchBar.textField.resignFirstResponder()
        self.navigationController?.pop()
    }
    fileprivate func prepareBackButton() {
        menuButton = IconButton(image: Icon.cm.arrowBack)
        menuButton.addTarget(self, action: #selector(didPressBackButton), for: .touchUpInside)
    }
    
    
    fileprivate func prepareSearchBar() {
        UIApplication.statusBarBackgroundColor = wweColors.darkLine
        searchBar.clearButton.tintColor = .white
        searchBar.clearButton.backgroundColor = wweColors.blackButtonColor
        searchBar.clearButton.layer.cornerRadius = 15
        searchBar.textColor = .white
        searchBar.textField.font = RobotoFont.medium(with: 20)
        searchBar.delegate = self
        searchBar.textField.keyboardAppearance = .dark
        searchBar.backgroundColor = wweColors.darkLine
        searchBar.placeholderColor = .white
        searchBar.leftViews = [menuButton]
        searchBar.backgroundColor = wweColors.onyx
        searchBar.textColor = .white
        searchBar.tintColor = wweColors.fireEngineRed

    }
}

CardTableView sample app missing base classes (won't compile)

The CardTableView demo sample project won't compile.
Specifically: AppFABMenuController
It is a subclass of FABMenuController (in the material framework), which I found a copy of online,
but that references
FabButton, FabMenuIem which are not in the current set of source files in the material framework.

why is my last icon on Toolbar lost on iphone 6S+ screen?

Hi,

I get this weird problem when trying to test my app on a larger screen.

======

Originally, I develop my app on an iphone 5S, on which everything is ok

======

With the same code, I tried to run on an iPhone 6S+, my trash icon is gone:

It seems that the Navigation Bar on the screen is too wide to fit in the screen. So I review the constraint in Storyboard, which is still good.

My RootNavigationController is from the sample project:

import UIKit
import Material

class RootNavigationController: NavigationController {

    override func prepare() {
        super.prepare()
        
        guard let v = navigationBar as? NavigationBar else {
            return
        }
        
        v.depthPreset = .none
        v.dividerColor = Color.grey.lighten3
    }
    
}

Could you show me how I could fit the last icon on the wide screen?

Regards,

No such module 'Material' in Xcode 8.1

~/Downloads/Samples-master/Material/Programmatic/Card/Card/ViewController.swift:32:8: No such module 'Material' in Xcode 8.1

CardTableView 0 Articles

Working with CardTableView Sample but no card is displayed anything wrong with the setup of the project
Please check

the screenshot for more details

Write story on Reminders.

This is a tutorial that takes a developer through the process of developing with the Reminders API in Material and storing it to Graph.

Transition ViewController in Storyboard

Hi all,

I'm new member of this project, I using NavigationDrawerController and implement LeftViewController as UITableViewController.

How to transition to new view when user click on table row item

Help required

Hi,
I am sorry I could not get back at the question you asked in the earlier issue,so I have reopened th issue.
This is the following status and more information
Xcode 8.1
Cocoapods 1.1.1

Now I try to run the script 'install_all_pods.sh'
which throws a lot of errors

Then I go inside the project
CosmicSamples/Material/Programmatic/Button
Then I run 'pod install'
I get the following error

I do what the error message tells me yet no change in the error message.
I guess that the something bad has happened but still I open the .xcworkspace and try to run then I get
"No such module 'Material' " error
This is the screenshot for your reference

How to define left navigation drawer width ?

How to push new view controller using toolbar view controller?

I use toolbar view controller. I want to navigate to new screen.

this code will not work :
pushViewController(NextViewController(), animated: true)

as it it is not inheretin from ui navigation controller

how do i manually segue to a view with navdrawer

I am new to iOS, my app has a login page, and from login page i segue to a new view and i want navdrawer to be displayed there instead of making navdrawer the rootview in appdelegate.

Images in PresenterCard doesn't load first time

I'm following the CardTableView sample, and I'm having trouble with showing the images.
Your example doesn't load the images until switching tab and going back.

My problem is related I think: I load the images from the network, which makes them appear after a second. The height of the cell is not correctly calculated, so the scroll area in the table view ends up too small.

What I would like (and this actually worked in an earlier version of Material): If I know I'm going to have an image later, set the height of the cell (or card) so it shows up blank but large. When the image is loaded, it just gets added, but the size stays the same (so the table doesn't flicker for the user).

This is how I set the height if I already know that an image is coming:

        if a.imageRef != nil {
            presenterImageView.height = imageHeight
        } else {
            presenterImageView.height = 0
        }
        if let image = activityImage {
            presenterImageView.height = image.height
            DispatchQueue.main.async { [weak self, image = image] in
                self?.presenterImageView.fadeTransition(0.6)
                self?.presenterImageView.image = image
            }
        } else {
            presenterImageView.image = nil
        }

Material Search Bar within a Navigation Controller

Hello! Is there an example of how to place the Material Search Bar in a Navigation Controller, inside of a Tab Bar Controller? So basically, a setup like Facebook mobile, but instead of their version of the search bar, it would show the Material search bar. I didn't see any examples, so I figured Id ask

Sample for TextView

Hi,

Just wondering if there is any sample available for TextView?

Thanks.

Make an Editor sample project.

Original issue CosmicMind/Material#598

Make a sample project using the new Editor component.

NavigationController with status bar

When I am implementing NavigationController it hides status bar above.

Will you please help me how can I enable it to show again???

icons on tabbarItem

Hello everyone,

how can add icons on item tabs (pageTab...), and remove title text?

thanks very much.

Tab Control in between of another view

Hi I am not getting way to put tab control inside other view.

Seeking your help. Thanks

Material CollectionView Sample Error

/Samples-master/Material/Programmatic/CollectionView/CollectionView/ViewController.swift:61:41: 'CollectionViewDataSource' cannot be constructed because it has no accessible initializers

Use of unresolved identifier 'Motion' In AppMenuController (menu.views.first?.animate(animation: Motion.rotate(angle: 45)))

Write story on CardTableView sample.

This is a tutorial that shows a developer how to make dynamic table cells using Cards with Graph and Material.

Write story on Editor.

This is a tutorial that takes a developer through the process of developing with the Editor API in Material and storing it to Graph.

Write story on PhotoLibrary.

This is a tutorial that takes a developer through the process of developing with the PhotoLibrary API in Material and storing it to Graph.

Few issues w/XCode 8.2.1

Tried to build the CardTableView sample after running the install_all_pods script. Wasn't quite able to determine a solution. Running XCode 8.2.1 (8C1002).

• Screen doesn't seem to be resolvable?
  /Samples-master/Graph/CardTableView/CardTableView/CardTableViewCell.swift:110:36: Use of unresolved identifier 'Screen'

• AppDelegate.swift:54:36: Argument labels '(viewController:)' do not match any available overloads
  

Disable NavigationDrawer in Pushed ViewController

Hi, i just have a question

i have a RootViewController (MainViewController With navidrawer and Menu Button(FAB))

let MainViewController: MainViewController = {
            return UIStoryboard.viewController(identifier: "MainViewController") as! MainViewController
        }()
        
        let NaviLeftViewController: NaviLeftViewController = {
            return UIStoryboard.viewController(identifier: "NaviLeftViewController") as! NaviLeftViewController
        }()
        
        let ApptoolBar =  AppNavigationController(rootViewController: MainViewController)
        
        let NaviDrawer =  AppNavigationDrawerController(rootViewController: ApptoolBar, leftViewController: NaviLeftViewController, rightViewController: nil)
        
        
        
        let SnackBar   =    AppSnackbarController(rootViewController: NaviDrawer)
        
        let Menu       = AppMenuController(rootViewController: SnackBar)
        
        
        UIApplication.shared.keyWindow?.rootViewController = Menu

when i push using the navigation controller the naviDrawer and the menu are shown in the Pushed View Controller

self.navigationController?.pushViewController(OrderBidsView, animated: true)

i can hide them and show in both viewControllers , but is there a way to hide the navidrawer and the menu in pushed view controllers instead of showing and hiding them manually?

Links Broken

It seems the links that lead you to downloading the sample projects are broken.
Such as this one https://github.com/CosmicMind/Samples/tree/master/Graph/CardTableView
it resolves to a 404 page.

Menu disappears when it is closed.

If you close a menu by tapping on the original menu button then the menu disappears. This only happens on a device, not in the simulator. It doesn't happen if you close the menu by tapping outside of it.

I've tested it on iOS 10.1 only and I'm using Xcode 8.1 and Material 2.3.22.

You can reproduce this in the MenuController sample project.

pageTabBarController

1. how to change Tab bar position from bottom to top ?
2. Can i add some button with imageView at tabBar ?

TextField dividerNormalHeight = 0.0 is not working at first time.

When I set dividerNormalHeight = 0.0 and run the app. the divider is still there, but after click it, the divider disappeared. Is that a bug? @DanielDahan

Error in Samples/AppToolbarController

Hi,

I found something in prepareStatusBar() {}

file: Programmatic/ToolbarController/ToolbarController/AppToolbarController.swift
line: 65

I think it's supposed to be:
statusBarController?.statusBar.backgroundColor = Color.blue.darken3
instead of:
statusBar.backgroundColor = Color.blue.darken3

Thanks

setting ui element inside card.bottomBar.centerViews

bottomBar.centerViews = [label1,label2,label3]

How do I make Label1 length 2x the lenghth of label 3 for example? It seems like the auto layout adjust the label width in equal proportion

Cannot Utilize AppPageTabBarController

Does leftview could set up active&normal color in Textfield ?

I wonder if there has a property of leftview to set up active&normal color in Textfield, does it could only set an image with fixed color?

How to dynamically set TableViewCell with Cards

This is a followup issue based on an original issue in Material CosmicMind/Material#554

PhotoLibraryController not found

When I tried to subclass my view controller with PhotoLibraryController, it keeps on saying unidentified. Could anyone explain more about PhotoLibraryController class ?

use pagetabbar on top

Hello,

I want to use page tabbar on top but I couldn't move it to the top .

How can I make it ?

Thanks

fabButton method not found in Menu class

is the FABMenu class has been changed to Menu()? Because fabButton and fabMenuItems() methods are not found.
fabMenu.fabButton = fabButton
fabMenu.fabMenuItems = [notesFABMenuItem, remindersFABMenuItem]

my current pod is: pod 'Material', '~> 2.0'

Write story on Capture.

This is a tutorial that takes a developer through the process of developing with the Capture API in Material and storing it to Graph.

NavigationDrawer -> NavigationController -> PageTabBarController sample.

Add a sample for Card contentView being a UITableView

I have been having trouble getting UITableView to work inside Card. I tried to modify the Material/Programmatic/Card sample to have UITableView as Card's contentView, but it doesn't seem to scale correctly. Also I would like to get the row selection working. Here's the patch I applied to the sample:

diff --git a/Material/Programmatic/Card/Card/ViewController.swift b/Material/Programmatic/Card/Card/ViewController.swift
index 519921a..0f2a9ca 100644
--- a/Material/Programmatic/Card/Card/ViewController.swift
+++ b/Material/Programmatic/Card/Card/ViewController.swift
@@ -37,7 +37,7 @@ class ViewController: UIViewController {
     fileprivate var toolbar: Toolbar!
     fileprivate var moreButton: IconButton!
     
-    fileprivate var contentView: UILabel!
+    fileprivate var contentView: UITableView!
     
     fileprivate var bottomBar: Bar!
     fileprivate var dateFormatter: DateFormatter!
@@ -93,10 +93,10 @@ extension ViewController {
     }
     
     fileprivate func prepareContentView() {
-        contentView = UILabel()
-        contentView.numberOfLines = 0
-        contentView.text = "Material is an animation and graphics framework that is used to create beautiful applications."
-        contentView.font = RobotoFont.regular(with: 14)
+        contentView = UITableView()
+        contentView.delegate = self
+        contentView.dataSource = self
+        contentView.register(TableViewCell.self, forCellReuseIdentifier: "TableViewCell")
     }
     
     fileprivate func prepareBottomBar() {
@@ -124,3 +124,27 @@ extension ViewController {
     }
 }
 
+extension ViewController: UITableViewDelegate {
+    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
+        return 60
+    }
+
+    public func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
+        print("Hello \(indexPath.row)")
+    }
+}
+
+extension ViewController: UITableViewDataSource {
+    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
+        return 5
+    }
+
+    /// Prepares the cells within the tableView.
+    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
+        let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell", for: indexPath) as! TableViewCell
+        cell.textLabel?.text = "Hello \(indexPath.row)"
+        cell.imageView?.image = Icon.addCircle
+        return cell
+    }
+}
+

PageTabBarController without adding as rootViewController

Can I prepare and config PageTabBarController without setting it in AppDelegate as rootViewController? If Yes can someone provide me sample code?

Is there a way to disable placeholder animation while entering text.

Hello,
I am new to Material library.

i have a custom requirement where i don't want to have animation where placeholder of text fields animates to top left. But i do need other feature of Textfield.

I tried looking into implementation of Text Field but didn't find anything concrete. Please suggest.

[PageTabBar] Transition to another page

How to make transition to another page via code?
So far i have done this by changing access modifier of handlePageTabBarButton from internal to public. However this is for sure not the proper way of doing this.