游戏中弹窗实现策略

导读

在游戏玩家打开游戏app的时候，可能会弹出一个窗口，窗口中有展示一些信息，并且会有一些按钮可以点击。由于每次弹出来的弹窗信息可能都不一样，也就是按钮的显示位置也有可能不一样，客户端应该如何实现呢？

需求

1.图片的展示

弹窗的显示有个最大区域，也就是不能超过左右间距和上下间距。如果原图的宽或者高有任何一边超过了这个最大区域，都需要等比例缩小到小于等于最大区域处。

首页_PxCook.png

2.按钮的点击事件如何触发呢？

服务端返回的接口数据中有“关闭按钮”和“立即参与按钮”的坐标轴百分比， 如下：

image.png

有了百分比，就可以计算出按钮的位置。这样我们只需要创建两个没有内容的View，给这两个View设置点击事件就可以了。

至此，弹窗的显示以及按钮的事件都可以做到了。

代码

1.布局文件

2.java代码

package com.weplaykit.sdk.module.popupwindow;

import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import com.weplaykit.sdk.R;
import com.weplaykit.sdk.WPKMainActivity;
import com.weplaykit.sdk.base.BaseActivity;
import com.weplaykit.sdk.common.WPKApplication;
import com.weplaykit.sdk.util.DensityUtil;
import com.weplaykit.sdk.util.ImageLoader;
import com.weplaykit.sdk.util.LogUtil;
import com.weplaykit.sdk.util.MR;
import com.weplaykit.sdk.util.Setting;

/**
 * Created by daniel.xiao on 2017/2/28.
 * 弹窗界面
 */

public class GameWindowActivity extends BaseActivity{

    private LinearLayout mLlContent;
    private LinearLayout mLlParent;
    private GameWindowClient client;
    private PopupWindowData windowData;

    public static final String POPUPWINDOWDATA = "PopupWindowData";

    private int restWidth; //剩余的宽空间
    private int restHeight;//剩余的高控件

    private int realImageWidth; //图片的真实宽度
    private int realImageHeight;//图片的真实高度

