底部滑出的Dialog
阿新 • • 發佈：2018-12-17
日常工作中，自己定義了 Dialog 的工具類，以便使用，下面從底部滑出的 Dialog，效果圖如下：
下面主要講的是：
- 自定義 Dialog 工具類
- 自定義佈局檔案
- 自定義 Dialog 顯示風格
- 顯示/關閉 Dialog（使用自定義 dialog）
1.自定義 Dialog 工具類
定義一個名字為 DialogUtil 的工具類，程式碼如下：
import android.app.Dialog; import android.content.Context; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.Window; import android.view.WindowManager; /** * author: wu * date: on 2018/7/5. * describe:dialog工具類 */ public class DialogUtil { private Dialog dialog; private View inflate; public void showBottomDialog(Context context) { //自定義dialog顯示佈局 inflate = LayoutInflater.from(context).inflate(R.layout.dialog_bottom, null); //自定義dialog顯示風格 dialog = new Dialog(context, R.style.DialogBottom); //彈窗點選周圍空白處彈出層自動消失彈窗消失(false時為點選周圍空白處彈出層不自動消失) dialog.setCanceledOnTouchOutside(true); //將佈局設定給Dialog dialog.setContentView(inflate); //獲取當前Activity所在的窗體 Window window = dialog.getWindow(); WindowManager.LayoutParams wlp = window.getAttributes(); wlp.gravity = Gravity.BOTTOM; wlp.width = WindowManager.LayoutParams.MATCH_PARENT; window.setAttributes(wlp); dialog.show(); } //關閉dialog時呼叫 public void close() { if (dialog != null) { dialog.dismiss(); dialog = null; } } }
2.自定義佈局檔案
定義一個名字為 dialog_bottom 的佈局檔案，程式碼如下：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#FFFFFF" android:orientation="vertical"> <TextView android:id="@+id/tv_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="20dp" android:layout_marginTop="20dp" android:gravity="center" android:text="分享到" android:textColor="#FF999999" android:textSize="12sp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <LinearLayout android:id="@+id/ll_weixin" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:src="@drawable/ic_launcher_background" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="微信好友" android:textColor="#FF666666" android:textSize="12sp" /> </LinearLayout> <LinearLayout android:id="@+id/ll_friend" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:src="@drawable/ic_launcher_background" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="朋友圈" android:textColor="#FF666666" android:textSize="12sp" /> </LinearLayout> <LinearLayout android:id="@+id/ll_qq" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:src="@drawable/ic_launcher_background" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="QQ好友" android:textColor="#FF666666" android:textSize="12sp" /> </LinearLayout> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_marginTop="20dp" android:background="#FFEEEEEE" /> <TextView android:id="@+id/tv_cancel" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:paddingBottom="13dp" android:paddingTop="13dp" android:text="取消分享" android:textColor="#000000" android:textSize="16sp" /> </LinearLayout>
3.自定義 Dialog 顯示風格
在 styles 檔案中自定義一個名字為 DialogBottom 的風格，程式碼如下：
<!--位於底部dialog的風格--> <style name="DialogBottom" parent="@android:style/Theme.Dialog"> <!-- 背景透明 --> <item name="android:windowBackground">@android:color/transparent</item> <item name="android:windowContentOverlay">@null</item> <!-- 浮於Activity之上 --> <item name="android:windowIsFloating">true</item> <!-- 邊框 --> <item name="android:windowFrame">@null</item> <!-- Dialog以外的區域模糊效果 --> <item name="android:backgroundDimEnabled">true</item> <!-- 無標題 --> <item name="android:windowNoTitle">true</item> <!-- 半透明 --> <item name="android:windowIsTranslucent">true</item> <!--點選dialog以外區域關閉彈窗--> <item name="android:windowCloseOnTouchOutside">true</item> <!-- Dialog進入及退出動畫 --> <item name="android:windowAnimationStyle">@style/ActionSheetDialogAnimation</item> </style> <!-- ActionSheet進出動畫 --> <style name="ActionSheetDialogAnimation" parent="@android:style/Animation.Dialog"> <item name="android:windowEnterAnimation">@anim/action_dialog_in</item> <item name="android:windowExitAnimation">@anim/action_dialog_out</item> </style>
在 anim 檔案包下面自定義名字為 action_dialog_in 的底部滑入動畫和名字為 action_dialog_out 的底部滑出動畫，程式碼分別為：
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="200"
android:fromYDelta="100%"
android:toYDelta="0" /><translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="200"
android:fromYDelta="0"
android:toYDelta="100%" />4.顯示/關閉 Dialog
在 Activity 中新增如下程式碼即可：
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final DialogUtil dialogUtil = new DialogUtil();
//延遲一秒顯示位於底部的dialog
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
dialogUtil.showBottomDialog(MainActivity.this);
}
}, 1000);
//關閉dialog時呼叫
// dialogUtil.close();
}
}