AndroidでGravityViewを使う方法｜モーションセンサーで画像を動かすUIの実装手順

GravityViewとは？

Android向けの「GravityView」は、デバイスが備えるモーションセンサー（重力センサー）を活用できるライブラリです。ユーザーが端末を左右に傾けるだけで、画像やコンテンツをスムーズに操作できるため、商品紹介ページなどインタラクティブな演出を加えたい場面で活躍します。

本記事では、実際のコード例を通じて、AndroidアプリにGravityViewを導入する方法をステップごとに解説します。

実装手順

ステップ1：新規プロジェクトを作成する

まずはAndroid Studioで新しいプロジェクトを作成しましょう。メニューから「File」→「New Project」を選択し、必要な項目を入力してプロジェクトを生成します。

ステップ2：build.gradleに依存関係を追加する

次にbuild.gradleファイルを開き、デザインサポートライブラリおよびGravityViewライブラリの依存関係を追加します。

apply plugin: 'com.android.application'
android {
    packagingOptions {
        exclude 'META-INF/proguard/androidx-annotations.pro'
    }
    packagingOptions {
        exclude 'META-INF/DEPENDENCIES'
        exclude 'META-INF/LICENSE'
        exclude 'META-INF/LICENSE.txt'
        exclude 'META-INF/license.txt'
        exclude 'META-INF/NOTICE'
        exclude 'META-INF/NOTICE.txt'
        exclude 'META-INF/notice.txt'
        exclude 'META-INF/ASL2.0'
    }
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.andy.myapplication"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
   implementation fileTree(dir: 'libs', include: ['*.jar'])
   implementation 'com.android.support:appcompat-v7:28.0.0'
   implementation 'com.android.support.constraint:constraint-layout:1.1.3'
   implementation 'co.gofynd.library:gravity-view:1.0'
   testImplementation 'junit:junit:4.12'
   androidTestImplementation 'com.android.support.test:runner:1.0.2'
   androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

ポイントとなるのは co.gofynd.library:gravity-view:1.0 の行です。ここでGravityViewライブラリをプロジェクトに組み込んでいます。

ステップ3：レイアウトファイル（activity_main.xml）を編集する

続いて、res/layout/activity_main.xml に以下のコードを追加します。

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout xmlns:android = "https://schemas.android.com/apk/res/android"
   android:id = "@+id/activity_main"
   android:layout_width = "match_parent"
   android:layout_height = "wrap_content">
   <HorizontalScrollView
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content"
      android:scrollbars = "none">
      <ImageView
         android:id = "@+id/imageView"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content" />
   </HorizontalScrollView>
</RelativeLayout>

上記のコードでは、画像を横方向にスクロールさせるためのHorizontalScrollViewと、画面に画像を表示するためのImageViewを配置しています。

ステップ4：MainActivity.javaに処理を記述する

最後に、src/MainActivity.java に以下のコードを追加します。

package com.example.andy.myapplication;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import co.gofynd.gravityview.GravityView;
public class MainActivity extends AppCompatActivity {
    GravityView gravityView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView imageView = findViewById(R.id.imageView);
        gravityView = GravityView.getInstance(this);
        boolean is_supported = gravityView.deviceSupported();
        if(is_supported) {
            gravityView
            .setImage(imageView,R.drawable.back)
            .center();
        }
    }
    @Override
    protected void onResume() {
        super.onResume();
        gravityView.registerListener();
    }
    @Override
    protected void onStop() {
        super.onStop();
        gravityView.unRegisterListener();
    }
}

このコードでは、drawableフォルダにある「back」という名前の画像を読み込んでいます。そのため、事前にdrawableフォルダへスクロール表示させたい画像を配置しておいてください。

また、deviceSupported() メソッドでセンサー対応の有無を判定し、対応端末でのみGravityViewを有効化しています。onResume() でリスナーを登録し、onStop() で解除することで、不要なバッテリー消費を防ぐ構成になっています。

アプリを実行して動作を確認しよう

それではアプリを実行してみましょう。ここでは、実際のAndroidスマートフォンをパソコンに接続している前提で進めます。

Android Studioでプロジェクト内のアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックしてください。表示される選択肢から自分のモバイルデバイスを選択すると、スマートフォンの画面にアプリの初期状態が表示されます。

起動直後は画像の中央部分が表示されています。ここでスマートフォンを左や右に傾けてみてください。端末の傾きに応じて画像がスクロールし、以下のような結果が得られます。