5分で学ぶ Android プログラミング

Android Studio入門

Android プログラミング【 アクティビティ② 】 ~ 画面の作成 ~

たんたむ

Android 【アクティビティ2 】 画面の作成 768

アプリ開発に必須のアクティビティを学習します。
今回は３つの画面を作り、作成されるファイルを確認します。

動画リスト

この動画はシリーズ物です。以下の順にご覧ください。

  1. 【 アクティビティ① 】 ~ アクティビティとは ~
  2. 【 アクティビティ② 】 ~ 画面の作成 ~
  3. 【 アクティビティ③ 】 ~ 画面の編集 ~
  4. 【 アクティビティ④ 】 ~ 画面の切替 ~
  5. 【 アクティビティ⑤ 】 ~ 画面を閉じる ~

完成の確認

アンドロイド 【１画面に２ファイル】

作成の流れ

画面の作成（アクティヴィティの作成）は、細かい詳細を省くと超カンタンです。
以下の流れで作成できますので、確認してください。

アクティビティの作成 【画面を開く】

アクティビティの作成②-名前の入力
② 名前の入力

アクティビティの作成③-作成の確認
③ 作成の確認
アクティビティの作成④-画面の編集
④ 画面の編集
Android Studio入門

Android プログラミング【 アクティビティ① 】 ~ アクティビティとは ~

たんたむ

Android 【 アクティビティ1】 アクティビティとは？ 768

アプリ開発に必須のアクティビティを学習します。
アクティビティを簡単に言うと「画面」です。

かなり重要な項目ですが、挫折ポイントでもある難問です。
焦らずにまずは「慣れ」を目指してください。

動画リスト

この動画はシリーズ物です。以下の順にご覧ください。

  1. 【 アクティビティ① 】 ~ アクティビティとは ~
  2. 【 アクティビティ② 】 ~ 画面の作成 ~
  3. 【 アクティビティ③ 】 ~ 画面の編集 ~
  4. 【 アクティビティ④ 】 ~ 画面の切替 ~
  5. 【 アクティビティ⑤ 】 ~ 画面を閉じる ~

解説

アクティビティとは-１

アクティビティとは-２

Android Studio入門

Android プログラミング【 ボタンで文字変更 】

たんたむ

5分で学ぶ Android プログラミング 【 ボタンで文字の変更 】768

動画の内容

前回の「ボタンで画像変更」に「文字の変更」を追加します。

画面のボタンクリックで背景画像と説明文が変更します。

ポイント

前回の動画に以下を追加すると可能です。（ コピペでOK ）

activity_main.xml

    <TextView
        android:id="@+id/t0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="aaaaaaaaaa"
        android:textSize="30dp" />

MainActivity.java

import android.widget.TextView;
((TextView)findViewById(R.id.t0)).setText("０mだよー");

activity_main.xml

画面作りは簡略化します。コピペでOKです。


<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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/back"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/b0" />

    <Button
        android:id="@+id/b0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="b0"
        android:text="0m" />

    <Button
        android:id="@+id/b1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/b0"
        android:onClick="b1"
        android:text="10m" />

    <Button
        android:id="@+id/b2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/b1"
        android:onClick="b2"
        android:text="20m" />

    <TextView
        android:id="@+id/t0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="あああああ"
        android:textSize="30sp" />

</RelativeLayout>

MainActivity.java

プログラミング（動的な変化）です。赤文字を適切な場所にコピペすると動くはずです。

package com.test.test0811;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    // 0mのボタン
    public void b0(View v) {
        // 画像の変更 （b0画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b0);
        ((TextView) findViewById(R.id.t0)).setText("浮上したよ");
    }

    // 10mのボタン
    public void b1(View v) {
        // 画像の変更 （b1画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b1);
        ((TextView) findViewById(R.id.t0)).setText("10mです");
    }

    // 20mのボタン
    public void b2(View v) {
        // 画像の変更 （b2画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b2);
        ((TextView) findViewById(R.id.t0)).setText("20mまで潜ったよ！");
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

ポイント

【解説】文字変更

Android Studio入門

Android プログラミング【 ボタンで画像変更 】

たんたむ

5分で学ぶ Android プログラミング 【 ボタンで背景変更 】768

前編 → YouTube
後編 → YouTube

動画の内容

画面上にボタンを配置して「ボタンを押すと背景画像が変わる」を学習します。
もちろん、背景画像だけで無く、キャラクター自信や表情も変更できます。

画像全般に対応

作成の流れ

今回は「新規作成から完成」までを動画に納めたいので、細かい解説は省かせてもらいます。(m_m)
詳細は以下リンク先をご覧ください。

使用素材

以下、背景画像をパソコン内に保存し、アプリ内のdrawableフォルダーに保存してください。

5分で学ぶ Androidアプリ【背景画像】b0
b0
5分で学ぶ Androidアプリ【背景画像】b1
b1
5分で学ぶ Androidアプリ【背景画像】b2
b2
5分で学ぶ Androidアプリ【背景画像】b3
b3
5分で学ぶ Androidアプリ【背景画像】b4
b4
5分で学ぶ Androidアプリ【背景画像】b5
b5

activity_main.xml

画面作りは簡略化します。コピペでOKです。

<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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/back"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/b0" />

    <Button
        android:id="@+id/b0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="b0"
        android:text="0m" />

    <Button
        android:id="@+id/b1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/b0"
        android:onClick="b1"
        android:text="10m" />

    <Button
        android:id="@+id/b2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/b1"
        android:onClick="b2"
        android:text="20m" />

</RelativeLayout>

MainActivity.java

プログラミング（動的な変化）です。赤文字を適切な場所にコピペすると動くはずです。

package com.test.testf;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    // 0mのボタン
    public void b0(View v) {
        // 画像の変更 （b0画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b0);
    }

    // 10mのボタン
    public void b1(View v) {
        // 画像の変更 （b1画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b1);
    }

    // 20mのボタン
    public void b2(View v) {
        // 画像の変更 （b2画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b2);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

ポイント

プログラムの流れ

画像が変更！！

Android Studio入門

Android プログラミング【 Viewの非表示 】

たんたむ

5分で学ぶAndroidプログラミング【Viewの非表示】

動画の内容

前回学習した「文字枠の追加」の「文字枠」を非表示にする方法です。
この動画の前に「文字枠の追加」を済ませておいてください。

Viewの非表示【TextViewを非表示にする】
TextViewを非表示にする

応用で「タイトルボタンを非表示にする」などかなり幅広く使える命令です。

Viewの非表示【幅広く利用可能】
幅広く利用可能

activity_main.xml （完成）

<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" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/charText"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:textSize="40dp"
        android:layout_marginBottom="20dp" />


</RelativeLayout>

MainActivity.java （完成）

アプリケーション起動時に文字枠（TextView）の非表示

package com.test.test; // この行はコピペするとエラーが出ます。（アプリ毎に違う内容になる）

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;


public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 文字枠の非表示
        findViewById(R.id.charText).setVisibility(View.INVISIBLE);
    }

    // 以下略 （変更不要）
    
}

ポイント

findViewById(R.id.●●).setVisibility(View.INVISIBLE);
Viewの非表示【適切な場所にコピペするだけ】
Viewの非表示【適切な場所にコピペするだけ】
Viewの非表示【 解説 】
Viewの非表示【 解説 】

activity_main.xml （おまけ・非表示→表示）

アプリケーション起動時に非表示 → オプションメニュー選択で表示

<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" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/charText"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:textSize="40dp"
        android:layout_marginBottom="20dp" />


</RelativeLayout>