Posted at

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


はじめに

お久しぶりです。

今回はSwipeBackについて解説して行きたいと思います。

IPhoneではデフォルトブラウザにこの機能が搭載されておりますが、Androidでは搭載されておりません。

Androidでは左下の「戻るボタン」を押して1つ前の画面に戻ることが普通ですが、グノシーやスマートニュース等のアプリでは実装されております。

自分は情報系アプリを作成しているので実際に実装してみたところ、やはりスワイプで戻るがある方が便利だと感じ記事にしました。

実際にどんなものか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>


image.png

LinearLayoutは横一列または縦一列に配置するLayoutです。

Buttonはボタンを配置します。


STEP2 Activityをもう1つ作る

Activityをもう1つ作ります。名前は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は画像を配置してくれます。

この場合は自作で作った赤い画像が表示されます。

image.png

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


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

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