先看效果图
OK,下面主要看实现步骤,你随便新建一个Activity就可以了,然后把需要的的一些样式准备好,
由于白色的我放上去你也看不见,所以你就用黑色的先顶着,然后就是背景样式 shape_search_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="24dp"/>
<solid android:color="@color/colorPrimaryDark"/>
</shape>
光标的样式 cursor_style.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:width="1dp" />
<solid android:color="#FFF" />
</shape>
activity_main.xml布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="20dp"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:layout_gravity="right"
android:id="@+id/lay_search"
android:layout_width="48dp"
android:layout_height="48dp"
android:background="@drawable/shape_search_bg">
<LinearLayout
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv_search"
android:layout_width="36dp"
android:layout_height="36dp"
android:padding="6dp"
android:onClick="onClick"
android:src="@mipmap/icon_search_white" />
<EditText
android:visibility="gone"
android:id="@+id/ed_search"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:background="@null"
android:imeOptions="actionSearch"
android:textCursorDrawable="@drawable/cursor_style"
android:ems="8"
android:singleLine="true"
android:padding="5dp"
android:textColor="#FFF"
android:textSize="14sp"/>
<ImageView
android:id="@+id/iv_close"
android:layout_width="36dp"
android:layout_height="36dp"
android:padding="8dp"
android:onClick="onClick"
android:visibility="gone"
android:src="@mipmap/icon_colse_white" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
MainActivity代码:
package com.llw.searchanimation;
import androidx.appcompat.app.AppCompatActivity;
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.text.TextUtils;
import android.transition.AutoTransition;
import android.transition.TransitionManager;
import android.util.DisplayMetrics;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.view.inputmethod.EditorInfo;
import android.view.inputmethod.InputMethodManager;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private ImageView ivSearch,ivClose;
private EditText edSearch;
private RelativeLayout laySearch;
private AutoTransition autoTransition;
private int width;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
laySearch = (RelativeLayout) findViewById(R.id.lay_search);
ivSearch = (ImageView) findViewById(R.id.iv_search);
ivClose = (ImageView) findViewById(R.id.iv_close);
edSearch = (EditText) findViewById(R.id.ed_search);
WindowManager manager = getWindowManager();
DisplayMetrics metrics = new DisplayMetrics();
manager.getDefaultDisplay().getMetrics(metrics);
width = metrics.widthPixels; //获取屏幕的宽度 像素
/**
* 输入法键盘的搜索监听
*/
edSearch.setOnEditorActionListener(new TextView.OnEditorActionListener() {
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
if (actionId == EditorInfo.IME_ACTION_SEARCH) {
String city = edSearch.getText().toString();
if (!TextUtils.isEmpty(city)) {
Toast.makeText(MainActivity.this,city,Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(MainActivity.this,"请输入内容",Toast.LENGTH_SHORT).show();
}
}
return false;
}
});
}
/**
* 点击事件
* @param v
*/
public void onClick(View v) {
switch (v.getId()) {
case R.id.iv_search://点击搜索 伸展
initExpand();
break;
case R.id.iv_close://点击close 关闭
initClose();
break;
}
}
/*设置伸展状态时的布局*/
public void initExpand() {
edSearch.setHint("输入城市名");
edSearch.setHintTextColor(Color.WHITE);
edSearch.setVisibility(View.VISIBLE);
ivClose.setVisibility(View.VISIBLE);
LinearLayout.LayoutParams LayoutParams = (LinearLayout.LayoutParams) laySearch.getLayoutParams();
LayoutParams.width = dip2px(px2dip(width)-40);
LayoutParams.setMargins(dip2px(0), dip2px(0), dip2px(0), dip2px(0));
laySearch.setPadding(14,0,14,0);
laySearch.setLayoutParams(LayoutParams);
edSearch.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
edSearch.setFocusable(true);
edSearch.setFocusableInTouchMode(true);
return false;
}
});
//开始动画
beginDelayedTransition(laySearch);
}
/*设置收缩状态时的布局*/
private void initClose() {
edSearch.setVisibility(View.GONE);
edSearch.setText("");
ivClose.setVisibility(View.GONE);
LinearLayout.LayoutParams LayoutParams = (LinearLayout.LayoutParams) laySearch.getLayoutParams();
LayoutParams.width = dip2px(48);
LayoutParams.height = dip2px(48);
LayoutParams.setMargins(dip2px(0), dip2px(0), dip2px(0), dip2px(0));
laySearch.setLayoutParams(LayoutParams);
//隐藏键盘
InputMethodManager imm = (InputMethodManager) this.getSystemService(Context.INPUT_METHOD_SERVICE);
imm.hideSoftInputFromWindow(this.getWindow().getDecorView().getWindowToken(), 0);
edSearch.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
edSearch.setCursorVisible(true);
}
});
//开始动画
beginDelayedTransition(laySearch);
}
@TargetApi(Build.VERSION_CODES.KITKAT)
private void beginDelayedTransition(ViewGroup view) {
autoTransition = new AutoTransition();
autoTransition.setDuration(500);
TransitionManager.beginDelayedTransition(view,autoTransition);
}
// dp 转成 px
private int dip2px(float dpVale) {
final float scale = getResources().getDisplayMetrics().density;
return (int) (dpVale * scale + 0.5f);
}
// px 转成 dp
private int px2dip(float pxValue) {
final float scale = getResources().getDisplayMetrics().density;
return (int) (pxValue / scale + 0.5f);
}
}
动画的实现主要是通过过渡动画AutoTransition来完成,在点击搜索图标的时候,显示输入框的关闭按钮,然后通过LinearLayout.LayoutParams来设置展开布局的宽度,因为我是横向,所以我获取屏幕的宽度为px,再转换成dp,然后减去40其实是左右20的边距,同时在展开的时候增加了左右的内边距,最后放入到beginDelayedTransition方法中,进行实例化,再设置动画时间,最后交给TransitionManager进行处理就达到了以上的效果,至于关闭的业务就是和展开是相反的业务处理,并且多了输入法的关闭和输入框的清空。这样就完成了,还是蛮简单吧!