android 实现控件搜索折叠效果 Animation动画折叠和普通控件直接折叠效果;

原理很简单,都是获取对应的高度,通过实现高度变化而改变显示效果;

话不多说直接上代码

1、普通折叠效果,以下是xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/Layout_top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/Layout_btn"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentTop="true"
            android:layout_gravity="top"
            android:orientation="horizontal">

            <Button
                android:id="@+id/btn_fold_all"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="全部折叠" />

            <Button
                android:id="@+id/btn_expand_all"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="全部展开" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:background="@drawable/textview_border" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/Layout_all"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/top_Layout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:orientation="horizontal">

                <Button
                    android:id="@+id/btn_fold"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="折叠1" />

                <Button
                    android:id="@+id/btn_expand"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="展开1" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/Layout_vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <Button
                    android:id="@+id/btn1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="btn1" />

                <Button
                    android:id="@+id/btn2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="btn1" />

                <Button
                    android:id="@+id/btn3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="btn3" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="10dp"
                    android:background="@drawable/textview_border" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:orientation="horizontal">

                <Button
                    android:id="@+id/btn_fold2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="折叠2" />

                <Button
                    android:id="@+id/btn_expand2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="展开2" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/Layout_vertical2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <Button
                    android:id="@+id/btn4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="btn4" />

                <Button
                    android:id="@+id/btn5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="btn5" />

                <Button
                    android:id="@+id/btn6"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="btn6" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

普通折叠的activity代码

package com.example.foldingeffectdemo;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.LinearLayout;

import com.example.foldingeffectdemo.Utilits.LogUtilits;

import java.util.Timer;
import java.util.TimerTask;

public class LayoutParamsActivity extends AppCompatActivity implements View.OnClickListener {
    private LinearLayout.LayoutParams mLayoutParams;

    private LinearLayout layoutAll;
    private LinearLayout layoutVertical;
    private LinearLayout layoutVertical2;

    private Button btnFold;
    private Button btnExpand;
    private Button btnFold2;
    private Button btnExpand2;
    private Button btnFoldAll;
    private Button btnExpandAll;

    private static final int HEIGHT_1 = 1;
    private int layoutVerticaHeight = 0;
    private int layoutVertical2Height = 0;
    private int layoutAllHeight = 0;

    private Timer timer = new Timer();

    TimerTask task = new TimerTask() {
        public void run() {
            Message message = new Message();
            message.what = 1;
            mHandler.sendMessage(message);
        }
    };

    @SuppressLint("HandlerLeak")
    Handler mHandler = new Handler() {
        @Override
        public void handleMessage(@NonNull Message msg) {
            super.handleMessage(msg);
            if (msg.what == 1) {
                getParameter();
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_layout_params);

        initView();
        initListener();
        timerSchedule();
    }

    private void initView() {
        btnFoldAll = findViewById(R.id.btn_fold_all);
        btnExpandAll = findViewById(R.id.btn_expand_all);
        layoutAll = findViewById(R.id.Layout_all);

        btnFold = findViewById(R.id.btn_fold);
        btnExpand = findViewById(R.id.btn_expand);
        layoutVertical = findViewById(R.id.Layout_vertical);

        btnFold2 = findViewById(R.id.btn_fold2);
        btnExpand2 = findViewById(R.id.btn_expand2);
        layoutVertical2 = findViewById(R.id.Layout_vertical2);
    }

    private void initListener() {
        btnFoldAll.setOnClickListener(this);
        btnExpandAll.setOnClickListener(this);
        btnFold.setOnClickListener(this);
        btnExpand.setOnClickListener(this);
        btnFold2.setOnClickListener(this);
        btnExpand2.setOnClickListener(this);
    }

    private void timerSchedule(){
        timer.schedule(task, 10, 500);
    }

    private void getParameter() {
        layoutAllHeight = layoutAll.getHeight();
        layoutVerticaHeight = layoutVertical.getHeight();
        layoutVertical2Height = layoutVertical2.getHeight();

        if (layoutAllHeight != 0 && layoutVerticaHeight != 0 && layoutVertical2Height != 0) {
            timer.cancel();
        }

        LogUtilits.LogErr("layoutAllHeight:" + layoutAllHeight);
        LogUtilits.LogErr("layoutVerticaHeight:" + layoutVerticaHeight);
        LogUtilits.LogErr("layoutVertical2Height:" + layoutVertical2Height);
    }

    @SuppressLint("NonConstantResourceId")
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_fold_all:
                foldAndExpand(layoutAll, HEIGHT_1);
                break;
            case R.id.btn_expand_all:
                foldAndExpand(layoutAll, layoutAllHeight);
                break;
            case R.id.btn_fold:
                foldAndExpand(layoutVertical, HEIGHT_1);
                break;
            case R.id.btn_expand:
                foldAndExpand(layoutVertical, layoutVerticaHeight);
                break;
            case R.id.btn_fold2:
                foldAndExpand(layoutVertical2, HEIGHT_1);
                break;
            case R.id.btn_expand2:
                foldAndExpand(layoutVertical2, layoutVertical2Height);
                break;
        }
    }

    private void foldAndExpand(LinearLayout mLinearLayout, int height) {
        mLayoutParams = (LinearLayout.LayoutParams) mLinearLayout.getLayoutParams();
        mLayoutParams.height = height;
        mLinearLayout.setLayoutParams(mLayoutParams);
    }
}

2、动画 Animation的实现折叠效果

