實現一個相似Chrome新功能提示的popoup

先讓咱們看一下Chrome的popup是什麼樣的:java

這個「直接搜索網頁」與「在打開的標籤頁之間切換」就是兩個功能導航,還作了一個動畫效果,會不停的上下晃。android

我經過WindowManager的addView也實現了一個相似的效果,以下圖:ide

主要是經過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>

 

源碼this

相關文章
相關標籤/搜索