Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Android

วิธีทำให้ Alert Dialog กว้าง 50% ของหน้าจอใน Android

ตัวอย่างนี้แสดงวิธีปรับขนาด AlertDialog ให้กว้างและสูง 50% ของหน้าจอ โดยใช้ WindowManager.LayoutParams หลังจากสร้าง Dialog แล้ว

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

เปิด Android Studio ไปที่ File → New Project

ขั้นตอนที่ 2: Layout XML (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:id="@+id/coordinator_layout"
    tools:context=".MainActivity">
    
    <Button
        android:id="@+id/btnAlert"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Alert Dialog"
        android:layout_gravity="top|center_horizontal"
        tools:ignore="MissingConstraints" />
        
</androidx.coordinatorlayout.widget.CoordinatorLayout>

ขั้นตอนที่ 3: MainActivity.java

package com.app.sample;

import androidx.appcompat.app.AppCompatActivity;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import android.app.AlertDialog;
import android.os.Bundle;
import android.content.Context;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    private Context mContext;
    private CoordinatorLayout mCLayout;
    private Button mButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        mContext = getApplicationContext();
        mCLayout = findViewById(R.id.coordinator_layout);
        mButton = findViewById(R.id.btnAlert);
        
        mButton.setOnClickListener(v -> {
            AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
            builder.setTitle("Say Hello!");
            builder.setMessage("Are you want to say it?");
            builder.setPositiveButton("Say", null);
            builder.setNegativeButton("No", null);
            
            AlertDialog dialog = builder.create();
            dialog.show(); // ต้อง show() ก่อนจึงจะปรับขนาดได้
            
            // ดึงขนาดหน้าจอ
            DisplayMetrics displayMetrics = new DisplayMetrics();
            getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
            int displayWidth = displayMetrics.widthPixels;
            int displayHeight = displayMetrics.heightPixels;
            
            // ปรับขนาด Dialog เป็น 50% ของหน้าจอ
            WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
            layoutParams.copyFrom(dialog.getWindow().getAttributes());
            
            int dialogWidth = (int) (displayWidth * 0.5f);
            int dialogHeight = (int) (displayHeight * 0.5f);
            
            layoutParams.width = dialogWidth;
            layoutParams.height = dialogHeight;
            
            dialog.getWindow().setAttributes(layoutParams);
        });
    }
}

ขั้นตอนที่ 4: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.app.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>
จุดสำคัญ:
  • ต้องเรียก dialog.show() ก่อน จึงจะปรับขนาดได้ (Window ยังไม่สร้างก่อน show)
  • ใช้ DisplayMetrics ดึงขนาดหน้าจอจริง (widthPixels, heightPixels)
  • layoutParams.copyFrom() คัดลอก attributes เดิมมาแก้ไข
  • สามารถปรับเป็นเปอร์เซ็นต์อื่นได้ เช่น 0.8f (80%), 0.9f (90%)

วิธีอื่น: ใช้ Theme/Style (แนะนำสำหรับการใช้งานจริง)

ใน styles.xml:

<style name="CustomDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="android:windowMinWidthMajor">50%</item>
    <item name="android:windowMinWidthMinor">50%</item>
</style>

ใช้ในโค้ด:

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

วิธีใช้ DialogFragment (Best Practice)

public class CustomDialogFragment extends DialogFragment {
    @Override
    public void onStart() {
        super.onStart();
        if (getDialog() != null && getDialog().getWindow() != null) {
            DisplayMetrics dm = new DisplayMetrics();
            getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
            getDialog().getWindow().setLayout((int)(dm.widthPixels * 0.5), (int)(dm.heightPixels * 0.5));
        }
    }
}

การทดสอบ

รันแอปพลิเคชัน กดปุ่ม "Show Alert Dialog" จะแสดง Dialog ขนาดครึ่งหน้าจอ

วิธีทำให้ Alert Dialog กว้าง 50% ของหน้าจอใน Android