Android Studio画面の見方とActivityについて

はじめに

エミュレータでアプリを実行できるようになりましたが、コードを書き始める前にもうひと準備です。

今回は

  • Android Studio 画面の見方
  • Activity(アクティビティ)

について紹介していきます。

Android Studio 画面の見方

まずはじめに Android Studio 画面の見方を簡単に紹介しておきます。

使いながら覚えていけば良いので、今の時点で知っておいた方が良い箇所だけ確認しておきましょう。

 

1. プロジェクトウィンドウ

まず画面左側がプロジェクトウィンドウです。

image1

 

ここでは

  • 新しくファイルを作成する
  • 編集したいファイルを開く
  • ファイルを削除する

などを行います。

 

現在は Android ビュー という形式でファイルが表示されていると思います。

image2

 

Android ビューは実際のプロジェクト構造ではなく、必要なファイルを簡単に見つけられる構造になっています。

ですので全てのファイルが表示されているわけではなく、あまり使うことがない一部のファイルは非表示になってます。

 

Android 部分をクリックするとドロップダウンメニューが表示されるので Project に変えてみましょう。

表示形式がガラッと変わりましたね。

image3

 

Project ビューでは、先ほど非表示になっていたファイルも含めた実際のプロジェクト構造でファイルが表示されます。

実際の構造を確認してみましょう。

app フォルダの上で右クリックして Open In → Explorer(Mac の場合は Finder)を押します。

image4

 

AndroidStudioProjects フォルダに保存されている Sample プロジェクトが表示されました。

Project ビューに表示された形式と同じ構造になっていますね。

image5

 

どの表示形式を選んでも良いですが、この講座ではよりシンプルで分かりやすい Android ビューにして進めていきましょう。

Android ビューにしてもたくさんのフォルダとファイルが表示されていますが、現時点では MainActivity.ktactivity_main.xml の場所だけ確認しておいてください。

image6

 

 

2. エディタ

次は画面右側のエディタです。ここには現在編集中のファイルが表示されます。

image7

 

タブには現在開いているファイルが表示されていて、クリックすると編集するファイルを切り替えることができます。

image8

 

activity_main.xml をクリックして開いてみましょう。

ここはアプリのレイアウト、つまりユーザーから見える部分を作っていく場所です。

image9

 

プロジェクト作成時は「Hello World!」というテキストだけがある状態ですが、ここにボタンや画像などの View(ビュー)を置いてアプリ画面を作っていきます。

主な View には

  • TextView:テキストを表示する
  • ImageView:画像を表示する
  • Button:ボタン

などがあります。

 

画面右上に3つのアイコンが並んでいます。

Android アプリ開発では XML というコードを書いてレイアウト(アプリ画面)を作っていきますが、左から Code / Split / Design と3つの作成方法を選ぶことができます。

image10

XMLとは?

XML とは Extensible Markup Language(エクステンシブル マークアップ ランゲージ)の略です。簡単に言うと HTML のデータ管理バージョンです。HTML はウェブサイトの画面を作るときに使いますが、XML は主にデータを管理するときに使われます。

 

画面を見やすいようにプロジェクトウィンドウを閉じて、1つずつ確認していきましょう。

image11

 

① Code

image12

Code では自分で XML を書いていきます。

スッキリとした XML コードを書けることがメリットですが、慣れるまで少し手間がかかること、どのような画面になっているか確認できないことがデメリットです。

 

② Split

image13

Split では、Code 画面とプレビュー画面が分割で表示されます。

左側に XML を書きながら、どのようなレイアウトになるか右側のプレビューで確認することができます。

 

③ Design

image14

Design では、Palette(パレット)からボタンやテキストなどのビュー要素を選んで、ドラッグ&ドロップで画面に置いていきます。

ビュー要素を置くと自動的に XML コードが追加される仕組みです。簡単に画面を作成できるのがメリットですが、余計な XML が追加されてしまうこともあるのがデメリットです。

 

どれを使うか?

Design か Split を使うのが一般的ですが、まずはスッキリとしたコードが書ける ② Split から始めるのがオススメです。

左側に書いたコードがどんな意味を持つのか、右側のプレビュー画面を確認しながら進められるので、初めてコードを書く方にも分かりやすいと思います。

まずは ②Split でレイアウトを作っていきましょう。

 

Activity について

先ほど「activity_main.xml はアプリのレイアウト、つまりユーザーから見える部分を作っていく場所」と紹介しました。

Android 開発では、このユーザーから見える画面のことを Activity(アクティビティ)と呼びます。

プロジェクトの作成時は1つのアクティビティしかありませんが、アクティビティはいくつでも作成することができます。

 

例えばクイズアプリを作ると考えてみましょう。

クイズアプリには「スタート画面・クイズ出題画面・結果画面」が必要になりそうですね。

1つの画面につき1つのアクティビティを用意すると、クイズアプリの場合は3つのアクティビティを作成することになります。

image15

アクティビティを作成すると用意されるのが

  • activity_main.xml
  • MainActivity.kt

の2つのファイルです。

ファイル名の main / Main の部分はアクティビティの名前によって異なりますが、アクティビティを作成すると必ずこの2つのファイルがセットで作成されます。

 

activity_main.xml がアプリのユーザーから見える部分であったのに対して、MainActivity.kt はアプリの機能を作っていく場所です。

クイズアプリの場合

  • クイズの問題をシャッフルする
  • 正解・不正解を判定する
  • 正解数を数える

などアプリに動きをつけるコードを書きます。

この講座でも複数のアクティビティを使ったアプリを開発するので、今の時点でモヤッとしていても心配しないでくださいね。

現時点では

  • activity_main.xml → アプリの見た目を作る場所
  • MainActivity.kt → アプリの機能を作る場所

と覚えておきましょう。

 

次に行うこと

以上で Android Studio を使う準備は完了です。

次回からは少しずつコードを書いていきましょう!

 

 

完了して次のステップへ  
コメント

0 コメント