Convert Figma logo to code with AI

Ramotion logoreel-search

:octocat: 🔍 RAMReel is a UI controller that allows you to choose options from a list. Swift UI library made by @Ramotion

2,536
183
2,536
5

Top Related Projects

A Material Design ViewPager easy to use library

Material Design Search Bar for Android

A search view that implements a floating search bar also known as persistent search

2,232

Material You Search component for Android, SearchView

Quick Overview

Ramotion/reel-search is an iOS library that provides a custom UIControl for searching through a collection of items. It features a unique reel-like interface where users can scroll through options vertically, similar to a slot machine. This control is designed to enhance the user experience in search functionality within iOS applications.

Pros

  • Visually appealing and unique search interface
  • Smooth animations and intuitive user interaction
  • Customizable appearance to fit various app designs
  • Easy integration with existing iOS projects

Cons

  • Limited to vertical scrolling, which may not suit all use cases
  • Potential learning curve for users accustomed to traditional search bars
  • May not be suitable for very large datasets or complex search requirements
  • Requires iOS 9.0 or later, which could exclude older devices

Code Examples

  1. Basic setup of ReelSearchControl:
let reelSearch = ReelSearchControl(frame: CGRect(x: 0, y: 100, width: view.bounds.width, height: 50))
reelSearch.delegate = self
reelSearch.dataSource = self
view.addSubview(reelSearch)
  1. Implementing the data source method:
func numberOfItems(in reelSearch: ReelSearchControl) -> Int {
    return items.count
}

func reelSearch(_ reelSearch: ReelSearchControl, viewForItem item: Int) -> UIView {
    let label = UILabel()
    label.text = items[item]
    return label
}
  1. Handling selection in the delegate method:
func reelSearch(_ reelSearch: ReelSearchControl, didSelectItem item: Int) {
    print("Selected item: \(items[item])")
}

Getting Started

  1. Install the library using CocoaPods by adding the following to your Podfile:

    pod 'ReelSearchController'
    
  2. Import the module in your Swift file:

    import ReelSearchController
    
  3. Create and configure a ReelSearchControl instance:

    let reelSearch = ReelSearchControl(frame: CGRect(x: 0, y: 100, width: view.bounds.width, height: 50))
    reelSearch.delegate = self
    reelSearch.dataSource = self
    view.addSubview(reelSearch)
    
  4. Implement the required delegate and data source methods as shown in the code examples above.

Competitor Comparisons

A Material Design ViewPager easy to use library

Pros of MaterialViewPager

  • Offers a comprehensive Material Design-inspired ViewPager implementation
  • Provides smooth animations and transitions between pages
  • Includes customizable header layouts and color schemes

Cons of MaterialViewPager

  • May have a steeper learning curve due to its more complex implementation
  • Could be considered "heavier" in terms of resource usage compared to reel-search
  • Less focused on search functionality specifically

Code Comparison

MaterialViewPager:

mViewPager = (MaterialViewPager) findViewById(R.id.materialViewPager);
mViewPager.getViewPager().setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
    @Override
    public Fragment getItem(int position) {
        return RecyclerViewFragment.newInstance();
    }
    // ... other methods
});

reel-search:

let reelSearch = ReelSearch()
reelSearch.delegate = self
reelSearch.dataSource = self
view.addSubview(reelSearch)

MaterialViewPager offers a more comprehensive solution for creating Material Design-inspired view pagers with customizable headers and animations. It provides a rich set of features but may require more setup and configuration. On the other hand, reel-search focuses specifically on providing a unique search interface with a reel-like animation, making it more lightweight and easier to implement for search functionality. The code comparison shows that MaterialViewPager requires more setup in Java, while reel-search has a simpler Swift implementation for its specific use case.

Material Design Search Bar for Android

Pros of MaterialSearchBar

  • More customizable appearance with various styling options
  • Supports voice search functionality
  • Includes built-in suggestions and history features

Cons of MaterialSearchBar

  • Less visually unique compared to reel-search's rotating wheel design
  • May require more setup and configuration for advanced features

Code Comparison

MaterialSearchBar:

MaterialSearchBar searchBar = findViewById(R.id.searchBar);
searchBar.setHint("Search");
searchBar.setOnSearchActionListener(new MaterialSearchBar.OnSearchActionListener() {
    @Override
    public void onSearchStateChanged(boolean enabled) {
        // Handle search state change
    }
});

reel-search:

let reelSearch = ReelSearchView()
reelSearch.frame = CGRect(x: 20, y: 100, width: self.view.frame.width - 40, height: 50)
reelSearch.config.characters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
self.view.addSubview(reelSearch)

Summary

MaterialSearchBar offers more customization options and built-in features like voice search and suggestions, making it suitable for complex search implementations. However, reel-search provides a unique visual experience with its rotating wheel design. The choice between the two depends on the specific requirements of the project and the desired user experience.

A search view that implements a floating search bar also known as persistent search

