Android实现背景透明度渐变的效果，类似于分享底部的弹出框

亦凉 2024-02-17 17:32 3阅读 0赞

## 实现背景透明度渐变的效果，类似于分享底部的弹出框 ##

这是公司最近写的一个项目，其中的一个自定义分享模块，刚开始实现的效果比较简单，背景透明度没有渐变，而是随着底部分享的弹出框而一起弹出，看起来比较生硬，用户体验不是很好，现在要实现的效果就是类似于SharedSDK底部分享弹出框的效果，相信大家都用过SharedSDK，也见过他的分享弹出框的效果！废话不多说了，看张效果图，然后直接上代码！

![这里写图片描述][20160608144936563]

#### 代码块 ####

1.这个是主界面

package com.example.bg.share.selfdefinitionshareanimaiton;
    
    import android.animation.Animator;
    import android.animation.ObjectAnimator;
    import android.content.Context;
    import android.graphics.drawable.ColorDrawable;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.Gravity;
    import android.view.KeyEvent;
    import android.view.MotionEvent;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.Button;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    import android.widget.PopupWindow;
    
    public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    
        private Button bt_share;
        private ImageView iv_all;
        private static PopupWindow mPop;
        private View mPopupView;
        private PopupWindow mPopupWindow;
        private LinearLayout qzone;
        private LinearLayout friend_circle;
        private LinearLayout sina;
        private LinearLayout weixin_goodfriend;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            initView();
            initData();
            initEventListener();
        }
    
        private void initView() {
            bt_share = (Button) findViewById(R.id.bt_share);
            iv_all = (ImageView) findViewById(R.id.iv_all);
    
            /**
             * 分享的那个popupWindow
             */
            //获取得到PopupWindow的布局文件
            mPopupView = View.inflate(this, R.layout.layout_share_popupwindow, null);
            qzone = (LinearLayout) mPopupView.findViewById(R.id.qzone);
            friend_circle = (LinearLayout) mPopupView.findViewById(R.id.friend_circle);
            sina = (LinearLayout) mPopupView.findViewById(R.id.sina);
            weixin_goodfriend = (LinearLayout) mPopupView.findViewById(R.id.weixin_goodfriend);
        }
    
        private void initData() {
        }
    
        private void initEventListener() {
            bt_share.setOnClickListener(this);
            qzone.setOnClickListener(this);
            friend_circle.setOnClickListener(this);
            sina.setOnClickListener(this);
            weixin_goodfriend.setOnClickListener(this);
    
        }
    
        @Override
        public void onClick(View view) {
            switch(view.getId()) {
               case R.id.bt_share: //分享
                   propetyAnim(iv_all);
                   mPopupWindow = showPopWindow(view, mPopupView, this, iv_all);
                   break;
                case R.id.qzone://分享到qq空间！
    
                   break;
                case R.id.friend_circle://分享到微信朋友圈！
    
                   break;
                case R.id.sina://分享到新浪微博！
    
                   break;
                case R.id.weixin_goodfriend://分享到微信好友！
    
                   break;
               default:
                   break;
            }
        }
    
        /**
            半透明背景出现的动画
         */
        private void propetyAnim(ImageView iv) {
            ObjectAnimator animator = ObjectAnimator.ofFloat(iv, "alpha", 0, 0.2f, 0.5f, 0.7f, 0.9f, 1);
            animator.setDuration(500);
            animator.setRepeatCount(0);
            animator.start();
            iv.setVisibility(View.VISIBLE);
        }
    
        /**
         * 半透明背景消失的动画
         * @param iv
         */
        public static void propetyAnim2(final ImageView iv){
            ObjectAnimator animator = ObjectAnimator.ofFloat(iv,"alpha",1,0.9f,0.7f,0.5f,0.2f,0);
            animator.setDuration(500);
            animator.setRepeatCount(0);
            animator.start();
            animator.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {
    
                }
    
                @Override
                public void onAnimationEnd(Animator animation) {
                    iv.setVisibility(View.GONE);
                }
    
                @Override
                public void onAnimationCancel(Animator animation) {
    
                }
    
                @Override
                public void onAnimationRepeat(Animator animation) {
    
                }
            });
        }
    
        /**
         * 显示PopupWindow
         * @param parent
         * @param view
         * @return
         */
        public static PopupWindow showPopWindow(View parent, View view, Context context, final ImageView iv_all) {
            mPop = new PopupWindow(view,
                    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            mPop.setOutsideTouchable(true);
            mPop.setFocusable(true);
            mPop.setBackgroundDrawable(new ColorDrawable(0));
            mPop.setAnimationStyle(R.style.AnimBottom);
            mPop.showAtLocation(parent, Gravity.TOP, 0, 0);
    
            //mPop.showAsDropDown(v,0,0);
            view.setFocusable(true); // 这个很重要
            view.setFocusableInTouchMode(true);
    
            mPop.setOnDismissListener(new PopupWindow.OnDismissListener() {
                @Override
                public void onDismiss() {
                    propetyAnim2(iv_all);
                    mPop = null;
                }
            });
    
            // 重写onKeyListener
            view.setOnKeyListener(new View.OnKeyListener() {
    
                @Override
                public boolean onKey(View v, int keyCode, KeyEvent event) {
                    if (keyCode == KeyEvent.KEYCODE_BACK) {
                        mPop.dismiss();
                        return true;
                    }
                    return false;
                }
            });
    
            // 点击其他地方消失
            view.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    // TODO Auto-generated method stub
                    if (mPop != null && mPop.isShowing()) {
                        mPop.dismiss();
                    }
                    return false;
                }
            });
    
            return mPop;
        }
    
    
    
    }

