Android自定义Dialog QuickOptionDialog
Android系统提供了Dialog类，以及Dialog的子类，常见如AlertDialog。
原生Dialog有很多局限之处，其样式单一，风格与App本身风格可能不太协调，弹窗在布局和功能上有所限制。
本文将通过自定义Dialog构建快速操作界面，样式时尚美观。
先来看一下效果图，有木有很炫
下面看一下这么炫的效果是怎么写出来的
1.自定义QuickOptionDialog类
package com.example.bottomdialog;
import android.annotation.SuppressLint;
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.Display;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;
import android.widget.Toast;
public class QuickOptionDialog extends Dialog implements
android.view.View.OnClickListener {
private ImageView mClose;
public interface OnQuickOptionformClick {
void onQuickOptionClick(int id);
}
private OnQuickOptionformClick mListener;
private QuickOptionDialog(Context context, boolean flag,
OnCancelListener listener) {
super(context, flag, listener);
}
@SuppressLint("InflateParams")
private QuickOptionDialog(Context context, int defStyle) {
super(context, defStyle);
View contentView = getLayoutInflater().inflate(
R.layout.dialog_quick_option, null);
contentView.findViewById(R.id.ly_quick_option_text).setOnClickListener(
this);
contentView.findViewById(R.id.ly_quick_option_album)
.setOnClickListener(this);
contentView.findViewById(R.id.ly_quick_option_photo)
.setOnClickListener(this);
mClose = (ImageView) contentView.findViewById(R.id.iv_close);
Animation operatingAnim = AnimationUtils.loadAnimation(getContext(),
R.anim.quick_option_close);
LinearInterpolator lin = new LinearInterpolator();
operatingAnim.setInterpolator(lin);
mClose.startAnimation(operatingAnim);
mClose.setOnClickListener(this);
requestWindowFeature(Window.FEATURE_NO_TITLE);
contentView.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
QuickOptionDialog.this.dismiss();
return true;
}
});
super.setContentView(contentView);
}
public QuickOptionDialog(Context context) {
this(context, R.style.quick_option_dialog);
}
@SuppressWarnings("deprecation")
@Override
protected void onCreate(Bundle bundle) {
super.onCreate(bundle);
getWindow().setGravity(Gravity.BOTTOM);
WindowManager m = getWindow().getWindowManager();
Display d = m.getDefaultDisplay();
WindowManager.LayoutParams p = getWindow().getAttributes();
p.width = d.getWidth();
getWindow().setAttributes(p);
}
public void setOnQuickOptionformClickListener(OnQuickOptionformClick lis) {
mListener = lis;
}
@Override
public void onClick(View v) {
final int id = v.getId();
switch (id) {
case R.id.iv_close:
dismiss();
break;
case R.id.ly_quick_option_text:
Toast.makeText(getContext(), "哒哒哒！亲点击了文字！！", 0).show();
break;
case R.id.ly_quick_option_album:
Toast.makeText(getContext(), "哒哒哒！亲点击了相册！！", 0).show();
break;
case R.id.ly_quick_option_photo:
Toast.makeText(getContext(), "哒哒哒！亲点击了拍照！！", 0).show();
break;
// case R.id.ly_quick_option_text:
// onClickTweetPub(R.id.ly_quick_option_text);
// break;
// case R.id.ly_quick_option_album:
// onClickTweetPub(R.id.ly_quick_option_album);
// break;
// case R.id.ly_quick_option_photo:
// onClickTweetPub(R.id.ly_quick_option_photo);
// break;
// case R.id.ly_quick_option_voice:
// UIHelper.showSimpleBack(getContext(), SimpleBackPage.RECORD);
// break;
// case R.id.ly_quick_option_scan:
// UIHelper.showScanActivity(getContext());
// break;
// case R.id.ly_quick_option_note:
// UIHelper.showSimpleBack(getContext(), SimpleBackPage.FIND_USER);
// onClickNote();
//UIHelper.showSimpleBack(getContext(), SimpleBackPage.FIND_USER);
// onClickNote();
// break;
default:
break;
}
if (mListener != null) {
mListener.onQuickOptionClick(id);
}
dismiss();
}
// private void onClickTweetPub(int id) {
// Bundle bundle = new Bundle();
// int type = -1;
// switch (id) {
// case R.id.ly_quick_option_album:
// type = TweetPubFragment.ACTION_TYPE_ALBUM;
// break;
// case R.id.ly_quick_option_photo:
// type = TweetPubFragment.ACTION_TYPE_PHOTO;
// break;
// default:
// break;
// }
// bundle.putInt(TweetPubFragment.ACTION_TYPE, type);
// UIHelper.showTweetActivity(getContext(), SimpleBackPage.TWEET_PUB,
// bundle);
// }
// private void onClickNote() {
// Bundle bundle = new Bundle();
// bundle.putInt(NoteEditFragment.NOTE_FROMWHERE_KEY,
// NoteEditFragment.QUICK_DIALOG);
// UIHelper.showSimpleBack(getContext(), SimpleBackPage.NOTE_EDIT, bundle);
// }
}
QuickOptionDialog的布局文件dialog_quick_option.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/set_pop"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="@+id/ll_option_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="@+id/ly_quick_option_text"
style="@style/quick_option_item" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/quickoption_icon_text_selector" />
<TextView
style="@style/quick_option_item_text"
android:text="@string/quick_option_text" />
</LinearLayout>
<LinearLayout
android:id="@+id/ly_quick_option_album"
style="@style/quick_option_item" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/quickoption_icon_album_selector" />
<TextView
style="@style/quick_option_item_text"
android:text="@string/quick_option_album" />
</LinearLayout>
<LinearLayout
android:id="@+id/ly_quick_option_photo"
style="@style/quick_option_item" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:src="@drawable/quickoption_icon_photo_selector" />
<TextView
style="@style/quick_option_item_text"
android:text="@string/quick_option_photo" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_foot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/ll_option_container"
android:background="@color/list_item_background_normal"
android:gravity="center"
android:padding="10dip"
android:visibility="visible" >
<ImageView
android:id="@+id/iv_close"
android:layout_width="35dp"
android:layout_height="35dp"
android:contentDescription="@null"
android:focusable="false"
android:src="@drawable/btn_quickoption_route" />
</LinearLayout>
</RelativeLayout>
2.在MainActivity的布局文件中创建一个按钮，并添加点击事件
<!-- 快速操作按钮 -->
<ImageView
android:id="@+id/quick_option_iv"
android:onClick="showQuickOption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="@null"
android:src="@drawable/btn_quickoption_selector" />点击事件
// 显示快速操作界面
public void showQuickOption(View view) {
final QuickOptionDialog dialog = new QuickOptionDialog(
MainActivity.this);
dialog.setCancelable(true);
dialog.setCanceledOnTouchOutside(true);
dialog.show();
}
项目源码，点击下载