Let’s learn how to create a UI for a mobile app.
In system development a long time ago, both the UI and the processing behind it were programmed, but at some point UI design tools began to be used to create layouts in XML.
However, recently I have started creating UIs using programs again. You’re back to normal. Or is it just a repeat of a trend?
Let’s take a look at how to create a UI in major mobile app development environments.
When developing an iOS app with Swift,
I was creating an XML layout file using Interface Builder included in Xcode. From now on, we will create a layout in SwiftUI in the same way as a program.
// SwiftUIでレイアウトを書くとこんな感じになります。
struct ContentView: View {
var body: some View {
Text("Hello, World!")
.font(.largeTitle)
.padding()
}
}
When developing an Android application with Kotlin,
I was creating an XML layout file using the Layout Editor included in AndroidStudio. From now on, Compose creates layouts in the same way as programs.
// Composeでレイアウトを書くとこんな感じになります。
fun AppContent() {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "Hello, World!", style = MaterialTheme.typography.h4)
}
}
When developing iOS and Android apps with Flutter,
Create a layout with Dart in the same way as a program. Flutter has been a way of writing layouts programmatically from the beginning.
I feel that SwiftUI and Compose have become closer to Flutter’s UI creation method.
// Flutterでレイアウトを書くとこんな感じになります。
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello World App',
home: Scaffold(
appBar: AppBar(
title: Text('Hello World'),
),
body: Center(
child: Text('Hello, World!'),
),
),
);
}
Now, let’s actually display “Hello World” on the screen.
Hello World with SwiftUI
//
// LayoutSample01App.swift
// LayoutSample01
//
// アプリメイン
// Created by mymyser.com on 2023/08/29.
//
import SwiftUI
@main
struct LayoutSample01App: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
//
// ContentView.swift
// LayoutSample01
//
// 画面レイアウト
// Created by mymyser.com on 2023/08/29.
//
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello World")
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
You can create an app that only displays on screen with just two classes. Compared to the days when I was creating apps with Xib and Objective-C or StoryBoard and Swift, it feels like a world away.
Hello World with Compose
When creating a new project in Android Studio, a template for Compose does not appear.
Officially, it is written that it appears, but if you select Empty Activity when creating a new project, a project for Compose will be exported.
package com.mymyser.skf.layout.layoutsample01
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.mymyser.skf.layout.layoutsample01.ui.theme.LayoutSample01Theme
// アプリメイン
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
LayoutSample01Theme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Greeting()
}
}
}
}
}
// 画面レイアウト
@Composable
fun Greeting(modifier: Modifier = Modifier) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Hello World",
modifier = modifier
)
}
}
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
LayoutSample01Theme {
Greeting()
}
}
In Android, it was a mechanism to load the XML layout and display it on the screen, but you can create the main and screen layout of the application with just one class.
I had to use LayoutEditor to set constraints and properties, and before I knew it, differences in layout files appeared in Git, which was a constant struggle.
From now on, I have high expectations for Compose because it can be handled as an integrated source.
Hello World with Flutter
import 'package:flutter/material.dart';
// アプリメイン
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
// 画面レイアウト
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Hello World',),
],
),
);
}
}
Flutter is good. Programs and layouts can be written in Dart from the beginning.
There is no need to use layout tools that are difficult to learn.
There is no need to read or define a separate layout file. Processing and layout can be treated as source code.
Managing differences with Git is easy.
UI creation for mobile app development has been like these for a while.
Screen source code + processing source code
I think this combination will continue.
Swift, Kotlin, and Flutter have different development languages and environments, but I feel like they are heading in the same direction.
