Android如何自定義升級(jí)對(duì)話框示例詳解

更新時(shí)間：2017年08月24日 08:27:32 作者：葉應(yīng)是葉

對(duì)話框是我們?cè)谄綍r(shí)經(jīng)常會(huì)遇到的一個(gè)功能，但自帶的對(duì)話框不夠美觀，大家一般都會(huì)自定義，下面這篇文章主要給大家介紹了關(guān)于Android如何自定義升級(jí)對(duì)話框的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。

前言

本文主要給大家介紹了關(guān)于Android自定義升級(jí)對(duì)話框的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。

實(shí)現(xiàn)的效果如下所示

其實(shí)這也只是一個(gè)DialogFragment 而已，重點(diǎn)只是在于界面的設(shè)計(jì)

想要使用做出這樣一個(gè)DialogFragment ，需要自定義一個(gè)View，然后將該View傳入到該Dialog中

先定義布局，一個(gè)TextView用于標(biāo)題，一個(gè)TextView用于升級(jí)內(nèi)容闡述，一個(gè)ImageView，一個(gè)確認(rèn)升級(jí)的按鈕

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <TextView
 android:id="@+id/tv_title"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="20dp"
 android:gravity="center"
 android:textColor="#0474dc"
 android:textSize="22sp"
 android:textStyle="bold" />

 <TextView
 android:id="@+id/tv_description"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="15dp"
 android:gravity="center"
 android:textColor="#0474dc"
 android:textSize="18sp" />

 <ImageView
 android:layout_width="70dp"
 android:layout_height="70dp"
 android:layout_gravity="center"
 android:layout_marginBottom="20dp"
 android:layout_marginTop="20dp"
 android:src="@drawable/upgrade" />

 <Button
 android:id="@+id/btn_upgrade"
 style="@style/blueButtonStyle"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginBottom="20dp"
 android:layout_marginEnd="20dp"
 android:layout_marginStart="20dp"
 android:gravity="center"
 android:text="立即更新" />

</LinearLayout>

當(dāng)中，按鈕需要用到自定義Style

 <!--用于按鈕的藍(lán)色背景風(fēng)格-->
 <style name="blueButtonStyle" parent="Widget.AppCompat.Button.Borderless">
 <item name="android:background">@drawable/button_blue_background</item>
 <item name="android:textAppearance">@style/blueButtonTextStyle</item>
 </style>
 <!--用于藍(lán)色風(fēng)格按鈕的文本風(fēng)格-->
 <style name="blueButtonTextStyle">
 <item name="android:textColor">@android:color/white</item>
 <item name="android:textSize">17sp</item>
 </style>

建立 DialogFragment 的子類

/**
 * 作者： 葉應(yīng)是葉
 * 時(shí)間： 2017/3/23 12:36
 * 描述：
 */
public class VersionDialogFragment extends DialogFragment {

 private static final String TITLE = "title";

 private static final String DESCRIPTION = "description";

 private View.OnClickListener positiveCallback;

 private String title;

 private String description;

 public static VersionDialogFragment getInstance(String title, String description) {
  Bundle bundle = new Bundle();
  bundle.putString(TITLE, title);
  bundle.putString(DESCRIPTION, description);
  VersionDialogFragment versionDialogFragment = new VersionDialogFragment();
  versionDialogFragment.setArguments(bundle);
  return versionDialogFragment;
 }

 @Override
 public void onCreate(@Nullable Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  Bundle bundle = getArguments();
  title = bundle.getString(TITLE);
  description = bundle.getString(DESCRIPTION);
 }

 public void show(FragmentManager fragmentManager, View.OnClickListener positiveCallback) {
  this.positiveCallback = positiveCallback;
  show(fragmentManager, "VersionDialogFragment");
 }

 @NonNull
 @Override
 public Dialog onCreateDialog(Bundle savedInstanceState) {
  AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
  LayoutInflater inflater = getActivity().getLayoutInflater();
  final View view = inflater.inflate(R.layout.version_dialog, null);
  TextView tv_title = (TextView) view.findViewById(R.id.tv_title);
  TextView tv_description = (TextView) view.findViewById(R.id.tv_description);
  Button btn_upgrade = (Button) view.findViewById(R.id.btn_upgrade);
  tv_title.setText(title);
  tv_description.setText(description);
  btn_upgrade.setOnClickListener(positiveCallback);
  builder.setView(view);
  return builder.create();
 }

}

然后再到 MainActivity 中調(diào)用Dialog

public void showDialog(View view) {
  final VersionDialogFragment dialogFragment = VersionDialogFragment.getInstance("2.0.1新版本發(fā)布啦", "更多功能等你體驗(yàn)");
  dialogFragment.show(getSupportFragmentManager(), new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    Toast.makeText(MainActivity.this, "進(jìn)行更新操作吧", Toast.LENGTH_SHORT).show();
    dialogFragment.dismiss();
   }
  });
 }

此時(shí)界面是這樣的

可以看到 Dialog 中有較大的空白區(qū)，顯得有點(diǎn)虛浮

這里可以選擇在 VersionDialogFragment 的 onStart() 方法中指定 Dialog 所占屏幕寬度的比例

 @Override
 public void onStart() {
  super.onStart();
  Dialog dialog = getDialog();
  if (dialog != null) {
   DisplayMetrics dm = new DisplayMetrics();
   getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
   if (dialog.getWindow() != null) {
    dialog.getWindow().setLayout((int) (dm.widthPixels * 0.7), ViewGroup.LayoutParams.WRAP_CONTENT);
   }
  }
 }

這里設(shè)置占據(jù)屏幕寬度的百分之七十

效果圖如下所示

此時(shí) Dialog 的四個(gè)角還都是直的，這里再來將之修改為圓角

在drawable文件夾下新建一個(gè)root.xml文件，作為Dialog使用到的布局的根Layout的背景

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle">
 <corners android:radius="20dp" />
 <solid android:color="#ffffff" />
</shape>

 @Override
 public void onStart() {
  super.onStart();
  Dialog dialog = getDialog();
  if (dialog != null) {
   DisplayMetrics dm = new DisplayMetrics();
   getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
   if (dialog.getWindow() != null) {
    dialog.getWindow().setLayout((int) (dm.widthPixels * 0.8), ViewGroup.LayoutParams.WRAP_CONTENT);
   }
  }
 }

然后再修改onStart()方法，為Dialog的Window設(shè)置透明背景色

 @Override
 public void onStart() {
  super.onStart();
  Dialog dialog = getDialog();
  if (dialog != null) {
   DisplayMetrics dm = new DisplayMetrics();
   getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
   if (dialog.getWindow() != null) {
    dialog.getWindow().setLayout((int) (dm.widthPixels * 0.7), ViewGroup.LayoutParams.WRAP_CONTENT);
    dialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
   }
  }
 }

這樣，總的效果就都完成了

這里提供示例代碼下載：Android 自定義升級(jí)對(duì)話框

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)各位Android開發(fā)者們的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: