Android プログラミング【 画像の回転 】 ~タッチイベントでグルグル ~

Android プログラミング【 画像の回転 】 ~タッチイベントでグルグル ~

画面タップで画像を回転させる動画です。
変数・タッチイベント・オンクリック等の基礎知識が必要です。

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

Application name TestView
Company Domain test.com
Package name com.test.testview

* 注意 *
・画像をご自身で要するにはファイル名やファイルサイズ、拡張子に注意する必要があります。
・ファイル名は半角小文字の英数(a~z 0~9)とアンダーバー( _ )のみで、最初の1文字目は半角英字( a ~ z)のみです。
・慣れてない方はサンプル画像の使用をオススメします。

Android Studio 入門
player
<?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:id="@+id/activity_main"
    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.testview.MainActivity">

    <ImageView
        android:id="@+id/player"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/player" />

</RelativeLayout>
package com.test.testview;

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

public class MainActivity extends AppCompatActivity {

    int i =0;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        i+=5;
        ((ImageView)findViewById(R.id.player)).setRotation(i);    // 中心回転
        return super.onTouchEvent(event);
    }

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

}

以下に書き換えると色々な動きをします。

((ImageView)findViewById(R.id.player)).setRotationX(i);    // 横軸回転
((ImageView)findViewById(R.id.player)).setRotationY(i);    // 縦軸回転
Android プログラミング【 Preference 】 ~ データ保存 ~

Android プログラミング【 Preference 】 ~ データ保存 ~

preferences Android データの保存

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

この動画はpreferences(プリファレンス・データの保存)の基礎学習です。

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

Application name MyPreference
Company Domain test.com
Package name com.test.mypreference

Preference Android タイトル

以下を適切な箇所にコピペすると、数値を保存できます。


// ファイルの準備
SharedPreferences preferences = getSharedPreferences("game_data",MODE_PRIVATE);

// データの保存
SharedPreferences.Editor editor = preferences.edit();
editor.putInt("count",7);
editor.commit();

以下を適切な場所にコピペすると、数値を読み込みます。

// ファイルの準備
SharedPreferences preferences = getSharedPreferences("game_data",MODE_PRIVATE);

// データの読込
int count = preferences.getInt("count" , 0);

データ保存ー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:id="@+id/activity_main"
    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"
    android:gravity="center"
    tools:context="com.test.mypreference.MainActivity">

    <TextView
        android:id="@+id/count"
        android:textSize="60sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</RelativeLayout>

データ保存ーMainActivity.java(完成)

package com.test.mypreference;

import android.content.SharedPreferences;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

        // ファイルの準備
        SharedPreferences preferences = getSharedPreferences("game_data",MODE_PRIVATE);

        // データの保存
        SharedPreferences.Editor editor = preferences.edit();
        editor.putInt("count",7);
        editor.commit();

        // データの読込
        int count = preferences.getInt("count" , 0);

        // データ表示
        ((TextView)findViewById(R.id.count)).setText("" + count);

    }
}
Android プログラミング【 タッチイベント 】 ~ カウンターの作成 ~

Android プログラミング【 タッチイベント 】 ~ カウンターの作成 ~

アンドロイド 開発入門 カウンター

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

タッチイベント(onTouchEvent)を使ったカウンターアプリを作成します。

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

Application name MyCount
Company Domain test.com
Package name com.test.mycount

Android アプリ サンプル カウンター

サンプルアプリ カウンター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:id="@+id/activity_main"
    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"
    android:gravity="center"
    tools:context="com.test.mycount.MainActivity">

    <TextView
        android:id="@+id/count"
        android:textSize="60sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</RelativeLayout>

タッチイベント--~-カウンターの作成-~

package com.test.mycount;

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

public class MainActivity extends AppCompatActivity {

    // カウントデータ
    int count = 0;

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

        ((TextView)findViewById(R.id.count)).setText("0");
    }


    ///////////////////////////////////////////////////
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                // カウントの加算
                count++;
                ((TextView)findViewById(R.id.count)).setText("" + count);
        }
        return super.onTouchEvent(event);
    }

}

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

Android プログラミング 【トースト】Toast 768

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

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

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

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

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

トースト-プロジェクト名

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();
    }
}

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

Android-Toast-解説

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

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

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

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

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

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

Android プログラミング【 EditText 】 ~ 文字加工 ~ 新規作成

<?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>


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 プログラミング【 EditText 】 ~ 文字加工 ~ ポイント

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

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

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

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

  1. 【 文字加工① 】 ~ サイズ変更 ~
  2. 【 文字加工② 】 ~ カラー変更 ~
<?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>

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 プログラミング【 文字加工① 】 ~ サイズ変更 ~

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

Android 開発 【文字サイズ 】768

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

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

  1. 【 文字加工① 】 ~ サイズ変更 ~
  2. 【 文字加工② 】 ~ カラー変更 ~

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

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

Android 【文字加工】新規作成


<?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>


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);
    }
}

onClickポイント

【文字サイズ変更】 ポイント

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

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

Android【アニメーション⑤】複合アニメ 7682

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

  1. 【 アニメーション ① 】 ~ 上下移動 ~
  2. 【 アニメーション ② 】 ~ XML詳細 ~
  3. 【 アニメーション ③ 】 ~ 回転アニメ ~
  4. 【 アニメーション ④ 】 ~ 透明化 ~
  5. 【 アニメーション ⑤ 】 ~ 複合アニメ ~

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

<?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>

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

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 プログラミング 【 アニメーション ④ 】 ~ 透明化 ~

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

Android【アニメーション④】透明化 768

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

  1. 【 アニメーション ① 】 ~ 上下移動 ~
  2. 【 アニメーション ② 】 ~ XML詳細 ~
  3. 【 アニメーション ③ 】 ~ 回転アニメ ~
  4. 【 アニメーション ④ 】 ~ 透明化 ~
  5. 【 アニメーション ⑤ 】 ~ 複合アニメ ~

一度だけ透明化します。(元に戻る)

<?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>

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


<?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>

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

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 プログラミング 【 アニメーション ③ 】 ~ 回転アニメ ~

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

Android【アニメーション③】回転アニメ 768

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

  1. 【 アニメーション ① 】 ~ 上下移動 ~
  2. 【 アニメーション ② 】 ~ XML詳細 ~
  3. 【 アニメーション ③ 】 ~ 回転アニメ ~
  4. 【 アニメーション ④ 】 ~ 透明化 ~
  5. 【 アニメーション ⑤ 】 ~ 複合アニメ ~

「時計回りに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>

「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>

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

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));

    }

}