BottomPopUpDialog底部彈出框的實(shí)現(xiàn)
這是一個(gè)之前實(shí)現(xiàn)的簡(jiǎn)單效果，類似于ios底部彈出框，所以想寫一篇博客記錄一下。
效果如圖：
使用 DialogFragment
當(dāng)我要實(shí)現(xiàn)這個(gè)效果的時(shí)候，首先想到的是 DialogFragment ，因?yàn)榭梢允褂闷渖芷趤砉芾砀鞣N事件的處理，以及通過 onCreateView 或者 onCreateDIalog 來自定義視圖，方便需求的變化和功能的擴(kuò)展。
如果不了解 DialogFragment 的話，可以去看看相關(guān)資料，這里不做詳述哈。
我們來看看底部彈出框的布局
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:gravity="bottom">
<com.shadow.bottompopupdialog.MaxHeightScrollView
android:id="@+id/sl_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/round_rect_white"
android:padding="2dp">
<LinearLayout
android:id="@+id/pop_dialog_content_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/round_rect_white"
android:orientation="vertical">
</LinearLayout>
</com.shadow.bottompopupdialog.MaxHeightScrollView>
<TextView
android:id="@+id/cancel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/sl_root"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:background="@drawable/round_rect_white"
android:gravity="center"
android:minHeight="55dp"
android:padding="10dp"
android:text="@string/cancel"
android:textColor="@color/text_color"
android:textSize="18sp" />
</RelativeLayout>
如代碼所示，主要布局是 ScrollView 里面嵌套一個(gè) LinearLayout 布局，用來在代碼里添加item。
別忘了這個(gè)自定義 MaxHeightScrollView
上面的布局中我使用的是 MaxHeightScrollView ，自定義 ScrollView 是想要顯示最高的高度為屏幕的三分之二。
public class MaxHeightScrollView extends ScrollView {
public MaxHeightScrollView(Context context) {
super(context);
}
public MaxHeightScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Context context = getContext();
if (null != context) {
int screenHeight = getScreenHeight(context);
heightMeasureSpec = MeasureSpec.makeMeasureSpec(screenHeight * 2 / 3, MeasureSpec.AT_MOST);
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
/**
* 獲取屏幕高度
*/
private int getScreenHeight(Context context) {
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
return metrics.heightPixels;
}
}
BottomPopUpDialog 詳情
先來看看一些view的細(xì)節(jié)
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
//該方法需要放在onViewCreated比較合適, 若在 onStart 在部分機(jī)型會(huì)出現(xiàn)閃爍的情況
getDialog().getWindow().setBackgroundDrawableResource(mBackgroundShadowColor);
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//去掉title
setStyle(DialogFragment.STYLE_NORMAL, android.R.style.Theme_Holo_Light_NoActionBar);
}
如代碼所示，在 onViewCreated 里設(shè)置彈窗的背景陰影顏色，默認(rèn)是黑色透明的顏色。
mBackgroundShadowColor = R.color.transparent_70
而且可以在代碼中設(shè)置它的顏色。
/**
* 設(shè)置dialog背景陰影顏色
*/
public BottomPopUpDialog setBackgroundShadowColor(int color) {
mBackgroundShadowColor = color;
return this;
}
setStyle是為了去掉title，當(dāng)然也可以使用
getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE)
可調(diào)用的公共方法
/**
* 設(shè)置item數(shù)據(jù)
*/
public BottomPopUpDialog setDialogData(String[] dataArray) {
mDataArray = dataArray;
return this;
}
/**
* 設(shè)置監(jiān)聽item監(jiān)聽器
*/
public BottomPopUpDialog setItemOnListener(BottomPopDialogOnClickListener listener) {
mListener = listener;
return this;
}
/**
* 設(shè)置字體顏色
*
* @param index item的索引
* @param color res color
*/
public BottomPopUpDialog setItemTextColor(int index, int color) {
mColorArray.put(index, color);
return this;
}
/**
* 設(shè)置item分隔線顏色
*/
public BottomPopUpDialog setItemLineColor(int color) {
mLineColor = color;
return this;
}
/**
* 設(shè)置是否點(diǎn)擊回調(diào)取消dialog
*/
public BottomPopUpDialog setCallBackDismiss(boolean dismiss) {
mIsCallBackDismiss = dismiss;
return this;
}
設(shè)置相應(yīng)的數(shù)據(jù)后會(huì)在 onCreateView 里初始化數(shù)據(jù)，這些公共方法是必須要在dialogfragment.show() 之前調(diào)用，因?yàn)橹挥性趕how方法調(diào)用之后，dialogfragment 才會(huì)初始化，開始相應(yīng)的生命周期。
初始化數(shù)據(jù)
private void initItemView() {
//循環(huán)添加item
for (int i = 0; i < mDataArray.length; i++) {
final PopupDialogItem dialogItem = new PopupDialogItem(getContext());
dialogItem.refreshData(mDataArray[i]);
//最后一項(xiàng)隱藏分割線
if (i == mDataArray.length - 1) {
dialogItem.hideLine();
}
//設(shè)置字體顏色
if (mColorArray.size() != 0 && mColorArray.get(i) != 0) {
dialogItem.setTextColor(mColorArray.get(i));
}
if (mLineColor != 0) {
dialogItem.setLineColor(mLineColor);
}
mContentLayout.addView(dialogItem);
dialogItem.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mListener.onDialogClick(dialogItem.getItemContent());
if (mIsCallBackDismiss) dismiss();
}
});
}
}
可以從代碼中看到 LinearLayout 里循環(huán)添加的 item 是 PopupDialogItem ，它其實(shí)主體就是一個(gè) TextView ，負(fù)責(zé)顯示
String數(shù)組里的內(nèi)容。
BottomPopUpDialog 使用
BottomPopUpDialog dialog = new BottomPopUpDialog()
.setDialogData(getResources().getStringArray(R.array.popup_array))
.setItemTextColor(2, R.color.colorAccent)
.setItemTextColor(4, R.color.colorAccent)
.setCallBackDismiss(true)
.setItemOnListener(new BottomPopUpDialog.BottomPopDialogOnClickListener() {
@Override
public void onDialogClick(String tag) {
Snackbar.make(view, tag, Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
dialog.show(getSupportFragmentManager(), "tag");
這些方法之前介紹過，setItemTextColor 可以重復(fù)設(shè)置顏色。
最后
這是一個(gè)簡(jiǎn)單的小組件，記錄一下編程的思路。
點(diǎn)擊這里有源碼 GitHub地址
