web-dev-qa-db-ja.com

Android角丸のAlertDialog

私は角の丸いアラートダイアログを作成しようとしましたが、どういうわけかできません。試しましたが失敗しました。私はこのブログをフォローしようとしました http://blog.stylingandroid.com/archives/271 とそれに基づいて私のスタイルを作りました。

ところで、今私の質問に追加します。私の新しい発見のいくつか。上記のリンクのコードは2.3.3（GB）で正常に機能しますが、ICSではまったく機能しません。一部の変更によりコードが破損しました。

9つのパッチイメージの作成を避けたいため、シェイプを使用しています。 Androidアラートダイアログスタイルは9パッチイメージを使用しています。この質問を投げる前にすでに調べました。

/ res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="MyTheme" parent="@Android:style/Theme.Dialog">
        <item name="Android:alertDialogStyle">@style/dialog</item>
    </style>


</resources>

/ res/values/styles.xml

<resources xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <style name="AppTheme" parent="Android:Theme.Light" />

    <style name="myImageView">

        <!-- 3dp so the background border to be visible -->
        <item name="Android:padding">3dp</item>
        <item name="Android:background">@drawable/image_drawable</item>
        <item name="Android:scaleType">fitCenter</item>
    </style>

    <style name="dialog">
        <item name="Android:fullDark">@drawable/dialog_body</item>
        <item name="Android:topDark">@drawable/dialog_title</item>
        <item name="Android:centerDark">@drawable/dialog_body</item>
        <item name="Android:bottomDark">@drawable/dialog_footer</item>
        <item name="Android:fullBright">@drawable/dialog_body</item>
        <item name="Android:centerBright">@drawable/dialog_body</item>
        <item name="Android:topBright">@drawable/dialog_title</item>
        <item name="Android:bottomBright">@drawable/dialog_footer</item>
        <item name="Android:bottomMedium">@drawable/dialog_footer</item>
        <item name="Android:centerMedium">@drawable/dialog_body</item>
    </style>

</resources>

/ res/drawable/dialog_title.xml

<inset xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:insetBottom="-1dp">
    <shape Android:shape="rectangle">
        <solid Android:color="#FFFFFF" />
        <corners Android:topLeftRadius="5dp" Android:topRightRadius="5dp" />
        <stroke Android:color="#FFFFFF" Android:width="1dp" />
    </shape>
</inset>

/ res/drawable/dialog_body.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <gradient Android:startColor="#FFFFFFFF" Android:endColor="#FFFFFFFF"
        Android:angle="270" />
</shape>

/ res/drawable/dialog_footer.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle" >

    <solid Android:color="#FFFFFF" />

    <corners
        Android:bottomLeftRadius="5dp"
        Android:bottomRightRadius="5dp" />

    <stroke
        Android:width="1dp"
        Android:color="#FFFFFF" />

</shape>

res/layout/dialog_layout.xml

<?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="match_parent"
    >

    <TextView
        Android:id="@+id/textView1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentTop="true"
        Android:layout_centerHorizontal="true"
        Android:layout_marginTop="45dp"
        Android:text="Large Text"
        Android:textAppearance="?android:attr/textAppearanceLarge" />

    <Button
        Android:id="@+id/button1"
        style="?android:attr/buttonStyleSmall"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_below="@+id/textView1"
        Android:layout_marginTop="90dp"
        Android:layout_toLeftOf="@+id/textView1"
        Android:background="@drawable/button_selector"
        Android:text="Ok"
        Android:textColor="@Android:color/white"
        Android:textStyle="bold" />

    <Button
        Android:id="@+id/button2"
        style="?android:attr/buttonStyleSmall"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentRight="true"
        Android:layout_alignTop="@+id/button1"
        Android:layout_marginRight="48dp"
        Android:background="@drawable/button_selector"
        Android:text="More"
        Android:textColor="@Android:color/white"
        Android:textStyle="bold" />

    <LinearLayout
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:layout_alignParentLeft="true"
        Android:layout_below="@+id/button1"
        Android:layout_marginTop="41dp"
        Android:orientation="vertical" >
    </LinearLayout>

</RelativeLayout>

AlertDialogのマイコード：

public static void createYesNoDialog(final Context context, String positivebuttonname,
            String negativebuttonname, String message, int messagedrawable, String headermessage,
            final DialogResponse dr) {
        final DialogResponse dialogResponse = dr;
        ContextThemeWrapper ctw = new ContextThemeWrapper(context,
                com.gp4ever.worldlogo.quiz.R.style.MyTheme);

        AlertDialog.Builder builder = new AlertDialog.Builder(ctw);
        LayoutInflater inflater = (LayoutInflater)context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View layout = inflater.inflate(com.gp4ever.worldlogo.quiz.R.layout.dialog_layout, null);
        TextView text = (TextView)layout.findViewById(com.gp4ever.worldlogo.quiz.R.id.textView1);
        Button buttonOk = (Button)layout.findViewById(com.gp4ever.worldlogo.quiz.R.id.button1);
        Button buttonMore = (Button)layout.findViewById(com.gp4ever.worldlogo.quiz.R.id.button2);
        text.setText(message);
        if (messagedrawable > 0) {
            text.setCompoundDrawablesWithIntrinsicBounds(messagedrawable, 0, 0, 0);
        } else if (messagedrawable == 0)
            text.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);
        builder.setView(layout);
        builder.setCancelable(false);
        builder.setTitle(headermessage);
        builder.setIcon(Android.R.drawable.ic_dialog_alert);
        final AlertDialog dialog = builder.create();

        buttonOk.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                dialog.cancel();
            }
        });
        buttonMore.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                dialog.cancel();
            }
        });

}

