Recently, while working on a project, I found that the UI has a special preference for the ViewPager rotation chart indicator, which is sometimes all dots, sometimes all bars, and sometimes when the bar is selected or not selected, the dot is. However, our previous indicator is pure custom but only supports the origin, so it has been modified for many times. Therefore, this indicator is put forward separately here, hoping to bring some help to friends in need. This indicator is also compatible with Ali open source library UltraViewPager, which is also supported.

UIndicator address

rendering

Property description document

Here is the main custom View, support for the following custom attributes:

<declare-styleable name="Indicator"> <! -- Unchecked indicator color --> <attr name="normal_color" format="reference|color"/ > <! -- Selected indicator color --> <attr name="selected_color" format="reference|color"/ > <! -- indicates the spacing between each item --> <attr name="spacing" format="dimension"/ > <! --> <attr name="orientation" format="enum">
            <enum name="horizontal" value="0" />
            <enum name="vertical" value="1"/> </attr> <! Pointer type naming rule: unselected style _ selected style --> <attr name="style" format="enum"> <! --> <enum name="circle_circle" value="0"/ > <! --> <enum name="rect_rect" value="1"/ > <! -- select dot, select square --> <enum name="circle_rect" value="2"/> </attr> <! --> <attr name="circle_circle_radius" format="dimension"/ > <! -- all square indicator lengths --> <attr name="rect_rect_itemWidth" format="dimension"/ > <! --> <attr name="rect_rect_itemHeight" format="dimension"/ > <! -- all square pointer rounded corners --> <attr name="rect_rect_corner" format="dimension"/ > <! --circle_rect pattern dot radius --> <attr name="circle_rect_radius" format="dimension"/ > <! --circle_rect mode square width --> <attr name="circle_rect_itemWidth" format="dimension"/ > <! --circle_rect Mode square height --> <attr name="circle_rect_itemHeight" format="dimension"/ > <! --circle_rect mode square rounded corners --> <attr name="circle_rect_corner" format="dimension" />

</declare-styleable>

Copy the code

Common properties

attribute instructions
normal_color Unselected indicator color
selected_color The selected indicator color
spacing Indicates the spacing between items
orientation Set indicator alignment, enumeration type, yeshorizontalandvertical
style Enumeration type, which has the following types

Style description

style instructions
circle_circle Dot indicator, corresponding to the third indicator in the figure
rect_rect Bar indicator, corresponding to the style of the second indicator in the figure
circle_rect The indicator is a bar when checked and a dot when unchecked, corresponding to the first indicator style in the figure

If the style is set to circle_circle, the following properties can be set:

attribute instructions
circle_circle_radius It’s a dot indicator radius

If the style is set to rect_rect, the following properties can be set:

attribute instructions
rect_rect_itemWidth The length of the bar
rect_rect_itemHeight The bar height
rect_rect_corner The rounded bar

If the style is set to circle_rect, the following properties can be set:

attribute instructions
circle_rect_radius The dot radius is not selected
circle_rect_itemWidth Select the bar length
circle_rect_itemHeight Select the bar height
circle_rect_corner Select bar to set rounded corners

How to use

In XML, for example, the layout of the fourth carousel graph is as follows, using UltraViewPager:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_marginTop="10dp"
    android:layout_height="120dp">

    <com.tmall.ultraviewpager.UltraViewPager
        android:id="@+id/viewPager4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        app:upv_autoscroll="3000"
        app:upv_infiniteloop="true"
        android:background="@android:color/darker_gray" />

    <com.wzh.viewpager.indicator.UIndicator
        android:id="@+id/indicator4"
        android:layout_width="match_parent"
        android:layout_height="6dp"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="10dp"
        app:circle_rect_corner="3dp"
        app:circle_rect_itemHeight="4dp"
        app:circle_rect_itemWidth="20dp"
        app:circle_rect_radius="3dp"
        app:normal_color="#99ffffff"
        app:selected_color="#ffffff"
        app:spacing="10dp"
        app:orientation="horizontal"
        app:style="circle_rect" />
</FrameLayout>
    
Copy the code

We need to associate our ViewPager with our code:

// Normal ViewPager uses... ViewPager mViewPager1 = findViewById(R.id.viewPager1); UIndicator uIndicator1 = findViewById(R.id.indicator1); uIndicator1.attachToViewPager(mViewPager1); // UltraViewPager uses... UltraViewPager mViewPager4 = findViewById(R.id.viewPager4); UIndicator uIndicator4 = findViewById(R.id.indicator4); uIndicator4.attachToViewPager(mViewPager4.getViewPager());Copy the code

How can I Support UltraViewPager

The following code is in the UIndicator:

Public void attachToViewPager(ViewPager ViewPager) {this. ViewPager = ViewPager;  PagerAdapter pagerAdapter = viewPager.getAdapter();if(pagerAdapter ! = null) {//TODO If the project uses the UltraViewPager library, you need to obtain itemCount as follows, otherwise remove this itemifconditionsif(pagerAdapter Instanceof UltraViewPagerAdapter){// Obtain the actual number from UltraViewPagerAdapter itemCount = ((UltraViewPagerAdapter)pagerAdapter).getRealCount(); }else{ itemCount = pagerAdapter.getCount(); } selection = viewPager.getCurrentItem() % itemCount; checkItemCount(); } viewPager.addOnPageChangeListener(this); }... @Override public void onPageSelected(int i) {if(viewPager ! = null) { PagerAdapter pagerAdapter = viewPager.getAdapter();if(pagerAdapter ! ViewPager Selection = viewPager.getCurrentitem () % itemCount; } } postInvalidate(); }Copy the code

conclusion

How to draw a View here will not be expanded one by one, in fact, very simple, mainly calculation, interested can look at the source, UIndicator, incidentally Star support O(∩_∩)O~~ Thank you ~