Android 带伸缩动画的布局

时间:2022-07-25
本文章向大家介绍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进行处理就达到了以上的效果,至于关闭的业务就是和展开是相反的业务处理,并且多了输入法的关闭和输入框的清空。这样就完成了,还是蛮简单吧!