Android – ページ 4 – ハコニワデザイン

Android プログラミング【タッチイベント】 ~ 画面タッチで文字変更 ~

2016年4月30日2016年11月24日たんたむ

アプリ開発初心者用の学習動画です。

画面タッチ時の処理を勉強する動画です。
ここでは、「画面をタッチすると文字が変わる」をサンプルに取り上げたいと思います。

プロジェクト名

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name MyTouch
Company Domain test.com
Package name com.test.mytouch

activity_main.xml (完成)


<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.test.mytouch.MainActivity">

    <TextView
        android:textSize="40sp"
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="タッチしてね！" />
</RelativeLayout>

MainActivity.java（完成）



package com.test.mytouch;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

    // タッチイベント（画面タッチを感知する）
    @Override
    public boolean onTouchEvent(MotionEvent event) {

        // 文字の変更
        ((TextView)findViewById(R.id.text)).setText("タッチしたよ！！");

        return super.onTouchEvent(event);
    }
}

Android プログラミング【トーストの表示】 ~ 簡易ポップアップ ~

2016年4月30日2016年5月18日たんたむ

簡易的ポップアップを表示するプログラミングです。
超初心者用の動画で、トーストが使えると今後の学習に便利です。

ポイント

適切な箇所に以下の１行とインポートでOK。

import android.widget.Toast;
Toast.makeText(this,"こんにちは！", Toast.LENGTH_SHORT).show();

プロジェクト名

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name TouchTest
Company Domain test.com
Package name com.test.touchtest

MainActivity.java（完成）

package com.test.touchtest;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    ///////////////////////////////////////////////////////////
    // アプリケーション起動時に実行される処理
    ///////////////////////////////////////////////////////////
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // トーストの表示  ////////////////////////////
        Toast.makeText(this,"こんにちは！", Toast.LENGTH_SHORT).show();

    }


    ///////////////////////////////////////////////////////////
    // アプリケーション終了時に実行される処理
    // * 今回は「戻るボタンで呼び出される」の認識でOK
    ///////////////////////////////////////////////////////////
    @Override
    protected void onDestroy() {
        super.onDestroy();

        // トーストの表示  ////////////////////////////
        Toast.makeText(this,"さようなら！", Toast.LENGTH_SHORT).show();
    }
}

Toast解説

トーストの簡単な解説です。
アプリが複雑の場合起動しない時があります。

Android プログラミング【アクティビティ⑥ 】 ~ ゲームの画面移行 ~

2016年3月3日2016年3月5日たんたむ

擬似的なゲームを想定し、画面移行を学習する動画です。

アクティビティ 1~5

この動画は以前UPしたアクティビティの続編です。以下を先に御覧ください。

画面移行

Activity 画面移行

プロジェクト名

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name RpgGame
Company Domain test.com
Package name com.test.rpggame

Activity 新規プロジェクト

使用素材

学習に使用する素材です。
ご自身で用意する場合はファイル名や拡張子、ファイルサイズにご注意ください。
初心者の方はサンプルを使用することを強くおすすめします。

ファイル構造

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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="com.test.rpggame.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/main" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:onClick="onButton1"
        android:text="スタート"
        android:textSize="30sp" />
</RelativeLayout>

activity_play.xml

<?xml version="1.0" encoding="utf-8"?>
<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="com.test.rpggame.PlayActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/play" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:onClick="onButton2"
        android:text="アタック"
        android:textSize="30sp" />

</RelativeLayout>

activity_over.xml

<?xml version="1.0" encoding="utf-8"?>
<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="com.test.rpggame.OverActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/over" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:onClick="onButton3"
        android:text="タイトルに戻る"
        android:textSize="30sp" />

</RelativeLayout>

MainActivity.java

package com.test.rpggame;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

    public void onButton1(View v) {
        Intent intent = new Intent(this, PlayActivity.class);
        startActivity(intent);
    }
}

PlayActivity.java

package com.test.rpggame;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class PlayActivity extends AppCompatActivity {

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

    public void onButton2(View v) {
        Intent intent = new Intent(this, OverActivity.class);
        startActivity(intent);
        finish();
    }
}

OverActivity.java

package com.test.rpggame;

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

public class OverActivity extends AppCompatActivity {

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

    public void onButton3( View v){
        finish();
    }
}

Android プログラミング【 EditText 】 ~ 文字加工 ~

2016年2月29日2016年6月28日たんたむ

ユーザーの入力文字を取得し、利用する方法を学習します。

プロジェクト名

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name EditText
Company Domain test.com
Package name com.test.edittext

activity_main.xml (完成)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.test.edittext.MainActivity">


    <EditText
        android:id="@+id/et"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:onClick="onButton"
        android:text="セット"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ダミー"
        android:textSize="30sp" />

</LinearLayout>

MainActivity.java (完成)


package com.test.edittext;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

    public void onButton( View v){
        // 文字の取り出し
        String s = ((EditText)findViewById(R.id.et)).getText().toString();
        // 文字のセット
        ((TextView)findViewById(R.id.tv)).setText(s);
    }
}

ポイント

Android プログラミング【文字加工② 】 ~ カラー変更 ~

2016年2月13日2016年2月24日たんたむ

android プログラミングの基礎学習です。
ボタンクリックで文字カラーを変更します。