現在の出力：

角が丸くなっていません。通常のスタイルとは異なることがわかります。ドロアブルの半径を変更しても、角はそれらの変更を反映しません。

enter image description here

androidandroid-layoutandroid-alertdialogandroid-styles
28
VendettaDroid

次のコードを使用して実行できます。

CustomDialog.Java：

public class MainActivity extends Activity{

    private static final int ALERT_DIALOG = 1;

    @Override
    public void onCreate( Bundle savedInstanceState )
    {
        super.onCreate( savedInstanceState );
        setContentView( R.layout.main );

        ( (Button) findViewById( R.id.button1 ) )
            .setOnClickListener( new OnClickListener()
                {
                    public void onClick( View v )
                    {
                        showDialog( ALERT_DIALOG );
                    }
                }
            );
    }

    @Override
    protected Dialog onCreateDialog( int id ){
        Dialog dialog = null;
        if ( id == ALERT_DIALOG )
        {
            ContextThemeWrapper ctw = new ContextThemeWrapper( this, R.style.MyTheme );
            AlertDialog.Builder builder = new AlertDialog.Builder( ctw );
            builder.setMessage( "Hello World" )
                .setTitle( "Alert Dialog" )
                .setIcon( Android.R.drawable.ic_dialog_alert )
                .setCancelable( false )
                .setPositiveButton( "Close", new DialogInterface.OnClickListener()
                    {
                        public void onClick( DialogInterface dialog, int which )
                           {
                                dialog.dismiss();
                           }
                        } 
                    );
            dialog = builder.create();
        }
        if ( dialog == null )
        {
            dialog = super.onCreateDialog( id );
        }
        return dialog;
     }
 }

dialog_title.xml

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:insetBottom="-1dp">
    <shape Android:shape="rectangle">
        <solid Android:color="#000000" />
        <corners Android:topLeftRadius="20dp" Android:topRightRadius="20dp" />
        <stroke Android:color="#7F7F7F" Android:width="1dp" />
    </shape>
</inset>

dialog_footer.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <solid Android:color="#7F7F7F" />
    <corners Android:bottomLeftRadius="20dp" Android:bottomRightRadius="20dp" />
    <stroke Android:color="#7F7F7F" Android:width="1dp" />
</shape>

半径の量を変更するだけです：

dialog_title.xml

そして

dialog_footer.xml

次の出力が生成されます。

enter image description here

これがあなたのお役に立てば幸いです。

更新：
私は専門家ではありませんが、これは私が見つけたものです。それは正しいか間違っているかもしれません。多くの試みの後、私は次のようになりました：

1- ContextThemeWrapperはAPI 14には適用されません。Gingerbread以前のバージョンでは正常に動作しますが、API> 10では動作しません。

2-上記の問題を克服し、要求されたとおりにAPI> 10で動作させるために、次の行を置き換えます。

ContextThemeWrapper ctw = new ContextThemeWrapper( this, R.style.MyTheme );
AlertDialog.Builder builder= new AlertDialog.Builder( ctw );

これとともに：

AlertDialog.Builder builder= new AlertDialog.Builder( this,R.style.MyTheme );

ただし、変更する必要があります。

Android:minSdkVersion="8"

に

Android:minSdkVersion="11"

結果は、ICS（API 14）の次の図に示すようになります。

enter image description here

この画像は、ICSを実行しているSamsung Galaxy S3のものです。

注：API 14 SOマニフェストSDKで開始された変更済みプロジェクトは次のようになります。

<uses-sdk
  Android:minSdkVersion="11"
  Android:targetSdkVersion="15" />

最後の単語： Android開発に関する私の小さな知識として（私は専門家ではありません）、

1-カスタムアラートダイアログは、同じJavaコードを使用して、API <10でスムーズに実行されますが、> 10では実行されません。

ICSで実行したい場合は、API <10で登場したのと同じ効果があります。コードを変更する必要がありますなので、ICSただし、バージョン11以降のAPIでは実行されません。

2- ICSの結果も満足のいくものではなく、丸い角はタイトルにのみ適用され、フッターには適用されません。

2回目の更新：最終的にすべてのコーナーを丸くします。

次のようにpaddingをdialog_footer.xmlに適用するだけです。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
    <solid Android:color="#7F7F7F" />
    <corners Android:bottomLeftRadius="20dp" Android:bottomRightRadius="20dp" />
    <stroke Android:color="#7F7F7F" Android:width="1dp" />
    <padding Android:left="10dp" Android:top="10dp" Android:right="10dp"
Android:bottom="10dp" /> 
</shape>

出力画像：

enter image description here

