คลาสขนาดหน้าต่าง

คลาสขนาดหน้าต่างคือชุดเบรกพอยท์ของวิวพอร์ตตามความคิดเห็นที่จะช่วยคุณ ออกแบบ พัฒนา และทดสอบเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์/ปรับเปลี่ยนได้ ความสมดุลของเบรกพอยท์ การออกแบบที่เรียบง่ายด้วยความยืดหยุ่นในการเพิ่มประสิทธิภาพแอปให้เหมาะกับกรณีที่ไม่ซ้ำ

คลาสขนาดหน้าต่างจะจัดหมวดหมู่พื้นที่แสดงผลที่พร้อมใช้งานสำหรับแอปของคุณเป็น compact, medium หรือ expanded ความกว้างและความสูงที่ใช้ได้จะได้รับการจัดประเภท แยกกัน ดังนั้นในทุกช่วงเวลา แอปของคุณจะมีขนาดหน้าต่าง 2 ขนาด คลาสหนึ่งสำหรับความกว้างและความสูง ความกว้างที่ใช้ได้มักจะมากกว่า สำคัญกว่าความสูงที่มีอยู่ เนื่องจากการเลื่อนดูในแนวตั้งอย่างแพร่หลาย คลาสขนาดหน้าต่างความกว้างมักจะเกี่ยวข้องกับ UI ของแอปคุณมากกว่า

เบรกพอยท์จะช่วยให้คุณคิดต่อไปเรื่อยๆ ได้ตามที่แสดงให้เห็นในตัวเลข เกี่ยวกับเลย์เอาต์ในแง่ของอุปกรณ์และการกำหนดค่า เบรกพอยท์คลาสแต่ละขนาด เป็นกรณีที่พบได้เป็นส่วนใหญ่สำหรับสถานการณ์ทั่วไปของอุปกรณ์ ของกรอบอ้างอิง ขณะที่คุณนึกถึงการออกแบบ โดยใช้เบรกพอยท์ เลย์เอาต์

แม้ว่าการแสดงภาพคลาสขนาดเป็นอุปกรณ์จริงจะมีประโยชน์ แต่ขนาดของหน้าต่าง ขนาดของหน้าจอของอุปกรณ์ไม่ได้เป็นตัวกำหนดคลาสไว้อย่างชัดเจน หน้าต่าง คลาสขนาดไม่ได้มีไว้สำหรับตรรกะประเภท isTablet เปลี่ยนเป็นหน้าต่าง คลาสขนาดต่างๆ จะกำหนดโดยขนาดหน้าต่างที่พร้อมใช้งานสำหรับแอปพลิเคชันของคุณ โดยไม่คํานึงถึงอุปกรณ์ประเภทที่แอปกําลังใช้อยู่ ซึ่งมีส่วนสำคัญ 2 ประการ ผลกระทบ:

• อุปกรณ์จริงไม่รับประกันคลาสขนาดหน้าต่างที่เจาะจง พื้นที่หน้าจอที่พร้อมใช้งานสำหรับแอปของคุณอาจแตกต่างจากขนาดหน้าจอของ อุปกรณ์นี้ด้วยเหตุผลหลายประการ ในอุปกรณ์เคลื่อนที่ โหมดแยกหน้าจอสามารถ แบ่งหน้าจอระหว่าง 2 แอปพลิเคชัน ใน ChromeOS แอป Android สามารถทำสิ่งต่อไปนี้ แสดงในหน้าต่างรูปแบบอิสระที่ปรับขนาดได้ตามต้องการ อุปกรณ์แบบพับได้มีหน้าจอขนาดแตกต่างกัน 2 หน้าจอเข้าถึงแยกกัน ด้วยการพับหรือกางอุปกรณ์

• คลาสขนาดหน้าต่างอาจเปลี่ยนแปลงได้ตลอดอายุของแอป ขณะที่แอปทำงานอยู่ การวางแนวของอุปกรณ์จะเปลี่ยนไป การทำงานหลายอย่างพร้อมกัน และ การพับ/การกางอาจเปลี่ยนพื้นที่หน้าจอที่มีอยู่ เพื่อ คลาสขนาดหน้าต่างจะเป็นแบบไดนามิก และ UI ของแอปควรปรับ ตามนั้น

คลาสขนาดหน้าต่างจะแมปกับเบรกพอยท์แบบกะทัดรัด ปานกลาง และขยายใน เลย์เอาต์ดีไซน์ Material คำแนะนำ ใช้คลาสขนาดหน้าต่างเพื่อตัดสินใจเกี่ยวกับเลย์เอาต์ของแอปพลิเคชันในระดับสูง เช่น การตัดสินใจว่าจะใช้เค้าโครงหน้า Canonical ที่เจาะจงเพื่อใช้ประโยชน์จาก พื้นที่หน้าจอเพิ่มเติม

