Androidアプリ開発で画像を加工するならuCrop(注意点あり
アプリ内で画像を取得して何かをする、という機能はスマホアプリにおいて当たり前となってきました。
しかし、標準で画像をCropする機能自体は提供されておらず、自前で作る必要があります。
今回は画像のCropを楽に行えるライブラリ uCrop の使い方を説明します。
はじめに
今回開発する環境は下記のとおりです。
Android: Stuiod: 4.0.1
minSdkVersion: 24
targetSdkVersion: 30
compileSdkVersion: 30
Gradle: 6.1.1
ライブラリ設定
まずはリポジトリを追加します。
1 2 3 4 5 6 7 8 9 |
allprojects { repositories { google() jcenter() maven { url "https://jitpack.io" } } } |
リポジトリを追加したら Gradle にライブラリを追加する内容を記載しましょう。
1 2 3 4 5 6 7 8 |
dependencies { // uCrop - Image Cropping Library for Android implementation 'com.github.yalantis:ucrop:2.2.5' } |
これでライブラリを使用することができます。
機能を組み込む
uCropの機能を導入していきます。
まずは AndroidManifest.xml ファイルに uCrop の Activity を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<manifest> <application> <!-- uCrop --> <activity android:name="com.yalantis.ucrop.UCropActivity" android:screenOrientation="portrait" android:theme="@style/Theme.AppCompat.Light.NoActionBar"/> </application> </manifest> |
そして使いたい Activity にプログラムを追加しましょう。
1 2 3 4 |
// ライブラリのインポート import com.yalantis.ucrop.UCrop |
uCropの開き方は下記のような感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
class SampleActivity: AppCompatActivity() { private fun openCropView(uri: Uri) { val fileName = "crop.png" val cropFile = File(cacheDir, fileName) cropFile?.let { file -> val cropUri = Uri.fromFile(file) var uCrop = UCrop.of(uri, cropUri) // uCropのオプションを設定 val options = UCrop.Options() options.setToolbarTitle("画像切り出し画面") options.setToolbarWidgetColor(getColor(android.R.color.white)) options.setToolbarColor(getColor(R.color.colorPrimary)) options.setStatusBarColor(getColor(R.color.colorPrimaryDark)) options.setActiveControlsWidgetColor(getColor(R.color.colorAccent)) options.setCompressionFormat(Bitmap.CompressFormat.PNG) options.setCompressionQuality(100) options.setHideBottomControls(false) options.setFreeStyleCropEnabled(true) uCrop = uCrop.withOptions(options) // uCropを開く uCrop.start(this) } } } |
ここでのポイントは getExternalFilesDirではうまく動かない という点です。
このことに気づくまでにずいぶんと時間を取られました(公式には記載されていないです)
そのため、上記の例では cacheDir にファイルを作成しており、この場合は正常に動作します。
また、使用しているオプションなどはメソッド名から察することが可能なので、説明は割愛させていただきます。
さいごに、Cropされた後の画像を取得するには下記のとおりです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
override fun onActivityResult(requestCode: Int, resultCode: Int, intent: Intent?) { super.onActivityResult(requestCode, resultCode, intent) // uCrop if(requestCode == UCrop.REQUEST_CROP) { // Crop完了時 if(resultCode == RESULT_OK) { // Cropした画像を取得 val resultUri = UCrop.getOutput(intent!!) if(resultUri != null) { // TODO: 画像を使う処理を書く } } // Cropキャンセル時 if(resultCode == RESULT_CANCELED) { // TODO: キャンセルされた } // Cropエラー時 if(resultCode == UCrop.RESULT_ERROR) { // TODO: エラーが発生した Log.e("TAG", "uCropエラー: "+UCrop.getError(intent!!).toString()) } } } |
ここまで来ればもうお判りでしょう。
Uri を利用して画像を操作していくことができます。
さいご
画像のCropや傾きを1つのライブラリで操作できるのはとても助かりますね。
もし不明点などがあれば公式を見てみてはいかがでしょうか。
ではでは。
- おすすめ記事
-
-
のえる2017.04.13
-
AndroidXに対応しようとしてハマった話
のえる2020.07.07 -
【必見】Androidアプリからプリンターへ印刷をするには
のえる2017.08.21
-
POPULAR
のえる
Full-stack Developer