この画像は、ICSを実行しているSamsung Galaxy S3からのものです

36
androidqq6

@iDroid Explorerからのもう1つの答え

ダイアログを作成するときにこの行を追加します

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Android.graphics.Color.TRANSPARENT));

これにより、四角形が消え（実際には透明）、完全に丸いダイアログボックスが表示されます。

19
Youtoo

私は以下の1つで同じ問題を試してみましたが、それは私のために機能します。 ICSも。

1。最初にテーマをAlertDialogに配置しました。

final Dialog  nag = new Dialog(this,Android.R.style.Theme_Translucent_NoTitleBar_Fullscreen);
        nag.requestWindowFeature(Window.FEATURE_NO_TITLE);
        nag.setCancelable(true);
        nag.setContentView(R.layout.pop_exit);  
        Button btnNO = (Button)nag.findViewById(R.id.btn_popup_NO);
        Button btnYES = (Button)nag.findViewById(R.id.btn_popup_YES);


        btnNO.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {

            nag.cancel();


            }
        });

        btnYES.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {

                System.exit(0);

            }
        });

        nag.show();

2。ダイアログビューのカスタムレイアウトを実装しました

pop_exit.xml

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

    <!-- <LinearLayout Android:orientation="vertical" Android:layout_marginLeft="20dp" 
        Android:layout_marginRight="20dp" Android:background="#95000056" Android:layout_width="fill_parent" 
        Android:layout_height="wrap_content"> -->

    <LinearLayout Android:orientation="vertical"
        Android:layout_marginLeft="20dp" Android:layout_marginRight="20dp"
        Android:background="@drawable/round" Android:layout_width="fill_parent"
        Android:layout_height="wrap_content">



        <TextView Android:text="Exit Application"
            Android:layout_width="wrap_content" Android:layout_height="wrap_content"
            Android:layout_gravity="center_horizontal" Android:textStyle="bold"
            Android:textColor="#fff" Android:textSize="20dp"
            Android:layout_marginTop="5dp" />


        <LinearLayout Android:layout_width="fill_parent"
            Android:layout_height="wrap_content" Android:orientation="horizontal"
            Android:layout_marginTop="5dp" Android:weightSum="2"
            Android:layout_marginLeft="10dp" Android:layout_marginRight="10dp"
            Android:gravity="center">

            <Button Android:text="No" Android:layout_weight="1"
                Android:gravity="center" Android:layout_width="wrap_content"
                Android:layout_height="wrap_content" Android:id="@+id/btn_popup_NO" />

            <Button Android:text="Ok" Android:layout_weight="1"
                Android:layout_width="wrap_content" Android:layout_height="wrap_content"
                Android:id="@+id/btn_popup_YES" />
        </LinearLayout>


    </LinearLayout>

</LinearLayout>

。pop_exit.xmlの親レイアウトの背景に形状を追加します

round.xml //形状ファイル

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <solid Android:color="#99000056" />
    <corners Android:radius="35px" />
    <padding Android:left="0dp" Android:top="0dp" Android:right="0dp"
        Android:bottom="0dp" />
</shape>

私はやるだけ。それはあなたのために動作しますICSの場合も。

それがあなたを助けることを願っています。そうでない場合はお知らせください。

コーディングをお楽しみください...

:)

5
Shreyash Mahajan

9パッチイメージを使用したくないと述べているので、こちらをご覧ください。

https://stackoverflow.com/a/1683195/940834

原則はまったく同じですが、この例では線形レイアウトに背景をレイアウトに割り当てます。

4
Doomsknight

  1. dialog_cornerでDrawableフォルダーにxmlを作成します。

    <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
  <solid Android:color="@color/main_background"/>
<corners
    Android:topLeftRadius="@dimen/margin_10" Android:topRightRadius="@dimen/margin_10"
    Android:bottomRightRadius="@dimen/margin_10" Android:bottomLeftRadius="@dimen/margin_10" />
</shape>

    2.レイアウトに入れる

    Android：background = "@ drawable/dialog_corner"

    3.in you Javaファイルはコードの下に保持

ビューmView = LayoutInflater.from（mContext）.inflate（R.layout.layout_pob、null）; alertDialog.getWindow（）。setBackgroundDrawable（new ColorDrawable（Color.TRANSPARENT））;

0
siddhartha shankar

公式のMaterial Componentsライブラリに含まれている MaterialAlertDialogBuilder を使用するだけです。

new MaterialAlertDialogBuilder(MainActivity.this,R.style.MyThemeOverlay_MaterialComponents_MaterialAlertDialog)
            .setTitle("Dialog")
            .setMessage("Lorem ipsum dolor ....")
            .setPositiveButton("Ok", /* listener = */ null)
            .setNegativeButton("Cancel", /* listener = */ null)
            .show();

次に、shapeAppearanceOverlay属性を使用してスタイルを定義します。

 <style name="MyThemeOverlay.MaterialComponents.MaterialAlertDialog" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.Dialog.Rounded</item>
  </style>

  <style name="ShapeAppearanceOverlay.MyApp.Dialog.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">8dp</item>
  </style>

enter image description here

0
Gabriele Mariotti