Author: Summer solstice, welcome to reprint, also please keep this statement, thank you

Blog.csdn.net/u011418943/…

Have you ever had the problem that every time you develop a new project, on the Viewpager, you’re doing the same thing over and over again, like the app boot page, the wheel image, the TAB indicator for the Viewpager + Fragment, etc. These are simple, but they are required by every app and take a lot of time. Do you feel speechless every time you write this?

In this case, ViewPagerHelper is born. ViewPagerHelper is a quick tool to help you complete app boot pages, rotations, and Viewpager indicators. It has built-in properties to satisfy all your daily fantasies of greasy-looking students, free your hands, and free your soul…

How to use

The jitpack site is used here, so:

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }Copy the code

Then add to your Module:

The compile 'com. Making. LillteZheng: ViewPagerHelper: v0.1'Copy the code

Pants off, so now is the time to look at the fake pictures, after all, this is a face world.

rendering

First of all, the most commonly used Indicator is the rotation chart. Here are 4 commonly used indicators

1. Rotation chart

The first one is an imitation of Meizu’s rotation chart, with enlarged dots at the bottom:

Here is to explain the principle of enlarging the bottom dot. In fact, it is very simple, which is to use a shade, configure the dot inside, and then set the transparency and zoom in and out in the code. Friends can first follow this idea to do their own, or you can download the code to verify.

Second, the popular curved image

This is more popular, like Taobao, jingdong these, have used this; This arc imageView is also very simple, I believe that after learning the parabola custom column, this immediately can think of what method to use; You can use BitmapShader to crop the image, so we can use path to draw the shape, and then use BitmapShader to crop the image.

If you want to use a curved image, you can use the ArcImageView control, which can be configured like this:

<! -- Arc pictures, Arc_height for arc height - > <. Com. Zhengsr viewpagerlib. View. ArcImageView android: id = "@ + id/arc_icon" android:layout_width="match_parent" android:layout_height="match_parent" app:arc_height="15dp" android:scaleType="centerCrop"/>Copy the code

Third, the bottom indicator is moving and looks comfortable

TransIndicator offers two options, one is an oval as shown in the picture, and the other is just a dot. You can choose which one you like. It is easy to write four small circles first, then draw a white circle, and then change the drawing position of Canvas. Translate according to the change of distance of viewpager onPageScrolled.

Fourth, the bottom indicator text version

Some apps also use text, here also provides a way to cancel the circle outside the text. You can define the color and everything.

Configure the multicast function

What if you want to use the above style configurations? It’s simple, you need three steps: step1:

For configuration data, the URL or local resiD is encapsulated in the list here. Since we usually obtain pictures and text instructions after parsing Gson, list is used here.

        List<LoopBean> loopBeens = new ArrayList<>();
        for (int i = 0; i < TEXT.length; i++) {
           LoopBean bean = new LoopBean();
            bean.url = RESURL[i];
            bean.text = TEXT[i];
            loopBeens.add(bean);

        }Copy the code

Step2: configure PageBean, here mainly for viewpager indicator function, remember to write generics. This is the LoopBean above, so if you’re just a String, you’re going to shoe the URL, and if it’s res, you’re going to negotiate the INTEGER.

PageBean bean = new PageBean.Builder<LoopBean>()
                .setDataObjects(loopBeens)
                .setIndicator(zoomIndicator)
                .builder();Copy the code

Set viewpager animations. There are three options available: MzTransformer, ZoomOutPageTransformer, and DepthPageTransformer. The former will work in the meizu mall mode, and the latter will provide Google with two default animations. Can experience, here is optional, here I set the effect of Meizu, so add arc picture better look.

mBannerCountViewPager.setPageTransformer(false,new MzTransformer());Copy the code

Step3:

View interface is provided for you to configure, this advantage is more practical, you can add GIF, or video, or simple image, remember to write layout file.

