实现一个类似Chrome新功能提示的popoup

先让我们看一下Chrome的popup是什么样的:

这个“直接搜索网页”与“在打开的标签页之间切换”就是两个功能导航,还做了一个动画效果,会不停的上下晃。

我通过WindowManager的addView也实现了一个类似的效果,如下图:

主要是通过PopupWindow添加一个的view实现的。这个View代码如下:

public class PopupView extends RelativeLayout {

    public PopupView(Context context) {
        super(context);
        LayoutInflater inflater = LayoutInflater.from(context);
        inflater.inflate(R.layout.pup_up_full_layout, this);
    }

    @Override
    public void onAttachedToWindow() {
        super.onAttachedToWindow();
        Context context = getContext();
        Animation anim = AnimationUtils.loadAnimation(context, R.anim.popup_animation);
        View view = findViewById(R.id.notification);
        Resources res = context.getResources();
        Drawable background = res.getDrawable(R.drawable.bubble);
        // 图片底色为白色,需要加滤镜,green为自己定义的颜色
        background.setColorFilter(res.getColor(R.color.green), PorterDuff.Mode.SRC_ATOP);
        view.setBackground(background);
        // 增加动画
        view.startAnimation(anim);
    }
}

 

布局文件pup_up_full_layout.xml代码
<?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" >

    <TextView
        android:id="@+id/notification"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_gravity="top"
        android:layout_marginRight="15dp"
        android:drawableTop="@drawable/bubble_point_green"
        android:text="@string/new_feature" />

</RelativeLayout>

动画文件popup_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="1000"
        android:fromYDelta="-89.5%p"
        android:toYDelta="-89%p"
        android:repeatCount="infinite"
        android:repeatMode="reverse" />

</set>

 

源码

posted @ 2014-04-23 17:21  悟远  阅读(290)  评论(0编辑  收藏  举报