横スクロールしたとき、ボタンが必ず画面の中心に止まる方法

前提・実現したいこと

横スクロールをしたときに、中途半端なところでボタンが止まらず、画面の中心に止まるようにしたいです。
（スナップと言うんでしょうか…）
イメージは横スクロールのモード選択みたいな感じです。

発生している問題・エラーメッセージ

横スクロールはHorizontalScrollViewを使用し、完成しましたが
そこからどのようにコードを組めば上の実現したいことができるのかわからなくて困っています。

該当のソースコード

MainActivity
1
2public class MainActivity extends AppCompatActivity {
3
4    @Override
5    protected void onCreate(Bundle savedInstanceState) {
6        super.onCreate(savedInstanceState);
7        setContentView(R.layout.activity_main);
8    }
9}

activitymain
1<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
2    xmlns:app="http://schemas.android.com/apk/res-auto"
3    xmlns:tools="http://schemas.android.com/tools"
4    android:layout_width="match_parent"
5    android:layout_height="match_parent"
6    tools:context=".MainActivity">
7
8    <ImageView
9        android:layout_width="match_parent"
10        android:layout_height="match_parent"
11        android:scaleType="centerCrop"
12        android:src="@drawable/haikei" />
13
14    <HorizontalScrollView
15        android:layout_width="match_parent"
16        android:layout_height="match_parent"
17        tools:layout_editor_absoluteX="172dp"
18        tools:layout_editor_absoluteY="136dp">
19
20        <LinearLayout
21            android:layout_width="wrap_content"
22            android:layout_height="match_parent"
23            android:gravity="center"
24            android:orientation="horizontal"
25            android:paddingLeft="50dp"
26            android:paddingRight="50dp">
27
28            <ImageButton
29                android:id="@+id/imageButton"
30                android:layout_width="298dp"
31                android:layout_height="445dp"
32                android:layout_marginEnd="50dp"
33                android:layout_weight="1"
34                android:background="#00000000"
35                android:scaleType="fitXY"
36                app:srcCompat="@drawable/a" />
37
38            <ImageButton
39                android:id="@+id/imageButton2"
40                android:layout_width="298dp"
41                android:layout_height="445dp"
42                android:layout_marginEnd="50dp"
43                android:layout_weight="1"
44                android:background="#00000000"
45                android:scaleType="fitXY"
46                app:srcCompat="@drawable/b" />
47
48            <ImageButton
49                android:id="@+id/imageButton3"
50                android:layout_width="298dp"
51                android:layout_height="445dp"
52                android:layout_marginEnd="50dp"
53                android:layout_weight="1"
54                android:background="#00000000"
55                android:scaleType="fitXY"
56                app:srcCompat="@drawable/c" />
57
58            <ImageButton
59                android:id="@+id/imageButton4"
60                android:layout_width="298dp"
61                android:layout_height="445dp"
62                android:layout_marginEnd="50dp"
63                android:layout_weight="1"
64                android:background="#00000000"
65                android:scaleType="fitXY"
66                app:srcCompat="@drawable/d" />
67
68            <ImageButton
69                android:id="@+id/imageButton5"
70                android:layout_width="298dp"
71                android:layout_height="445dp"
72                android:layout_marginEnd="50dp"
73                android:layout_weight="1"
74                android:background="#00000000"
75                android:scaleType="fitXY"
76                app:srcCompat="@drawable/e" />
77
78            <ImageButton
79                android:id="@+id/imageButton6"
80                android:layout_width="298dp"
81                android:layout_height="445dp"
82                android:layout_marginEnd="50dp"
83                android:layout_weight="1"
84                android:background="#00000000"
85                android:scaleType="fitXY"
86                app:srcCompat="@drawable/f" />
87
88            <ImageButton
89                android:id="@+id/imageButton7"
90                android:layout_width="298dp"
91                android:layout_height="445dp"
92                android:layout_marginEnd="50dp"
93                android:layout_weight="1"
94                android:background="#00000000"
95                android:scaleType="fitXY"
96                app:srcCompat="@drawable/g" />
97
98
99        </LinearLayout>
100    </HorizontalScrollView>
101
102</androidx.constraintlayout.widget.ConstraintLayout>
103

補足情報（FW/ツールのバージョンなど）

javaで作成しています。
インターネットで同じようなことに挑戦しているサイトはいくつかありましたが、理解が追い付かず自分のコードに落とし込めない初心者です。
大変申し訳ないですが、丁寧に説明いただくとありがたいです。
よろしくお願いいたします。

jimbe

2021/10/15 10:46

> インターネットで同じようなことに挑戦しているサイトはいくつかありましたどうも言葉だけではイメージが掴みにくいので、可能でしたらそのサイトURLをご質問を編集して追記して頂けませんか。

roatt

2021/10/15 11:03

ご返信ありがとうございます！以下、URLです。 https://qiita.com/le_skamba/items/7c5c95b0a96b5e5b2421 https://ryuta46.com/1207 ↑使っているコードは違いますが、このサイトの「やりたいこと」の映像がまさにやりたいことです！

