Android Studio入門

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 Studio入門

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

    }

}

Android Studio入門

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

Android 【アニメーション②】XML詳細 768

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

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

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

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

Android 開発【アニメ② 移動 】図解

Android Studio入門

Android プログラミング【 アクティビティ③ 】 ~ 画面の編集 ~

Android 【アクティビティ3 】 画面の編集 768

前回作成した画面を編集します。
編集するファイルを、間違わなかったら問題ないと思います。

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

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

メインのタイトル画面です。
タイトルと画面切り替えのためのボタンが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.activity.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="タイトル画面"
        android:textSize="30sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onButton1"
        android:text="設定画面"
        android:textSize="30sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onButton2"
        android:text="ギャラリー"
        android:textSize="30sp" />
</LinearLayout>

設定画面です。
「設定」は名ばかりで、タイトルと背景色のみ編集します。

設定画面


<?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:background="#ffaaff"
    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.activity.Setting">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="設定画面"
        android:textSize="30sp" />
</RelativeLayout>

ギャラリー画面です。
ギャラリー画面も、タイトルと背景色のみ編集します。

ギャラリー画面

<?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:background="#88ffff"
    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.activity.Gallery">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ギャラリー"
        android:textSize="30sp" />

</RelativeLayout>

Android Studio入門

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

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

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

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

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

アンドロイド 【1画面に2ファイル】

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

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

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

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

Android Studio 入門【 画面分割③ 】~下揃え~

Android-【画面分割】 下揃え 768

画面下部にキャラクター(画像)を並べるレイアウトです。
もちろん、アイコンやメニューを並べることも可能です。

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

  1. 【 画面分割① 】~均等分割~
  2. 【 画面分割② 】~比率で配置~
  3. 【 画面分割③ 】~下揃え~
  4. 【 画面分割④ 】~複数レイアウト~

画面が縦でも横でもそれなりに見える作りを目指しました。

Android レイアウト 縦横画面対応

レイアウトと画像の順番、配置にご注意してください。

Android Studio デザインタブ

画面下部に画像を配置します。
横画面、縦画面でも比率を守って表示されると思います。

<?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="centerCrop"
        android:src="@drawable/back" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:scaleType="fitEnd"
            android:layout_weight="1"
            android:src="@drawable/p0"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
             />

        <ImageView
            android:scaleType="fitEnd"
            android:layout_weight="1"
            android:src="@drawable/p1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <ImageView
            android:scaleType="fitEnd"
            android:layout_weight="1"
            android:src="@drawable/p2"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <ImageView
            android:scaleType="fitEnd"
            android:layout_weight="1"
            android:src="@drawable/p3"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>


</RelativeLayout>

Android レイアウト【XML解説】

Android Studio入門

Android Studio 入門【 画面分割② 】~比率で配置~

Android-【画面分割】比率で配置-768

画像の幅や高さを比率で配置ます。
具体的には「画面の3割」や「2対1」などで配置できます。

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

  1. 【 画面分割① 】~均等分割~
  2. 【 画面分割② 】~比率で配置~
  3. 【 画面分割③ 】~下揃え~
  4. 【 画面分割④ 】~複数レイアウト~

前回の【 画面分割① 】~均等分割~ とほぼ同じですが、以下を変更しています。


<?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="centerCrop"
        android:src="@drawable/back" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:src="@drawable/m0" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:src="@drawable/p0" />
    </LinearLayout>

</RelativeLayout>

アンドロイド XML図解2

Android Studio入門

Android Studio 入門【 画面分割① 】~均等分割~

Android-【画面分割】均等分割-768

画像を均等に並べる方法です。
縦画面でも横画面でも対応できます。

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

  1. 【 画面分割① 】~均等分割~
  2. 【 画面分割② 】~比率で配置~
  3. 【 画面分割③ 】~下揃え~
  4. 【 画面分割④ 】~複数レイアウト~

画面が縦でも横でもそれなりに見える作りを目指します。

Nexus4 Nexus5 Nexus9 比較

