android 仿 ios 搜索界面跳转效果(1)

2401_84558590

于 2024-04-28 19:19:41 发布

阅读量631

点赞数 24

分类专栏：程序员文章标签： android ios

本文链接：https://blog.csdn.net/2401_84558590/article/details/138288524

版权

程序员专栏收录该内容

173 篇文章 0 订阅

订阅专栏

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

这里写图片描述

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

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”/>

<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”/>

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();

最后

文章不易，如果大家喜欢这篇文章，或者对你有帮助希望大家多多点赞转发关注哦。文章会持续更新的。绝对干货！！！

Android进阶学习全套手册
关于实战，我想每一个做开发的都有话要说，对于小白而言，缺乏实战经验是通病，那么除了在实际工作过程当中，我们如何去更了解实战方面的内容呢？实际上，我们很有必要去看一些实战相关的电子书。目前，我手头上整理到的电子书还算比较全面，HTTP、自定义view、c++、MVP、Android源码设计模式、Android开发艺术探索、Java并发编程的艺术、Android基于Glide的二次封装、Android内存优化——常见内存泄露及优化方案、.Java编程思想（第4版）等高级技术都囊括其中。

Android高级架构师进阶知识体系图
关于视频这块，我也是自己搜集了一些，都按照Android学习路线做了一个分类。按照Android学习路线一共有八个模块，其中视频都有对应，就是为了帮助大家系统的学习。接下来看一下导图和对应系统视频吧！！！
Android对标阿里P7学习视频

BATJ大厂Android高频面试题
这个题库内容是比较多的，除了一些流行的热门技术面试题，如Kotlin，数据库，Java虚拟机面试题，数组，Framework ，混合跨平台开发，等

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

Glide的二次封装、Android内存优化——常见内存泄露及优化方案、.Java编程思想（第4版）等高级技术都囊括其中。

[外链图片转存中…(img-TFuMfV7d-1714303170594)]

Android高级架构师进阶知识体系图
关于视频这块，我也是自己搜集了一些，都按照Android学习路线做了一个分类。按照Android学习路线一共有八个模块，其中视频都有对应，就是为了帮助大家系统的学习。接下来看一下导图和对应系统视频吧！！！
[外链图片转存中…(img-p8VCteXC-1714303170594)]
Android对标阿里P7学习视频

[外链图片转存中…(img-P3kG2hKh-1714303170595)]

BATJ大厂Android高频面试题
这个题库内容是比较多的，除了一些流行的热门技术面试题，如Kotlin，数据库，Java虚拟机面试题，数组，Framework ，混合跨平台开发，等
[外链图片转存中…(img-VaCZpbUo-1714303170595)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

2401_84558590

关注

24
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
android 仿 ios 搜索界面跳转效果(1)

文章会持续更新的。绝对干货！！！Android进阶学习全套手册关于实战，我想每一个做开发的都有话要说，对于小白而言，缺乏实战经验是通病，那么除了在实际工作过程当中，我们如何去更了解实战方面的内容呢？实际上，我们很有必要去看一些实战相关的电子书。
复制链接

扫一扫