3 months ago, my boss requested me to implement a Twitter-like image viewer in our app. It supports pinch-to-zoom and swipe-to-dismiss gesture.
Let’s see how the twitter’s image viewer works.

## Twitter’s image viewer

[Twitter's image viewer(Android)](https://cdn-images-1.medium.com/max/800/1*zOf7LARpXPavlWO-2nCm0A.gif)

### Android’s specification

* supports scrolling when zoomed in
* supports over scaling
* supports swipe-to-dismiss gesture with shared elements transition when zoomed out
* supports horizontal paging

[Twitter's image viewer(iOS)](https://cdn-images-1.medium.com/max/800/1*q8mVT_jgvKp5MFfV-2uo_A.gif)

### iOS’s specification

* supports scrolling & flinging when zoomed in
* supports over scrolling & scaling
* supports swipe-to-dismiss gesture with vertical translate animation when zoomed out
* supports horizontal paging

Super cool…How can I implement this? 🤔

## Any libraries?

There are many libraries for image zooming.

* [https://github.com/chrisbanes/PhotoView](https://github.com/chrisbanes/PhotoView)
* [https://github.com/sephiroth74/ImageViewZoom](https://github.com/sephiroth74/ImageViewZoom)
* [https://github.com/MikeOrtiz/TouchImageView](https://github.com/MikeOrtiz/TouchImageView)

Although these great libraries provide pinch-to-zoom gesture, does not provide swipe-to-dismiss gesture(for now) 😫

## How about using Behavior with existing libraries?

First, I have tried to use [CoordinatorLayout.Behavior](https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.Behavior)  with existing libraries.

I wrote the below code.

[VerticalSwipeDismissBehavior.kt](https://gist.github.com/igreenwood/401b3789554c324d013fc66da96bdd2d#file-verticalswipedismissbehavior-kt)

It seems to work with normal ImageView.

[work with normal ImageView](https://cdn-images-1.medium.com/max/800/1*Z0ugyH7HYjCsKC0T4NKItQ.gif)

But, in the case of PhotoView, behavior does not work 😿

[does not work with PhotoView](https://cdn-images-1.medium.com/max/800/1*2wJFGb4thHGDjn6FO4mGfg.gif)

Looks like Behavior’s touch event handling is conflicting with PhotoView’s 🤔

[This method block](https://github.com/chrisbanes/PhotoView/blob/master/photoview/src/main/java/com/github/chrisbanes/photoview/PhotoViewAttacher.java#L100) was suspicious, but I didn’t realize how to fix this issue .
And I tried the other libraries, but the results were similar 😵
I thought I need to handle the whole TouchEvent of the ImageView by myself.

After two months of work in my private time…finally, I released a new library!

## Loupe

[Loupe](https://github.com/igreenwood/loupe)  is an ImageView Helper for Android that supports pinch-to-zoom and swipe-to-dismiss gesture.

* supports scrolling & flinging when zoomed in
* supports over scrolling & scaling
* supports two type swipe-to-dismiss gesture(shared elements transition & vertical translate animation)
* supports horizontal paging
* written in Kotlin
* just a helper class of ImageView. So you can attach it to any ImageView you want. And working perfect with any image loader libraries.

[loupe-1](https://cdn-images-1.medium.com/max/400/1*g-K7kTdHKHIAsNs-mJR_KQ.gif)
[loupe-2](https://cdn-images-1.medium.com/max/400/1*JnAXN1y0W3OEywZ0Qwm-2A.gif)
[loupe-3](https://cdn-images-1.medium.com/max/400/1*0kbyEUEKXgeIeITW-rt7pA.gif)

### How to use?

Create `Loupe` instance with your ImageView and implement the `onViewTranslateListener`. Code sample in Activity is something like this. (Loupe also works in Fragments)

```kotlin
val loupe = Loupe(imageView, container).apply { // imageView is your full screen ImageView and container is the direct parent of the ImageView

  onViewTranslateListener = object : Loupe.OnViewTranslateListener {

    override fun onStart(view: ImageView) {  
        
    }

    override fun onViewTranslate(view: ImageView, amount: Float) {  
        
    }

    override fun onRestore(view: ImageView) {  
        
    }

    override fun onDismiss(view: ImageView) {  
      finish()  
    }  
  }  
}
```

That’s all. See? It’s easy 😆

For more details, check the repository out 👀

[https://github.com/igreenwood/loupe](https://github.com/igreenwood/loupe)

Introducing Loupe: 10 minutes to implement Twitter-like image viewer

カスタムビューの実装など、 `onDraw` を継承して描画を自前で行う場合には、自分で描画位置の計算をしないといけないので計算量が多くなりがちです。

そういった場合に自前でちょっとしたヘルパー関数を用意しておくと便利なので、自分が使っている関数を紹介します。
（ `Float` のバージョンのみを記載していますが、状況に応じて適宜 `Int` のバージョンなども作ると便利です。）

## constrain()
`value` が `min 〜 max` の間に収まるようにする関数です。こいつを一つ挟んでおくことでバリデーションになるので非常に重宝しています。

```kotlin
fun constrain(value: Float, min: Float, max: Float): Float {
    return max(min(value, max), min)
}
```

## map()
`srcStart 〜 srcStop` の範囲にある値を `dstStart 〜 dstStop` の範囲に変換します。グラフを描画したいけれど、グラフの座標系と画面上の座標系が違う...といった場合にサクッと変換を書けるので非常に便利です。（後述する `lerp` と `norm` は `map` の変化系です。）

```kotlin
fun map(value: Float, srcStart: Float, srcStop: Float, dstStart: Float, dstStop: Float): Float {
    if(srcStop - srcStart == 0f) {
        return 0
    }
    return dstStart + (value - srcStart) * (dstStop - dstStart) / (srcStop - srcStart)
}
```

## lerp()
`lerp` は `0.0f 〜 1.0f` の範囲の値を `start 〜 stop` の範囲に変換します。 例えば、２点間を3:1に分割した点の座標を求めたいといった場合に `lerp(0.75f, 0, 100f)` のように書けば、すぐに座標を計算できます。

```kotlin
fun lerp(amt: Float, start: Float, stop: Float): Float {
    return start + (stop - start) * amt
}
```

## norm()
`norm` は `lerp` の反対で、 `start 〜 stop` の範囲にある値を `0.0f 〜 1.0f` の範囲に変換します。

```kotlin
fun norm(value: Float, start: Float, stop: Float): Float {
    return value / (stop - start)
}
```

## おわりに
ヘルパー関数の部分だけを他の描画ロジックから分離することでコードの見通しが良くなり、テストも容易になるのでおすすめです。

自分のプロジェクトではこんなヘルパー関数を使っているよ、などコメントで教えていただけると喜びます

カスタムビューの実装でよく使うヘルパー関数を晒す

Gitのタグ付けとリリース、ちゃんとしていますか？

僕はよく忘れます。
もちろんリリース毎に忘れずにしているに越したことはないのですが、バタバタしていると数ヶ月分のタグとリリースが抜け落ちていることに気づくことが稀によくあります。

よく同じことを調べるので、未来の自分と同じような開発者の方のために、方法を備忘録として残しておきます。

## タグ付けをする必要のあるコミットを探す
まずはタグ付けをする必要があるコミットを探します。

```
$ git log --grep 検索したい文字列
```

にするとタグ付けを行いたいコミットの一覧を表示できます。
今のプロジェクトではリリースの際のブランチ名が `release/xxx` という名前になっているので、 `検索したい文字列` の部分を `release` にしてそのブランチがマージされた際のコミットを探しました。

## タグ付けをする
該当のコミットの一覧が表示できたら、

```
$ git tag タグ名 コミットハッシュ
```

でタグ付けをしていきます。
先ほどのコミット一覧とは別の画面を開いて、一覧を見ながら作業すると楽です。

## ローカルのタグをリモートにpushする
ローカルでつけたタグは明示的にpushしてやる必要があります。

```
$ git push origin --tags
```
のようにすると、先ほど設定したタグをリモートに一気に反映できます。

Gitのタグ付けを長い間忘れていたことに気づいた時のメモ

## Multipartで画像と多次元配列を投げたい
Multipartで画像を投げるだけなら簡単ですが、画像と一緒に `params[][hoge_id]=1&params[][hoge_name]=aaa` みたいな可変長なクエリを投げるとなると方法がわからなかったので、調べた結果をメモします。

## 結論：OkHttpで書いてRequestBodyを渡せば良い
いきなり結論ですが、OkHttpを使ったコードを書いて作ったRequestBodyを渡すことで解決しました。コードはこんな感じです

* Retrofitのインターフェース

```kotlin

    @POST("items")
    fun postItem(@Header("Authorization") token: String, @Body body: RequestBody): Single<Item>

```

* APIを呼ぶ側のコード

```kotlin
        val boundary = System.currentTimeMillis().toString()
        val imageMedia = MediaType.parse("image/png")
        val builder = MultipartBody.Builder(boundary).apply {

            setType(MultipartBody.FORM)

            addFormDataPart("image", "image.png", RequestBody.create(imageMedia, image))

            params.forEach {
                addFormDataPart("params[][hoge_id]", it.id.toString())
                addFormDataPart("params[][hoge_name]", it.name)
            }
        }

        api.postItem(
                body = builder.build(),
                token = getToken()
        )

```

## まとめ
そんなに頻繁に使わないのですが、よく忘れるのでメモ。
クエリでListとMapが入れ子になるような場合は、このやり方を使うのが一番楽な気がしてます。もっと良い方法があれば教えていただけると嬉しいです。

Retrofitを使って複雑なPOSTをする

EpoxyでRecyclerViewでよく使う機能をサクッと実装する

EventBusのバージョンが3になりました。

公式のドキュメントを読んでみたので、自分が分かった範囲で翻訳してまとめました。

## インストール方法

```
 compile 'org.greenrobot:eventbus:3.0.0'
```

## イベントの定義
従来通りイベント用のクラスを定義します。

```
public class MessageEvent {
    public final String message;

    public MessageEvent(String message) {
        this.message = message;
    }
}
```

## Subscriber(イベントハンドラ)の準備
`@Subscribe`アノテーションを利用するようになりました。
これによって従来の`onEvent()`、`onEventMainThread()`ではなく自分の好きなメソッド名を定義することができるようになりました。すばらしい。

```
// This method will be called when a MessageEvent is posted
@Subscribe
public void onMessageEvent(MessageEvent event){
    Toast.makeText(getActivity(), event.message, Toast.LENGTH_SHORT).show();
}

// This method will be called when a SomeOtherEvent is posted
@Subscribe
public void handleSomethingElse(SomeOtherEvent event){
    doSomethingWith(event);
}
```

```
@Override
public void onStart() {
    super.onStart();
    EventBus.getDefault().register(this);
}

@Override
public void onStop() {
   EventBus.getDefault().unregister(this);
    super.onStop();
```

## イベントのpost
ここも従来通りで大丈夫です。

```
EventBus.getDefault().post(new MessageEvent("Hello everyone!"));
```

## ThreadModeについて
EventBus 2.4.xではイベントを受け取るスレッドをメソッド名で振り分けていましたが、EventBus 3からはアノテーションに`threadMode`を指定することで、実行するスレッドを切り替えることができます。

```
@Subscribe(threadMode = ThreadMode.POSTING) // ThreadMode is optional here
public void onMessage(MessageEvent event) {
    log(event.message);
}
```

ThreadModeの種類についてですが、POSTING、MAIN、BACKGROUND、ASYNCの4種類があります。以下に詳しい説明を記載します。

### ThreadMode: POSTING
SubscriberはデフォルトではこのThreadMoadを使用します。イベントをpostしたスレッドと同じスレッドで呼ばれます。イベントの配送は同期的に行われ、全てのSubscriberはpostが終了した時点で呼ばれます。このThreadModeはスレッドの切り替えをしないため、オーバーヘッドが最小です。そのためこのモードは、UIスレッドを必要とせず、とても短時間で終了することがわかっている単純な処理に対して推奨されます。このThreadModeを使うイベントハンドラーは、イベントをpostしたスレッド（多くの場合メインスレッド）をブロックしないよう、迅速に処理を終えるべきです。

```
@Subscribe(threadMode = ThreadMode.POSTING) // ThreadMode is optional here
public void onMessage(MessageEvent event) {
    log(event.message);
}
```

### ThreadMode: MAIN
Subscriberがメインスレッドで呼ばれます。イベントをpostしたスレッドがメインスレッドの場合、ThreadMode: POSTINGと同じになり、同期的に処理されます。このThreadModeを使用したイベントハンドラはメインスレッドをブロックしないよう、あまり重い処理をさせてはいけません。

```
// Called in Android UI's main thread
@Subscribe(threadMode = ThreadMode.MAIN)
public void onMessage(MessageEvent event) {
    textField.setText(event.message);
}
```

### ThreadMode: BACKGROUND
Subscriberがバックグラウンドスレッドで呼ばれます。イベントをpostしたスレッドがメインスレッドでない場合、イベントハンドラのメソッドはスレッドを切り替えず、イベントをpostしたスレッドでそのまま処理を行います。イベントをpostしたスレッドがメインスレッドなら、単一のバックグランドスレッドを用いてすべてのイベントを連続的に処理します。このThreadModeを使用するイベントハンドラは、バックグランドスレッドをブロックしないように迅速に処理を終えるようにすべきです。

```
// Called in the background thread
@Subscribe(threadMode = ThreadMode.BackgroundThread)
public void onMessage(MessageEvent event){
    saveToDisk(event.message);
}
```

### ThreadMode: ASYNC
Subscriberがイベントがpostされたスレッドとは別のスレッドで呼ばれます。このThreadModeでのイベントの配送は必ず非同期で行われます。ネットワーク処理など、イベントハンドラのメソッドの実行に時間がかかる場合はこのThreadModeを使うべきです。時間のかかる処理を持つ大量のイベントハンドラを同時にトリガーするとconcurrent threadsの数の制限にひっかかるので避けてください。EventBusは効率的にスレッドの再利用を行うためにスレッドプールを利用しています。

```
// Called in a separate thread
@Subscribe(threadMode = ThreadMode.Async)
public void onMessage(MessageEvent event){
    backend.send(event.message);
}
```

基本的にはMAINとASYNCを覚えておけば事足りそうな印象です。BACKGROUNDの効果的な使い道が思い浮かばなかったので、良い使い道があれば教えてください。

## Configuration

EventBusBuilderを使うことでEventBusの詳細な設定を行うことができます。

設定の例をいくつか挙げます。

* イベントがpostされた際にSubscriberがいなくてもログにエラーメッセージを出さない

```
EventBus eventBus = EventBus.builder().logNoSubscriberMessages(false)
    .sendNoSubscriberEvent(false).build();
```

* Subscriberのメソッド内でExceptionが発生した場合にSubscriberExceptionEventをpostする。(デフォルトでtrue)

```
EventBus eventBus = EventBus.builder().throwSubscriberException(true).build();
```

* デバッグビルドの時だけSubscriberExceptionEventをpostする設定を、EventBus.getDefault()で取得できるインスタンスに適用する

```
EventBus.builder().throwSubscriberException(BuildConfig.DEBUG).installDefaultEventBus();
```

`installDefaultEventBus()`が設定できるのは１回のみで、アプリの中で最初にEventBus.getDefault()でインスタンスが取得される前に行う必要があります。繰り返し呼び出したり、EventBus.getDefault()の後で呼んでも意味がないのでApplicationクラスの`onCreate()`で呼ぶのが良いでしょう。


デバッグビルドの時のみSubscriberExceptionを発生させる設定はよく使いそうですね。

## Sticky Events
>**StickyEventと通常のEventの違い**
イベントがpostされたときにSubscriberがいない場合、通常のEventの場合は破棄されますが、StickyEventの場合は破棄されず、次にSubscriberが`register()`されたタイミングで届きます。注意しなければならないのは、StickyEventがpostされてSubscriberが`register()`されるまでに別のStickyEventがpostされた場合は、そのStickyEventで上書きされます。常に最後にpostされたStickyEventが届きます。

StickyEventの場合は`post()`の代わりに`postSticky()`を使い
`@Subscribe`アノテーションの中に`sticky = true`を設定します。

```
EventBus.getDefault().postSticky(new MessageEvent("Hello everyone!"));
```

```
@Subscribe(sticky = true, threadMode = ThreadMode.MAIN)
    public void onEvent(MessageEvent event) {
        // UI updates must run on MainThread
        textField.setText(event.message);
    }
```

StickyEventを手動で破棄する場合は以下のように書けば大丈夫なようです。

```
MessageEvent stickyEvent = EventBus.getDefault().removeStickyEvent(MessageEvent.class);
// Better check that an event was actually posted before
if(stickyEvent != null) {
    // Now do something with it
}
```

## 優先度の設定
アノテーションに`priority`を指定することで優先度を変更することができます。

EventBusを使用する中で優先度とイベントのキャンセルについて気にすることはほとんどありませんが、指定できると便利なケースがあるようです。原文ではアプリがforegroundにある場合はUIを更新したいが、backgroundにある場合は別の処理をしたいといった場合、と書かれていました。

```
@Subscribe(priority = 1);
public void onEvent(MessageEvent event) {

}
```

デフォルトの`priority`は`0`です。同じ`ThreadMode`で`priority`の値が異なる複数のSubscriberがあった場合、より`priority`の数値が大きいSubscriberから処理されます。ThreadModeの異なるSubscriber間では`priority`が処理の順番に影響することはありません。

## イベントのキャンセル

イベントをキャンセルすると後続のSubscriberはイベントを受け取らなくなります。

```
// Called in the same thread (default)
@Subscribe
public void onEvent(MessageEvent event){
// Process the event

EventBus.getDefault().cancelEventDelivery(event) ;
}
```

## Subscriber Index
EventBus 3で導入された新機能で、初回のSubscriber登録の際のスピードをあげるためのオプションの最適化を行うことができます。Subscriber Indexはビルド時にAnnotation Processorを使って作成されます。必須の機能ではないもののAndroid上で最高のパフォーマンスを求めるならおすすめ、と書かれていました。

### Indexを使用する際の前提条件
イベントクラスがpublicであること。Javaのアノテーション自体の技術的制約により、匿名クラス内の`@Subscribe`アノテーションは認識されません。
EventBusがIndexを利用できなかった場合、自動的に実行時にリフレクションを用いて実行されますが、Indexを利用できる場合よりも速度が落ちます。

### Indexを利用するには

インストール

```app/build.gradle
buildscript {
    dependencies {
        classpath 'com.neenbedankt.gradle.plugins:android-apt:1.8'
    }
}
apply plugin: 'com.neenbedankt.android-apt'
dependencies {
    compile 'org.greenrobot:eventbus:3.0.0'
    apt 'org.greenrobot:eventbus-annotation-processor:3.0.1'
}
apt {
    arguments {
        eventBusIndex "com.example.myapp.MyEventBusIndex"
    }
}
```

これでビルド時にエラーが出なければ、eventBusIndexが生成されますので、EventBusの初期化時に`addIndex()`に渡しましょう

```
EventBus.builder().addIndex(new MyEventBusIndex()).installDefaultEventBus();
```

## ProGuard
ProGuardはメソッドの名前を難読化したり、使用されていないメソッドを削除することでアプリ容量を削減する仕組みですが、EventBusのSubscriberメソッドはアプリ内で直接呼ばれるわけではないので、ProGuardはそのプロジェクトがSubscriberメソッドを使用していないと勘違いしてメソッドを削除してしまいます。

そのため、もしあなたがEventBusを使用していてProGuardの`minifyEnabled`の設定を`true`にしている場合は、ProGuardにSubscriberメソッドを保持して欲しいことを伝える必要がある。以下のスニペットを使用すれば、ProGuardがSubscriberメソッドを削除することを防ぐことができます。(この設定はIndexを使用しているかどうかに関係なく必要です。)

```
-keepattributes *Annotation*
-keepclassmembers class ** {
    @org.greenrobot.eventbus.Subscribe <methods>;
}
-keep enum org.greenrobot.eventbus.ThreadMode { *; }

# Only required if you use AsyncExecutor
-keepclassmembers class * extends org.greenrobot.eventbus.util.ThrowableFailureEvent {
    <init>(java.lang.Throwable);
}
```

## Async Executor
AsyncExecutorはEventBusのコアクラスではありませんが、バックグラウンド処理のエラーハンドリングを助けてくれます。AsyncExecutorは処理の実行に失敗した場合、発生したExceptionをイベントでラップして自動的にpostしてくれます。

使い方としては、AsyncExecutor.create()でインスタンスを作成し、それをApplicationスコープで保持します。そして次にRunnableExインターフェースをimplementしたクラスを作成し、それをAsyncExecutorに渡します。
RunnableExがRunnableと異なる点はExceptionを投げる可能性があることです。(RunnableExの実装クラスがExceptionを投げた場合、その例外は自動的にcatchされ、ThrowableFailureEventとしてラップされた状態でpostされます。)

実行例

```
AsyncExecutor.create().execute(
  new RunnableEx {
    public void run throws LoginException {
      // No need to catch any Exception (here: LoginException)
      remote.login();
      EventBus.getDefault().postSticky(new LoggedInEvent());
    }
  }
}
```

イベントを受け取る例

```
public void onEventMainThread(LoggedInEvent event) {
  // Change some UI
}

public void onEventMainThread(ThrowableFailureEvent event) {
  // Show error in UI
}
```

AsyncExecutorのインスタンスををカスタマイズしたい場合は、AsyncExecutor.builder()が利用できます。

## 雑感
2.4.xの時は公式のドキュメントをあまりちゃんと読んでいなかったのですが、良い機会だと思って読んでみました。EventBusはもともと非常に便利なライブラリですが、アノテーションを使うようになってますます便利になったのでぜひ使ってみてください。あまり英語が得意な方ではないので、間違い、補足等ありましたらコメントからご指摘いただけると嬉しいです。

## 参考リンク
http://greenrobot.org/eventbus/documentation/
http://qiita.com/kgmyshin/items/5958611fb66c5edb225c

EventBus 3のドキュメントを読んでみた

Retrofit最近流行ってますね。

RetrofitはRxJavaと連携できてスマートに通信処理を記述できるので非常に便利です。

しかし、まだ新しいので情報が少なく、知らないと落とし穴にハマってしまうことがあります。今回 `@GET` で複雑な文字列をAPIに渡そうとしたらつまずいたので、最終的にたどり着いた解決方法をご紹介します。 

## `@GET` で複雑なクエリを投げられない
`@GET` では `@Query` と `@QueryMap` のパラメータがサポートされています。通常この２つのパラメータで事足りることが多いのですが、今回投げたかったのは以下の様なクエリです。

```
http://www.hoge.com/hoge?values[][max]=100&values[][min]=0&values[][max]=200&values[][min]=100
```

`values[]` という配列に `min` と `max`  という最小値と最大値のペアを格納しています。配列と連想配列の入れ子のような状態ですね。

もしこれが普通の配列なら、 `@Query("values[]") List<Integer> values` のように書けますし、普通の連想配列なら `@QueryMap Map<String, Integer> map` のように書けますが、入れ子にする場合の実装方法が見つけられませんでした。

最初のうちは `@Query` か `@QueryMap` のどちらかの形に無理やり持ち込めないかと色々試したものの、うまく行きませんでした。

RetrofitのIssuesなども漁ってみましたが
https://github.com/square/retrofit/issues/1324
を見ると、まだサポートされていないようでした。

上記のIssueを読むと、`@Query` をカスタムする方法や `Map` を重複するKeyを入れられるようにカスタムする方法が使えそうな会話がなされていますが、具体的な方法は示されておらず、調べていくとなかなか難しそうだったので今回は見送りました。

## 解決策
発想を変えて `baseUrl()` を動的に生成することで実現できました。

```
public interface MyApi { 
    @GET // ここにはURLを書かない
    Call<MyResponse> getWithComplexQuery(@Url String anEmptyString); // 空のURLを設定
} 

String url;
url = xxx; // URLを動的に生成
Retrofit retrofit = new Retrofit.Builder()
    .baseUrl(url)  // 生成したURLを渡す
    .addConverterFactory(GsonConverterFactory.create()) 
    .build(); 
 
ClientService service = retrofit.create(MyApi.class);
 
Response<MyResponse> response = service.getWithComplexQuery("").execute();
```

まとめると、baseUrlに動的に生成したUrlを入れてやるだけですが,
空の `@Url` を設定するのがポイントです。ちなみに `@Url` は１つ目の引数にしないと怒られるので `@Header` などを付けたい場合は2つ目以降の引数で。

## まとめ
`baseUrl` を動的に生成するのはあまり美しくない気がしますが、現状これ以外の方法を見つけられませんでした。
これ以外の方法をご存じの方がいらっしゃいましたらぜひ教えて下さい。

## 参考URL
https://github.com/square/retrofit/issues/1324
http://stackoverflow.com/questions/32559333/retrofit-2-dynamic-url

Retrofitの@GETで複雑なクエリを投げる

## attrsの属性の名前が重複する
Androidでカスタムビューを作る際に、attrsにカスタム属性を定義することがあると思いますが、重複する名前は宣言することができません。

うかつにカスタムビューの中で同じ属性を使うと`error: Attribute “***” has already been defined when using two library projects in Android`というエラーが出てしまいます。

重複している名前を変更すれば良いのですが、汎用的な名前はAndroid SDKの中で定義済みの事が多いですし、似たような名前の属性がたくさんあると使う時に混乱するので、他の解決策がないか調べてみました。

## 解決策
要約すると、解決策は以下の3通りしかありません。

* 重複する属性にprefixをつける
* 共通の属性を宣言する
* Android SDKで定義されている属性を再利用する

### 重複する属性にprefixをつける 
これが一番簡単な解決策です。

```attrs.xml
<resources>
    <declare-styleable name="CustomView1">
        <attr name="my_text" format="string" />
    </declare-styleable>

    <declare-styleable name="CustomView2">
        <attr name="my_text" format="string" />
    </declare-styleable>
</resources>
```

となっている所を

```attrs.xml
<resources>
    <declare-styleable name="CustomView1">
        <attr name="CustomView1_my_text" format="string" />
    </declare-styleable>

    <declare-styleable name="CustomView2">
        <attr name="CustomView2_my_text" format="string" />
    </declare-styleable>
</resources>
```

と変更します。

これで大抵の場合解決しますが、なんだか冗長で芸がない気がします。（とはいえ、場合によってはこの方法でしか解決できないこともあるでしょう。）

### 共通の属性を宣言する
同じアプリ内で共通の属性を使用したい場合、共通の属性を宣言すれば解決できます。

```attrs.xml
<resources>
    <declare-styleable name="CustomView1">
        <attr name="my_text" format="string" />
    </declare-styleable>

    <declare-styleable name="CustomView2">
        <attr name="my_text" format="string" />
    </declare-styleable>
</resources>
```

となっている所を


```attrs.xml
<resources>
    <attr name="my_text" format="string" />

    <declare-styleable name="CustomView1">
        <attr name="my_text" />
    </declare-styleable>

    <declare-styleable name="CustomView2">
        <attr name="my_text" />
    </declare-styleable>
</resources>
```

と変更すれば同じ属性を複数箇所で使用できます。

この方法だと、読み込んだライブラリに含まれている属性と重複している場合は解決にならないので、他の方法で解決する必要があります。

### Android SDKで定義されている属性を再利用する
backgroundやtextなど、汎用的な単語はandroid:xxxとしてSDK内で既に定義されていることが多いです。

これを使いたい場合は

```attrs.xml
<resources>
    <declare-styleable name="CustomView1">
        <attr name="my_text" format="string" />
    </declare-styleable>

    <declare-styleable name="CustomView2">
        <attr name="my_text" format="string" />
    </declare-styleable>
</resources>
```

となっている所を

```attrs.xml
<resources>
    <declare-styleable name="CustomView1">
        <attr name="android:text" />
    </declare-styleable>

    <declare-styleable name="CustomView2">
        <attr name="android:text" />
    </declare-styleable>
</resources>
```

と書き換えましょう。(`android:text`の箇所はフレームワークで宣言されている属性であれば何でも使用できます。)

この方法を使えば、レイアウトファイル内で
`app:text="hoge"`のような記載をしなくても`android:text="hoge"`で属性を指定できます。

## まとめ

基本的には３番目の方法を使いつつ、それで不足な分は1番目と2番目の方法で補っていくのが良いと思います。

カスタムビュー用のattrsの属性の名前が重複する問題を解決する

先日、Androidで画像の切り抜きを簡単に実装できるライブラリを公開しました。
>SimpleCropView: A simple image cropping library for Android. 
>https://github.com/IsseiAoki/SimpleCropView

![demo](https://raw.github.com/wiki/IsseiAoki/SimpleCropView/images/gif/demo_basic_usage.gif)

これまで業務でいくつかのアプリで画像の切り抜き機能を実装してきたのですが、
同じようなコードをアプリごとに少しずつカスタマイズする事が多かったため
シンプルでいろんなアプリに簡単に組み込めるライブラリが欲しくて作りました。


## 特徴

* Intentを使わずに１つのViewだけで画像の切り抜きができる
* 画像を縦横比を保ったまま、Viewの領域内で最大化する（小さい画像でも引き伸ばす）
* フレーム（切り抜き枠）の縦横比を設定できる
* 円形の切り抜きができる
* フレームの最小サイズを設定できる
* Viewの見た目（色、線の太さ...など）を簡単にカスタマイズできる
* 画像の回転ができる（90度単位）
* Viewの内部状態を自動で保存する（画面回転に自動で対応）


## 基本的な使い方

まず、 `build.gradle`にライブラリを追加します。

```build.gradle
repositories {
    jcenter()
}
dependencies {
    compile 'com.isseiaoki:simplecropview:1.0.10'
}
```

次に、レイアウトXMLに`com.isseiaoki.simplecropview.CropImageView`を追加します。

>SimpleCropViewでは、Viewの大きさに基づいて画像の大きさが最大になるように計算するため、`WRAP_CONTENT`は無視されます。ご注意ください。

```activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <com.isseiaoki.simplecropview.CropImageView
        android:id="@+id/cropImageView"
        xmlns:custom="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:padding="16dp"
        custom:cropMode="ratio_1_1"
        />

    <Button
        android:id="@+id/crop_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="16dp"
        android:text="CROP"
        />

    <ImageView
        android:id="@+id/croppedImageView"
        android:layout_margin="16dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</LinearLayout>
```

トリミングに使用したい画像をセットし、フレームに合わせてトリミングした画像を取得します。

```MainActivity.java
public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final CropImageView cropImageView = (CropImageView)findViewById(R.id.cropImageView);
        final ImageView croppedImageView = (ImageView)findViewById(R.id.croppedImageView);

        // トリミングしたい画像をセット
        cropImageView.setImageBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.sample5));
        
        Button cropButton = (Button)findViewById(R.id.crop_button);
        cropButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // フレームに合わせてトリミング
                croppedImageView.setImageBitmap(cropImageView.getCroppedBitmap());
            }
        });
    }

}
```

以上です。


サンプルも一緒に公開しているので、実際に実行して試していただくのがわかりやすいと思います。

##カスタマイズ
SimpleCropViewは、組み込むアプリの要件に合わせていくつかの項目をカスタマイズできます。

* 切り抜き枠の縦横比（円形切り抜きも可能）
* 切り抜き枠の見た目（色、線の太さ、ハンドルの大きさ、ガイド用の線を見せるかどうかの設定など）
* 切り抜き枠のハンドルのタッチ判定
* ・・・

カスタマイズの詳細に関しては長くなるのでこちらでは説明しません。
[GitHubページ](https://github.com/IsseiAoki/SimpleCropView)をご参照ください。

SimpleCropViewは以下の２つのファイルだけで構成されているので、

* CropImageView.java
* attr_crop_image_view.xml

ライブラリで提供している機能で不足な場合は、
２つのファイルをプロジェクトにコピーして編集して頂くことも可能です。

##おわりに
「ユーザーのプロフィール写真を円形にトリミングしたい」みたいなライトな用途から、 「写真アプリの画像トリミング機能を実装したい」みたいなヘビーな用途まで、幅広い用途に使えるように作ったつもりです。

詳しい情報はGitHubページをご参照ください。

>SimpleCropView: A simple image cropping library for Android. 
>https://github.com/IsseiAoki/SimpleCropView


不明点、ご要望などありましたらお気軽にご連絡ください。
可能な限り対応させて頂きます。
Issue、Pull Requestも大歓迎です。

Version1.0.10でfloatの丸め誤差で切り取りが失敗するバグを修正しました。
レアケースですがお使いの方はアップデートをお願いします。

## 追記
### 2016/04/12
ver.1.1.0 をリリースしました。

主な変更点は、
「ImageViewに読み込みができない2000px以上の大きさの画像の切り取り」を行うために、切り取り用のメソッドにBitmapを渡していたところを`Uri`を渡すように変更し、表示する画像(Viewのサイズに合わせて縮小されたサムネイル画像)と、実際に切り取りに使用する画像(オリジナル画像)を別にした所です。

それに伴い、

* BitmapRegionDecoderを使用するためにsdk versionを9から10に
* 画像の読み込みと切り取りを非同期で行うように
* ついでに切り取り時に画像を指定したUriに保存するように
* ついでに切り取り画像の最大サイズを設定できるように(最大サイズに収まるようにアスペクト比を保ったまま縮小されます)
* ついでに切り取り画像の出力サイズを設定できるように(指定された幅or高さになるようにアスペクト比を保ったまま拡縮されます)

と言った変更が行われています。


今までは

`setImageBitmap(Bitmap bitmap)`で画像を設定し、
`getCroppedBitmap()`で切り取った画像を取得

という流れだったのが


これからは

`startLoad(Uri sourceUri, LoadCallback callback)`で画像を設定し
`startCrop(Uri saveUri, CropCallback cropCallback, SaveCallback saveCallback)`の`CropCallback`の引数から画像を取得(切り取られた画像は自動的に`saveUri`に保存される)

という流れに変わります。

**`setImageBitmap(Bitmap bitmap)`、`getCroppedBitmap()`は以前と変わらず動作しますが、`startLoad()`の引数で切り取りに使用したい画像の`Uri`を渡さないと、`startCrop()`を使用してもサムネイル用の画像が切り取りに使用されるのでご注意ください。**

他にも

* 回転、CropMode変更の際のアニメーションを追加
* attributesのパラメータ名の変更
* 細かいバグの修正

など、いくつか変更点があります。
詳しくは[Githubページ](https://github.com/IsseiAoki/SimpleCropView)をご覧下さい。

igreenwood.org

Posts