Kotlin入門

Android開発のためのKotlin入門 第5回「Android Studio の使い方と Activity について」

 

ここまでの記事はこちら
 

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

今回は

  • Android Studio の使い方
  • Activity(アクティビティ)

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

Android Studio を開いて始めていきましょう
 


 

Android Studio の使い方

まずはじめに Android Studio の使い方を簡単に説明します。

使いながら覚えていく方がわかりやすいと思うので、今の時点で必要な箇所だけ紹介していきます。
 

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

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


 

ここでは

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

などを行います。
 
 

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


 

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

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

Android の部分をクリックするとドロップダウンメニューが表示されるので Project を選択してください。


 

Project ビューに切り替えてみると、表示形式がガラッと変わります。


 

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

app フォルダの上で右クリックして、Mac の場合は「Open In → Finder」、Windows の場合は「Open In → Explorer」を選択して下さい。


 
 

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

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


 
 

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

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

 
 

2. エディタ

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


 

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

 
 

activity_main.xml をクリックして開いてください。

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

今は「Hello World」というテキストだけがある状態ですが、ここにボタンや画像などの要素(ウィジェット)を置いてアプリ画面を作っていきます。

主なウィジェットには

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

などがあります。
 
 

画面右上に「Design」「Split」「Code」という3つのボタンがあります。


 

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

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

 


 

① Code


 

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

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

② Split


 

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

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

③ Design


 

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

要素を置くと自動的に activity_main.xml に XML コードが追加される仕組みです。

簡単に画面が作れるのがメリットですが、XML がゴチャゴチャするのがデメリットです。
 
 

どれを使うか?

どれを使っても良いですが、個人的にはプレビュー画面を確認しながらスッキリとしたコードを書ける ② Split をいつも使用しています。

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

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

Activity について

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

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

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

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

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

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


 
 

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

  • activity_main.xml
  • MainActivity.kt

の2つのファイルです。

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

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

クイズアプリの場合 activity_main.xml には問題文を表示する TextView や解答ボタンを用意します。

そして MainActivity.kt には、問題文を TextView に表示したり、問題の正解・不正解を判定するコードを書きます。

クイズ出題画面から結果画面へのアクティビティの切り替えも MainActivity.kt ファイルで行います。


 
 

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

現時点では

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

ということだけ覚えておいて下さい。
 
 

次に行うこと

ここまでで Android Studio を使う準備は完了です!

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

第6回「クラスと関数」に進む
 
 

Android 開発のための Kotlin 入門講座

Kotlin入門講座についてはこちら

Kotlin の入門書や入門講座では「文法を学んでもそれをいつどこで使うのか分からない」「アプリ開発との関連が分からない」ということがよくあります。
 

Android 開発のための Kotlin 入門講座では「Kotlin 文法を学ぶ→アプリ開発する」を繰り返して、合計3つのアプリを開発していきます。

  • とにかく Android アプリを開発してみたい!
  • Android 開発に興味があるけれど、何から始めれば良いかわからない
  • プログラミングに挫折したことがある

という方にお勧めの講座になっています。

この講座でプログラマーへの第一歩を踏み出しましょう
 

 
 
 

ABOUT ME
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
guest

CAPTCHA


0 Comments
Inline Feedbacks
View all comments
0
この記事にコメントするx