Custom Controls--Let the background color fade with viewpager sliding

Reprint please indicate the source, thank you ~

Today is to say a simple but difficult to think of the effect of implementation. The code is absolutely simple, and the absolute ease of implementation is what you might not expect.

Not much to say, on. The first effect is the most beautiful application of the sliding color change, the second is my project to use the effect, after implementation I posted it, open source.

Let's talk about the principles and ideas of these two implementations respectively.

First we look at the solid color of the first GIF, a solid color gradient is still easier.

1. Implement a Viewpager, because what we want to achieve is that as the finger moves, the background color of the viewpager changes, so the temporary idea is that no custom viewpager is required.

2. Set a solid color color for the background.

3.viewpager slide, how to get it, how to handle it

4. How to make the color gradient, how to get the gradient value

Let's fix it one by one.

1. The use of Viewpager seems to be very simple, here do not repeat, the code I posted:

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools "    android:layout_width=" match_parent "    android:layout_height=" Match_parent "    android:padding= "20DP"    android:id= "@+id/ll"    android:orientation= "vertical" >    <textview        android:padding= "10DP"        android:layout_width= "match_parent"        android:gravity= "Center_horizontal"        android:layout_height= "wrap_content"        android:textcolor= "#ff000000"        android:text= "This is title"/>        <android.support.v4.view.viewpager        android:id= "@+id/viewpager"        android:layout_width= "Match_ Parent "        android:layout_height=" match_parent ">    </android.support.v4.view.viewpager></ Linearlayout>

@Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview ( R.layout.activity_main); lllayout = (linearlayout) Findviewbyid (r.id.ll); Viewpager = (Viewpager) findViewById ( R.id.viewpager); fragment = new Imagefragment (); fragment2 = new Imagefragment (); fragment3 = new Imagefragment (); Fragment4 = new Imagefragment (); Views.add (Fragment2); Views.add (FRAGMENT3); Views.add (FRAGMENT4); Views.add (fragment ); Viewpager.setadapter (New Myadapter (Getsupportfragmentmanager ())); Viewpager.setcurrentitem (0); Viewpager.setonpagechangelistener (New Pagechangelisener ());}

Private class Myadapter extends Fragmentpageradapter{private list<fragment> list_views;public myadapter ( Fragmentmanager FM) {super (FM); list_views = views;} @Overridepublic Fragment getItem (int arg0) {return list_views.get (arg0);} @Overridepublic int GetCount () {return list_views.size ();}}

The above is about viewpager some of the code, no paste, like imagefragment is particularly simple, layout is a picture just.

The second question below, the background color we are easy to fix, SetBackgroundColor can.

And then look at the third question, not all of the sliding processes are going to be done in Ontouch, like Viewpager, we can totally see it listener

Class Pagechangelisener implements Onpagechangelistener {@Overridepublic void onpagescrollstatechanged (int arg0) {}@ Suppresslint ("Newapi") @Overridepublic void onpagescrolled (int position, float positionoffset, int Positionoffsetpixels) {Argbevaluator evaluator = new Argbevaluator (); if (position% 2 = = 0) {Lllayout.setbackgroundcolor ( 0XFF8080FF); int evaluate = (Integer) evaluator.evaluate (Positionoffset, 0xff8080ff,0xffff8080); Lllayout.setbackgroundcolor (evaluate);} else {lllayout.setbackgroundcolor (0xffff8080); int evaluate = (Integer) evaluator.evaluate (Positionoffset, 0xffff8080 , 0xff8080ff); Lllayout.setbackgroundcolor (evaluate);}} @Overridepublic void onpageselected (int arg0) {}}

This is the core of the whole color control, first of all, the third problem, here with Onpagechangelistener to deal with the sliding viewpager, here, although not get coordinates, but can get some things for us, very useful, Look at the second parameter of the Onpagescrolled method, here to do the experiment found that it is sliding to the right when the value is [0,1], and left to swipe, the value of the (1,0], this is to let developers do zoom translation and other animation of the small helper Ah!

Then, notice that we consider the fourth question, I do not know whether people are familiar with the property animation, I first in the property animation to write a change in the BackgroundColor property settings of an animation:

