导读
在游戏玩家打开游戏app的时候,可能会弹出一个窗口,窗口中有展示一些信息,并且会有一些按钮可以点击。由于每次弹出来的弹窗信息可能都不一样,也就是按钮的显示位置也有可能不一样,客户端应该如何实现呢?
需求
1.图片的展示
弹窗的显示有个最大区域,也就是不能超过左右间距和上下间距。如果原图的宽或者高有任何一边超过了这个最大区域,都需要等比例缩小到小于等于最大区域处。
首页_PxCook.png
2.按钮的点击事件如何触发呢?
服务端返回的接口数据中有“关闭按钮”和“立即参与按钮”的坐标轴百分比, 如下:
有了百分比,就可以计算出按钮的位置。这样我们只需要创建两个没有内容的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