Android View Collections

FloatingView

ちょっとした情報を表示できるFloating Viewのオープンソース化

研究開発チームでイケてるUI100を作っている曽川(@egg_sogawa)です。
じっくりゆっくりとViewを作っています。

FloatingView

FloatingViewをオープンソース化しました。 GitHubからご利用ください。 https://github.com/recruit-lifestyle/FloatingView

FloatingViewは、端末の最前面にちょっとした情報を表示するためのViewです。

シンプルな使い方

これを応用して広告を表示するような使い方 ※GitHubに上がっているものは実際の広告を表示できます

使い方

1) FloatingViewを使用したいプロジェクトにFloatingViewプロジェクトのlibraryを追加
2) FloatingViewを表示するためのServiceを定義
1
2
3
public class ChatHeadService extends Service {
    ...
}
3) FloatingViewに表示するViewを設定(サンプルでは onStartCommand で設定)
1
2
3
final LayoutInflater inflater = LayoutInflater.from(this);
final ImageView iconView = (ImageView) inflater.inflate(R.layout.widget_chathead, null, false);
iconView.setOnClickListener(...);
4) FloatingViewManager を使用しFloatingViewを設定
1
2
3
4
mFloatingViewManager = new FloatingViewManager(this, this);
mFloatingViewManager.setFixedTrashIconImage(R.drawable.ic_trash_fixed);
mFloatingViewManager.setActionTrashIconImage(R.drawable.ic_trash_action);
mFloatingViewManager.addViewToWindow(iconView, FloatingViewManager.SHAPE_CIRCLE, (int) (16 * metrics.density));

なお、FloatingViewManager の第2引数は FloatingViewListener です。
これは、FloatingViewを終了する際に呼び出される処理( onFinishFloatingView )を記述します。

また、このサービスは startForeground メソッドを呼び出すことで、明示的に終了するまで常駐させます。

1
startForeground(NOTIFICATION_ID, createNotification());
5) AndroidManifestにパーミッションを追加
1
2
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.VIBRATE"/>
6) AndroidManifestにServiceを定義
1
2
3
4
5
6
7
8
<application ...>
        ...
        <!-- デモ表示サービス -->
        <service
            android:name="jp.co.recruit_lifestyle.sample.service.ChatHeadService"
            android:exported="false"/>
        ...
</application>
7) Serviceを開始する処理を記述(以下はFragmentの例)
1
2
final Activity activity = getActivity();
activity.startService(new Intent(activity, ChatHeadService.class));
補足) FloatingAdService を動作させるためには、string.xmlad_unit_id を自身の広告ID(インタースティシャル)で置き換えてください
1
<string name="ad_unit_id">ADD_YOUR_UNIT_ID</string>

FloatingViewの機能

1) アプリよりも前面に表示される

通常のアプリよりも前面(TYPE_PRIORITY_PHONEレイヤー)に表示するので、アプリをを切り替えても画面に残ったままです。
ただし、操作を邪魔しないように、画面の左右どちらか近い方に自動的に移動します。

2) 削除アイコンが設定できる

削除アイコンは、画面下部に近づくと表示され、表示中のアイコンを削除できます。
削除アイコンには、拡大する画像と拡大しない画像を設定できます。

1
2
mFloatingViewManager.setFixedTrashIconImage(R.drawable.ic_trash_fixed);
mFloatingViewManager.setActionTrashIconImage(R.drawable.ic_trash_action);

丸型、四角型どちらでも対応しています。addViewToWindow を呼び出す際に指定します。

1
mFloatingViewManager.addViewToWindow(iconView, FloatingViewManager.SHAPE_CIRCLE, (int) (16 * metrics.density));

3) 全画面アプリが立ち上がると一時的に非表示になる

スプラッシュ画面のようなフルスクリーンのアプリが立ち上がると、一時的に非表示になります。
一時的に非表示にしたくない場合は、以下のように常に表示することもできます。

1
mFloatingViewManager.setDisplayMode(FloatingViewManager.DISPLAY_MODE_SHOW_ALWAYS);

まだできていないこと

悔しいですが、まだ未完成な部分もあります。

  • スペックの低い端末でドラッグするとカクつく
  • 縦・横にフリックした時の動作および画面端に到達した時のはね返り
  • FloatingViewのグループ化(ドラッグした時にグループ全体を追従させる)
  • 5系の端末ではアイコンがナビゲーションバーよりも前面に出てきてしまう

こちらは、アップデートで対応していこうと思っています。

曽川 義英

(スマートデバイス開発チーム)

AndroidやUnityでアプリを作っています。アプリに関する技術的なところを紹介していこうと思います。

NEXT