Kotlinアプリ開発 Vol. 1-7 デザインを改良しよう -Git実践編-

RM計算機

色を変更してみる

Material Designをやっていきたいんですが、なかなかハードルが高いのでしょぼい変更からしていきます。

app/src/res/valuesの中にthemesとcolorsというものがあります。

<style name=”Theme.RM計算機” :RM計算機というapp専用のテーマを使っている

<item name=”colorPrimary”>@color/purple_500</item>: Primary colorにはpurple_500というものが使われている

実はactivity_main.xmlの上側でthemeが選べます。

色々試しみてください。

activity_main.xmlからテーマを変更しても、PC上で見た目が変わるだけでアプリには反映されません。選んだテーマ名にthemes.xml上で書き換える必要があります。

purple_500というのはcolors.xmlにあります。

purple_500というのは便宜上付けているだけの名前なので、実際には後ろのカラーコードを変更することで、色が変わる。

配色なんてものはある程度、組み合わせが決まっているので他人の力を借ります。

Random Material Palette Generator - THREEB
Your material palette just with a click! #RandomMaterialPalette

クリックするたびに、3色の組み合わせを出してくるシミュレーターです。

まだまだダサいですが、とりあえず見た目が変わりました。

GitでVer. 管理をしてみる

もう1回変えてみます。

こういった変更を何度もやったときにやっぱり最初のやつに戻りたいとか、何番目のやつがよかったみたいなことが起きてしまうと容易に想像がつきます。

そ ん な と き こ そ Git

まだの人は参考にして導入してください。

Githubのクローンを編集する

GithubではyoshfitnessというユーザーがrmcalcというProjectのバックアップを取っているような状態。Ver変更はここに書き込まれていく。Privateなのであくまでも個人用。

Cloneを作るためのURLをコピーする。オープンソースであれば他人のものでもコピーしてこれるので、そのまま使ったり、部分的に使ったりすることが可能。

git clone https:// (コピーしたURL) と打ち込んでEnter。この作業はAndroid studioのterminalやWindowsのコマンドプロンプトなどなんでもよい。

実際に指定したフォルダに同じ内容のものがコピーされる。オンライン上にもローカルにも同じファイル構成/同じ内容が存在している状態。こいつを使って作業を始めましょう。

またまたカラーを変更しました。

ディレクトリからVerを変更するパターン

Gitの仕組みが分かりやすいのであえて説明しておきます。

このフォルダ上で右クリックすると、Git Bash hereと出てきます。あらかじめディレクトリを指定したうえで、コマンドを入力できます。今回はgit statusと入力します。

なにも分けていないので、もちろんmasterのbranchです。(複数人でやるときは別のBranchを作って作業したりします。)

コミット(レポジトリに保存)できていないファイルがあります。保存するファイルを決めてアップロードしてください。変更が入っている個所はcolors.xmlです。

フォルダで右クリックしてGit GUI hereを選びました。colors.xmlの中で追加された場所と削除された場所が表示されています。

コメントを追加してStage Changed ⇒ Commit ⇒ Pushとしてみます。Pushはオンライン上に書き込む作業です。

Android Studio上から保存するパターン

こっちのほうが操作は楽です。

ツールバーのVCSをクリックして、コミットを選択。変更したファイルが表示される。Show Diffを押すことでコードの比較も可能。同様にCommit ⇒ Pushする

Github上でMasterのbranchにcolor changeというコメントで新しいCommitができている。

どのファイルがどう変更されたかを確認することができる。

変更はGithubのデスクトップアプリからでも確認できる

GitHub Desktop
Simple collaboration from your desktop

なんとなくGitがどういうものか、どう役に立つかが分かってきたと思います。

全然デザイン自体は変わっていないですが、今回の学びは大きいはず!

まとめ

テーマの変更方法や使われている色の変え方を学んだ
GitによるVer.管理の仕組みを実践的に学んだ
GithubでのGitの管理の仕組みを学んだ

そろそろちゃんとデザインを変えたい・・・

コメント

タイトルとURLをコピーしました