Android 带伸缩动画的布局

先看效果图 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进行处理就达到了以上的效果，至于关闭的业务就是和展开是相反的业务处理，并且多了输入法的关闭和输入框的清空。这样就完成了，还是蛮简单吧！