首页 > 代码库 > Android自定义类似于QQ的消息提示框

Android自定义类似于QQ的消息提示框

2024-08-05 09:32:54   219人阅读

看到QQ的信息提示框，感觉效果很不错，做了一个类似的，展示如下：

点击查看短视频
效果还不错，整体上是Translate动画和FrameLayout布局的结合，下面看一下代码:

activiy_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical" >

    <FrameLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content" >

        <TextView
           android:id="@+id/toast"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:layout_marginBottom="20dp"
           android:layout_marginTop="40dp"
           android:background="@color/transparent_black"
           android:gravity="center"
           android:paddingBottom="5dp"
           android:paddingLeft="40dp"
           android:paddingRight="40dp"
           android:paddingTop="5dp"
           android:text="@string/toast"
           android:textColor="@color/white"
           android:textSize="16sp"
           android:visibility="invisible" />

        <TextView
           android:id="@+id/title"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="@color/blue"
           android:gravity="center"
           android:padding="5dp"
           android:text="@string/title"
           android:textColor="@color/white"
           android:textSize="20sp" />
    </FrameLayout>

    <TextView
       android:id="@+id/info"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginTop="10dp"
       android:gravity="center"
       android:text="@string/hello_world" />

    <Button
       android:id="@+id/btn"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginTop="30dp"
       android:gravity="center"
       android:text="@string/btn" >
    </Button>

</LinearLayout>

MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
package cn.androiddevelop;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.TextView;
import cn.androiddevelop.test.R;

public class MainActivity extends Activity {
    TextView rootView;
    Button btn;
    Handler handler;
    TextView tv;
    Animation mTranslateInAnimation, mTranslateOutAnimation;
    boolean flag = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rootView = (TextView) findViewById(R.id.info);
        btn = (Button) findViewById(R.id.btn);
        tv = (TextView) findViewById(R.id.toast);

        handler = new Handler() {
            @Override
            public void handleMessage(Message msg) {
                tv.startAnimation(mTranslateOutAnimation);
                tv.setGravity(View.INVISIBLE);
                super.handleMessage(msg);
            }

        };

        // 定义进入与退出动画
        mTranslateInAnimation = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0,
                Animation.RELATIVE_TO_SELF, -1.5f, Animation.RELATIVE_TO_SELF,
                0);
        mTranslateInAnimation.setDuration(1000);

        mTranslateOutAnimation = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0,
                Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
                -1.5f);
        mTranslateOutAnimation.setDuration(1000);

        mTranslateOutAnimation // 动画显示结束后将tv控件隐藏
                .setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        tv.setVisibility(View.INVISIBLE);
                        flag = true; // 恢复响应
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {
                    }
                });

        btn.setOnClickListener(new Button.OnClickListener() {

            @Override
            public void onClick(View v) {
                if (flag) { // 第一次点击按钮生效，在消息框退出前不响应点击
                    flag = false;
                } else {
                    return;
                }

                // 显示消息框
                tv.startAnimation(mTranslateInAnimation);
                tv.setVisibility(View.VISIBLE);

                new Thread() {
                    @Override
                    public void run() {
                        try {
                            sleep(3000);
                            handler.sendEmptyMessage(0);
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                    }
                }.start();
            }
        });
    }
}
更多文章请前往小胖轩.

Android自定义类似于QQ的消息提示框


联系
我们