2.这个是主界面的布局文件

<?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">
    
        <Button
            android:id="@+id/bt_share"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="分享"/>
        <ImageView
            android:id="@+id/iv_all"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#44000000"
            android:visibility="gone">
        </ImageView>
    </RelativeLayout>

3.这个是PopupWindow的布局文件

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent"
        android:orientation="vertical">
    
        <View
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    
        <LinearLayout
            android:id="@+id/ll"
            android:layout_width="match_parent"
            android:layout_height="235dp"
            android:orientation="vertical">
    
            <View
                android:id="@+id/view1"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/layout_bg" />
    
            <View
                android:id="@+id/child_top"
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:background="@android:color/white" />
    
            <LinearLayout
                android:id="@+id/ll_share_item"
                android:layout_width="match_parent"
                android:layout_height="140dp"
                android:background="@android:color/white"
                android:orientation="horizontal">
    
                <LinearLayout
                    android:id="@+id/qzone"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:orientation="vertical">
    
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:src="@drawable/qzone" />
    
                    <TextView
                        android:id="@+id/tv1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="QQ空间"
                        android:textSize="14sp" />
                </LinearLayout>
    
                <LinearLayout
                    android:id="@+id/friend_circle"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:orientation="vertical">
    
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:src="@drawable/friend_cirle" />
    
                    <TextView
                        android:id="@+id/tv2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="朋友圈"
                        android:textSize="14sp" />
                </LinearLayout>
    
                <LinearLayout
                    android:id="@+id/sina"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:orientation="vertical">
    
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:src="@drawable/sina_weibo" />
    
                    <TextView
                        android:id="@+id/tv3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="新浪微博"
                        android:textSize="14sp" />
                </LinearLayout>
    
                <LinearLayout
                    android:id="@+id/weixin_goodfriend"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:orientation="vertical">
    
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:src="@drawable/weixin_goodfriend" />
    
                    <TextView
                        android:id="@+id/tv4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="微信好友"
                        android:textSize="14sp" />
                </LinearLayout>
    
            </LinearLayout>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:layout_below="@id/ll"
                android:background="#22000000" />
    
            <View
                android:id="@+id/view2"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/layout_bg" />
    
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/white"
                android:id="@+id/rl_cancel">
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:gravity="center"
                    android:text="取消"
                    android:textColor="#0000ff"
                    android:textSize="15sp" />
    
            </RelativeLayout>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/layout_bg" />
    
        </LinearLayout>
    </LinearLayout>

4.在colors.xml中加入这两种颜色

<color name="white">#ffffff</color>
        <color name="layout_bg">#f0f0f0</color>

5.在styles.xml中加入这个样式

<style name="AnimBottom" parent="@android:style/Animation">
            <item name="android:windowEnterAnimation">@anim/push_bottom_in</item>
            <item name="android:windowExitAnimation">@anim/push_bottom_out</item>
        </style>

对应的两种动画  
1）push\_bottom\_in

<?xml version="1.0" encoding="utf-8"?>
    
    <set xmlns:android="http://schemas.android.com/apk/res/android" >
    
        <translate
            android:duration="280"
            android:fromYDelta="100%p"
            android:toYDelta="0"        
         />   
         <alpha
            android:fromAlpha="0.0"
            android:toAlpha="1.0"
            android:duration="200"
        />     
    </set>

2)push\_bttom\_out

<?xml version="1.0" encoding="utf-8"?>
    
    <set xmlns:android="http://schemas.android.com/apk/res/android" >
    
    
        <translate
            android:duration="280"
            android:fromYDelta="0"
            android:toYDelta="50%p" />
        <alpha
            android:fromAlpha="1.0"
            android:toAlpha="0.0"
            android:duration="200"
        />  
    </set>

好的到这里已ok，本人技术水平有限，如有错误，欢迎各位大牛指正！

源码可到GitHub上下载：[https://github.com/xinyitiandi/SelfDefinitionShareAnimaiton.git][https_github.com_xinyitiandi_SelfDefinitionShareAnimaiton.git]

[20160608144936563]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/19c5de02e86d48688c8feff3bfd7c68c.png
[https_github.com_xinyitiandi_SelfDefinitionShareAnimaiton.git]: https://github.com/xinyitiandi/SelfDefinitionShareAnimaiton.git