Android Universal Dot Indicator--android-universal-circleindicator

Source: Internet
Author: User
<span id="Label3"></p><p><p>Reprint Please specify source: http://blog.csdn.net/footballclub/</p></p>Objective<p><p>Recently the project needs to add a dot indicator, in the switch page when used, the Internet has open source projects Viewflow and viewpageindicator, both have a good effect, but unfortunately there are limitations, one is only for viewflow, The other can only be used on the viewpage, and my project's page switch with a custom view, the above two items in the dot indicator can not be used directly, so the reference to Viewflow made a simple and easy to use universal dot Indicator.</p></p><p><p></p></p>Usage Introduction Simple usage<pre class="prettyprint"><code class=" hljs java"><span class="hljs-annotation"><span class="hljs-annotation">@Override</span></span> <span class="hljs-keyword"><span class="hljs-keyword">protected</span></span> <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> <span class="hljs-title"><span class="hljs-title">onCreate</span></span>(Bundle Savedinstancestate) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>. onCreate (savedinstancestate); ... Gridview.setonpagechangedlistener (<span class="hljs-keyword"><span class="hljs-keyword">New</span></span>Onpagechangedlistener () {<span class="hljs-annotation"><span class="hljs-annotation">@Override</span></span> <span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> <span class="hljs-title"><span class="hljs-title">onpagechanged</span></span>(pageddragdropgrid sender,<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Newpagenumber) {<span class="hljs-comment"><span class="hljs-comment">call this method to change the selected dot when the page is switched</span></span>Indicator.setcurrentpage (newpagenumber); } });<span class="hljs-comment"><span class="hljs-comment">//set Total number of pages</span></span>Indicator.initdata (adapter.pagecount (),<span class="hljs-number"><span class="hljs-number">0</span></span>);<span class="hljs-comment"><span class="hljs-comment">//set the current page</span></span>Indicator.setcurrentpage (<span class="hljs-number"><span class="hljs-number">0</span></span>);<span class="hljs-comment"><span class="hljs-comment">//note: If you need to change pagecount,initdata and setcurrentpage at the same time when switching pages, you can use Both. </span></span>}</code></pre><p><p>According to the above do will be able to use the normal, if you want to customize the size of the dots, the spacing between the dots, check the dots and the color of the not selected dots, then please continue to look down.</p></p>Detailed usage<p><p>Configurable properties:</p></p><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">declare-styleable</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"xcircleindicator"</span>></span></span> <span class="hljs-comment"><span class="hljs-comment"><!--the Color of the selected dots--</span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"fillcolor"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"color"</span> /></span></span> <span class="hljs-comment"><span class="hljs-comment"><!--the color of the dot not selected--</span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"strokecolor"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"color"</span> /> </span></span> <span class="hljs-comment"><span class="hljs-comment"><!--dot size--</span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"radius"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"dimension"</span> /></span></span> <span class="hljs-comment"><span class="hljs-comment"><!--spacing between dots--</span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"circleinterval"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"dimension"</span> /> </span></span> <span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">declare-styleable</span>></span></span></code></pre><p><p>The use of attributes in Xml:</p></p><pre class="prettyprint"><code class=" hljs avrasm"><<span class="hljs-keyword"><span class="hljs-keyword">com</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Andwidget</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Xcircleindicator</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Xcircleindicator</span></span>Android:id=<span class="hljs-string"><span class="hljs-string">"@+id/xcircleindicator"</span></span>Android:layout_width=<span class="hljs-string"><span class="hljs-string">"wrap_content"</span></span>android:layout_height=<span class="hljs-string"><span class="hljs-string">"wrap_content"</span></span>Android:layout_alignparentbottom=<span class="hljs-string"><span class="hljs-string">"true"</span></span>Android:layout_centerhorizontal=<span class="hljs-string"><span class="hljs-string">"true"</span></span>Android:layout_marginbottom=<span class="hljs-string"><span class="hljs-string">"@dimen/indicator_bottom_margin"</span></span>Indicator:circleinterval=<span class="hljs-string"><span class="hljs-string">"@dimen/circleinterval"</span></span>Indicator:fillcolor=<span class="hljs-string"><span class="hljs-string">"#F96A0E"</span></span>indicator:radius=<span class="hljs-string"><span class="hljs-string">"@dimen/radius"</span></span>Indicator:strokecolor=<span class="hljs-string"><span class="hljs-string">"#cecece"</span></span>/></code></pre><p><p>of course, setting parameters is not limited to XML configuration, but can also be set dynamically in Java code</p></p><pre class="prettyprint"><code class=" hljs java"><span class="hljs-javadoc"><span class="hljs-javadoc">/** * Sets the Fill color * *<span class="hljs-javadoctag"> @param</span> color * ARGB value</span> for the text */</span> <span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> <span class="hljs-title"><span class="hljs-title">Setfillcolor</span></span>(<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Color) {mpaintfill.setcolor (color); Invalidate (); }<span class="hljs-javadoc"><span class="hljs-javadoc">/** * Sets the stroke color * *<span class="hljs-javadoctag"> @param</span> color * ARGB value for the text */</span></span> <span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> <span class="hljs-title"><span class="hljs-title">Setstrokecolor</span></span>(<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Color) {mpaintstroke.setcolor (color); Invalidate (); }<span class="hljs-javadoc"><span class="hljs-javadoc">/** * Sets the Circle interval * *<span class="hljs-javadoctag"> @param</span> circleinterval * unit px</span> */</span> <span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> <span class="hljs-title"><span class="hljs-title">Setcircleinterval</span></span>(<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Circleinterval) {<span class="hljs-keyword"><span class="hljs-keyword"></span> this</span>. Circleinterval = circleinterval; Invalidate (); }<span class="hljs-javadoc"><span class="hljs-javadoc">/** * Sets the circle radius * *<span class="hljs-javadoctag"> @param</span> circleinterval * unit px</span> */</span> <span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> <span class="hljs-title"><span class="hljs-title">Setradius</span></span>(<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Radius) {<span class="hljs-keyword"><span class="hljs-keyword"></span> this</span>. Radius = radius; Invalidate (); }</code></pre><p><p>As you can see, the View.invalidate () method is called after the parameter is changed, and the primary function of the Invalidate () function is to request the view tree to redraw and then callback Onmeasure () in our custom view, onlayout () and OnDraw (). We need to complete the measurements in the Onmeasure and finish the final drawing in the ONDRAW.</p></p><pre class="prettyprint"><code class=" hljs java"><span class="hljs-annotation"><span class="hljs-annotation">@Override</span></span> <span class="hljs-keyword"><span class="hljs-keyword">protected</span></span> <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> <span class="hljs-title"><span class="hljs-title">onmeasure</span></span>(<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>widthmeasurespec,<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Heightmeasurespec) {setmeasureddimension (measurewidth (widthmeasurespec), measureheight (heightMeasur espec)); }<span class="hljs-annotation"><span class="hljs-annotation">@Override</span></span> <span class="hljs-keyword"><span class="hljs-keyword">protected</span></span> <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> <span class="hljs-title"><span class="hljs-title">OnDraw</span></span>(canvas Canvas) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>. OnDraw (canvas);<span class="hljs-comment"><span class="hljs-comment">//Draw stroked circles</span></span> <span class="hljs-keyword"><span class="hljs-keyword"></span> for</span>(<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>ILoop =<span class="hljs-number"><span class="hljs-number">0</span></span>; ILoop < pagetotalcount; Iloop++) {canvas.drawcircle (getpaddingleft () + radius + (iLoop * (<span class="hljs-number"><span class="hljs-number">2</span></span>* radius + circleinterval), getpaddingtop () + radius, radius, mpaintstroke); }<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>CX =<span class="hljs-number"><span class="hljs-number">0</span></span>;<span class="hljs-comment"><span class="hljs-comment">//if (flowwidth! = 0) {</span></span> <span class="hljs-comment">//// <span class="hljs-comment">Draw The filled circle according</span> to the current scroll</span> <span class="hljs-comment"><span class="hljs-comment">//cx = (currentscroll * (2 * radius + radius))/flowwidth;</span></span> <span class="hljs-comment"><span class="hljs-comment">// }</span></span>CX = (<span class="hljs-number"><span class="hljs-number">2</span></span>* RADIUS + circleinterval) * currentpage;<span class="hljs-comment"><span class="hljs-comment">//the flow width has been upadated yet. Draw the default position</span></span>Canvas.drawcircle (getpaddingleft () + radius + cx, getpaddingtop () + radius, radius, mpaintfill); }<span class="hljs-javadoc"><span class="hljs-javadoc">/** * Determines the width of this view * *<span class="hljs-javadoctag"> @param</span> measurespec * A measurespec PA cked into a int *<span class="hljs-javadoctag"> @return</span> The width of the view, honoring constraints from Measurespec *</span> /</span> <span class="hljs-keyword"><span class="hljs-keyword">Private</span></span> <span class="hljs-keyword"><span class="hljs-keyword">int</span></span> <span class="hljs-title"><span class="hljs-title">Measurewidth</span></span>(<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>MEASURESPEC) {<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>result =<span class="hljs-number"><span class="hljs-number">0</span></span>;<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Specmode = Measurespec.getmode (measurespec);<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Specsize = Measurespec.getsize (measurespec);<span class="hljs-comment"><span class="hljs-comment">//We were told how Big</span> to be</span> <span class="hljs-keyword"><span class="hljs-keyword">if</span></span>(specmode = = Measurespec.exactly) {result = specsize; }<span class="hljs-keyword"><span class="hljs-keyword">Else</span></span>{<span class="hljs-comment"><span class="hljs-comment">//Calculate The width according</span> the views count</span>result = Getpaddingleft () + getpaddingright () + (pagetotalcount *<span class="hljs-number"><span class="hljs-number">2</span></span>* Radius) + (pagetotalcount-<span class="hljs-number"><span class="hljs-number">1</span></span>) * circleinterval;<span class="hljs-comment"><span class="hljs-comment">//Respect at_most value if</span> that's what's called for by</span> <span class="hljs-comment"><span class="hljs-comment">//measurespec</span></span> <span class="hljs-keyword"><span class="hljs-keyword">if</span></span>(specmode = = Measurespec.at_most) {result = Math.min (result, specsize); } }<span class="hljs-keyword"><span class="hljs-keyword">return</span></span>Result }<span class="hljs-javadoc"><span class="hljs-javadoc">/** * Determines the height of this view * *<span class="hljs-javadoctag"> @param</span> measurespec * A Measurespec P acked into a int *<span class="hljs-javadoctag"> @return</span> The height of the view, honoring constraints from Measurespec *</span> /</span> <span class="hljs-keyword"><span class="hljs-keyword">Private</span></span> <span class="hljs-keyword"><span class="hljs-keyword">int</span></span> <span class="hljs-title"><span class="hljs-title">Measureheight</span></span>(<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>MEASURESPEC) {<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>result =<span class="hljs-number"><span class="hljs-number">0</span></span>;<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Specmode = Measurespec.getmode (measurespec);<span class="hljs-keyword"><span class="hljs-keyword">int</span></span>Specsize = Measurespec.getsize (measurespec);<span class="hljs-comment"><span class="hljs-comment">//We were told how Big</span> to be</span> <span class="hljs-keyword"><span class="hljs-keyword">if</span></span>(specmode = = Measurespec.exactly) {result = specsize; }<span class="hljs-comment"><span class="hljs-comment">//Measure the height</span></span> <span class="hljs-keyword"><span class="hljs-keyword">Else</span></span>{result =<span class="hljs-number"><span class="hljs-number">2</span></span>* radius + getpaddingtop () + getpaddingbottom ();<span class="hljs-comment"><span class="hljs-comment">//Respect at_most value if</span> that's what's called for by</span> <span class="hljs-comment"><span class="hljs-comment">//measurespec</span></span> <span class="hljs-keyword"><span class="hljs-keyword">if</span></span>(specmode = = Measurespec.at_most) {result = Math.min (result, specsize); } }<span class="hljs-keyword"><span class="hljs-keyword">return</span></span>Result }</code></pre><p><p>The above is all done, if you are interested in android-universal-circleindicator, you can focus on GitHub Android-universal-circleindicator</p></p><p><p>Of course you can also click here to download directly</p></p> <p style="font-size:12px;"><p style="font-size:12px;">Copyright Notice: This article for Bo Master original article, without Bo Master permission not Reproduced.</p></p> <p><p>Android Universal Dot Indicator--android-universal-circleindicator</p></p></span>
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.