動画リスト

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

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.test.text.MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="b1"
        android:text="赤"
        android:textSize="30sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="b2"
        android:text="青"
        android:textSize="30sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="b3"
        android:text="黄"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="サンプル"
        android:textSize="30sp" />
</LinearLayout>

MainActivity.java (完成)

package com.test.text;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

    // クリック処理
    public void b1(View v){
        // 文字カラー変更
        ((TextView)findViewById(R.id.text)).setTextColor(Color.RED);
    }

    public void b2(View v){
        ((TextView)findViewById(R.id.text)).setTextColor(Color.BLUE);
    }

    public void b3(View v){
        ((TextView)findViewById(R.id.text)).setTextColor(Color.YELLOW);
    }

}

Android プログラミング【文字加工① 】 ~ サイズ変更 ~

2016年2月13日2016年2月24日たんたむ

android プログラミングの基礎学習です。
ボタンクリックで文字サイズを変更します。

動画リスト

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

プロジェクト名

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name Text
Company Domain test.com
Package name com.test.text

activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.test.text.MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="b1"
        android:text="24sp"
        android:textSize="30sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="b2"
        android:text="48sp"
        android:textSize="30sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="b3"
        android:text="96sp"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="サンプル"
        android:textSize="30sp" />
</LinearLayout>

MainActivity.java (完成)

package com.test.text;

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

public class MainActivity extends AppCompatActivity {

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

    // クリック処理
    public void b1(View v){
        // 文字サイズ変更
        ((TextView)findViewById(R.id.text)).setTextSize(24);
    }

    public void b2(View v){
        ((TextView) findViewById(R.id.text)).setTextSize(48);
    }

    public void b3(View v){
        ((TextView) findViewById(R.id.text)).setTextSize(92);
    }
}

ポイント

Android プログラミング【アニメーション ⑤ 】 ~ 複合アニメ ~

2016年1月31日2016年2月1日たんたむ

動画リスト

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

a4.xml ( 上下 + 回転 )

上下移動しながら回転します。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:repeatCount="-1"
        android:repeatMode="reverse"
        android:toYDelta="10%" />

    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:startOffset="1000"
        android:toDegrees="360" />
</set>

MainActivity.java

前回の【アニメーション ① 】 ~上下移動~ に修正を加えます。

package com.test.anim;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.AnimationUtils;

public class MainActivity extends AppCompatActivity {

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

        findViewById(R.id.monster).startAnimation(AnimationUtils.loadAnimation(this, R.anim.a4));

    }

}

Android プログラミング【アニメーション ④ 】 ~ 透明化 ~

2016年1月31日2016年2月1日たんたむ

動画リスト

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

a3.xml ( 透明化 )

一度だけ透明化します。（元に戻る）

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0" />
</set>

a3.xml ( 透明を維持 )

一度だけ透明化しますが、元に戻りません。（透明を維持）


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0" />
</set>

MainActivity.java

前回の【アニメーション ① 】 ~上下移動~ に修正を加えます。

package com.test.anim;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.AnimationUtils;

public class MainActivity extends AppCompatActivity {

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

        findViewById(R.id.monster).startAnimation(AnimationUtils.loadAnimation(this, R.anim.a3));

    }

}

Android プログラミング【アニメーション ③ 】 ~ 回転アニメ ~

2016年1月31日2016年2月1日たんたむ

動画リスト

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

a2.xml

「時計回りに1回」回転するアニメーションです。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:startOffset="1000"
        android:duration="1000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />
</set>

a2.xml

「1秒おきに、時計回りを繰り返す」アニメーションです。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:startOffset="1000"
        android:toDegrees="360" />

</set>

MainActivity.java

前回の【アニメーション ① 】 ~上下移動~ に修正を加えます。

package com.test.anim;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.AnimationUtils;

public class MainActivity extends AppCompatActivity {

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

        findViewById(R.id.monster).startAnimation(AnimationUtils.loadAnimation(this, R.anim.a2));

    }

}

Android プログラミング【アニメーション ② 】 ~XML詳細~

2016年1月31日2016年2月1日たんたむ

前回の【アニメーション ① 】 ~上下移動~ の続編です。
アニメーション設定ファイルの解説動画です。

動画リスト

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

アニメーション詳細

前回の【アニメーション ① 】 ~上下移動~ 内で出てきた a1.xml の解説です。

プロジェクト名

activity_main.xml (完成)

MainActivity.java（完成）

ポイント

プロジェクト名

MainActivity.java（完成）

Toast解説

アクティビティ 1~5

画面移行

プロジェクト名

使用素材

ファイル構造

activity_main.xml

activity_play.xml

activity_over.xml

MainActivity.java

PlayActivity.java

OverActivity.java

プロジェクト名

activity_main.xml (完成)

MainActivity.java (完成)

ポイント

動画リスト

activity_main.xml

MainActivity.java (完成)

動画リスト

プロジェクト名

activity_main.xml

MainActivity.java (完成)

ポイント

動画リスト

a4.xml ( 上下 + 回転 )

MainActivity.java

動画リスト

a3.xml ( 透明化 )

a3.xml ( 透明を維持 )

MainActivity.java

動画リスト

a2.xml

a2.xml

MainActivity.java

動画リスト

アニメーション 詳細

アニメーション詳細