36
37

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Android-ViewPagerIndicatorのおさらいをしておこう

Last updated at Posted at 2014-08-05

Android-ViewPagerIndicator

                            やつを追う前に言っておくッ!
                    おれは今ViewPagerIndicatorをほんのちょっぴりだが体験した
                  い…いや…体験したというよりはまったく理解を超えていたのだが……
         ,. -‐'''''""¨¨¨ヽ
         (.___,,,... -ァァフ|          あ…ありのまま 今 起こった事を話すぜ!
          |i i|    }! }} //|
         |l、{   j} /,,ィ//|       『おれはViewPagerIndicatorを入れていたと
        i|:!ヾ、_ノ/ u {:}//ヘ        思ったらいつのまにかブリッジしていた』
        |リ u' }  ,ノ _,!V,ハ |
       /´fト、_{ル{,ィ'eラ , タ人        な… 何を言ってるのか わからねーと思うが
     /'   ヾ|宀| {´,)⌒`/ |<ヽトiゝ        おれも何をされたのかわからなかった…
    ,゙  / )ヽ iLレ  u' | | ヾlトハ〉
     |/_/  ハ !ニ⊇ '/:}  V:::::ヽ        頭がどうにかなりそうだった…
    // 二二二7'T'' /u' __ /:::::::/`ヽ
   /'´r -―一ァ‐゙T´ '"´ /::::/-‐  \    催眠術だとか超スピードだとか
   / //   广¨´  /'   /:::::/´ ̄`ヽ ⌒ヽ    そんなチャチなもんじゃあ 断じてねえ
  ノ ' /  ノ:::::`ー-、___/::::://       ヽ  }
_/`丶 /:::::::::::::::::::::::::: ̄`ー-{:::...       イ  もっと恐ろしいものの片鱗を味わったぜ…

ViewPagerでいい感じの位置を表示してくれるライブラリ。
結構前からあるし有名だけどこうカスタムしろっていう記事がないので書いておく。
サンプルコード嫁とか言われたらめんどくせーっていう人へ。

AndroidStudio、Gradleで導入

Jake Wharton hasn't released it in maven as an aar. There's a group though that has made an aar of it available through their server, you can set it up like this in your build.gradle:

ということなので、

repositories {
    maven { url "http://dl.bintray.com/populov/maven" }
    mavenCentral()
}

Mavenのリポジトリ定義してるところに、上の順番を守ってbuild.gradleに書きます。

そしてdependenciesにも下記を書きます。

dependencies {
    // ...
    compile 'com.viewpagerindicator:library:2.4.1@aar'
    // ...
}

これで問題なくsyncできるはずです。

使い方

Activityにどう書くとかは是非下記見ていただきたいのですが、
https://github.com/JakeWharton/Android-ViewPagerIndicator

CirclePageIndicatorの見た目のカスタムをちょろっとやったのでメモしておきます。

styleを定義します。

    <style name="CustomCirclePageIndicator">
        <item name="fillColor">@color/red</item>
        <item name="centered">true</item>
        <item name="pageColor">@color/dark_gray</item>
        <item name="strokeColor">@color/clear</item>
        <item name="radius">6dp</item>
    </style>

fillColorは動く◯の色。
pageColorは動かない横並びの◯の色。
strokeColorはpageColorの周りの色っぽい?今回入らないので透明に。
radiusは動く◯の大きさ(半径)。

レイアウトには下記のように設置。

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/circles"
        style="@style/CustomCirclePageIndicator"
        android:padding="10dp"
        android:layout_alignParentBottom="true"
        android:layout_height="wrap_content"
        android:layout_width="match_parent" />

paddingはこの場合、最下部からの距離。
他にもいろいろいじって遊んでみよう。

36
37
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36
37

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?