mBannerCountViewPager.setPagerListener(bean, R.layout.loop_layout, new PageHelperListener() { @Override public void getItemView(View view, Object data) { ImageView imageView = view.findViewById(R.id.loop_icon); LoopBean bean = (LoopBean) data; new GlideManager.Builder() .setContext(LoopActivity.this) .setImgSource(bean.url) .setLoadingBitmap(R.mipmap.ic_launcher) .setImageView(imageView) .builder(); TextView textView = view.findViewById(R.id.loop_text); textView.setText(bean.text); // If you want to set the click event, you can also set it directly through the view, or image update, etc.}});Copy the code

The configuration of XML is essentially a ViewPager plus a LinearLayout, which you place yourself

<com.zhengsr.viewpagerlib.view.BannerViewPager android:id="@+id/loop_viewpager_arc" android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:clipChildren="false" zsr:isloop="false" zsr:switchtime="600" /> <com.zhengsr.viewpagerlib.indicator.ZoomIndicator android:id="@+id/bottom_zoom_arc" android:layout_width="match_parent" android:layout_height="30dp" android:layout_gravity="bottom|right" android:layout_marginRight="20dp" Android: gravity = "center" ZSR: zoom_alpha_min = "0.5" ZSR: zoom_leftmargin = "10 dp" ZSR: zoom_max = "1.5" zsr:zoom_selector="@drawable/bottom_circle" />Copy the code

This completes the round broadcast function, is not after encapsulation, mother no longer need to worry about me to write round broadcast effect

2. Tab indicator

Moving on to the more common approach of viewpager + Fragment, there are also three common styles available.

The first, shamelessly copied the triangular version of Hongyang God

In fact, if you know the mobile version of the wheel map, this is a piece of cake for you. So, I won’t explain

Second, the bar shaped version

Nothing to say, is to change the above triangle strip, wit, such as me, the code all rely on copy ！！！！ Sure enough, the quality of an item depends on your copy-paste skills

Third, the way of text color gradient

As we commonly used today headlines, is in this way, and its principle is also very simple, is to use the value of the attribute clipRect, first draw a normal color, and then draw other colors, it is ok. I suggest you try different colors with clipRect first and then write it yourself. You’ll see, my God, it’s so easy…

The configuration here is much simpler, the viewPager is normal, and the key is the TabIndicator, because I’ve got all three in there.

Triangular XML

  <com.zhengsr.viewpagerlib.indicator.TabIndicator
        android:id="@+id/line_indicator"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/black_ff"
        app:tab_color="@color/white"
        app:tab_width="25dp"
        app:tab_height="5dp"
        app:tab_text_default_color="@color/white_ff"
        app:tab_text_change_color="@color/white"
        app:tab_show="true"
        app:tab_text_type="normaltext"
        app:tab_textsize="16sp"
        app:visiabel_size="3"
        app:tap_type="tri"
        >
    </com.zhengsr.viewpagerlib.indicator.TabIndicator>Copy the code

You can set the size, the color of the textView, whether it is displayed, and the number of visible textViews. If you want to change the tab_type= “tri” tri to rect, then if you want to change the color of the TextView, Just change normaltext in tab_text_type= “normaltext” to colortext.

Then configure this in your code:

*/ TabIndicator tabIndecator = (TabIndicator) findViewById(R.i.lin_indicator); / / set the viewpager switching speed, so click on more natural when tabIndecator. SetViewPagerSwitchSpeed (viewpager, 600); tabIndecator.setTabData(viewPager,mTitle, New TabIndicator. TabClickListener () {@ Override public void onClick (int position) {/ / at the top of the click method viewPager.setCurrentItem(position); }});Copy the code

This completes a nice viewPager plus indicator approach.

The app starts the boot page for the first time

There is also the boot page, which is similar to the configuration of the wheel map, because the indicators are also used. First look at the effect:

Here provides three styles, in fact, there is a text, not posted out, you can see the round broadcast; The configuration of the bootstrap diagram is very simple, take one with the bottom enlarged:

GlideViewPager viewPager = (GlideViewPager) findViewById(R.id.splase_viewpager); ZoomIndicator zoomIndicator = (ZoomIndicator) findViewById(R.id.splase_bottom_layout); Button button = (Button) findViewById(R.id.splase_start_btn); List<Integer> images = new ArrayList<>(); for (int i = 0; i < RES.length; i++) { images.add(RES[i]); } // Configure the PagerBean, mainly for the purpose of the viewPager indicator, Builder<Integer>().setDataObjects(images).setIndicator(zoomIndicator) .setOpenView(button) .builder(); // Add the data to the viewpager and provide the view. This will not cause problems with one view and multiple parent views. Here in the figure is more noticeable by viewPager. SetPagerListener (bean, R.l ayout. Image_layout, New PagerHelperListener() {@override public void getItemView(View View, Object data) { ImageView ImageView = view.findViewById(R.idcon); imageView.setImageResource((Integer) data); }});Copy the code

And as you can see, I’ve provided the View for you to configure, and the nice thing about it is that it’s more practical, you can add giFs, or videos, or simple images. The configuration of XML is as follows:

<com.zhengsr.viewpagerlib.view.GlideViewPager android:id="@+id/splase_viewpager" android:layout_width="match_parent" android:layout_height="match_parent"/> <Button android:id="@+id/splase_start_btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginLeft="100dp" android:layout_marginRight="100dp" android:layout_marginBottom="50dp" android:background="@drawable/glide_bottom_btn_bg"  android:textColor="@color/white" android:text="@string/start" android:textSize="18sp" android:visibility="gone" /> <com.zhengsr.viewpagerlib.indicator.ZoomIndicator android:id="@+id/splase_bottom_layout" android:layout_alignParentBottom="true" android:layout_width="match_parent" android:layout_height="50dp" Android: gravity = "center" ZSR: zoom_selector = "@ drawable/bottom_circle ZSR: zoom_leftmargin =" 10 dp "ZSR: zoom_max =" 1.5" ZSR: zoom_alpha_min = "0.4" ZSR: zoom_dismiss_open = "true" android: orientation = "horizontal" / >Copy the code

So that’s basically it, although it’s not hard, it’s really useful, it’s better to encapsulate it than to reinvent the wheel. Link to github: github.com/LillteZheng… There are some instructions for custom properties.

If you have desired effects that are not available in this project, you can put them forward in the issue. The author will find time to realize them after seeing them. If there are problems or interfaces that need to be provided, you can also put them forward in the issue. Of course, like to ask start or fork for a wave.

Code is the best teacher, you can download and change to what you like.