• Stars
    star
    399
  • Rank 108,092 (Top 3 %)
  • Language
    Objective-C
  • License
    MIT License
  • Created almost 11 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A UIView that mimics the music playback indicator in the Music.app on iOS 7+

Version Build Status

Icon NAKPlaybackIndicatorView

Music.app

NAKPlaybackIndicatorView is a view that mimics the music playback indicator in the Music.app on iOS. It has some vertical bars and they oscillate randomly.

Requires iOS 8.0 or later.

Trying the Demo App

You can try the demo app instantly with CocoaPods:

# This will open an Xcode workspace
$ pod try NAKPlaybackIndicatorView

In the opened workspace, choose the Demo scheme and run.

Installation

NAKPlaybackIndicatorView is available through CocoaPods, to install it simply add the following line to your Podfile:

pod 'NAKPlaybackIndicatorView'

Then run pod install.

Basic Usage

Here's a basic example:

#import <NAKPlaybackIndicatorView/NAKPlaybackIndicatorView.h>

- (void)viewDidLoad
{
    [super viewDidLoad];

    NAKPlaybackIndicatorViewStyle *style = [NAKPlaybackIndicatorViewStyle iOS7Style];
    NAKPlaybackIndicatorView *indicator = [[NAKPlaybackIndicatorView alloc] initWithStyle:style];
    [self.view addSubview:indicator];
    [indicator sizeToFit];

    // Initially the `state` property is NAKPlaybackIndicatorViewStateStopped
    // and the `hidesWhenStopped` property is YES.
    // Thus, the view is hidden at this time.

    // The view appears and the bars start animation.
    indicator.state = NAKPlaybackIndicatorViewStatePlaying;

    // The bars stop animation and become idle.
    indicator.state = NAKPlaybackIndicatorViewStatePaused;

    // The view becomes hidden.
    indicator.state = NAKPlaybackIndicatorViewStateStopped;
}

You can use NAKPlaybackIndicatorView in both code and Storyboard, and it works well with both Auto Layout and frame-based layout.

Code with Auto Layout

NAKPlaybackIndicatorView *indicator = [[NAKPlaybackIndicatorView alloc] initWithFrame:CGRectZero];
indicator.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:indicator];

// Then, add some positioning layout constraints.
// Note that normally you don't need to add sizing constraints
// since NAKPlaybackIndicatorView has an intrinsic content size.
// It will be automatically resized to fit its content.

Code with Frame-Based Layout

NAKPlaybackIndicatorView *indicator = [[NAKPlaybackIndicatorView alloc] initWithFrame:CGRectZero];
[self.view addSubview:indicator];
[indicator sizeToFit]; // Resize itself to fit its content.

Storyboard with Auto Layout

  1. Put a UIView on your view.
  2. Set its custom class to NAKPlaybackIndicatorView.
  3. In the Size Inspector (⌥⌘5), set the Intrinsic Size to Placeholder and set the width to 12 and the height to 12. Note that this is just for convenience of the appearance on the Storyboard, and the placeholder size won't be used at runtime.
  4. Add some positioning layout constraints.

Storyboard with Frame-Based Layout

  1. Put a UIView on your view.
  2. Set its custom class to NAKPlaybackIndicatorView.
  3. In the Size Inspector (⌥⌘5), set the width to 12 and the height to 12.

Customization

Bar Count, Size, and Spacing

Bars can be customized via NAKPlaybackIndicatorViewStyle.

Color

The color of the bars can be changed by setting tintColor property (UIView) of the view or its ancestor view.

View Size

Normally the view can be automatically resized to fit its content by:

  • Omitting sizing constraints in Auto Layout, since it has an intrinsic content size.
  • Calling sizeToFit in frame-based layout.

Or if you explicitly specify size, the bars will be placed in the center of the view.

Class Reference

NAKPlaybackIndicatorView's class reference is available on CocoaDocs.org.

License

Copyright (c) 2014–2017 Yuji Nakayama

See the LICENSE.txt for details.

More Repositories

1

transpec

The RSpec syntax converter
Ruby
1,011
star
2

atom-lint

Obsolete: Generic code linting support for Atom
CoffeeScript
112
star
3

astrolabe

An object-oriented Ruby AST extension for Parser
Ruby
67
star
4

rspec-hue_formatter

Bring RSpec integration into your room with Philips Hue
Ruby
59
star
5

atom-auto-update-packages

Keep your Atom packages up to date.
CoffeeScript
33
star
6

apple-music-node

Node.js Client for Apple Music built with TypeScript
TypeScript
31
star
7

homebridge-switchbot

Homebridge plugin for SwitchBot
JavaScript
29
star
8

rspec-composable_json_matchers

RSpec matchers for JSON strings with the power of built-in matchers and composable matchers
Ruby
18
star
9

safedep

Make your Gemfile safe by adding dependency version specifiers automatically
Ruby
12
star
10

pacman-repo

My personal pacman repository
Perl
6
star
11

cocoapods-check_latest

A CocoaPods plugin that checks if the latest version of a pod is up to date.
Ruby
6
star
12

alfred-itunes-airplay

iTunes AirPlay Control for Alfred
Objective-C
5
star
13

smart-car-dashboard

Smart car dashboard, built for my Subaru Levorg with iPad Pro, ESP32, and Firebase
Swift
5
star
14

repository_merger

A tool for merging existing Git repositories into a monorepo while keeping their commit history
Ruby
4
star
15

dotfiles

My personal dotfiles
Shell
3
star
16

gemologist

A library for rewriting your Gemfile and gemspec
Ruby
1
star
17

japan_etc

Japanese ETC (Electronic Toll Collection System) tollbooth database / ETC料金所番号データベース
Ruby
1
star
18

zsh-completions-osx

Zsh completion scripts for Mac OS X specific tools.
1
star
19

rubygems-xcodeproj_generator

Provides a Rake task for generating an Xcode project for Ruby C extension development.
Ruby
1
star