Android Studio入門

Android Studio 開発【 画面構成 】

3分で学ぶAndroid Studio【 画面構成 】768

Android Studioの画面構成の解説動画です。
アプリ作成の前の基礎知識としてとらえてください。

この動画は「アプリ新規作成」を済ませた状態でご覧ください。

Android Studio 画面構成
Android Studio 画面構成

メニューとツール

  1. 実行ボタン :作成したアプリを実行するボタン
  2. AVD Manager :エミュレーターの管理
  3. SDK Manager :開発に必要な追加ファイルを管理

ファイル構成

アプリ内のファイルやフォルダが一覧で表示されていてダブルクリックで開くことができます。

ファイル編集領域

編集したいファイルはこの領域で編集します。

ログやメッセージ

起動時のエラーや実機の状態が表示されます。

Android Studio入門

Android Studio 開発【 新規作成 】

3分で学ぶ Android Studio【新規作成】768

今更ですが「アプリケーションの新規作成」の解説動画です。

新規作成には専門用語が数多く出てきます。
未経験者には非常に理解しにくいので、重要な用語を僕なりに解説したいと思います。

すでにプロジェクト(アプリケーション)を編集中の場合はFileからClose Projectを選択してください。

3分で学ぶ AndoirStudio【 CloseProject 】
編集中の場合は先に「プロジェクトを閉じる」

新規アプリケーションを作成します。
メニューから Start a new AndroidStudio Projectをクリック

3分で学ぶ AndoirStudio【 新規プロジェクトの作成 】
新規プロジェクトの作成

① アプリの名前

アプリの名前を入力します。
自由につけれますが、慣れるまでは半角英数を入力
(最初は大文字、最初の1文字目に数字は使用しない)
※ 動画ではText0530(数字は作成日)を使用

② ドメイン

作成者を識別するためにドメインを入力。
パッケージネーム(フォルダと思ってOK)に使用されます。
※ ドメインをお持ちで内方は学習用に「test.com」でOK

③ 保存先フォルダー

作成するアプリ(プロジェクト)を保存するフォルダ
※ 日本語だと不都合が怖いので変えた方が良いかも

3分で学ぶ AndoirStudio【 アプリ名 】
アプリ名

作成するアプリがどのバージョン以上で動作するのか指定します。
サンプルではAndroid 4.0.3以上のスマフォを対象にしていることになります。
※ サンプルでは古いスマフォは対象外になりますが、現在(2015/05/30)
4.0.3未満は非対応でも問題ないと思われます。

3分で学ぶ AndoirStudio【 対象スマフォのバージョン 】
対象スマフォのバージョン

各バージョン以上の使用率が表示されます。
2015/05/31では「4.1以降が82.6%使用されてる」になります。

3分で学ぶ AndoirStudio【 各バージョンの使用率 】
各バージョンの使用率(シェア)

Activity(アクティビティ:アプリの画面でOK)を
選択します。当面Empty(エンプティ:空の )ActivityでOKです。
※ Emptyが無ければBlankを選択してください。

新規作成-Ver1.5

複数のファイル名等を入力
・Activity: プログラム(動的な動き)を記載するファイル名
・Lyout Name: 画面レイアウト(ボタンや画像の並べ方)を記載するファイル名
・Title: 画面のタイトル文字( 例「設定画面」など)
・Menu Resouce Name: メニュー内容を記載するファイル名
* ここでは分かりやすさを優先して「ファイル名」と表現していますが、正式には違います。
* 詳しくなるまでは「ファイル名だ」と聞き流してもらってOKで初期設定も変更する必要ありません。

3分で学ぶ AndoirStudio【 名前の入力 】
名前の入力

エラー等で表示されない場合はプレビューバージョンを
変更してみてください。

3分で学ぶ AndoirStudio【 プレビュー 】
プレビュー

ファイル構成の表示を「Project」に設定
一部の操作に必要

3分で学ぶ AndoirStudio【 成功 】
ファイル構成の表示
Android Studio入門

Android Studio 開発【 キャラクターと背景 】

15分で学ぶAndroidプログラミング【キャラと背景】800
ゲーム等でのキャラクターと背景を表示させるサンプルです。

サンプルですが、実際のアプリに使用している方法で「比較的簡単で不都合少なく幅広く」利用できると思います。

※ この動画は以前公開した「背景画像の設定」「キャラクターの表示」を組み合わせた内容です。

画面サイズと方向にとらわれない
画面サイズと方向にとらわれない
プログラミングに対応
プログラミングに対応

ご自身で画像を用意する場合は以下にご注意ください。

  • ファイル名は半角英数小文字とアンダーバーのみ使用可能、なおかつ最初の1文字は半角英数小文字のみ
  • 画像サイズが大きすぎるとエラーが出る場合があります。
  • キャラクター(背景の上に表示させる画像)はPNGの24ビットで背景可視を使用しています。
キャラクターを中央に表示させる
サメ
背景画像の設定 【 背景画像 】
サンプル 背景画像
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/back"
        android:scaleType="centerCrop" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView2"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/character" />

</RelativeLayout>

Android Studio入門

Android Studio 開発【キャラクターの表示 】

3分で学ぶAndroidStudio【キャラクターの表示】800
ゲーム等でのキャラクターを表示させる方法です。

「比較的簡単で不都合が少なく幅広く」使用することが出来ます。
前回の「背景画像の設定」と組み合わせて使用可能です。

  • 画面サイズが違っても対応可能
  • 縦画面でも横画面でも対応可能
  • キャラクターは画面中央に表示される
  • できる限り画面いっぱいに表示される
  • 背景の上に重ねて表示させる使用