You can compute the current WindowSizeClass using the WindowSizeClass#compute() function provided by the Jetpack WindowManager library. The following example shows how to calculate the window size class and receive updates whenever the window size class changes:

class MainActivity : Activity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // ...

        // Replace with a known container that you can safely add a
        // view to where the view won't affect the layout and the view
        // won't be replaced.
        val container: ViewGroup = binding.container

        // Add a utility view to the container to hook into
        // View.onConfigurationChanged(). This is required for all
        // activities, even those that don't handle configuration
        // changes. You can't use Activity.onConfigurationChanged(),
        // since there are situations where that won't be called when
        // the configuration changes. View.onConfigurationChanged() is
        // called in those scenarios.
        container.addView(object : View(this) {
            override fun onConfigurationChanged(newConfig: Configuration?) {
                super.onConfigurationChanged(newConfig)
                computeWindowSizeClasses()
            }
        })

        computeWindowSizeClasses()
    }

    private fun computeWindowSizeClasses() {
        val metrics = WindowMetricsCalculator.getOrCreate().computeCurrentWindowMetrics(this)
        val width = metrics.bounds.width()
        val height = metrics.bounds.height()
        val density = resources.displayMetrics.density
        val windowSizeClass = WindowSizeClass.compute(width/density, height/density)
        // COMPACT, MEDIUM, or EXPANDED
        val widthWindowSizeClass = windowSizeClass.windowWidthSizeClass
        // COMPACT, MEDIUM, or EXPANDED
        val heightWindowSizeClass = windowSizeClass.windowHeightSizeClass

        // Use widthWindowSizeClass and heightWindowSizeClass.
    }
}

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // ...

        // Replace with a known container that you can safely add a
        // view to where the view won't affect the layout and the view
        // won't be replaced.
        ViewGroup container = binding.container;

        // Add a utility view to the container to hook into
        // View.onConfigurationChanged(). This is required for all
        // activities, even those that don't handle configuration
        // changes. You can't use Activity.onConfigurationChanged(),
        // since there are situations where that won't be called when
        // the configuration changes. View.onConfigurationChanged() is
        // called in those scenarios.
        container.addView(new View(this) {
            @Override
            protected void onConfigurationChanged(Configuration newConfig) {
                super.onConfigurationChanged(newConfig);
                computeWindowSizeClasses();
            }
        });

        computeWindowSizeClasses();
    }

    private void computeWindowSizeClasses() {
        WindowMetrics metrics = WindowMetricsCalculator.getOrCreate()
                .computeCurrentWindowMetrics(this);

        int width = metrics.getBounds().width
        int height = metrics.getBounds().height()
        float density = getResources().getDisplayMetrics().density;
        WindowSizeClass windowSizeClass = WindowSizeClass.compute(width/density, height/density)
        // COMPACT, MEDIUM, or EXPANDED
        WindowWidthSizeClass widthWindowSizeClass = windowSizeClass.getWindowWidthSizeClass()
        // COMPACT, MEDIUM, or EXPANDED
        WindowHeightSizeClass heightWindowSizeClass = windowSizeClass.getWindowHeightSizeClass()

        // Use widthWindowSizeClass and heightWindowSizeClass.
    }
}

คลาสขนาดหน้าต่างทดสอบ

เมื่อเปลี่ยนเลย์เอาต์ ให้ทดสอบลักษณะการทำงานของเลย์เอาต์ในทุกหน้าต่างขนาด โดยเฉพาะที่ความกว้างเบรกพอยท์ที่กะทัดรัด ปานกลาง และขยายแล้ว

หากคุณมีเลย์เอาต์สำหรับหน้าจอแบบกะทัดรัดอยู่แล้ว ให้เพิ่มประสิทธิภาพเลย์เอาต์ก่อน สำหรับคลาสขนาดความกว้างที่ขยาย เนื่องจากคลาสขนาดนี้จะมีพื้นที่มากที่สุด เพื่อดูเนื้อหาและการเปลี่ยนแปลง UI เพิ่มเติม จากนั้นตัดสินใจว่าเลย์เอาต์ใดที่เหมาะกับ คลาสความกว้างปานกลาง ให้พิจารณาเพิ่มการออกแบบพิเศษ

ขั้นตอนถัดไป

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้คลาสขนาดหน้าต่างเพื่อสร้างการปรับเปลี่ยนตามอุปกรณ์/ปรับเปลี่ยนได้ โปรดดูวิธีต่อไปนี้

• สำหรับเลย์เอาต์แบบ Compose: รองรับหน้าจอขนาดต่างๆ

• สำหรับเลย์เอาต์ที่อิงตามมุมมอง: การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์/ปรับเปลี่ยนได้พร้อมด้วยมุมมอง

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับสิ่งที่ทำให้แอปทำงานได้ดีในอุปกรณ์และหน้าจอทุกขนาด ดู:

• ย้ายข้อมูล UI ไปยังเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์
• คุณภาพสำหรับแอปที่มีหน้าจอขนาดใหญ่