シンプルでローディング中に使えるクラス

さいしょに

Titanium Mobileアプリ内でちょいちょい使う機会があったのでクラス化しました。
iOS用です。

f:id:tuki0918:20130520175632p:plain

機能

●　default の黒四角の大きさは 88dp です。

●　ActivityIndicatorのmessageが横にしか表示されなかったので、代わりにLabel使っています。

●　message有り無しに関わらず、黒四角の真ん中に表示されるようにしています。

●　全面に window（無色）が展開されるので、表示中は操作不能になる（している）。「バックボタン」や「NavBar」のみ操作解除したい場合は、「top: '44dp'」をコメントアウトを解除して下さい。

使用

# /app.js
$ =
  lib: require '/lib/activity_indicator'

Ti.UI.setBackgroundColor '#fff'

win = Ti.UI.createWindow()

# default -> '88dp'
Loading = new $.lib.ActivityIndicator()

# size
# Loading = new $.lib.ActivityIndicator '132dp'

# size + message
# Loading = new $.lib.ActivityIndicator '132dp', 'Loading ...'

setTimeout ->
  # 削除用
  Loading.win.close()
  return
, 5000


# おまけ
# setTimeout ->
#   # indicator と Label を管理している view を削除
#   Loading.view.remove Loading.viewIndicator
#   # Label を追加
#   label = Ti.UI.createLabel
#     color: '#ccc'
#     font:
#       fontSize: 12
#       fontWeight: 'bold'
#     text: 'Error'
#   Loading.view.add label
# , 5000


win.open()

コード

# /lib/activity_indicator.js
ui =
  win:
    # NavBarを操作可能にしたい場合は解除
    # top: '44dp'
    backgroundColor: '#fff'
  view:
    backgroundColor: '#000'
    borderRadius: 10
    opacity: .8
  viewIndicator:
    layout: 'vertical'
    height: Ti.UI.SIZE
  message:
    top: '5dp'
    color: '#ccc'
    font:
      fontSize: 12
      fontWeight: 'bold'


class ActivityIndicator
  constructor: (@size = '88dp', @msg = null)->
    @win = Ti.UI.createWindow ui.win
    @view = Ti.UI.createView ui.view
    @view.width = @size
    @view.height = @size

    @win.add @view
    @win.open()

    @viewIndicator = Ti.UI.createView ui.viewIndicator
    @view.add @viewIndicator

    @indicator = Ti.UI.createActivityIndicator()
    if Ti.Platform.name is 'iPhone OS'
      @indicator.style = Ti.UI.iPhone.ActivityIndicatorStyle.BIG
    else
      @indicator.style = Ti.UI.ActivityIndicatorStyle.BIG

    @viewIndicator.add @indicator
    @indicator.show()

    if @msg
      @message = Ti.UI.createLabel ui.message
      @message.text = @msg
      @viewIndicator.add @message


module.exports.ActivityIndicator = ActivityIndicator