エッジ―ツーエッジ(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)システムバーは透明または半透明
システムバーの背面を利用することで、コンテンツに多くの表示領域を割り当てられます。
標準の画面構成
最新のアプリ開発手法において、標準の画面構成はエッジツーエッジになっています。
以前の画面構成
以前は、コンテンツをシステムバーの間に配置する画面構成が標準でした。
システムバーを隠してフルスクリーンにする画面構成は、標準から生まれた派生です。
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 = "コンテンツ") } } } } } }
ちなみに、サンプルはアプリケーションバーの色をシステムバーに合わせています。そのため、エッジツーエッジに見えています。
関連記事: