Instagramの検索画面でグリッド状に並ぶ写真たち､長押しするとポップアップするのご存知でしたか？

あれが好きで､似たような実装をしてみました｡

現在作成しているアプリでの実装例です｡

また解説用にサンプルを作りました｡以降の解説はこちらがベースとなります｡
https://github.com/shimbaroid/InstagramyDialogSample

ic_launcher君をdialogで拡大表示します｡

要件

ロングクリックでdialog表示､指を離すと非表示
dialogの背景はブラー(ボカし)をかける
dialogをアニメーションさせて表示する

順番に実装方法を解説していきます｡

ロングクリックでdialog表示､指を離すと非表示

対象とするViewがScrollableなViewGroupの子であるか否かで実装方法が異なります｡

ScrollableなViewGroupの子でない場合

こちらの実装は単純です｡対象となるViewにOnLongClickListenerとOnTouchListenerをsetし､ロングクリックでdialogを表示しブラーをかける､MotionEvent.ACTION_UPでdialogを非表示にしブラーを外す｡

MainActivity.java

private void initUnscrollableSample() {
    ImageView imageView = (ImageView) findViewById(R.id.image_view);
    imageView.setOnLongClickListener(new View.OnLongClickListener() {
        @Override
        public boolean onLongClick(View v) {
            showDialog(list.get(0));
            blurOn();
            return true;
        }
    });
    imageView.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_UP) {
                dismissDialog();
                blurOff();
            }
            return false;
        }
    });
}

ScrollableなViewGroupの子である場合

基本は｢でない場合｣と同じですが､長押ししてdialogを表示したあとにスクロールを発生させるとそちらにタッチイベントが移ってしまい､対象としているViewのonTouch()が呼ばれなくなってしまうことに注意が必要です｡

今回は､｢ホールドしている間はスクロールを無効化する｣ようにして対応します｡RecyclerViewの場合はLayoutManagerを継承した独自のクラスをつくります｡

MyGridLayoutManager.java

public class MyGridLayoutManager extends GridLayoutManager {

    private boolean scrollable = true;

    public MyGridLayoutManager(Context context, int spanCount) {
        super(context, spanCount);
    }

    public void setScrollDisable() {
        scrollable = false;
    }

    public void setScrollEnable() {
        scrollable = true;
    }

    @Override
    public boolean canScrollVertically() {
        return super.canScrollVertically() && scrollable;
    }
}

How to disable RecyclerView scrolling?

setScrollEnable()とsetScrollDisable()でスクロールの可否を切り替えます｡インスタンスはメンバで保持しておくようにしましょう｡

あとは｢でない場合｣と同様に､ViewHolderに対してlistenerをsetしましょう｡(今回はInterfaceを渡してそちらを呼ぶようにしています)

OnHoldListener.java

public interface OnHoldListener {
    void onHoldStart(int position);

    void onHoldEnd();
}

ImageViewHolder.java

public void setOnHoldListener(final OnHoldListener listener) {
    itemView.setOnLongClickListener(new View.OnLongClickListener() {
        @Override
        public boolean onLongClick(View v) {
            listener.onHoldStart(getAdapterPosition());
            return true;
        }
    });
    itemView.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_UP) {
                listener.onHoldEnd();
            }
            return false;
        }
    });
}

MainActivity.java

private void initScrollableSample() {
    // 〜略〜

    adapter.setOnHoldListener(new OnHoldListener() {
        @Override
        public void onHoldStart(int position) {
            gridLayoutManager.setScrollDisable();
            showDialog(list.get(position));
            blurOn();
        }

        @Override
        public void onHoldEnd() {
            gridLayoutManager.setScrollEnable();
            dismissDialog();
            blurOff();
        }
    });
}

dialogの背景はブラー(ボカし)をかける

画面のキャプチャにブラーをかけて､それをActivityに表示させるようにします｡

画面のキャプチャ､ブラーにはBlurryというライブラリを使いました｡ありがとうございます｡
https://github.com/wasabeef/Blurry

build.gradle

dependencies {
    compile 'jp.wasabeef:blurry:2.0.3'
}

実装なのですが､.onto()でrootとなるViewGroupを指定する方法だとどうも思い通りのブラーにできなかったので､少し工夫しました｡

FrameLayoutの中でメインとなるViewGroup(赤)と同じ階層でImageView(紫)を設置し､ブラーon･offでvisibilityを切り替えました｡

activtiy_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout...>

    <ImageView
        android:id="@+id/image_view_blur"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

MainActivity.java

private void blurOn() {
    blurImageView.setVisibility(View.VISIBLE);
    parentViewGroup.setVisibility(View.INVISIBLE);
    Blurry.with(this)
            .capture(parentViewGroup)
            .into(blurImageView);
}

private void blurOff() {
    blurImageView.setVisibility(View.INVISIBLE);
    parentViewGroup.setVisibility(View.VISIBLE);
    Blurry.delete(parentViewGroup);
}

TextViewまできれいにブラーがかかりました！

dialogをアニメーションさせて表示する

onCreateView()にて､inflateしたViewにアニメーションを適用しましょう｡

MyDialog.java

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    final View v = inflater.inflate(R.layout.dialog_instagramy, null);
    // 〜中略〜
    Animation animation = AnimationUtils.loadAnimation(getContext(), R.anim.dialog_pop);
    v.startAnimation(animation);
    return v;
}

dialog_pop.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="false">

    <scale
        android:fromXScale="0.8"
        android:fromYScale="0.8"
        android:toXScale="1.0"
        android:toYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="true"
        android:duration="150" />

    <scale
        android:fromXScale="1.1"
        android:fromYScale="1.1"
        android:toYScale="1.0"
        android:toXScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="150"
        android:duration="200"/>
</set>

またアニメーションさせる他にも､dialogの背景を透過させる処理も必要です｡

windowBackgroundにtransparentを指定しましょう｡

styles.xml

<style name="MyDialogTheme" parent="AppTheme">
    <item name="android:windowBackground">@android:color/transparent</item>
</style>

MyDialog.java

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setStyle(STYLE_NORMAL, R.style.MyDialogTheme);
}

onCreateDialog()でAlertDialogを使う場合はまた適切に透過の処理をする必要があります｡今回は省きます｡

以上です

冒頭でも触れたように､なかなか気づかれない挙動かと思います｡

気づかなくても問題ないけど､気づいてるとちょっと楽しいような仕掛けに応用すると良いのではないかと思います｡

ありがとうございました｡

Instagramっぽいdialogの実装

要件

ロングクリックでdialog表示､指を離すと非表示

ScrollableなViewGroupの子でない場合

ScrollableなViewGroupの子である場合

dialogの背景はブラー(ボカし)をかける

dialogをアニメーションさせて表示する

以上です