2015年6月29日月曜日

Androidで写真と動画を複数選択するUI

Androidで写真と動画を複数選択するUIの作り方を書いてみます。

MediaChooserというライブラリを使用します。

https://github.com/learnNcode/MediaChooser

こんな感じで、ビデオのタブと写真のタブがあり、
選択して右上の「Done」を押すと決定するというUIです。



1.SDK Managerで、以下をインストール。すでにInstalledであれば不要。
 Android Support Repository
 Android 4.4.2 (API 19)の中の以下2つ。
  SDK Platform
  Google APIs (x86 System Image)

2.Android Studioを再起動。

3.https://github.com/learnNcode/MediaChooser に行き、右側の Download ZIP を
 押してダウンロードし、解凍しておく。

4.Android Studioのメニューの File → Import Project から、
 解凍した中の mediaChooser-sample フォルダを選択してインポート。
 comlearnNcodemediachoosersampleとmediaChooserlibの2つのプロジェクトができる。

5.mediaChooserlib/manifests/AndroidManifest.xml のandroid:name="@string/app_name" の所でエラーになるので、
 android:label="@string/app_name" に修正。

6.さらに、同ファイルの
 com.learnncode.mediachooser.fragment.ImageFragment の所でエラーになるので、
 <activity を <fragment に修正。その下のVideoFragmentの所も同様。

7.android:theme="@style/AppBaseTheme"  が重複しているとのエラーが出るので、
 android:theme="@style/AppBaseTheme" を削除。

8.メニューの Build → Clean Project を実行すると、ビルドが成功。
 (BUILD SUCCESSFUL)

9.アプリを実行 (Run 'app')すると、サンプルアプリが起動する。
 少し動かしてみて感触を掴んだら、今度は自分のアプリに組み込む。

10.自分のアプリをAndroid Studioで開いて、File → Project Structure を開く。
 左上の + をクリックし、下の枠の Improt Existing Project を選択して Next を押す。

11.先ほど解凍した MediaChooser-lib フォルダを選択して Next を押して、さらにNext、Finish を押す。
 ビルドが行われるので、しばらく待つと、mediaChooserlib というライブラリが自分のアプリと同じ階層に現れる。

12.上記の5~8を実行する。

13.続く・・・