1. ホーム
  2. android

[解決済み】AndroidのViewPagerで下のドットが表示される件

2022-04-12 09:25:04

質問

ViewPagerに下のドットを3つ付けたいのですが、どうすればいいですか?

FragmentActivityとサポートライブラリViewPagerを使用しています。

どのように解決するのですか?

それほど多くのコードは必要ありません。

を使うだけで、それほどコーディングしなくても、これだけのことができるのです。 viewpager tablayout .

あなたのメインレイアウト

<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <android.support.v4.view.ViewPager
       android:id="@+id/pager"
       android:layout_width="match_parent"
       android:layout_height="match_parent">

   </android.support.v4.view.ViewPager>
   <android.support.design.widget.TabLayout
       android:id="@+id/tabDots"
       android:layout_alignParentBottom="true"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:tabBackground="@drawable/tab_selector"
       app:tabGravity="center"
       app:tabIndicatorHeight="0dp"/>
</RelativeLayout>

UI要素のinactivityやfragmentを以下のようにフックアップします。

Javaコードです。

mImageViewPager = (ViewPager) findViewById(R.id.pager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabDots);
tabLayout.setupWithViewPager(mImageViewPager, true);

以上で完了です。

以下のxmlリソースファイルを 描画可能 フォルダーに格納されます。

tab_indicator_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    android:innerRadius="0dp"
    android:shape="ring"
    android:thickness="4dp"
    android:useLevel="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorAccent"/>
</shape>

タブ_インジケータ_デフォルト.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:innerRadius="0dp"
            android:shape="oval"
            android:thickness="2dp"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
    </shape>

タブセレクタ.xml

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/tab_indicator_selected"
          android:state_selected="true"/>

    <item android:drawable="@drawable/tab_indicator_default"/>
</selector>

私のように怠け者の気分ですか?さて、上記のコードはすべてライブラリに変換されます! 使用方法 gradleに以下を追加します。 implementation 'com.chabbal:slidingdotsplash:1.0.2' ActivityまたはFragmentのレイアウトに以下を追加します。

<com.chabbal.slidingdotsplash.SlidingSplashView
        android:id="@+id/splash"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:imageResources="@array/img_id_arr"/>

に整数の配列を作成します。 strings.xml

<integer-array name="img_id_arr">
   <item>@drawable/img1</item>
   <item>@drawable/img2</item>
   <item>@drawable/img3</item>
   <item>@drawable/img4</item>
</integer-array>

完了! エクストラ を使用すると、ページの変更を監視することができます。 addOnPageChangeListener(listener); ギズブ リンク .