Androidアプリでドットインジケータを設置するときのエラーについて

Question

前提・実現したいこと

下の画像で赤く囲い、矢印で指しているように、指で右もしくは左にスワイプすると、丸い粒の大きい部分が移動するUIを実装しようとしています。

開発言語はKotlinです。

参考にしている記事は「[Kotlin]AndroidでiOSのUiPageViewControllerのdots（ドット）有を実装」です。

AndroidStudioのNewProjectから「Fragment + ViewModel」を選択し、記事の実装を動かしたいです。

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

参考にしている記事は「[Kotlin]AndroidでiOSのUiPageViewControllerのdots（ドット）有を実装」は、エミュレータで実現できるコードが全て公開されているわけではないので、実現するために２点問題があります。

① MainActivity.ktに何を書けばいいのか、WalkThroughFirstFragment.ktに何を書けばいいのかわからず、検索方法もなく、階層構造に原因がある可能性も自分だけでは見つけられない

②WalkThroughFragment.ktでエラーが出ているが、記事のプログラムではimport内容について書かれていなかったため、MainActivity.ktやWalkThroughFirstFragment.ktなどの他のファイルが原因なのか、WalkThroughFragment.ktのimportに問題があるのか判断できない

現状のコード

WalkThroughFragment.kt

package com.example.dotindicator.ui.main

import androidx.lifecycle.ViewModelProviders
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.example.dotindicator.R

class WalkThroughFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_walk_through, container, false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        adapter = WalkThroughFragmentPagerAdapter(childFragmentManager)
        walk_through_view_pager.adapter = adapter
        walk_through_indicator.setupWithViewPager(walk_through_view_pager)
    }

    private inner class WalkThroughFragmentPagerAdapter(manager: FragmentManager) : FragmentPagerAdapter(manager) {

        override fun getItem(position: Int): Fragment? {
            when (position) {
                0 -> return WalkThroughFirstFragment()
                1 -> return WalkThroughSecondFragment()
                2 -> return WalkThroughThirdFragment()
                3 -> return WalkThroughFourthFragment()
            }
            return null
        }

        override fun getCount(): Int {
            return 4
        }
 ![イメージ説明](4af5a15204510773320615adf6eea565.png)

記事で公開されていたプログラム

fragment_main.xmlとindicator_selector.xmlは、記事のコードそのまま利用していますが、文字制限の都合上、質問ないには掲載できませんでした。

Comments

[hoshi-takanori]

そのくらい自分で作ればいいと思うのですが。人に聞いてばかりではプログラミングの力はつきませんよ。

Answer 1

記事内でもレイアウトXML内でのViewPagerおよびTabLayoutのidとWalkThroughFragment内で参照するときのid名が異なりますね。

<androidx.viewpager.widget.ViewPager
        android:id="@+id/sign_walk_through_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/sign_walk_through_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:layout_marginBottom="8dp"
        android:background="@android:color/transparent"
        app:tabBackground="@drawable/indicator_selector"
        app:tabGravity="center"
        app:tabIndicatorHeight="0dp" />

override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        adapter = WalkThroughFragmentPagerAdapter(childFragmentManager)
        walk_through_view_pager.adapter = adapter   // XML内ではsign_walk_through_view_pager
        walk_through_indicator.setupWithViewPager(walk_through_view_pager)  // XML内ではsign_walk_through_indicator
    }

これらをそろえてあげればAndroidStudioが自動で紐づけて参照を解決してくれると思います。

あと記事内でもレイアウトXMLファイル名がfragment_main.xmlですが、fragment_walk_throughという違う名前でインフレートしようとしているのでRリソース参照が見つからなくて赤くなっています。

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_walk_through, container, false)
    }

これらも揃えないといけないですね。

気づく範囲ではこれくらいですが、動作検証するともっと色々出てくるかもしれません。
おそらく記事のコードは動かないです。不思議な記事ですね。