    public String CLOSE_ALIAS = "close";
    public String CLICK_ALIAS = "click";
    public static final String WINDOW_HREF= "window_href";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mRootView = LayoutInflater.from(this).inflate(
                MR.getIdByLayoutName(this, "wpk_game_window_activity"), null);
        initRestSpace();
        setContentView(mRootView);
        mLlParent = $("ll_parent");
        mLlContent = $("ll_content");
        client = new GameWindowClient(GameWindowActivity.class.getSimpleName());
        windowData = (PopupWindowData) getIntent().getSerializableExtra(POPUPWINDOWDATA);
        initImagePic(Integer.parseInt(windowData.picWidth), Integer.parseInt(windowData.picHeight));
        showWindow();
    }

    private void initRestSpace(){
        //横屏的情况
        if(WPKApplication.getInstance().mScreenInfo.isLandScape()){
            restWidth = DensityUtil.getScreenWidth(this) - DensityUtil.dp2px(104);

            restHeight = DensityUtil.getScreenHeight(this)- DensityUtil.dp2px(50);
        }else{
            restWidth = DensityUtil.getScreenWidth(this) - DensityUtil.dp2px(40);
            restHeight = DensityUtil.getScreenHeight(this)- DensityUtil.dp2px(140);
        }

        LogUtil.i(TAG,"DensityUtil.getScreenHeight(this) :" + DensityUtil.getScreenHeight(this)+  "   restWidth:" + restWidth + ", restHeight" + restHeight);

    }

    /**
     * 初始化图片的比例
     * @param imageWidth
     * @param imageHeight
     */
    private void initImagePic(int imageWidth, int imageHeight){
        realImageWidth = DensityUtil.dp2px(imageWidth/2);//px转为dp再转px
        realImageHeight = DensityUtil.dp2px(imageHeight/2);
        LogUtil.i(TAG, "realImageWidth:" + realImageWidth + " ,  realImageHeight" + realImageHeight);
    }

    private int showHeight;//应该显示的高
    private int showWidth;//应该显示的宽

    private void showWindow(){
        if(realImageHeight > restHeight || realImageWidth >restWidth){
            LogUtil.i(TAG, "图片不够放进区域内");
            //空间不够，需要缩放
            if(realImageHeight > restHeight && realImageWidth <=restWidth){
                LogUtil.i(TAG, "图片不够放进区域内1");
                //图片的高度太大， 需要缩小高度
                showHeight = restHeight;
                showWidth = (realImageWidth *restHeight)/realImageHeight;
            }

            if(realImageHeight <= restHeight && realImageWidth > restWidth){
                LogUtil.i(TAG, "图片不够放进区域内2");
                //宽度太大
                showWidth = restWidth;
                showHeight = (realImageHeight * restWidth)/realImageWidth;
            }

            if(realImageWidth > restWidth && realImageHeight > restHeight){
                LogUtil.i(TAG, "图片不够放进区域内3");
                double newWidth = realImageWidth;
                double newHeight = realImageHeight;
                while(newWidth > restWidth || newHeight > restHeight){
                    newWidth =realImageWidth*0.95;
                    newHeight = realImageHeight * 0.95;
                }
                showWidth = (int) newWidth;
                showHeight = (int) newHeight;

            }
        }else{
            LogUtil.i(TAG, "图片可以放进区域内");
            showHeight = realImageHeight;
            showWidth = realImageWidth;
        }


        LogUtil.i(TAG, "showHeight:" + showHeight);
        LogUtil.i(TAG, "showWidth:" + showWidth);
        FrameLayout frameLayout = new FrameLayout(this);
        frameLayout.setLayoutParams(new ViewGroup.LayoutParams(showWidth, showHeight));

        ImageView backgroundImageView = new ImageView(this);
        backgroundImageView.setLayoutParams(new ViewGroup.LayoutParams(showWidth, showHeight));

        frameLayout.addView(backgroundImageView);
        mLlContent.addView(frameLayout);
        for(PopupWindowData.Item item: windowData.items){
            final PopupWindowData.Item finalItem = item;
            String startPoint[] = item.startPoint.split(",");
            String endPoint[] = item.endPoint.split(",");
            int x1 = (int) (( Float.parseFloat(startPoint[0])* showWidth)/100.0);
            int y1 = (int) (( Float.parseFloat(startPoint[1])* showHeight)/100.0);
            int x2 = (int) (( Float.parseFloat(endPoint[0])* showWidth)/100.0);
            int y2 = (int) (( Float.parseFloat(endPoint[1])* showHeight)/100.0);
            ImageView button = new ImageView(this);
            FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(x2-x1, y2-y1);
            params.leftMargin = x1;
            params.topMargin = y1;
            LogUtil.i(TAG, "x1:"+ x1 + "y1:"+y1 + "x2:"+x2 + "y2:" +y2);
            LogUtil.i(TAG, "宽：" + (x2-x1) + "\n高：" + (y2-y1));
            LogUtil.i(TAG, "leftMargin:" + x1 + " topMargin:" + y1);
            button.setLayoutParams(params);
            frameLayout.addView(button);
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //Toast.makeText(GameWindowActivity.this, "test click", Toast.LENGTH_SHORT).show();
                    if(CLOSE_ALIAS.equals(finalItem.alias)){
                        GameWindowActivity.this.finish();
                    }else{
                        //记录相关数据
                        Setting setting = Setting.getInstance(mContext);
                        int num = setting.getEntranceEnterNum() + 1;
                        setting.setEntranceEnterNum(num);
                        Intent intent =new Intent(GameWindowActivity.this, WPKMainActivity.class);
                        intent.putExtra(WINDOW_HREF, finalItem.href);
                        GameWindowActivity.this.startActivity(intent);
                    }
                }
            });
            button.setBackgroundResource(R.drawable.wpk_theme_tabbar_middle_press);
        }
        LogUtil.i(TAG, "windowData.imagePath:" +windowData.imagePath);
        ImageLoader.getInstance().loadUniversal(windowData.imagePath, backgroundImageView);
    }

}

3.设置theme属性

wpk_mask_bg.xml