
1.png
首先我們需要在資源文件中定義dialog樣式;由于系統(tǒng)默認(rèn)的樣式有標(biāo)題欄,有邊框,背景顏色也不符合我們的業(yè)務(wù)需求,所以我們需要自己定義樣式
<style name="ios_bottom_dialog" parent="android:style/Theme.Dialog">
<!--背景顏色及和透明程度-->
<item name="android:windowBackground">@color/transparent</item>
<!--是否去除標(biāo)題 -->
<item name="android:windowNoTitle">true</item>
<!--是否去除邊框-->
<item name="android:windowFrame">@null</item>
<!--是否浮現(xiàn)在activity之上-->
<item name="android:windowIsFloating">true</item>
<!--是否模糊-->
<item name="android:backgroundDimEnabled">true</item>
<!--背景透明度-->
<item name="android:backgroundDimAmount">0.2</item>
</style>
定義一個(gè)dialog,基本上以上定義以上幾個(gè)屬性就可以了
第二步我們就要寫(xiě)布局文件了,布局文件可以分成上中下三部分,上下部分很簡(jiǎn)單,就是兩個(gè)textView,用來(lái)表示標(biāo)題和cancel按鈕;中間為了拓展性,沒(méi)有定義具體按鈕而是用LinearLayout,具體內(nèi)容可以在代碼中設(shè)置;
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:background="@android:color/transparent"
android:alpha="0.9">
<LinearLayout
android:id="@+id/bottom_dialog_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bottom_dialog_selector"
android:orientation="vertical">
<TextView
android:id="@+id/bottom_dialog_title_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:clickable="false"
android:gravity="center"
android:textSize="20dp" />
<View android:id="@+id/bottom_dialog_title_line"
android:layout_width="match_parent"
android:layout_height="0.3dp"
android:background="@color/black_444444" />
<LinearLayout
android:id="@+id/options_ll"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:layout_below="@+id/bottom_dialog_ll"
android:layout_marginTop="8dp"
android:id="@+id/bottom_dialog_cancel_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bottom_dialog_selector"
android:gravity="center"
android:padding="8dp"
android:textColor="@color/text_color_green_013ADF"
android:text="@string/cancel"
android:textSize="20dp" />
</RelativeLayout>
接下來(lái)是程序部分,自定義一個(gè)BottomDialog類繼承Dialog;代碼如下
public class BottomDialog extends Dialog {
private static final int DEFAULT_PADDING = 10;
private static final int DEFAULT_TITLE_SIZE = 15;
private static final int DEFAULT_OPTION_SIZE = 20;
private TextView title;
private View title_line;
private LinearLayout options_ll;
private IosBottomDialogDismissListener dismissListener;
public BottomDialog(Context context) {
//設(shè)置自定義的style
this(context, R.style.ios_bottom_dialog);
}
public BottomDialog(Context context, int themeResId) {
super(context, themeResId);
setContentView(R.layout.ios_bottom_dialog);
initView();
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
private void initView() {
title = (TextView) findViewById(R.id.bottom_dialog_title_tv);
title_line = findViewById(R.id.bottom_dialog_title_line);
options_ll = (LinearLayout) findViewById(R.id.options_ll);
findViewById(R.id.bottom_dialog_cancel_tv).setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
BottomDialog.this.dismiss();
}
});
//點(diǎn)擊空白區(qū)域可以取消dialog
this.setCanceledOnTouchOutside(true);
// 點(diǎn)擊back鍵可以取消dialog
this.setCancelable(true);
Window window = this.getWindow();
//讓Dialog顯示在屏幕的底部
window.setGravity(Gravity.BOTTOM);
//設(shè)置窗口出現(xiàn)和窗口隱藏的動(dòng)畫(huà)
window.setWindowAnimations(R.style.ios_bottom_dialog_anim);
//設(shè)置BottomDialog的寬高屬性
WindowManager.LayoutParams lp = window.getAttributes();
lp.width = WindowManager.LayoutParams.MATCH_PARENT;
lp.width = WindowManager.LayoutParams.WRAP_CONTENT;
window.setAttributes(lp);
}
public void setTitle(String text) {
title.setText(text);
}
private void setIosBottomDialogDismissListener(IosBottomDialogDismissListener listener) {
this.dismissListener = listener;
}
public interface OnOptionClickListener {
void onOptionClick();
}
public interface IosBottomDialogDismissListener {
void onDismiss();
}
public static class Builder {
private Paraments p;
private Context context;
public Builder(Context context) {
p = new Paraments();
this.context = context;
}
public Builder setTitle(String title, int color) {
p.title = title;
p.titleColor = color;
return this;
}
public Builder addOption(String option, int color, OnOptionClickListener listener) {
p.options.add(new Option(option, color, listener));
return this;
}
public Builder setDialogDismissListener(IosBottomDialogDismissListener listener) {
p.dismisslistener = listener;
return this;
}
private int dp2px(float dipValue, Context context) {
float scale = context.getResources().getDisplayMetrics().density;
return (int) (dipValue * scale + 0.5f);
}
public BottomDialog create() {
final BottomDialog dialog = new BottomDialog(context);
final LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 1);
if (p.title.isEmpty()) {
//設(shè)置標(biāo)題欄不可見(jiàn)
dialog.title.setVisibility(View.GONE);
dialog.title_line.setVisibility(View.GONE);
} else {
dialog.title.setText(p.title);
dialog.title.setTextColor(p.titleColor);
dialog.title.setTextSize(p.titleSize);
//設(shè)置標(biāo)題欄可見(jiàn)
dialog.title.setVisibility(View.VISIBLE);
dialog.title_line.setVisibility(View.VISIBLE);
}
//設(shè)置item項(xiàng)點(diǎn)擊之后的效果
if (p.options.size() == 0) {
dialog.options_ll.setVisibility(View.GONE);
} else {
for (int i = 0; i < p.options.size(); i++) {
final Option option = p.options.get(i);
final TextView optionText = new TextView(context);
int padding = dp2px(BottomDialog.DEFAULT_PADDING, context);
optionText.setPadding(padding, padding, padding, padding);
optionText.setText(option.getName());
optionText.setTextSize(p.optionTextSize);
optionText.setGravity(Gravity.CENTER);
optionText.setTextColor(context.getResources().getColor(R.color.text_color_green_013ADF));
optionText.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
if (option.getListener() != null) {
option.getListener().onOptionClick();
}
}
});
dialog.options_ll.addView(optionText);
//添加條目之間的分割線
if (i != p.options.size() - 1) {
View divider = new View(context);
divider.setBackgroundResource(R.color.black_444444);
dialog.options_ll.addView(divider, params);
}
//選擇到底使用哪個(gè)selector文件
if (p.options.size() == 1) {
if (p.title.isEmpty()) {
optionText.setBackgroundResource(R.drawable.bottom_dialog_option13);
} else {
optionText.setBackgroundResource(R.drawable.bottom_dialog_option3);
}
} else if (i == 0) {
if (p.title.isEmpty()) {
optionText.setBackgroundResource(R.drawable.bottom_dialog_option1);
} else {
optionText.setBackgroundResource(R.drawable.bottom_dialog_option2);
}
} else if (i < p.options.size() - 1) {
optionText.setBackgroundResource(R.drawable.bottom_dialog_option2);
} else {
optionText.setBackgroundResource(R.drawable.bottom_dialog_option3);
}
}
}
//對(duì)話框dismiss之后的監(jiān)聽(tīng)
dialog.setIosBottomDialogDismissListener(p.dismisslistener);
return dialog;
}
}
//這個(gè)類保存了dialog的眾多參數(shù)
private static class Paraments {
int titleSize;
int optionTextSize;
String title;
int titleColor;
boolean cancelable;
List<Option> options;
BottomDialog.IosBottomDialogDismissListener dismisslistener;
Paraments() {
title = "";
titleColor = R.color.gray_title;
cancelable = true;
options = new ArrayList<>();
titleSize = DEFAULT_TITLE_SIZE;
optionTextSize = DEFAULT_OPTION_SIZE;
}
}
private static class Option {
private String name;
private int color;
private BottomDialog.OnOptionClickListener listener;
public Option() {
}
Option(String name, int color, BottomDialog.OnOptionClickListener listener) {
this.name = name;
this.color = color;
this.listener = listener;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getColor() {
return color;
}
public void setColor(int color) {
this.color = color;
}
BottomDialog.OnOptionClickListener getListener() {
return listener;
}
public void setListener(BottomDialog.OnOptionClickListener listener) {
this.listener = listener;
}
}
}
在構(gòu)造方法中設(shè)置style、布局,關(guān)鍵代碼都有注釋;然后就是設(shè)置出現(xiàn)于隱藏動(dòng)畫(huà),代碼如下
<!--dialog進(jìn)入動(dòng)畫(huà)-->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:fromYDelta="100%p"
android:toYDelta="0" />
<!--dialog退出動(dòng)畫(huà)-->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:fromYDelta="0"
android:toYDelta="100%p" />
寫(xiě)好動(dòng)畫(huà)后,在style文件中引用,代碼如下
<!-- 彈窗動(dòng)畫(huà) 由下至上 -->
<style name="ios_bottom_dialog_anim" parent="@android:style/Animation.Dialog">
<item name="@android:windowEnterAnimation">@anim/ios_dialog_enter</item>
<!-- 進(jìn)入時(shí)的動(dòng)畫(huà) -->
<item name="@android:windowExitAnimation">@anim/ios_dialog_exit</item>
<!-- 退出時(shí)的動(dòng)畫(huà) -->
</style>
這樣我們的dialog就完成了,程序中用到的一些資源文件沒(méi)有貼出來(lái),大家可以自己定義。