エッジ ツー エッジ（EdgeToEdge）

投稿日: 　更新日:

エッジ―ツーエッジ（EdgeToEdge）について、まとめます。

エッジ―ツーエッジは言葉の通りに解釈すれば「端から端まで」ですから、見た目はフルスクリーンです。

しかし、新たな画面構成であり、フルスクリーンとは別物と定義されています。

最近は、様々なスクリーン形状を持つ端末が登場しています。

それらで、マルチウィンドウを実現するために、エッジツーエッジの対応が必須の条件になるようです。APIがエッジツーエッジを前提に作られているためです。

ですので、エッジ―ツーエッジは、今後のアプリ開発で重要な技術要素と言えます。

※マルチウィンドウ：分割画面、フリーフォーム、PinP

※環境：Android Studio Jellyfish | 2023.3.1 Patch 1
　　　　Kotlin 1.9.0
　　　　Compose Compiler 1.5.1
　　　　androidx.appcompat:appcompat 1.6.1

スポンサーリンク

エッジツーエッジ（EdgeToEdge）とは

エッジ―ツーエッジとは、下図のような画面構成を言います。特徴は2点です。

  • （1）システムバーの背面にコンテンツを描画
  • （2）システムバーは透明または半透明
　　※システムバー：ステータスバー　＋　ナビゲーションバー

EdgeToEdgeの概要

システムバーの背面を利用することで、コンテンツに多くの表示領域を割り当てられます。

スポンサーリンク

標準の画面構成

最新のアプリ開発手法において、標準の画面構成はエッジツーエッジになっています。

以前の画面構成

以前は、コンテンツをシステムバーの間に配置する画面構成が標準でした。

システムバーを隠してフルスクリーンにする画面構成は、標準から生まれた派生です。

以前の標準

API≧31以降、鑑賞モードは非推奨になっています。

最新の画面構成

最新は、コンテンツをシステムバーの背面にも配置するエッジツーエッジが標準です。

システムバーを隠してフルスクリーンにしたり、コンテンツをシステムバーの間に配置したりする画面構成は、標準から生まれた派生です。

最新の標準

スポンサーリンク

最新のプロジェクトテンプレート

Android Studio（Jellyfish | 2023.3.1）が作成する最新のプロジェクトテンプレートは、エッジツーエッジになっています。つまり、標準の画面構成です。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AppTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

エッジツーエッジはenableEdgeToEdge( )関数で有効化されます。

enableEdgeToEdge( )は、エッジツーエッジに切り替えてくれる、とても便利な関数です。API≧21以降であれば利用が可能です。

ただし、ScaffoldのinnerPaddingへウィンドウインセットを引き継ぐので、innerPaddingをそのままコンテンツに指定すると、システムバー有の画面構成になってしまいます。

エッジツーエッジにしたければ、コメントアウトします。

エッジ―ツーエッジの画面構成システムバー有の画面構成
        enableEdgeToEdge()
        setContent {
            AppTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    ImagePanel(
        //                modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }

エッジ―ツーエッジサンプル

        enableEdgeToEdge()
        setContent {
            AppTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    ImagePanel(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }

システムバー有サンプル

@Composable
fun ImagePanel(modifier: Modifier = Modifier) {
    Image(
        painter = painterResource(R.drawable.donguri320x480r),
        contentDescription = null,
        modifier = modifier.fillMaxSize(),
        contentScale = ContentScale.Fit
    )
}
スポンサーリンク

派生：フルスクリーン

エッジツーエッジの対応後に、システムバーを隠せば、「フルスクリーン」になります。

class EdgeToEdgeActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AppTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Log.i(TAG, "innerPadding = ${innerPadding}")
                    ImagePanel(
//                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }

    override fun onStart() {
        super.onStart()
        WindowCompat.getInsetsController(window, window.decorView).apply {
            hide(WindowInsetsCompat.Type.systemBars())       // システムバーを隠す
//            hide(WindowInsetsCompat.Type.statusBars())     // ステータスバーを隠す
//            hide(WindowInsetsCompat.Type.navigationBars()) // ナビゲーションバーを隠す
//            systemBarsBehavior = BEHAVIOR_DEFAULT                     // スワイプでバーを表示
            systemBarsBehavior = BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE  // スワイプでバーを一時表示
//            systemBarsBehavior = BEHAVIOR_SHOW_BARS_BY_SWIPE    // Deprecated
//            systemBarsBehavior = BEHAVIOR_SHOW_BARS_BY_TOUCH    // Deprecated

        }
    }
	...
}

>派生：フルスクリーン

スポンサーリンク

派生：システムバー有

エッジツーエッジの対応後に、コンテンツの表示位置をずらせば、「システムバー有（以前、標準だった画面構成）」になります。

表示位置をずらす方法はコンテンツにinnerPaddingでpaddingを設けます。

class EdgeToEdgeActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AppTheme {
                @OptIn(ExperimentalMaterial3Api::class)
                Scaffold(
                    modifier = Modifier.fillMaxSize(),
                    topBar = {
                        TopAppBar(
                            colors = TopAppBarDefaults.topAppBarColors(
                                containerColor = MaterialTheme.colorScheme.primaryContainer,
                                titleContentColor = MaterialTheme.colorScheme.primary
                            ),
                            title = { Text("Top app bar") }
                        )
                    },
                    bottomBar = {
                        BottomAppBar(
                            containerColor = MaterialTheme.colorScheme.primaryContainer,
                            contentColor = MaterialTheme.colorScheme.primary,
                        ) {
                            Text(
                                modifier = Modifier.fillMaxWidth(),
                                textAlign = TextAlign.Center,
                                text = "Bottom app bar",
                            )
                        }
                    }
                ) { innerPadding ->
                    Column(
                        modifier = Modifier.padding(innerPadding)
                    ) { Text(text = "コンテンツ") }
                }
            }
        }
    }
}

ちなみに、サンプルはアプリケーションバーの色をシステムバーに合わせています。そのため、エッジツーエッジに見えています。

派生：システムバー有

スポンサーリンク
ページのトップへ

関連記事：

投稿が見つかりませんでした。
スポンサーリンク