キャラクターの表示_画面サイズの違い
画面サイズの違い
キャラクターの表示_幅広い利用
幅広い利用
キャラクターの表示_プログラミングに対応
プログラミングに対応

ご自身で画像を用意する場合は以下にご注意ください。

  • ファイル名は半角英数小文字とアンダーバーのみ使用可能、なおかつ最初の1文字は半角英数小文字のみ
  • 画像サイズが大きすぎるとエラーが出る場合があります。
  • キャラクター(背景の上に表示させる画像)はPNGの24ビットで背景可視を使用しています。

キャラクターを中央に表示させる
サメ
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/character" />

</RelativeLayout>

キャラクターの表示_キャラクターのみ
キャラクターのみ
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView2"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/back"
        android:scaleType="centerCrop" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/character" />

</RelativeLayout>

キャラクターの表示_キャラクターと背景
キャラクターと背景
Android Studio入門

Android Studio 開発【背景画像の設定 】

3分で学ぶ Android Studio【縦横対応-背景画像の設定】800

ゲーム等での背景画像の設定方法です。

「比較的簡単で不都合が少なく幅広く」使用することが出来ます。
また、このサイトで紹介するアプリにはほぼ全て利用可能です。

  • 画面サイズが違っても対応可能
  • 縦画面でも横画面でも対応可能
  • 背景は画面中央に表示される
  • 縮尺は守られ、余白はカットされる
  • 背景のみを表示(タイトルやキャラクターは別)
  • 背景の種類によっては不都合有り
  • 画面の固定を利用するとさらに安定
画面サイズが違っても対応可能
画面サイズが違っても対応可能
Android Studio 【縦横画面に対応】
縦画面、横画面に対応
幅広く利用可能
幅広く利用可能

3分で済ますために細かい説明は省いています。
詳しくは以下の知識が必要で、現在準備中です。

  • アプリケーションの新規作成(準備中)
  • 画像の保存と利用(準備中)

ご自身で画像を用意する場合は以下にご注意ください。

  • ファイル名は半角英数小文字とアンダーバーのみ使用可能、なおかつ最初の1文字は半角英数小文字のみ
  • 画像サイズが大きすぎるとエラーが出る場合があります。

背景画像の設定 【 背景画像 】
サンプル 背景画像
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/back"
        android:scaleType="centerCrop" />
</RelativeLayout>

動画で学ぶ、Androidアプリの作り方

プログラミング基礎 2/8 ~入力ルール~

プログラミング基礎 2/8 ~入力ルール~

プログラミング入力時のルール「注意点」を収録しています。
ルールを知ることで、学習効率を上げ、トラブル防止(挫折防止)に役立って貰えたら幸いです。

難易度 :★☆☆☆☆

以下の予備知識が必要です。

学習の流れ

  1. アプリ新規作成
  2. 入力ルール

入力ルール(MainActivity.java)

  • +-アイコンはくくりの開閉
  • 文字の色は、意味の違い
    • 紫色:意味のある単語( 不用意に編集不可 )
    • 緑色:意味の無いコメント( 自由に編集可能 )
    • ※ 設定により変更可能
  • 赤いマークはエラーマーク
  • 単語と単語は半角スペースで開ける
    1. ○ 複数の半角スペース
    2. ○ タブや改行を入れる
    3. × 全角スペース
    4. × 単語を途中で切る
    5. × 単語をつなげる
    6. × 小文字を大文字に変える
  • 改行や空白は見やすくするため
  • Ctrl + Shift + F で自動調整
  • ;は1行の終わり( 日本語の「。」と同じ )
  • 基本は半角で記入する
  • タブは階層を表している
動画で学ぶ、Androidアプリの作り方

プログラミング基礎 1/8 ~プログラミングとは~

プログラミング基礎 1/8 ~プログラミングとは~

学習内容

スマフォアプリを作成したいけど、プログラミング未経験者を対象にした「プログラミングとは?」の解説動画です。

未経験の方に「プログラミングをマジで動画で教える」を目指した動画、第一弾です。

注意: このシリーズはあくまでも「基礎知識(予備知識)」で、具体的な学習は続編の「プログラミング入門」で行う予定です。

難易度 :★☆☆☆☆

  • スマフォアプリを作りたい方
  • プログラミングは全くの未経験

動画内のスライド紹介

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶスマフォアプリの作り方「プログラミングとは」

動画で学ぶ、Androidアプリの作り方

ボタンとXML

プログラミング未経験者対象の【 Androidアプリ作成動画 】で、このページは「画面作成の基本操作」を解説した動画です。

注意:この動画は未経験者の方の参考動画で、動作を保証するものではありません。
開発バージョン違い、PC環境の違い、文字コード等の設定違いにより、コピペしてもうまく機能しない時があります。

動画で学ぶアプリ開発「ボタンとXMLレイアウト」

アプリの作り方_学習内容

未経験者対象の「画面の作り方」の解説動画です。

「ボタンとRelativeLayout」の内容をXMLで作成する解説動画です。

【 学習の流れ 】

  1. 新規アプリケーション作成
  2. XMLとは
  3. XMLでの画面作成

【 XMLとは 】

  1. 画面を確認してみよう
  2. XML → 文字で画面を作成する文法

【 XML図解 】

動画で学ぶAndroid開発 「XML図解」

XML図解-XMLの書き方

【 XMLでの画面作成 】

  1. 削除と配置をしてみよう。
  2. 横幅を変えてみよう。
  3. 画面の中央に配置してみよう。
  4. ボタンの右寄せ、左寄せ。
  5. 余白を設定してみよう。