Android元件 ─ PointOfOrigin 點擊後彈出視窗

前言：

接續前一篇RecyclerView的範例。

可直接下載範本來做修改。

這次做的是類似PopupView的彈跳效果，但自帶動畫，更為方便！

---

重點程式碼：

本次更動簡易流程 ─

drawable內的loading圖片下載：
https://cdn-images-1.medium.com/max/800/0*-IoUUPvNx3NihgGi.gif

我們直接從RecyclerViewAdapter.java內的
onBindViewHolder裡面的點擊事件開啟我們的第一步：

  @Override
    public void onBindViewHolder(final RecyclerViewAdapter.MyHolder holder, final int position) {
        Glide.with(mContext).load(itemsData[position].getImageUrl())
                .error(R.drawable.loading)
                .placeholder(R.drawable.tool)
                .into(holder.mImageView);
      holder.mTextView.setText(itemsData[position].getTitle());

      holder.setOnItemClick(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
              //設定你點擊每個Item後，要做的事情
            }
        });
    }

接下來實作PointOfOrigin 點擊後彈出視窗

先額外創建一個Activity，我命名為secondActivity.java 和 activity_second.xml

activity_second.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="bottom"
    android:gravity="bottom"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="150dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:text="Point Of Origin Demo \n\n返回鍵返回" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:cropToPadding="false"
        android:scaleType="fitCenter"
        android:src="@drawable/loading"
        android:transitionName="tImage" />
</LinearLayout>

secondActivity.java

public class SecondActivity extends Activity {
    private static final String TAG = "SecondActivity";

    private ImageView image;

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

        image = (ImageView) findViewById(R.id.image);
        if (getIntent() != null) {
            Log.i(TAG, "CheckPoint getIntent() != null" + getIntent());
//            int res = getIntent().getIntExtra("imageRes", 0);
            String res = getIntent().getStringExtra("imageRes");

            if (res != null)
                Glide.with(this).load(res).placeholder(R.drawable.loading).into(image);
        } else {
            Log.i(TAG, "CheckPoint onCreate:  getIntent()==null");
        }
    }
}

創建好後，在RecyclerViewAdapter.java內的onBindViewHolder裡面

 holder.setOnItemClick(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 宣告一組配對，底下我們讓MainActivity裡[RecyclerView]->[ItemList]->[ImageView]和SecondActivity裡的ImageView作成一組配對
               Pair imagePair = Pair.create((View) holder.mImageView, "tImage");
                Intent transitionIntent = new Intent(mContext, SecondActivity.class);
                transitionIntent.putExtra("imageRes", itemsData[position].getImageUrl());
                // 製作成 Material Design 需要的 ActivityOptionsCompat
                ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation((Activity) mContext, imagePair);
                ActivityCompat.startActivity((Activity) mContext, transitionIntent, options.toBundle());
            }
        });

裡面的tImage是連接 secondActivity.java 裡面imageView的key

完成！

---

完整程式碼就不一一張貼了，詳情請見Demo：

https://drive.google.com/open?id=0Byk75IYx-dKXTmVIM0VEWjdhZDQ