Android實現隱藏顯示部分View

在開發項目的時候,有這樣的需求,將一個界面的某個部位隱藏或者顯示,下面和大家分享怎樣實現這樣的效果。

效果圖

在這裏插入圖片描述

佈局代碼

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical"
    android:paddingTop="@dimen/dp_20">

    <TextView
        android:id="@+id/tv_show_hide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="@dimen/dp_15"
        android:layout_centerHorizontal="true"
        android:text="隱藏"
        android:textColor="@color/black"
        android:textSize="@dimen/sp_20" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/state_color_blue_grey_light_20"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_top"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp_30"
            android:text="頂部"
            android:textColor="@color/black" />

        <TextView
            android:id="@+id/tv_middle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp_30"
            android:text="中間"
            android:textColor="@color/black" />

        <TextView
            android:id="@+id/tv_bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp_30"
            android:text="底部"
            android:textColor="@color/black" />

    </LinearLayout>

</RelativeLayout>

Java代碼

package example.demo.demoapplication.activity;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.TextView;

import butterknife.BindView;
import butterknife.ButterKnife;
import example.demo.demoapplication.R;


public class ActivityShowHidePartView extends AppCompatActivity implements Animator.AnimatorListener {
    @BindView(R.id.tv_show_hide)
    TextView tvShowHide;
    @BindView(R.id.tv_top)
    TextView tvTop;
    @BindView(R.id.tv_middle)
    TextView tvMiddle;
    @BindView(R.id.tv_bottom)
    TextView tvBottom;

    private int measuredHeight;
    private ValueAnimator mShowAction;
    private ValueAnimator mHideAction;
    private boolean isShow = true;

    private static final int VALUEANIMATOR_DURATION = 500;// 動畫持續時間

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_hide_part_view);
        ButterKnife.bind(this);
        initData();
        initEvent();
    }

    private void initData() {
        tvTop.post(new Runnable() {
            @Override
            public void run() {
                //獲取到控件高度
                measuredHeight = tvTop.getMeasuredHeight();
                mShowAction = ValueAnimator.ofInt(0, measuredHeight);
                mHideAction = ValueAnimator.ofInt(measuredHeight, 0);
                mShowAction.addListener(ActivityShowHidePartView.this);
                mHideAction.addListener(ActivityShowHidePartView.this);
            }
        });
    }

    private void initEvent() {
        tvShowHide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!isShow) {

                    mShowAction.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                        @Override
                        public void onAnimationUpdate(ValueAnimator animation) {
                            tvTop.getLayoutParams().height = (int) animation.getAnimatedValue();
                            tvTop.requestLayout();
                        }
                    });

                    isShow = true;
                    mShowAction.setDuration(VALUEANIMATOR_DURATION);
                    mShowAction.start();
                    tvShowHide.setText("隱藏");
                } else {

                    mHideAction.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                        @Override
                        public void onAnimationUpdate(ValueAnimator animation) {
                            tvTop.getLayoutParams().height = (int) animation.getAnimatedValue();
                            tvTop.requestLayout();
                        }
                    });

                    isShow = false;
                    mHideAction.setDuration(VALUEANIMATOR_DURATION);
                    mHideAction.start();
                    tvShowHide.setText("顯示");
                }

            }
        });
    }

    @Override
    public void onAnimationStart(Animator animation) {
        if (isShow) {
            tvTop.setVisibility(View.VISIBLE);
        }

    }

    @Override
    public void onAnimationEnd(Animator animation) {
        tvTop.setVisibility(isShow ? View.VISIBLE : View.GONE);
    }

    @Override
    public void onAnimationCancel(Animator animation) {

    }

    @Override
    public void onAnimationRepeat(Animator animation) {

    }
}

總結

需要注意的是獲取到控件高度是放在子線程

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章