1. 程式人生 > >[Android] 控制元件的動態顯示和自動消失效果

[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

<?xml version="1.0" encoding="utf-8"?>
<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

<?xml version="1.0" encoding="utf-8"?>
<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;
            }
        }
    };
}

這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述