Androidのdpについて & アプリにオリジナル画像を入れる方法
はじめに
なんとなく知っていたdpについてきちんとまとめることにしました。
またまとめつつ、Androidアプリで確認していこうと思います。
dpについて
dpはdensity-independent pixelsのことで、密度非依存ピクセルと呼ばれます。
と言っても意味がわかりませんので、順を追ってわかりやすく説明します。
1. 端末によって画面の綺麗さが異なる
「最近の端末は動画が綺麗だよね」みたいなもので感覚的にわかると思います。
人間の目から見るとあまりわかりませんが、画面をめちゃめちゃ拡大するとドットのようになって表現されています。
拡大すると1つの四角で図形が表現されている
この1つの四角をpx(ピクセル)またはドットと表現します。
つまり画面が綺麗、動画が綺麗というのは、ピクセルがたくさんあるから複雑な図形も滑らかに表現できていまう、ということになります。
さらに端末ごとにどんだけ画面が綺麗なのよ？を比べるために1 inchあたりのドット数という単位を導入します。これがdpi(dots per inch)です。
これで物理的にサイズのことなる端末間でも比べることができます。
以下の例だと1inchに5つドットがあるため、5dpiとなります。
2. px(ドット単位)で画像を表示する
iphoneなどで撮影した画像は縦横それぞれpx値を持っています。大きいほど容量が大きいです。
(最近は高画質なので1枚でかなり容量食いますよね)
Androidで画像を愚直に表示すると、端末ごとにdpiが異なるため、サイズが変わってしまうという問題が起きます。
下記縦横480pxの画像になります。
これをAndroidアプリで表示させてみます。
- resフォルダーに画像をコピーする(
test.jpgとしてコピー)
- 表示させるコードを書く(
MainActivity.ktに書きます)
...
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
AddImageTestTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
Greeting(
name = "Android",
modifier = Modifier.padding(innerPadding)
)
}
}
}
}
}
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
Column {
Text(
text = "Hello $name!",
modifier = modifier
)
// ここに記載
Image(
painter = painterResource(id = R.drawable.test),
contentDescription = null
)
}
}
これをdpiの違う2つの端末で表示させると以下のようになります。
420dpi端末より320dpi端末の方が480pxの影響が大きくなるので、その分大きく写っています。
3. dpで表示する
いよいよdpです。冒頭で密度非依存ピクセルと言いましたが、px表示だとdpiごとにサイズが変わってしまうのが問題でした。
そこで、表示するpx数を指定するのではなく、dpiの影響を加味した新しい単位を作れば解決というわけです。これがdpです。
定義としては、160dpiの時に1dp = 1pxと等しくなるです。
これだけ聞いてもよくわからないので具体例を...
- dpi = 160の端末
| 設定dp値 | 表示されるpx値 |
|---|---|
| 2dp | 2px |
| 10dp | 10px |
| 50dp | 50px |
- dpi = 80の端末
- 160dpiの端末と比べて1inch内のドットが少ない
- 160dpiと比べて表示されるpx数を少なくなっている(そうしないとサイズが合わない)
| 設定dp値 | 表示されるpx値 |
|---|---|
| 2dp | 1px |
| 10dp | 5px |
| 50dp | 25px |
具体図: dpiが半分になったら表示するpx数は倍にして調整するイメージ
この便利なdpという単位を使って、Androidアプリで表示させてみます。先ほどと同じくGreeting関数内に書いてみます。
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
Column {
Text(
text = "Hello $name!",
modifier = modifier
)
// ここに記載
Image(
painter = painterResource(id = R.drawable.test),
contentDescription = null,
modifier = modifier.size(200.dp)
)
}
}
だいだい同じくらいのサイズになってます！
さいごに
DPとはをまとめつつ実際どう見えるのをDemoしてみました。
Discussion