Navigation bar Effects-news app (better than NetEase, today's headline)

For a long time did not write the article, slowly their work encountered problems do not accumulate, the next encounter will forget. Hey....

Sunday Boring Single Programmers-only program you know ...write the program to listen to the song is also very good!!

It's a recent job to implement the top navigation bar for news apps like today's headlines, but let's change the effect by adding a text color gradient and zoom

I will not make a dynamic picture ah, I beg you will teach me under:

One: Analysis

Today we are going to implement this special effect.

The open source projects used are:Master-nineoldandroids-library.jaR, the jar package, which is a backwards compatible jar package, including a series of animations from Android.

First, let's talk about the basic implementation of this kind of news app such as the daily headlines is Viewpage+fragment+horizontalscrollview

That's what we're talking about today. Horizontalscrollview's special effects .

Implementing schematic diagram:

I'm sure you know that, probably.

Is: Initially we initialize the TextView and initialize the selected and normal TextView. Is the framelayout in the 2 TextView placed in the collection hashmap<string, view> (). Used to maintain the state of all TextView.

As for the code how to write it?!

The Android system provides us with a class called Pagerslidingtabstrip , in the V4 package. We put the Java test out into our Xiao Ming, modify the code can be.

We use ViewPage to control the navigation bar. Upload the ViewPage to the Pagerslidingtabstrip and set the listener with the following code:

public void Setviewpager (Viewpager pager) {This.pager = Pager;if (pager.getadapter () = = null) {throw new Illegalstateexcep tion ("Viewpager does not having adapter instance."); Pager.setonpagechangelistener (Pagelistener); notifydatasetchanged ();}

second, to obtain the user switch the current view and switch to the destination view.

Viewpager also needs to listen to the user's gestures, so there is definitely a way to do it. So looking at the method of Viewpager, I found a method called onpagescrolled (int position, float positionoffset, int positionoffsetpixels) ~ ~

Yes, that's the way: called when the page scrolls

These parameters are carefully examined below:

Directly say the test results:

In the non-first and last page, swipe to the next page, position is the current page position; Swipe to previous: position current page-1

Positionoffset slide to the next page, [0,1] change on the interval; swipe to previous: (1,0] Change on interval

Positionoffsetpixels This is very much like the positionoffset: sliding to the next page, [0, Width] changes on the interval; slide to previous: (width, 0] change on interval

First page: Swipe to the previous page position=0, the other basic is 0; the last page slides to the next page position the current page position, the other two parameters are 0

Suddenly found that the second step of the steps we need to solve, positionoffset is well suited as a control parameter for gradients, scaling, and positionoffsetpixels can be used as a control parameter for panning.

So how do you get the current view and the destination view:

Share a few of my astray:

1, "error" I through Getchildat (position), Getchildat (position+1), Getchildat (position-1) Get sliding, about two view; At first glance, I really feel good. ~ ~ ~ In the code to write, and then the effect can not come ~ ~ Error Reason: We ignore a particularly large thing, viewpager mechanism, sliding dynamic loading and deletion of View,viewpager actually only maintain 2 to 3 view, and position's range is basically unlimited ~ ~

2, "error" I get the current position through the Getcurrentitem, and then +1,-1 get the latter one or the previous ~ ~ is stealing Hi, quickly code to change over, the effect is not right, messy ~ ~ Carefully observe the log, This getcurrentitem when the user finger left the screen, page also in the animation execution, it changed ~ ~ No wonder ~ the whole sliding process is not fixed ~ ~ Alas, the heart is broken ~

3, "error"position during the entire sliding process is not changed, and Viewpager will save 2 or 3 view; then I think, if it is the first page, or the last page then I take Getchildat (0) and Getchildat ( 1), if the other page is Getchildat (0), Getchildat (2), and then after a series of changes ~ I think this will always be the right, so I met the first question, the first page, regardless of the left and right position are 0, and, what is left view, Which is right view~~

Having said so many mistakes, we can get around these detours and see what is in these detours.

The following is true, in fact Viewpager in adding a view or destroy a view, is our own pageadapter control, so we can in Viewpager to maintain a hashmap<position,view , and then slide it out through get (position), such as the above effect, is always the right view change, either from small to large, or from big to small

Then slide down a page: View:map.get (position) on the left, View:map.get on the right (position+1).

So slide the previous page: View:map.get on the left (position), the right View:map.get (position+1), the same as the slide to the previous page, position for the current page-1

Key code:

<pre name= "code" class= "Java" >private class Pagelistener implements Onpagechangelistener {private int oldposition = 0; @Overridepublic void onpagescrolled (int position, float positionoffset,int positionoffsetpixels) {currentposition = Position;currentpositionoffset = Positionoffset;scrolltochild (position, (int) (Positionoffset * Tabscontainer.getchildat (position). GetWidth ()); invalidate (); if (delegatepagelistener! = null) { delegatepagelistener.onpagescrolled (position, positionoffset,positionoffsetpixels);} if (mstate = = State.idle && positionoffset > 0) {oldpage = Pager.getcurrentitem (); mstate = Position = = Oldpage ? State.GOING_RIGHT:State.GOING_LEFT;} Boolean goingright = Position = = Oldpage;if (mstate = = State.going_right &&!goingright) mstate = State.going_left; else if (mstate = = State.going_left && goingright) mstate = state.going_right;float Effectoffset = Issmall (positio Noffset)? 0:positionoffset; View mleft = tabscontainer.getchildat (position); ViEW mright = tabscontainer.getchildat (position + 1); if (Effectoffset = = 0) {mstate = State.idle;} if (mfadeenabled) Animatefadescale (Mleft, Mright, effectoffset, position);} @Overridepublic void onpagescrollstatechanged (int state) {if (state = = Viewpager.scroll_state_idle) {Scrolltochild ( Pager.getcurrentitem (), 0); mfadeenabled = true;} if (Delegatepagelistener! = null) {delegatepagelistener.onpagescrollstatechanged (state);}} @Overridepublic void onpageselected (int position) {//selectedposition = position;//updatetabstyles (); currentposition = position;//Set old view Statueviewhelper.setalpha (Tabviews.get (oldposition). Get ("normal"), 1); Viewhelper.setalpha (Tabviews.get (oldposition). Get ("selected"), 0); View v_old = Tabscontainer.getchildat (oldposition); Viewhelper.setpivotx (V_old, V_old.getmeasuredwidth () * 0.5f); Viewhelper.setpivoty (V_old, V_old.getmeasuredheight () * 0.5f); Viewhelper.setscalex (V_old, 1f); Viewhelper.setscaley (V_old, 1f);//Set new View Statueviewhelper.setalpha (Tabviews.get (POsition). Get ("normal"), 0); Viewhelper.setalpha (Tabviews.get (position). Get ("selected"), 1); View v_new = tabscontainer.getchildat (position); Viewhelper.setpivotx (V_new, V_new.getmeasuredwidth () * 0.5f); Viewhelper.setpivoty (V_new, V_new.getmeasuredheight () * 0.5f); Viewhelper.setscalex (v_new, 1 + zoom_max); Viewhelper.setscaley (v_new, 1 + zoom_max), if (delegatepagelistener! = null) {delegatepagelistener.onpageselected ( position);} Oldposition = Selectedposition;oldposition = CurrentPosition;}}

You can see the code: Zooming The View is critical:

View v_old = Tabscontainer.getchildat (oldposition); Viewhelper.setpivotx (V_old, V_old.getmeasuredwidth () * 0.5f); Viewhelper.setpivoty (V_old, V_old.getmeasuredheight () * 0.5f); Viewhelper.setscalex (V_old, 1f); Viewhelper.setscaley (V_old, 1f);

Locate the center point of the view: Setpivotx Setpivoty and then scale the x-axis y-axis. 1 is the original size. >1 zoom in, <1 and >0 zoom out.

The key code is: The Onpagescrolled method's bottom 2 parameters positionoffset the percentage of sliding.

Gradients are controlled by the Animatefadescale method:

protected void Animatefadescale (view left, view right,float positionoffset, int position) {if (mstate! = State.idle) {if ( Left! = null) {Viewhelper.setalpha (Tabviews.get (position). Get ("normal"), Positionoffset); Viewhelper.setalpha (Tabviews.get (position). Get ("selected"), 1-positionoffset), float Mscale = 1 + zoom_max-zoom_max * p Ositionoffset; Viewhelper.setpivotx (left, left.getmeasuredwidth () * 0.5f); Viewhelper.setpivoty (left, left.getmeasuredheight () * 0.5f); Viewhelper.setscalex (left, mscale); Viewhelper.setscaley (left, mscale);} if (right! = null) {Viewhelper.setalpha (Tabviews.get (position + 1). Get ("normal"), 1-positionoffset); Viewhelper.setalpha (Tabviews.get (position + 1). Get ("selected"), Positionoffset), float Mscale = 1 + Zoom_max * Positionoffset; Viewhelper.setpivotx (right, right.getmeasuredwidth () * 0.5f); Viewhelper.setpivoty (right, right.getmeasuredheight () * 0.5f); Viewhelper.setscalex (right, Mscale); Viewhelper.setscaley (right, Mscale);}}}

You can directly set the tab color size, normal color, check color, etc. in the place where you activity/reference. EG:

/** * Assigns values to Pagerslidingtabstrip's properties. */private void Settabsvalue () {//Set tab is the Tabs.setshouldexpand (true) that fills the screen automatically;//the Split line that sets tab is transparent Tabs.setdividercolor ( color.transparent)//Set the height of the tab bottom line Tabs.setunderlineheight ((int) typedvalue.applydimension (typedvalue.complex_unit _dip, 1, DM));//sets the height of the tab indicator tabs.setindicatorheight ((int) typedvalue.applydimension (typedvalue.complex_unit_ DIP, 4, DM);//Set tab caption text Size tabs.settextsize ((int) typedvalue.applydimension (typedvalue.complex_unit_sp, DM));// Sets the color of the tab indicator Tabs.setindicatorcolor (Color.parsecolor ("#45c01a"));//sets the color of the tab text (this is a method I customized) Tabs.setselectedtextcolor (Color.parsecolor ("#45c01a"));//Set the normal tab text color (This is a method I customized) Tabs.settextcolor ( Color.parsecolor ("#C231C7")),//Cancel the background color when clicking Tab tabs.settabbackground (0);}

Note: The code is in a previous imitation of the android-main interface changes, there may be redundant classes, forget to understand!!

Source

Navigation bar Effects-news app (better than NetEase, today's headline)