Android 自定義v7 AlertDialog樣式

在項(xiàng)目中需要彈框,然后設(shè)置圓角,其實(shí)首先我會(huì)想到使用v7 的AlertDialog。可以自定義,使用AlertDialog.Builder構(gòu)建需要的dialog。
并且支持setView。

如下:

    new AlertDialog.Builder(MainActivity.this)
                        .setView(R.layout.layout_test)
                        .create().show();

layout.test --->亂寫(xiě)的

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="dasdnasdn"
        />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="dasdnasdn"
        />
</LinearLayout>

確實(shí)非常方便。

直接寫(xiě)好了一個(gè)彈框。

但是需求上需要背景有圓角,并且跟左右邊界距離為30dp。

于是我直接在LinearLayout設(shè)置背景發(fā)現(xiàn)是無(wú)效的。

我首先想到的是設(shè)置android:windowBackground

所以直接

<style name="TestAlertDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="android:windowBackground">@android:color/holo_red_dark</item>
    </style>

直接設(shè)置為紅色,然后

 new AlertDialog.Builder(MainActivity.this,R.style.TestAlertDialog)
                        .setView(R.layout.layout_test)
                        .create().show();

會(huì)發(fā)現(xiàn)如下:

test_1

會(huì)發(fā)現(xiàn)邊上會(huì)是一圈黑色。

所以我們需要代碼跟入,看看原生style中是如何設(shè)置android:windowBackground,然后模仿設(shè)置。

AlertDialog默認(rèn)使用樣式 Theme.AppCompat.Light.Dialog.Alert
我們一步步跟入,查看他的樣式:

<style name="Theme.AppCompat.Light.Dialog.Alert" parent="Base.Theme.AppCompat.Light.Dialog.Alert"/>
<style name="Base.Theme.AppCompat.Light.Dialog.Alert">
        <item name="windowMinWidthMajor">@dimen/abc_dialog_min_width_major</item>
        <item name="windowMinWidthMinor">@dimen/abc_dialog_min_width_minor</item>
    </style>
<style name="Base.Theme.AppCompat.Light.Dialog" parent="Base.V7.Theme.AppCompat.Light.Dialog"/>
<style name="Base.V7.Theme.AppCompat.Light.Dialog" parent="Base.Theme.AppCompat.Light">
        <item name="android:colorBackground">?attr/colorBackgroundFloating</item>
        <item name="android:colorBackgroundCacheHint">@null</item>

        <item name="android:windowFrame">@null</item>
        <item name="android:windowTitleStyle">@style/RtlOverlay.DialogWindowTitle.AppCompat</item>
        <item name="android:windowTitleBackgroundStyle">@style/Base.DialogWindowTitleBackground.AppCompat</item>
        <item name="android:windowBackground">@drawable/abc_dialog_material_background</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowAnimationStyle">@style/Animation.AppCompat.Dialog</item>
        <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>

        <item name="windowActionBar">false</item>
        <item name="windowActionModeOverlay">true</item>

        <item name="listPreferredItemPaddingLeft">24dip</item>
        <item name="listPreferredItemPaddingRight">24dip</item>

        <item name="android:listDivider">@null</item>
    </style>

這里我們需要了解一個(gè)知識(shí)點(diǎn)
<style name="Base.Theme.AppCompat.Light.Dialog.Alert"> 沒(méi)有寫(xiě)parent,但是由于名字,所以該style繼承于<style name="Base.Theme.AppCompat.Light.Dialog">

這里我就不過(guò)多介紹了,大家有興趣,可以搜索下android style繼承。

最終我們?cè)?code>Base.V7.Theme.AppCompat.Light.Dialog這個(gè)樣式中找到
android:windowBackground@drawable/abc_dialog_material_background

跟入

<inset xmlns:android="http://schemas.android.com/apk/res/android"
       android:insetLeft="16dp"
       android:insetTop="16dp"
       android:insetRight="16dp"
       android:insetBottom="16dp">
    <shape android:shape="rectangle">
        <corners android:radius="2dp" />
        <solid android:color="@android:color/white" />
    </shape>
</inset>

沒(méi)錯(cuò),這就是AlertDialog默認(rèn)樣式,所以我們可以復(fù)制這個(gè)文件,然后對(duì)其進(jìn)行修改,如我的需求

  1. 背景為紅色
  2. 圓角20dp
  3. 左右距離30dp

就可以修改
test_dialog.xml

<inset xmlns:android="http://schemas.android.com/apk/res/android"
       android:insetLeft="30dp"
       android:insetTop="16dp"
       android:insetRight="30dp"
       android:insetBottom="16dp">
    <shape android:shape="rectangle">
        <corners android:radius="20dp" />
        <solid android:color="@android:color/holo_red_dark" />
    </shape>
</inset>

修改樣式

<style name="TestAlertDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
       <item name="android:windowBackground">@drawable/test_dialog</item>
    </style>

在原來(lái)的AlertDialog樣式基礎(chǔ)之上修改android:windowBackground。
然后代碼中設(shè)置樣式。

new AlertDialog.Builder(MainActivity.this,R.style.TestAlertDialog)
                        .setView(R.layout.layout_test)
                        .create().show();

運(yùn)行如下:

test2

這樣就達(dá)到了想要的效果。

當(dāng)然有人說(shuō)還不如自定義view,想怎么搞怎么搞。還是要看自己的需求,如果只是簡(jiǎn)單的設(shè)置圓角,修改邊距的話(huà),還是這樣直接修改樣式會(huì)方便點(diǎn)。

demo很low,大家將就看。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容