【问题复现】
运营说：给我设计个圆角+花饰背景的公告弹窗，设计图甩你
1、拿到设计图，首先当然是考虑背景图怎么实现，考虑到其他界面的背景图大部分都是单纯的圆角白色背景，只有公告弹窗以及个别界面的是在圆角基础上加了花饰，自然而然就选择layer-list来叠加图片处理
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="335dp"
android:height="258dp"
android:drawable="@drawable/com_sswl_round_rectangle_white_bg" />
<item
android:width="335dp"
android:height="258dp"
android:drawable="@drawable/com_sswl_decoration1"/>
</layer-list>drawable目录下的com_sswl_round_rectangle_white_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp"/>
<solid android:color="@android:color/white"/>
</shape>预览效果，还ok：
2、背景图已弄好，接下来就是写布局：com_sswl_dialog_announcement.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="335dp"
android:layout_height="258dp"
android:layout_gravity="center"
android:background="@drawable/com_sswl_decoration_bg1"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp">
<ImageView
android:layout_width="92dp"
android:layout_height="36dp"
android:layout_marginTop="15dp"
android:src="@drawable/com_sswl_logo" />
<com.sswl.sdk.widget.x5.WebwitWebView
android:id="@+id/wv"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_marginTop="10dp"
android:background="@drawable/com_sswl_round_rectangle_gray"/>
<com.sswl.sdk.widget.button.ScaleButton
android:id="@+id/btn_know"
android:layout_width="130dp"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:background="@drawable/com_sswl_round_rectangle_red"
android:text="@string/com_sswl_already_read"
android:textColor="@color/upsdk_white" />
</LinearLayout>预览效果：
3、最后就是在代码实现加载xml布局，弹窗显示了
public class AnnouncementDialog extends BaseDialog {
private WebwitWebView wv;
private Button btnKnow;
private String mUrl;
private OnDialogDismissListener dialogDismissListener;
public AnnouncementDialog(Activity activity,String url) {
super(activity);
this.mUrl = url;
}
protected void initView() {
View contentView = LayoutInflater.from(getContext()).inflate(ResourceUtil.getLayoutId(getContext(), "com_sswl_dialog_announcement"), null);
wv = contentView.findViewById(ResourceUtil.getViewId(getContext(), "wv"));
wv.setNoUseCache();
btnKnow = contentView.findViewById(ResourceUtil.getViewId(getContext(), "btn_know"));
this.getWindow().setContentView(contentView);
//注意需要设置宽高
WindowManager.LayoutParams params = this.getWindow().getAttributes();
params.width = ScreenUtil.dp2px(mActivity, 335);
params.height = ScreenUtil.dp2px(mActivity, 258);
this.getWindow().setAttributes(params);
if(!TextUtils.isEmpty(mUrl)){
wv.loadUrl(mUrl);
}
}
protected void initListener() {
wv.setCallback(new IWebwitWebViewCallBack() {
@Override
public void onLoadFail(android.webkit.WebView view, int errorCode, String description, String failingUrl) {
}
@Override
public void onLoadStarted(android.webkit.WebView view, String url, Bitmap favicon) {
}
@Override
public void onLoadFinished(android.webkit.WebView view, String url) {
}
@Override
public void onProgressChanged(android.webkit.WebView view, int newProgress) {
}
@Override
public void onReceivedTitle(android.webkit.WebView view, String title) {
}
});
btnKnow.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
AnnouncementDialog.this.dismiss();
if(dialogDismissListener != null){
dialogDismissListener.onDismiss();
}
}
});
}
public OnDialogDismissListener getDialogDismissListener() {
return dialogDismissListener;
}
public void setDialogDismissListener(OnDialogDismissListener dialogDismissListener) {
this.dialogDismissListener = dialogDismissListener;
}
}4、然后在华为、vivo、oppo手机测试都是完美显示，以为胜利在望
5、当拿起小米手机测试时候，才发现一个蛋疼的问题，dialog弹窗居然显示不完整,只有左上角显示正常而已
【问题解决】
由于我们不知道小米手机底层对这个显示是做了什么操作，所以只能靠我们各种猜想去检验
1、猜想一：是不是因为尺寸的设置问题呢？看网上说法得在show之后设置尺寸才有效果，那么，我就把以下这段代码放到show之后，但是发现没有一丁点效果
WindowManager.LayoutParams params = this.getWindow().getAttributes();
params.width = ScreenUtil.dp2px(mActivity, 335);
params.height = ScreenUtil.dp2px(mActivity, 258);
this.getWindow().setAttributes(params);而且通过AS-Layout Inspector抓取布局显示尺寸是没问题的
2、猜想二：难道是因为layout-list叠加影响了圆角背景在小米手机的显示，那么先不用layout-list，用单纯白色背景是否OK
测试发现，小米手机是可以正常显示单纯的白色圆角背景的
3、猜想三：我在设置圆角+花饰背景上再套多一层布局,这样布局背景就不会那么容易受到其他影响
1）布局xml改为加一层FrameLayout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@null">
<LinearLayout
android:layout_width="335dp"
android:layout_height="258dp"
android:layout_gravity="center"
android:background="@drawable/com_sswl_decoration_bg1"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp">
<ImageView
android:layout_width="92dp"
android:layout_height="36dp"
android:layout_marginTop="15dp"
android:src="@drawable/com_sswl_logo" />
<com.sswl.sdk.widget.x5.WebwitWebView
android:id="@+id/wv"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_marginTop="10dp"
android:background="@drawable/com_sswl_round_rectangle_gray"/>
<com.sswl.sdk.widget.button.ScaleButton
android:id="@+id/btn_know"
android:layout_width="130dp"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:background="@drawable/com_sswl_round_rectangle_red"
android:text="@string/com_sswl_already_read"
android:textColor="@color/upsdk_white" />
</LinearLayout>
</FrameLayout>2）设置宽高的代码也可以去掉了，最终变为：
public class AnnouncementDialog extends BaseDialog {
private WebwitWebView wv;
private Button btnKnow;
private String mUrl;
private OnDialogDismissListener dialogDismissListener;
public AnnouncementDialog(Activity activity,String url) {
super(activity);
this.mUrl = url;
}
protected void initView() {
View contentView = LayoutInflater.from(getContext()).inflate(ResourceUtil.getLayoutId(getContext(), "com_sswl_dialog_announcement"), null);
wv = contentView.findViewById(ResourceUtil.getViewId(getContext(), "wv"));
wv.setNoUseCache();
btnKnow = contentView.findViewById(ResourceUtil.getViewId(getContext(), "btn_know"));
this.getWindow().setContentView(contentView);
if(!TextUtils.isEmpty(mUrl)){
wv.loadUrl(mUrl);
}
}
protected void initListener() {
wv.setCallback(new IWebwitWebViewCallBack() {
@Override
public void onLoadFail(android.webkit.WebView view, int errorCode, String description, String failingUrl) {
}
@Override
public void onLoadStarted(android.webkit.WebView view, String url, Bitmap favicon) {
}
@Override
public void onLoadFinished(android.webkit.WebView view, String url) {
}
@Override
public void onProgressChanged(android.webkit.WebView view, int newProgress) {
}
@Override
public void onReceivedTitle(android.webkit.WebView view, String title) {
}
});
btnKnow.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
AnnouncementDialog.this.dismiss();
if(dialogDismissListener != null){
dialogDismissListener.onDismiss();
}
}
});
}
public OnDialogDismissListener getDialogDismissListener() {
return dialogDismissListener;
}
public void setDialogDismissListener(OnDialogDismissListener dialogDismissListener) {
this.dialogDismissListener = dialogDismissListener;
}
}3）重新运行到小米手机，看看效果：
OK , Perfect！终于达到我们想要的效果
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
