android 仿 ios 搜索界面跳转效果

最新写项目的时候，看到搜索界面的跳转基本都是点击搜索然后跳转到下个页面，android 微信上则是 类似toolbar的效果，而ios 上则是一个搜索框上移然后显示新界面的一个效果。仔细研究了下发现和android 的 共享元素的过渡实现 的效果很像，所以在此模仿下。但是 共享元素的过渡实现 是5.0以后才有的，兼容5.0一下需要自定义动画效果，查了些资料发现也是可以实现的。下面是效果图：

---

1.实现思路：

实现的思路也比较简单，大概的步骤如下：

1.确定第一个界面的共享元素，将其信息传递个第二个界面
2.第二个界面接收信息，开始的时候将界面设置为透明，并只显示共享元素。
3.将第二个界面的共享元素进行动画处理。

2.获取共享元素位置信息：

在第一个界面的xml 里面，搜索框直接用一个自定义的imageView 代替

2.1 自定义imageView

import android.content.Context;import android.util.AttributeSet;import android.widget.ImageView;/** * 自定义image,用于在4.x上实现仿5.0上分享元素的动画 * Created by lh on 2016/11/4. */public class CustomImage extends ImageView {    private int mResId;    public CustomImage(Context context) {        this(context, null, 0);    }    public CustomImage(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public CustomImage(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        if (attrs != null) {            String namespace = "http://schemas.android.com/apk/res/android";            String attribute = "src";            mResId = attrs.getAttributeResourceValue(namespace, attribute, 0);        }    }    public int getImageId() {        return mResId;    }    @Override    public void setImageResource(int resId) {        super.setImageResource(resId);        mResId = resId;    }}

---

2.2 点击事件的处理

在第一个界面中，我们需要获取到共享元素的位置信息，并将其传递给下一个界面。

private void showShareAnimation(View view) {        Intent intent = new Intent(instance, SearchActivity.class);        //创建一个rect 对象来存储共享元素的位置信息        Rect rect = new Rect();        //获取元素的位置信息        view.getGlobalVisibleRect(rect);        //将位置信息附加到intent 上        intent.setSourceBounds(rect);        CustomImage customImage = (CustomImage) view;        intent.putExtra(ChooseCountry.EXTRA_SEARCH_SHAREIMAGE, customImage.getImageId());        startActivity(intent);        //用于屏蔽 activity 默认的转场动画效果        overridePendingTransition(0, 0);    }

其中，getGlobalVisibleRect() 方法的含义是，获取 可见的状态栏高度+可见的标题栏高度+Rect左上角到标题栏底部的距离，如果标题栏被隐藏了，那么可见标题栏高度为0。

接下来，就在在第二个界面接收位置信息并将该图片展示出来了。

---

3.模拟转场动画：

在第二个界面中，我们需要做如下的操作：

1.获取上共享元素信息。
2.计算共享元素缩放比例和位移距离。
3.调用动画，完成模拟转场效果。
4.隐藏搜索的图片，转变为可编辑的editText

---

/**     * 初始化场景     */    private void initial() {        // 获取上一个界面传入的信息        mRect = getIntent().getSourceBounds();        //图片资源 ID        int mRescourceId = getIntent().getExtras().getInt(ChooseCountry.EXTRA_SEARCH_SHAREIMAGE);        // 获取上一个界面中，图片的宽度和高度        mOriginWidth = mRect.right - mRect.left;        mOriginHeight = mRect.bottom - mRect.top;        // 设置 ImageView 的位置，使其和上一个界面中图片的位置重合        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(mOriginWidth, mOriginHeight);        params.setMargins(mRect.left, mRect.top - getStatusBarHeight(), mRect.right, mRect.bottom);        mImageView.setLayoutParams(params);        // 设置 ImageView 的图片和缩放类型        mImageView.setImageResource(mRescourceId);        mImageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);        // 根据上一个界面传入的图片资源 ID，获取图片的 Bitmap 对象。        BitmapDrawable bitmapDrawable = (BitmapDrawable) getResources().getDrawable(mRescourceId);        Bitmap bitmap = bitmapDrawable.getBitmap();        // 计算图片缩放比例和位移距离        getBundleInfo(bitmap);    }/**     * 计算图片缩放比例，以及位移距离     */    private void getBundleInfo(Bitmap bitmap) {        // 计算图片缩放比例，并存储在 bundle 中        if (bitmap.getWidth() >= bitmap.getHeight()) {            mScaleBundle.putFloat(SCALE_WIDTH, (float) mScreenWidth / mOriginWidth);            mScaleBundle.putFloat(SCALE_HEIGHT, (float) bitmap.getHeight() / mOriginHeight);        } else {            mScaleBundle.putFloat(SCALE_WIDTH, (float) bitmap.getWidth() / mOriginWidth);            mScaleBundle.putFloat(SCALE_HEIGHT, (float) mScreenHeight / mOriginHeight);        }        // 计算位移距离，并将数据存储到 bundle 中        mTransitionBundle.putFloat(TRANSITION_X, mScreenWidth / 2 - (mRect.left + (mRect.right - mRect.left) / 2));//        mTransitionBundle.putFloat(TRANSITION_Y, mScreenHeight / 2 - (mRect.top + (mRect.bottom - mRect.top) / 2));        mTransitionBundle.putFloat(TRANSITION_Y, -(mRect.top-getStatusBarHeight()));    }

我们要将 Rect.top 的值减去状态栏的高度，这样才是相对于屏幕的绝对位置。

入场以及退场动画

/**     * 模拟入场动画     */    private void runEnterAnim() {        mImageView.animate()                .setInterpolator(DEFAULT_INTERPOLATOR)                .setDuration(DURATION)                .scaleX(mScaleBundle.getFloat(SCALE_WIDTH))                .scaleY(mScaleBundle.getFloat(SCALE_HEIGHT))                .translationX(mTransitionBundle.getFloat(TRANSITION_X))                .translationY(mTransitionBundle.getFloat(TRANSITION_Y))                .start();        mImageView.setVisibility(View.VISIBLE);        //add 作用隐藏原来的图片，显示为可编辑的editText        mHandler.sendEmptyMessageDelayed(MESSAGE_SHOW_EDIT,DURATION);        mHandler.sendEmptyMessageDelayed(MESSAGE_SHOW_KEYBOARD,DURATION*2);    }    /**     * 模拟退场动画     */    @SuppressWarnings("NewApi")    private void runExitAnim() {        //add        searchLine.setVisibility(View.GONE);        searchTop.setVisibility(View.GONE);        mImageView.setVisibility(View.VISIBLE);        mImageView.animate()                .setInterpolator(DEFAULT_INTERPOLATOR)                .setDuration(DURATION)                .scaleX(1)                .scaleY(1)                .translationX(0)                .translationY(0)                .withEndAction(new Runnable() {                    @Override                    public void run() {                        finish();                        overridePendingTransition(0, 0);                    }                })                .start();    }private Handler mHandler = new Handler(){        @Override        public void handleMessage(Message msg) {            switch (msg.what){                case MESSAGE_SHOW_KEYBOARD:                    CommonUtil.showKeyboard(instance, searchEdit);                    break;                case MESSAGE_SHOW_EDIT:                    mImageView.setVisibility(View.GONE);                    searchTop.setVisibility(View.VISIBLE);                    searchLine.setVisibility(View.VISIBLE);                    searchEdit.requestFocus();                    break;            }        }    };

---

4.完整代码

4.1 界面一：

xml

<com.accounttools.app.views.customviews.CustomImage            android:id="@+id/search_total_view"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:src="@drawable/search_totla_view"            android:scaleType="centerInside"/>

activity
该id的点击事件调用的方法如下，获取共享元素的位置信息

private void showShareAnimation(View view) {        Intent intent = new Intent(instance, SearchActivity.class);        //创建一个rect 对象来存储共享元素的位置信息        Rect rect = new Rect();        //获取元素的位置信息        view.getGlobalVisibleRect(rect);        //将位置信息附加到intent 上        intent.setSourceBounds(rect);        CustomImage customImage = (CustomImage) view;        intent.putExtra(ChooseCountry.EXTRA_SEARCH_SHAREIMAGE, customImage.getImageId());        startActivity(intent);        //用于屏蔽 activity 默认的转场动画效果        overridePendingTransition(0, 0);    }

4.2 界面二：

xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:orientation="vertical"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:fitsSystemWindows="true"              android:background="@color/common_view_bg">    <com.accounttools.app.views.customviews.CustomImage            android:id="@+id/activity_search_img"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:scaleType="centerInside"            android:visibility="invisible"/>    <RelativeLayout            android:id="@+id/activity_search_top"            android:layout_width="match_parent"            android:layout_height="45dp"            android:background="@color/status_bar_color"            android:orientation="horizontal"            android:paddingLeft="10dp"            android:paddingRight="10dp"            android:visibility="gone">        <LinearLayout                android:id="@+id/search_top_cancel"                android:layout_width="50dp"                android:layout_height="match_parent"                android:orientation="vertical"                android:gravity="center"                android:layout_alignParentRight="true">            <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:textSize="18sp"                    android:textColor="@color/common_red"                    android:text="@string/cancel"/>        </LinearLayout>        <LinearLayout                android:layout_toLeftOf="@id/search_top_cancel"                android:layout_marginRight="10dp"                android:layout_width="match_parent"                android:layout_height="28dp"                android:orientation="horizontal"                android:paddingLeft="8dp"                android:paddingRight="8dp"                android:background="@drawable/drawable_search_layout"                android:layout_centerVertical="true"                android:gravity="center_vertical">            <ImageView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:src="@drawable/search_icon"/>            <EditText                    android:id="@+id/search_content"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:layout_marginLeft="5dp"                    android:background="@color/transparent"                    android:textSize="15sp"                    android:hint="@string/search"                    android:textCursorDrawable="@drawable/drawable_search_cursor"/>        </LinearLayout>    </RelativeLayout>    <TextView            android:id="@+id/activity_search_line"            android:layout_width="match_parent"            android:layout_height="0.5dp"            android:background="@color/common_line_color"            android:visibility="gone"/></LinearLayout>

activity
handler 的作用是当第二个界面显示动画结束后，隐藏imageView,显示可编辑的editText

/** * 搜索界面 * Created by lh on 2016/11/3. */public class SearchActivity extends BaseActivity {    private static final int MESSAGE_SHOW_KEYBOARD = 1;    private static final int MESSAGE_SHOW_EDIT = 2;    public static final int DURATION = 300;    private static final AccelerateDecelerateInterpolator DEFAULT_INTERPOLATOR = new AccelerateDecelerateInterpolator();    private static final String SCALE_WIDTH = "SCALE_WIDTH";    private static final String SCALE_HEIGHT = "SCALE_HEIGHT";    private static final String TRANSITION_X = "TRANSITION_X";    private static final String TRANSITION_Y = "TRANSITION_Y";    private Activity instance = SearchActivity.this;    /**     * 存储图片缩放比例和位移距离     */    private Bundle mScaleBundle = new Bundle();    private Bundle mTransitionBundle = new Bundle();    /**     * 屏幕宽度和高度     */    private int mScreenWidth;    private int mScreenHeight;    /**     * 上一个界面图片的宽度和高度     */    private int mOriginWidth;    private int mOriginHeight;    /**     * 上一个界面图片的位置信息     */    private Rect mRect;    private CustomImage mImageView;    private EditText searchEdit;    private RelativeLayout searchTop;    private TextView searchLine;    @Override    public void onBackPressed() {        // 使用退场动画        runExitAnim();    }    @Override    protected int getLayoutResId() {        return R.layout.activity_search_layout;    }    @Override    protected void initView() {        // 获得屏幕尺寸        getScreenSize();        // 初始化界面        mImageView = (CustomImage) findViewById(R.id.activity_search_img);        searchEdit = (EditText)findViewById(R.id.search_content);        searchTop = (RelativeLayout)findViewById(R.id.activity_search_top);        searchLine = (TextView)findViewById(R.id.activity_search_line);        // 初始化场景        initial();        // 设置入场动画        runEnterAnim();        //动态显示搜索结果        showSearchResult();    }    private Handler mHandler = new Handler(){        @Override        public void handleMessage(Message msg) {            switch (msg.what){                case MESSAGE_SHOW_KEYBOARD:                    CommonUtil.showKeyboard(instance, searchEdit);                    break;                case MESSAGE_SHOW_EDIT:                    mImageView.setVisibility(View.GONE);                    searchTop.setVisibility(View.VISIBLE);                    searchLine.setVisibility(View.VISIBLE);                    searchEdit.requestFocus();                    break;            }        }    };    /**     * 初始化场景     */    private void initial() {        // 获取上一个界面传入的信息        mRect = getIntent().getSourceBounds();        //图片资源 ID        int mRescourceId = getIntent().getExtras().getInt(ChooseCountry.EXTRA_SEARCH_SHAREIMAGE);        // 获取上一个界面中，图片的宽度和高度        mOriginWidth = mRect.right - mRect.left;        mOriginHeight = mRect.bottom - mRect.top;        // 设置 ImageView 的位置，使其和上一个界面中图片的位置重合        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(mOriginWidth, mOriginHeight);        params.setMargins(mRect.left, mRect.top - getStatusBarHeight(), mRect.right, mRect.bottom);        mImageView.setLayoutParams(params);        // 设置 ImageView 的图片和缩放类型        mImageView.setImageResource(mRescourceId);        mImageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);        // 根据上一个界面传入的图片资源 ID，获取图片的 Bitmap 对象。        BitmapDrawable bitmapDrawable = (BitmapDrawable) getResources().getDrawable(mRescourceId);        Bitmap bitmap = bitmapDrawable.getBitmap();        // 计算图片缩放比例和位移距离        getBundleInfo(bitmap);    }    /**     * 计算图片缩放比例，以及位移距离     */    private void getBundleInfo(Bitmap bitmap) {        // 计算图片缩放比例，并存储在 bundle 中        if (bitmap.getWidth() >= bitmap.getHeight()) {            mScaleBundle.putFloat(SCALE_WIDTH, (float) mScreenWidth / mOriginWidth);            mScaleBundle.putFloat(SCALE_HEIGHT, (float) bitmap.getHeight() / mOriginHeight);        } else {            mScaleBundle.putFloat(SCALE_WIDTH, (float) bitmap.getWidth() / mOriginWidth);            mScaleBundle.putFloat(SCALE_HEIGHT, (float) mScreenHeight / mOriginHeight);        }        // 计算位移距离，并将数据存储到 bundle 中        mTransitionBundle.putFloat(TRANSITION_X, mScreenWidth / 2 - (mRect.left + (mRect.right - mRect.left) / 2));//        mTransitionBundle.putFloat(TRANSITION_Y, mScreenHeight / 2 - (mRect.top + (mRect.bottom - mRect.top) / 2));        mTransitionBundle.putFloat(TRANSITION_Y, -(mRect.top-getStatusBarHeight()));    }    /**     * 模拟入场动画     */    private void runEnterAnim() {        mImageView.animate()                .setInterpolator(DEFAULT_INTERPOLATOR)                .setDuration(DURATION)                .scaleX(mScaleBundle.getFloat(SCALE_WIDTH))                .scaleY(mScaleBundle.getFloat(SCALE_HEIGHT))                .translationX(mTransitionBundle.getFloat(TRANSITION_X))                .translationY(mTransitionBundle.getFloat(TRANSITION_Y))                .start();        mImageView.setVisibility(View.VISIBLE);        //add        mHandler.sendEmptyMessageDelayed(MESSAGE_SHOW_EDIT,DURATION);        mHandler.sendEmptyMessageDelayed(MESSAGE_SHOW_KEYBOARD,DURATION*2);    }    /**     * 模拟退场动画     */    @SuppressWarnings("NewApi")    private void runExitAnim() {        //add        searchLine.setVisibility(View.GONE);        searchTop.setVisibility(View.GONE);        mImageView.setVisibility(View.VISIBLE);        mImageView.animate()                .setInterpolator(DEFAULT_INTERPOLATOR)                .setDuration(DURATION)                .scaleX(1)                .scaleY(1)                .translationX(0)                .translationY(0)                .withEndAction(new Runnable() {                    @Override                    public void run() {                        finish();                        overridePendingTransition(0, 0);                    }                })                .start();    }    /**     * 获取屏幕尺寸     */    private void getScreenSize() {        Display display = getWindowManager().getDefaultDisplay();        Point size = new Point();        display.getSize(size);        mScreenWidth = size.x;        mScreenHeight = size.y;    }    /**     * 获取状态栏高度     */    private int getStatusBarHeight() {        //获取status_bar_height资源的ID        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");        if (resourceId > 0) {            //根据资源ID获取响应的尺寸值            return getResources().getDimensionPixelSize(resourceId);        }        return -1;    }    private void showSearchResult(){        searchEdit.addTextChangedListener(new TextWatcher() {            @Override            public void beforeTextChanged(CharSequence s, int start, int count, int after) {            }            @Override            public void onTextChanged(CharSequence s, int start, int before, int count) {            }            @Override            public void afterTextChanged(Editable s) {                //搜索的匹配算法                Log.d("SearchActivity"," afterTextChanged 调用了 s="+s.toString());            }        });    }}

---

5.参考资料：

1.Android 中的转场动画及兼容处理

2.https://github.com/wl9739/UITransitionDemo

3.用 Transition 完成 Fragment 共享元素的切换

https://github.com/hehonghui/android-tech-frontier/blob/master/issue-35/%E7%94%A8Transition%E5%AE%8C%E6%88%90Fragment%E5%85%B1%E4%BA%AB%E5%85%83%E7%B4%A0%E7%9A%84%E5%88%87%E6%8D%A2.md