Swipe操作で１つ前の画面に戻る方法

はじめに

お久しぶりです。
今回はSwipeBackについて解説して行きたいと思います。
IPhoneではデフォルトブラウザにこの機能が搭載されておりますが、Androidでは搭載されておりません。
Androidでは左下の「戻るボタン」を押して１つ前の画面に戻ることが普通ですが、グノシーやスマートニュース等のアプリでは実装されております。
自分は情報系アプリを作成しているので実際に実装してみたところ、やはりスワイプで戻るがある方が便利だと感じ記事にしました。
実際にどんなものかURLを載せておきますのでわからない方はぜひ確認して見てください。
https://media.giphy.com/media/3dcKwpfcH50vAITwWy/giphy.gif

最初に

Gradle Scriptsの中にあるbuild.gradle(Module: app)を開き、

build.gradle

// 上部分省略

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    //noinspection GradleCompatible
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'

//ここを追加
    implementation 'com.r0adkll:slidableactivity:2.0.6'


    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'
}

この部分を追加してください。
最初にこれを追加しないとのちに使うSlidrInterfaceというのが使えなくなってしまうので必ず追加してください。
基本的なことはわかるよ！！　って方はSTEP3から確認をお願いいたします。

STEP1 MainActivityにボタンを配置

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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/openActivity2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="Onclick"
        android:text="Open Activity 2"
        tools:ignore="OnClick" />
</LinearLayout>

LinearLayoutは横一列または縦一列に配置するLayoutです。
Buttonはボタンを配置します。

STEP2 Activityをもう１つ作る

Activityをもう１つ作ります。名前はactivity_one.xmlとします。

activity_one.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ActivityOne">
    <ImageView
        android:src="@drawable/another_activity_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

ImageViewは画像を配置してくれます。
この場合は自作で作った赤い画像が表示されます。

準備が整いました。次に行ってみましょう。

STEP3 MainActivity、ActivityOneの編集

MainActivityではボタンを有効にします。

ActivityMain.java

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

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button btn = findViewById(R.id.openActivity2);
        btn.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        Intent intent = new Intent(MainActivity.this, ActivityOne.class);
        startActivity(intent);
    }
}

OnClickを有効にする事でActivityOneに画面遷移します。
超簡単に説明するとIntentを利用することで現在の画面から違う画面へと移動する事ができるようになります。
Intentの処理がよくわからないという方はこちらを参考にすると良いと思います。

https://techacademy.jp/magazine/2719

次にActivityOneの編集です。

ActivityOne.java

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

public class ActivityOne extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_one);
    }
}

これで単純な画面遷移ができました。

ここから解説です。
「はじめに」で
implementation 'com.r0adkll:slidableactivity:2.0.6'
を追加したことによりSlidrInterfaceというクラスを利用できるようになります。
ActivityOneに記述して行きます。

ActivityOne.java

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

import com.r0adkll.slidr.Slidr;
import com.r0adkll.slidr.model.SlidrInterface;


public class ActivityOne extends AppCompatActivity {
// ここに追加
    private SlidrInterface slidr;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_one);
// ここに追加
        slidr = Slidr.attach(this);
    }
}

STEP4 styles.xml、manifests.xmlの編集

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
// ここから追加
    <style name="AppTheme.SlidrActivityTheme" parent="AppTheme">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
    </style>
</resources>

最後にmanifests.xmlを編集して完成です。

manimests.xml

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        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>
        <activity
            android:name=".ActivityOne"
            android:theme="@style/AppTheme.SlidrActivityTheme"/> 

    </application>

.ActivityOneに先ほど作成したテーマSlidrActivityThemeを追加して完成です。

slidr = Slidr.attach(this);

ここの部分がうまく解説できませんでした。
どなたか知っている方がいらしたらコメントをお願いいたします。
また後ほどではありますが、githubの方にソースを公開したいと思います。

今回参考にさせていただいたサイトURL
https://www.youtube.com/watch?v=h-74bLrng2M

動画で手順をおって作ってくれたのでわかりやすかったです。