RPG画面 使用素材 モンスター
m0:モンスター
RPG画面 使用素材 プレーヤー
p0:プレーヤー
RPG画面 使用素材 ヒロイン
p1:ヒロイン
RPG画面 使用素材 武器屋
p2:武器屋
RPG画面 使用素材 雑貨屋
p3:雑貨屋
RPG画面使用素材 背景
back:背景

レイアウトや画像の並びを確認しておきます。

android Studio デザインタブ

高さを均等で配置しています。

<?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="centerCrop"
        android:src="@drawable/back" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/m0" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/p0" />
    </LinearLayout>

</RelativeLayout>

Android 画面分割 【XML図解】

Android Studio入門

15分で作る? 【バイブレーション①】~ 基礎編 ~

Android-Studio-入門【簡易版】タイトル768C

「15分で作る」シリーズはある程度知識のある方向けの動画です。
未経験の方でもコピペで再現出来るように目指していますが、理解には「RPGで学ぶ」「3分で学ぶ」を先にご覧ください。

バイブレーション(振動)を起動します。
限りなくシンプルに「とにかく起動すればOK」を目指した動画です。

難易度:★★☆☆☆ 未経験でも再現は簡単、アレンジは難しい

※ エミュレーターでは起動しません。
※ バイブ機能の有る実機のみテスト出来ます。

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

  1. 【バイブレーション①】~ 基礎編 ~
  2. 【バイブレーション②】~ 停止処理 ~
  3. 【バイブレーション③】~ リズム版 ~
  4. 【バイブレーション④】~ チェック版 ~

バイブレーションの起動はとても簡単です。
最短2行の入力とインポートだけで起動する事ができます。

バイブレーションの使用許可を記載します。

<uses-permission android:name="android.permission.VIBRATE" />

バイブレーションの実行を記載します。

((Vibrator) getSystemService(Context.VIBRATOR_SERVICE)).vibrate(1000);

AndroidManifest.xmlにパーミッション(使用許可)を1行追加します。
サンプルソースの5行目になります。

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

    <uses-permission android:name="android.permission.VIBRATE" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

画面中央にボタンを配置します。
バイブレーションのスタートボタンになります。

<?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=".MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onStart"
        android:text="START"
        android:textSize="50dp" />
    
</LinearLayout>

ボタンクリック時にバイブレーションが鳴ります。
本体の「バイブレーション有無」はチェックしていません。

package com.test.vibration;

import android.content.Context;
import android.os.Vibrator;
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);
    }

    // STARTボタン    //////////////////////////////////
    public void onStart( View v){

        // バイブレーションスタート(1秒:1000ミリ秒)
        ((Vibrator) getSystemService(Context.VIBRATOR_SERVICE)).vibrate(1000);

    }
}

Android Studio入門

Android Studio 入門【 HorizontalScrollView 】写真の横スクロール

Android Studio 入門【スクロールビュー】写真 768

写真を横スクロールさせる方法です。
前回のScrollViewの復習になりますので、解説はほぼ省いています。

教材のサンプル写真です。
以下の素材サイト様からお借りしています。

写真素材ぱくたそ https://www.pakutaso.com

* 注意 *
・画像をご自身で要するにはファイル名やファイルサイズ、拡張子に注意する必要があります。
・ファイル名は半角小文字の英数(a~z 0~9)とアンダーバー( _ )のみで、最初の1文字目は半角英字( a ~ z)のみです。
・ファイルサイズが大きすぎるとエラーが出る場合があります。

ScrollView【写真のスクロール】
i1
ScrollView【写真のスクロール】
i2
ScrollView【写真のスクロール】
i3
ScrollView【写真のスクロール】
i4
ScrollView【写真のスクロール】
i5
ScrollView【写真のスクロール】
i6
ScrollView【写真のスクロール】
i7
ScrollView【写真のスクロール】
i8

ScrollView【写真のスクロール】
i9
<?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=".MainActivity">

    <HorizontalScrollView
        android:id="@+id/horizontalScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/i1" />

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/i2" />

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/i3" />

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/i4" />
        </LinearLayout>
    </HorizontalScrollView>
</RelativeLayout>