您的位置:首页 > 其它

自定义Dialog--显示图片及右上角悬浮关闭

2017-02-24 10:33 399 查看
   像唯平会,什么值得买,京东,在推送主界面的广告时,展示大概是这个样子的:



其实这个广告展示是Dialog做的,自定义一个布局set到dialog中,添加相应的逻辑。那我们现在开始一步一步做:

1,准备布局文件,布局文件就是两个ImageView,一个展示广告,一个展示关闭image_dialog_layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="180dp"
android:layout_height="150dp"
>
  <ImageView
android:id="@+id/image"
android:layout_width="180dp"
android:layout_height="150dp"
android:scaleType="centerCrop"
android:layout_margin="10dp"
android:src="@mipmap/image"
/>

<ImageView
android:id="@+id/image_delete"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="@mipmap/delete"
/>
</RelativeLayout>


自定义Dialog的源码:

package com.example.administrator.customdialog;

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

/**
* Created by dhl on 2017/2/21.
* 一个展示弹广告图片的Dialog
*/

public class CustomImageDialog extends Dialog {

private ImageView imageView ;
public CustomImageDialog(Context context) {
//super(context);
super(context, R.style.Translucent_NoTitle);

}

@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);

setContentView(R.layout.image_dialog_layout);
imageView = (ImageView)findViewById(R.id.image_delete);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
CustomImageDialog.this.dismiss();
}
});
setCanceledOnTouchOutside(false);

}

}


这里用到一个style:
<style name="Translucent_NoTitle" parent="android:style/Theme.Dialog">

<item name="android:windowNoTitle">true</item>

<item name="android:background">#00000000</item>

<item name="android:windowBackground">@android:color/transparent</item>

<item name="android:colorBackgroundCacheHint">@null</item>

<item name="android:windowIsTranslucent">true</item>

</style>

用法:
CustomImageDialog customImageDialog = new CustomImageDialog(MainActivity.this);
customImageDialog.show();


OK,这样就能展示了,如下图:



效果还不错吧,下面提供上面中间的图和关闭叉号:





OK,一个展示广告的弹出窗口就此完成。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Dialog