Android

バースデーカードアプリの作成～画像を追加する～

前回は自分のスマホの設定しましたが、今回はアプリに画像を追加します。
(googleの無料講座の順に進んでいます。)

前回の記事とgoogleの講座はこちらです。

次回の記事はこちらです。

Android Studioに画像を追加する。

今回は講座に倣ってこちらのサイトから画像をダウンロードし、アプリに追加します。
リンク先のサイトに行ってダウンロードを押した後、右クリック→画像の保存で保存できます。

次にAndroid StudioでResource Managerを開きます。
Resource Managerは次のように開けます。

View > Tool Windows > Resource Manager

Resource Managerが画面左に追加されていると思います。
追加されたResource Managerの"＋"ボタンを押し、Import Drawablesをクリックします。そして先ほどダウンロードした画像を追加します。


画像が追加されたことが確認できます。

画像が追加されたことを別の方法でも確認します。
画面左側にProjectタブがあるのでそちらをクリックします。
app→res→drawableフォルダを確認すると追加した画像があることがわかります。

画像をイメージビューに追加する

再びイメージビューの画面に戻って画像を追加していきます。
イメージビューの画面の開き方は下記の通り、"activity_main.xml"を開きます。

(補足)レイアウトエディタが表示されない場合

画面右上にあるDesignモードのボタンが押されているか確認してみてください。

次にpaletteからImageViewのコンポーネントを追加し、先ほど読み込んだ画像を選択します。
追加の仕方は下記GIFを参考にしてください。

追加した画像の位置を調整する

追加した画像を移動させます。
画像を選択すると画面にピンクの四角が表示されます。
ピンクの四角の左右の端に合うように画像を移動させます。(下記GIF参照)

次に画像の上下を調整します。
画像上部にある〇をダブルクリックします。その状態で上側にもっていけば画像をエッジの端に合わせることができます。(下記GIF参照)

画像の移動はAndroid Studioの右側にあるAttributesのLayoutセクションでも調整できます。
画像の下側についてはこちらで調整します。下側が余白0になるように設定しました。

これで画像が画面の中央に配置されました。
次は画面全体に画像を表示するように変更します。

最初にConstraintsのlayout_widthとlayout_heightを0dpにします。
こうすることでAndroid Studioでmatch_constraintを使う用に指示できるらしいです。
(これが何者かはきちんと理解できてないです...)
こうすることでConstraintLayoutの幅から余白を差し引いた幅になるそうです。


この状態でscaleTypeを調整して、画像の大きさ、位置を調整していきます。
scaleTypeをcenter Cropに変更します。

もしscale Typeの場所がわからない場合は画面右上に検索欄があるのでそこにscale Typeと入力して探してください。

center Cropにしたことで画像が画面いっぱいに表示されるようになりました。
しかし、文字が見えなくなってしまったので、次は文字を見えるようにリストの順番を変更していきます。

レイヤーの順番を変更して文字を見えるようにする

文字が見えなくなってしまったので、Component Tree内の順番を変えます。
image Viewをドラッグして一番上に持ってくるだけで大丈夫です。
(詳細は下記GIF参照)
これで文字が表示されるようになりました。

(補足)警告フラグを解消する

Component Treeを確認すると三角形で警告フラグが出ていることがわかります。
今回はこれを解消していきます。

この警告の意味ですが、ハードコードで書かれているからです。
ハードコードを知らない人に簡単に説明すると、変数などを使わずに直接文字を入力している状態です。

アプリは別の言語に翻訳される場合があるので、ハードコードだと翻訳がうまくいかないことがあり警告が出ているみたいです。


三角形の警告をクリックすると警告内容が表示され、下までスクロールすると"Fix"ボタンがあるので、クリックします。(最初はテキスト側のエラーを修正します。)


Resource nameをhappy_birthday_textに変更し、OKをクリックします。
(変数名と同じ意味ですかね？違ったら申し訳ございません。)
もう一つのテキストも同様に修正します。Resource nameはsignature_textにしました。

Resource nameが設定できたか確認します。
app→res→values→strings.xmlを開くと入力した文字列が変数に格納されているのを確認できます。

試しにsignature_textの中身を変えてみて表示が変わるのか確認します。
今回はEmmaとなっているのをBobに変えてみます

表示がFrom, Bobに変わりました。
やはり先ほどのは変数名で間違いなさそうです。

次に画像に出ている警告を消します。
警告文を見てみるとcontentDescription属性がないという警告が出ています。
これを設定することでTalkBackをやりやすくするみたいですが、TalkBackが何者かはまだわかりません...

今回は画像を装飾目的使っているので、TalkBackでスキップするようにします。
importantForAccessibilityを見つけてnoに設定します。

これですべての警告が消えるのを確認しました。

詳しく知りたい方へ

0 件のコメント :

コメントを投稿