[Android] 控件的动态显示和自动消失效果

在这个例子中,我们要在界面上添加一些可以动态显示和隐藏的组件,并且实现自动消失的效果。

首先,我们在主Activity中添加三个按钮用于演示:
activity_main.xml

    <Button
        android:id="@+id/button_show"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="显示"
        android:onClick="changeButtonColor">
    Button>

    <Button
        android:id="@+id/button_hide"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="隐藏"
        android:onClick="changeButtonColor">
    Button>

    <Button
        android:id="@+id/button_autohide"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="自动隐藏"
        android:onClick="changeButtonColor">
    Button>

然后新建两个用于动态显示的layout
float_layout_2.xml


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="5dp"
    android:background="@drawable/background_view_rounded_single"
    android:visibility="visible">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="This text will be hide when click hidden button"
        android:textColor="#fcfcfc"
        android:textSize="20sp" />

LinearLayout>

float_layout_2.xml


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="5dp"
    android:background="@drawable/background_view_rounded_single"
    android:visibility="visible">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="This text will be hidden automatically 3 seconds later"
        android:textColor="#fcfcfc"
        android:textSize="20sp" />

LinearLayout>

在Activity中,通过addView和removeView方法实现对view的显示和隐藏,并通过延时的Handler消息实现自动消失的效果。
MainActivity.java

package com.example.loushuai.floatlayout;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends Activity {
    private static final int    FADE_OUT = 1;

    private LinearLayout   mLayout;
    private LayoutInflater mInflate;
    private Boolean mShowing;
    private View mView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mInflate = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = mInflate.inflate(R.layout.activity_main, null);

        mLayout = new LinearLayout( this );
        mLayout.setOrientation(LinearLayout.VERTICAL);
        setContentView(mLayout);
        mLayout.addView(view);

        mShowing = false;

        Button btnShow = (Button) findViewById(R.id.button_show);
        btnShow.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                showText1();
            }
        });

        Button btnHide = (Button) findViewById(R.id.button_hide);
        btnHide.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                hideText();
            }
        });

        Button btnAutoHide = (Button) findViewById(R.id.button_autohide);
        btnAutoHide.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                showTest2(3000);
            }
        });
    }

    private void showText1() {
        if (mShowing) {
            return;
        }

        mView =  mInflate.inflate(R.layout.float_layout_1, null);
        mLayout.addView(mView);

        mShowing = true;
    }

    private void hideText() {
        if (!mShowing) {
            return;
        }

        mLayout.removeView(mView);

        mShowing = false;
    }

    private void showTest2(int timeout) {
        if (mShowing) {
            return;
        }

        mView =  mInflate.inflate(R.layout.float_layout_2, null);
        mLayout.addView(mView);

        mShowing = true;

        Message msg = mHandler.obtainMessage(FADE_OUT);
        if (timeout != 0) {
            mHandler.removeMessages(FADE_OUT);
            mHandler.sendMessageDelayed(msg, timeout);
        }
    }

    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case FADE_OUT:
                    hideText();
                    break;
            }
        }
    };
}

[Android] 控件的动态显示和自动消失效果_第1张图片

[Android] 控件的动态显示和自动消失效果_第2张图片

[Android] 控件的动态显示和自动消失效果_第3张图片

完整Demo工程:
https://github.com/loushuai/FloatViewDemo

你可能感兴趣的:(Android)