「FRIENZOO」~xmlで二重線を描く~

こんにちは。

開発インターンの石川です。

 

前にブログに書いたように、ただ今、新アプリ「FRIENZOO」を作っています。

動物たちに関する簡単なクイズで遊べる、子ども向けの知育アプリです。

そのうちの一匹、犬です(^^)

 

動物や設定アイコンなどを自分で描いています。

絵を描いているときはとてもとても楽しいのですが、Javaの勉強もしなければ。。。

 

xmlで二重線を描く方法

今日チャレンジしたことは、xmlで二重線を描くことです。

 

 

 

というのも、FRIENZOOでは上の画像のような動物図鑑を作ろうと思っているのです。

「図鑑だからなんか額縁っぽいものが欲しい」。そこで二重線を描くことになりました。

こんな感じです。

 

 

※二重線の画像を作ってそれを背景に設定しても同じことは出来ます。

しかし画像をたくさん使うとそれだけアプリの容量が大きくなり、ユーザーの

スマホの容量をとってしまいます。それだけアンインストールされる可能性が高くなので、コードで描けるものはできるだけコードで描くのがいいようです。

 

また、TinyPNG(https://tinypng.com/)というサイトでは画像をドラッグ&ドロップするだけで容量の小さい画像を作ってくれます!

 

試しに669.7KBの画像を軽量化してみると、203.9KBにまでなりました。すご!

見た目も荒くならないのでいいですよねー。

 

私もよくiPhoneの容量がいっぱいになって、慌てて写真をパソコンに移したり、消しても困らなそうなアプリをなんとか探して後ろ髪を引かれながら消したりするので、「アプリの容量を小さく」という作業は興味を持ちました。

 

 

 

 

コードで二重線を引くやり方は以下のとおり。

  1. drawableフォルダに、.xml形式の「枠線用ファイル」を作る
  2. そのファイルの中に、要素を複数重ねられるlayer-listタグとitemタグを使って二重線を描く

 

 

使うタグ一覧。

  1. layer-list 子として持つitem同士を重ねられる
  2. item   重ねたいアイテムをそれぞれこのタグで囲む
  3. shape   四角を描く
  4. padding  重ねるアイテム同士にこれですきまを設定することで、「四角形の重なり」を「二重線」に見せる。
  5. solid   四角形の色を設定

 

 

FRIENZOOの二重線で言うと

茶色の四角×2、

白の四角×2

の合計4つのitemを重ねています。

 

 

横スクロールもやってみる

あとは、動物が増えたときのために横スクロールができるようにしたかったので、

<HorizontalScrollView>をいれてみました。

widthとheightはどっちもmatch_parentです。

すると以下の様になりました。

右はじが切れてしまっているのがお分かりでしょうか。

<HorizontalScrollView>を入れると一画面の決まった幅が無視されるので、上のようになります。

 

 

解決するには端末の画面横幅のdp数に合わせて画像を作ることが考えられますが、

端末ごとに横幅が違うので、端末が変わればまた画像の様にずれる可能性がある。。。

それはかっこわるい!ていうかありえない、ということで却下になりました。

 

 

 

かわりに、スワイプすると1ページずつ切り替わっていくようなしくみにすることにします!

 

 

 

「FRIENZOO」には動物の知識も入れる予定で、大人でも「へぇ~なるほど!」となるものをちょこちょこ入れたいと思っています。

完成したら使ってくださると嬉しいです!

 

「FRIENZOO」~xmlで二重線を描く~」への1件のフィードバック

  1. ピンバック: 「FRIENZOO」~「どうぶつずかん」のこと~ | materialize.jp

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です