jimbe

2021/10/15 11:28

> このサイトの「やりたいこと」の映像がまさに～でしたらそのコードをご利用になれば・・・と思いましたが、kotlin なので分からないということでしょうか。

jimbe

2021/10/15 11:38

サイトの本文を読めば分かる通り、RecyclerView を LinearSnapHelper オブジェクトに関係付けるだけです。まず java で RecyclerView を使って左右スクロールするコードを作ってみては如何でしょうか。

roatt

2021/10/15 11:52

そうなります… あと、RecyclerViewも使い方を調べましたがよくわからなかったので、こっちでどうにかならないかと相談した次第です…

jimbe

2021/10/15 12:23

RecyclerView は ListView と同様の機能です。(が ListView を extends するような関係ではありません。) 一覧を表示する際にはほぼ出てくるものですので、早いうちに使い方を理解されておいたほうが良いと思います。

roatt

2021/10/15 12:45

なるほど、ありがとうございます。 RecyclerViewでの横スクロールの作成を再度勉強し、躓いた際はまた別途新たにこちらのサイトで質問させていただきます。先日に引き続き、ご回答いただきありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず、AndroidのRecyclerViewで子要素を中心にスクロールさせるの kotlin コードを java にしてみましょう。

MainActivity.java

java
1package com.teratail.q364569;
2
3import androidx.annotation.NonNull;
4import androidx.appcompat.app.AppCompatActivity;
5import androidx.recyclerview.widget.*;
6
7import android.content.Context;
8import android.graphics.Rect;
9import android.os.Bundle;
10import android.view.*;
11import android.widget.TextView;
12
13public class MainActivity extends AppCompatActivity {
14
15  @Override
16  protected void onCreate(Bundle savedInstanceState) {
17    super.onCreate(savedInstanceState);
18    setContentView(R.layout.activity_main);
19
20    RecyclerView recyclerView = findViewById(R.id.recyclerView);
21    recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
22    recyclerView.setAdapter(new MyAdapter(this, 5));
23
24    // To make item center
25    LinearSnapHelper snapHelper = new LinearSnapHelper();
26    snapHelper.attachToRecyclerView(recyclerView);
27
28    // Force to center even if the item is first or last.
29    recyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {
30      @Override
31      public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
32        int edgeMargin = (parent.getWidth() - view.getLayoutParams().width) / 2;
33
34        int position = parent.getChildAdapterPosition(view);
35        if (position == 0) {
36          outRect.left = edgeMargin;
37        }
38        if (position == state.getItemCount() - 1) {
39          outRect.right = edgeMargin;
40        }
41      }
42    });
43  }
44
45  class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
46    final Context context;
47    private int itemCount;
48
49    MyAdapter(Context context, int itemCount) {
50      this.context = context;
51      this.itemCount = itemCount;
52    }
53
54    @Override
55    public int getItemCount() {
56      return itemCount;
57    }
58
59    @Override
60    public void onBindViewHolder(ViewHolder vh, int position) {
61      String text = "Page " + position;
62      vh.pageNumberText.setText(text);
63    }
64
65    @Override
66    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
67      LayoutInflater layoutInflater = LayoutInflater.from(context);
68      View v = layoutInflater.inflate(R.layout.item_simple_card, parent, false);
69      return new ViewHolder(v);
70    }
71
72    class ViewHolder extends RecyclerView.ViewHolder {
73      final TextView pageNumberText;
74      public ViewHolder(@NonNull View v) {
75        super(v);
76        pageNumberText = v.findViewById(R.id.textPageNumber);
77      }
78    }
79  }
80}

レイアウト: activity_main.xml

xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    tools:context=".MainActivity">
8
9  <androidx.recyclerview.widget.RecyclerView
10      android:id="@+id/recyclerView"
11      android:layout_width="match_parent"
12      android:layout_height="256dp"
13      app:layout_constraintBottom_toBottomOf="parent"
14      app:layout_constraintTop_toTopOf="parent"
15      tools:listitem="@layout/item_simple_card" />
16
17</androidx.constraintlayout.widget.ConstraintLayout>

レイアウト: item_simple_card.xml

xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:app="http://schemas.android.com/apk/res-auto"
5    xmlns:tools="http://schemas.android.com/tools"
6    android:layout_width="256dp"
7    android:layout_height="match_parent"
8    android:padding="8dp">
9
10  <androidx.cardview.widget.CardView
11      android:layout_width="match_parent"
12      android:layout_height="match_parent"
13      app:cardCornerRadius="16dp"
14      app:cardBackgroundColor="@color/design_default_color_primary">
15
16    <TextView
17        android:id="@+id/textPageNumber"
18        android:layout_gravity="center"
19        android:layout_width="wrap_content"
20        android:layout_height="wrap_content"
21        android:textColor="@android:color/white"
22        android:textSize="30sp"
23        tools:text="page 1"/>
24  </androidx.cardview.widget.CardView>
25
26</androidx.constraintlayout.widget.ConstraintLayout>