以下是xml代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layout_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/Layout_all"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <com.example.foldingeffectdemo.Utilits.FoldPanelLayout
            android:id="@+id/pl_list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/layout_list"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_list"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/animation_textview_border"
                    android:padding="10dp"
                    android:text="list动画折叠"
                    android:textSize="36dp" />

                <ListView
                    android:id="@+id/lv_list"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/tv_list"
                    android:background="@android:color/white" />
            </LinearLayout>
        </com.example.foldingeffectdemo.Utilits.FoldPanelLayout>

        <com.example.foldingeffectdemo.Utilits.FoldPanelLayout
            android:id="@+id/pl_control"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/purple_1"
            android:layout_marginTop="5dp"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/Layout_control"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_control"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/animation_textview_border"
                    android:padding="10dp"
                    android:text="其他动画折叠"
                    android:textSize="36dp" />

                <Button
                    android:id="@+id/but1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/button_border"
                    android:text="btn1"
                    android:textSize="24dp" />

                <Button
                    android:id="@+id/but2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/button_border"
                    android:text="btn2"
                    android:textSize="24dp" />

                <Button
                    android:id="@+id/but3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/button_border"
                    android:text="btn3"
                    android:textSize="24dp" />
            </LinearLayout>
        </com.example.foldingeffectdemo.Utilits.FoldPanelLayout>
    </LinearLayout>

</RelativeLayout>

以下是activity的代码

package com.example.foldingeffectdemo;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.os.Bundle;
import android.os.Message;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

import com.example.foldingeffectdemo.Utilits.FoldPanelLayout;
import com.example.foldingeffectdemo.Utilits.LogUtilits;

import java.util.Timer;
import java.util.TimerTask;

public class AnimationActivity extends AppCompatActivity implements View.OnClickListener {

    private TextView tvList;
    private TextView tvControl;
    private ListView lvList;
    private LinearLayout llList;
    private FoldPanelLayout plList;
    private FoldPanelLayout plControl;
    private static final int EXPAND_WEEK = R.id.tv_list;
    private String[] listTestData = new String[5];
    private boolean isListCollapse = false;
    private boolean isConstorlCollapse = false;
    private static final int listExpandFlag = 0;
    private static final int controlExpandFlag = 1;

    private int plListHeight;
    private int plControlHeight;
    //动画时间
    private static final int ANIM_DURATION = 300;
    //要改变的属性,名称要与FoldPanelLayout中的set和get方法对应
    private static final String ANIM_PROPERTY = "panelHeight";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation);

        initView();
        initListener();
        setListTestData();
    }

    private void initView() {
        plList = findViewById(R.id.pl_list);
        plControl = findViewById(R.id.pl_control);

        tvList = findViewById(R.id.tv_list);
        tvControl = findViewById(R.id.tv_control);

        lvList = findViewById(R.id.lv_list);
        llList = findViewById(R.id.layout_list);
    }

    private void initListener() {
        tvList.setOnClickListener(this);
        tvControl.setOnClickListener(this);
    }

    private void setListTestData() {
        for (int i = 0; i < listTestData.length; i++) {
            listTestData[i] = "ListTestData   " + i;
        }

        lvList.setAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, listTestData));
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.tv_list:
                if (isListCollapse) {
                    expandLayout(listExpandFlag);
                    isListCollapse = false;
                } else {
                    collapseLayout(listExpandFlag);
                    isListCollapse = true;
                }
                break;
            case R.id.tv_control:
                if (isConstorlCollapse) {
                    expandLayout(controlExpandFlag);
                    isConstorlCollapse = false;
                } else {
                    collapseLayout(controlExpandFlag);
                    isConstorlCollapse = true;
                }
                break;
        }
    }


    /**
     * 折叠
     *
     * @param expandFlag
     */
    private void collapseLayout(int expandFlag) {
        int startHeight = 0;
        if (expandFlag == listExpandFlag) {
            startHeight = plListHeight = plList.getHeight();
        } else {
            startHeight = plControlHeight = plControl.getHeight();
        }

        startAnimation(expandFlag,
                startHeight,
                tvList.getHeight());
    }

    /**
     * 展开
     *
     * @param expandFlag
     */
    private void expandLayout(int expandFlag) {
        int endHeight = 0;
        if (expandFlag == listExpandFlag) {
            endHeight = plListHeight;
        } else {
            endHeight = plControlHeight;
        }
        startAnimation(expandFlag,
                tvList.getHeight(),
                endHeight);
    }

    public class AnimUpdateListener implements ValueAnimator.AnimatorUpdateListener {
        ViewGroup vp;

        public AnimUpdateListener(ViewGroup vp) {
            this.vp = vp;
        }

        @Override
        public void onAnimationUpdate(ValueAnimator arg0) {
            vp.getChildAt(0).getLayoutParams().height = (Integer) arg0
                    .getAnimatedValue();
        }
    }

    private void startAnimation(int expandFlag, int start, int end) {
        ViewGroup expandVp = null;
        switch (expandFlag) {
            case listExpandFlag:
                expandVp = plList;
                break;
            case controlExpandFlag:
                expandVp = plControl;
                break;
        }
        ObjectAnimator anim = ObjectAnimator.ofInt(expandVp, ANIM_PROPERTY,
                start, end);
        anim.setDuration(ANIM_DURATION);
        anim.start();
        if (end > start) {// 如果是展开,则需要改变列表的高度
            anim.addUpdateListener(new AnimUpdateListener(expandVp));
        }
    }
}

demo链接:dandroid实现控件搜索折叠效果Animation动画折叠和普通折叠-Java文档类资源-CSDN下载android实现控件搜索折叠效果Animation动画折叠和普通控件直接折叠效果;原理很简更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/pizice/85482859

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