@SuppressLint ("Newapi") private void Setbackrepeat (View view,string property,int from, int. to) {Valueanimator animator = O Bjectanimator.ofint (view,property,from,to); animator.setduration (+); Animator.setrepeatmode ( Valueanimator.reverse); Animator.setrepeatcount (valueanimator.infinite); Animator.setevaluator (New ArgbEvaluator ( ); Animator.start (); Animator.addupdatelistener (new Animatorupdatelistener () {@Overridepublic void Onanimationupdate (Valueanimator animation) {//TODO auto-generated method StubSystem.out.println ("Value:" + Integer.tohexstring ((Integer) Animation.getanimatedvalue ()));}});

then I printed the animation when the color of the change, and I found that he actually will gradually become the color you want, rather than brush a bit changed, this, happy.

Take out the color estimator in this property animation, Argbevaluator, that's it! Its implementation is particularly simple, you can click to see the source code, and then use this estimator we do valuation.

First of all, let's talk about these parameters,

Evaluator.evaluate (Positionoffset, 0xff8080ff,0xffff8080);

when the estimator new comes out, the first parameter is a variable parameter of 0-1, 0 is the start change, 1 means the change is over, the second parameter is the starting color value, and the third parameter is the ending color value. This method will always return an excessive color value between 0-1 until the color changes.

So that we can completely imagine the above effect!

Next, let's achieve a second effect! It's on the background gradient, plus the sliding gradient!

We carefully look at the second effect, found that the background color behind the Viewpager, originally from the upper left to the lower right corner of the gradient, and then the sliding process, the color continues with the finger gradient, the end of the slide, the upper left corner and the lower right corner of the color of the swap position, the middle or gradient color. Is it an instant improvement over the first effect bigger! Let's make it come true!

Consider the issue:

1. How is the background color gradient implemented?

Does 2.viewpager need to be customized?

3. How to get the swipe event?

4. How is the gradient processed?

We solve them one by one.

First, the background gradient, well-known shape, right, I thought of it at first, and thought of the property animation, the Backgroundresource settings, but unfortunately, the background color has no gradient effect, so give up. Then the background color implementation, I simply customize a view, let this view do Viewpager background, to follow the finger gradient.

The second, Viewpager no custom, because there is no particularly complex effect on the Viewpager, there is no special gorgeous switch (you can add yourself, GitHub has open source), so I do not customize.

Third, the processing of the sliding event still listenr the previous effect, completely unable to discard the second parameter offset this little baby from 0-1!

Fourth, the simple color estimator does not meet our needs, but the combination of our custom view can achieve double gradient effect!

public class Mylinearlayout extends View {private lineargradient gradinet;private Paint paint;private int. Width;private in t height;private int start = 0xffff8080;private int end = 0xff8080ff;public Mylinearlayout (context context) {Super (context ); Getdisplay (context);} Public Mylinearlayout (context context, AttributeSet Attrs) {Super (context, attrs); Getdisplay (context);} private void Getdisplay (context context) {WindowManager wm = (WindowManager) context.getsystemservice (context.window_ SERVICE); width = Wm.getdefaultdisplay (). getwidth (); height = Wm.getdefaultdisplay (). GetHeight (); public void setgradient (int start,int end) {This.start = Start;this.end = End;gradinet = new LinearGradient (0, 0, width, he ight, start, end, Shader.TileMode.MIRROR); invalidate ();} @Overrideprotected void OnDraw (canvas canvas) {super.ondraw (canvas); System.out.println ("!!!!!!!!!!!!!!!!"); if (paint = = null) {paint = new paint ();} if (gradinet = = null) {gradinet = new lineargradient (0, 0, width, height, start, end, Shader. Tilemode.mirror);} Paint.setshader (gradinet); canvas.drawrect (0, 0, width, height, paint);}}

Core!! This is a simple but important custom control, with lineargradient implementation of the gradient, in addition to the estimator, a double gradient effect is so out!

Open source!! The Code of this project I submitted to GitHub, I sincerely and earnestly hope that someone will be able to viewpager the switch effect also added to this project, send me a merger application. Thank you.

Also have to mention, has been wanting to write a series of blog about Android animation, but has not been able to draw too much time (short time can not finish), demo I have finished, so about this part of the blog will certainly have, MO urgent.

Control GitHub

Custom Controls--Let the background color fade with viewpager sliding