Pros of FloatingSearchView

  • More customizable UI with support for various styles and animations
  • Includes built-in suggestions and recent search functionality
  • Better integration with Material Design guidelines

Cons of FloatingSearchView

  • More complex implementation due to increased customization options
  • Potentially higher memory usage and performance overhead
  • Less suitable for simple search interfaces or non-Material Design apps

Code Comparison

FloatingSearchView:

mSearchView = findViewById(R.id.floating_search_view);
mSearchView.setOnQueryChangeListener(new FloatingSearchView.OnQueryChangeListener() {
    @Override
    public void onSearchTextChanged(String oldQuery, String newQuery) {
        // Handle search query changes
    }
});

Reel-search:

ReelSearchView reelSearchView = findViewById(R.id.search_view);
reelSearchView.setAdapter(new ReelSearchAdapter(/* your data */));
reelSearchView.setOnItemSelectedListener(new ReelSearchView.OnItemSelectedListener() {
    @Override
    public void onItemSelected(Object item) {
        // Handle item selection
    }
});

Both libraries offer search functionality for Android apps, but FloatingSearchView provides more advanced features and customization options, while Reel-search focuses on a unique, reel-based search interface. The choice between them depends on the specific requirements of your project and desired user experience.

2,232

Material You Search component for Android, SearchView

Pros of Search

  • More comprehensive search functionality with support for various UI styles and configurations
  • Active development with frequent updates and improvements
  • Extensive documentation and examples for easier implementation

Cons of Search

  • Larger codebase and potentially more complex integration
  • May have a steeper learning curve for beginners
  • Less focused on a specific UI style compared to Reel-search's unique reel interface

Code Comparison

Search:

SearchView(
    query = query,
    onQueryChange = { query = it },
    onSearch = { /* Perform search */ },
    active = active,
    onActiveChange = { active = it },
    placeholder = { Text("Search") },
    leadingIcon = { Icon(Icons.Default.Search, contentDescription = null) },
    trailingIcon = { /* Custom trailing icon */ }
)

Reel-search:

let reel = RAMReel<String, RAMCell, String>(
    frame: CGRect(x: 0, y: 0, width: 320, height: 80),
    dataSource: self,
    placeholder: "Search"
)
reel.hook = { selectedValue in
    print(selectedValue)
}

Both libraries offer search functionality, but Search provides a more flexible and customizable approach, while Reel-search focuses on a specific reel-based UI. Search is better suited for projects requiring diverse search implementations, while Reel-search excels in creating a unique, visually appealing search experience.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

REEL SEARCH

Reel Search is a Swift UI controller that allows you to choose options from a list


We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Stay tuned for the latest updates:


RAMReel

Swift 4.0 CocoaPods CocoaPods Carthage compatible codebeat badge Travis Twitter Donate

Requirements

  • iOS 8.0+
  • Swift 4.0

Installation

We recommend using CocoaPods to install our library.

Just put this in your Podfile:

pod 'RAMReel'

or Carthage users can simply add reel-search to their Cartfile:

github "Ramotion/reel-search"

Usage

In order to use our control you need to implement the following:

Types

Now you can use those types as generic parameters of type declaration of RAMReel:

RAMReel<CellClass, TextFieldClass, DataSource>

Values

Next you need to create an instance of RAMReel, and for that you need the following:

  • frame: CGRect: Rect, specifying where you want to put the control.
  • dataSource: DataSource: the source of data for the reel.
  • placeholder: String (optional): Placeholder text; by default, an empty string is used.
  • hook: DataSource.ResultType -> Void (optional): Action to perform on element selection, nil by default. You can add additional hooks later, if you need multiple actions performed.

Let's use it to create an instance of RAMReel:

let ramReel = RAMReel<CellClass, TextFieldClass, DataSource>(frame: frame, dataSource: dataSource, placeholder: placeholder, hook: hook)

Adding action hooks

To add extra actions you may append DataSource.ResultType -> Void functions to RAMReel object property hooks:

ramReel.hooks.append { data in
	// your code goes here
}

Putting on the view

And the final step, showing RAMReel on your view:

ramReel.view.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
yourView.addSubview(ramReel.view)

If you have visual problems, try calling prepareForViewing before showing your view.

Like this:

override func viewDidLayoutSubviews() {
	super.viewDidLayoutSubviews()
	ramReel.prepareForViewing()
}

Theming

If you want to change RAMReel look and feel, you can use theming.

To do so, you just to have to implement the Theme protocol in your class/structure and set your RAMReel object's theme property to your theme.

Or you can just use the predefined instance of type RAMTheme.

let textColor: UIColor
let listBackgroundColor: UIColor
let font: UIFont

let theme = RAMTheme(textColor: textColor, listBackgroundColor: listBackgroundColor, font: font)

Docs

CocoaPods

See more at RAMReel docs


📄 License

Reel Search is released under the MIT license. See LICENSE for details.

This library is a part of a selection of our best UI open-source projects.

If you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com

📱 Get the Showroom App for iOS to give it a try

Try this UI component and more like this in our iOS app. Contact us if interested.