Top pagination bar for color gradient

Top pagination bar for color gradient

Let's take a look.

Let's talk about the principle. "1", "2", and "3" are three buttons. There are two textviews under the three buttons, one being blue and the other being gray, the color gradient is achieved by constantly adjusting the width of the blue TextView. Under the button is a ViewPager + Fragment to slide pages.

The layout file is very important here. I first paste the layout file, activity_main.xml

 

Pay attention to the Code in the first LinearLayout. The width of the TextView in the gray (# d3d3d3) background is match_parent, Which is match_parent which does not occupy the entire width of the screen, because a TextView with a blue (#99ff33) background is defined before the gray TextView, the system first needs to meet the width requirements of the TextView with a blue background, the remaining screen width is filled with TextView of the gray background. Therefore, in the code, you only need to adjust the TextView width of the blue background.

 

Initialize the control and implement the sliding paging function of ViewPager.

 

Private void init () {// TODO Auto-generated method stubgrabackll = (LinearLayout) findViewById (R. id. gradation_back); topll = (LinearLayout) findViewById (R. id. top_bar); cywnxt = (TextView) findViewById (R. id. cywnText); graViewPager = (ViewPager) findViewById (R. id. gradation_pager); initFragment (); graAdapter = new GraAdapter (getSupportFragmentManager (), fList); graViewPager. setAdapter (graAdapter); graViewPager. setOnPageChangeListener (new GraPagerChangeListener (); graViewPager. setOnTouchListener (new OnTouchListener () {@ Overridepublic boolean onTouch (View v, MotionEvent event) {// TODO Auto-generated method stubfloat newX; // determine the slide direction switch (event. getAction () & MotionEvent. ACTION_MASK) {case MotionEvent. ACTION_DOWN: oldX = event. getX (); break; case MotionEvent. ACTION_MOVE: newX = event. getX (); if (newX-oldX> 0) type = 1; else if (newX-oldX <0) type = 0; break;} return false ;}}); initTopBar (); setGraWidth (float) screenWidth)/3 );}

/*** Add a sliding interface. Three interfaces are added here, and the corresponding TopBar should be divided into three parts */private void initFragment () {// TODO Auto-generated method stubGraFragment1 f1 = new GraFragment1 (); GraFragment2 f2 = new GraFragment2 (); GraFragment3 f3 = new GraFragment3 (); fList. add (f1); fList. add (f2); fList. add (f3 );}

Private void initTopBar () {// Add the three buttons to topbarLinearLayout. layoutParams params = new LinearLayout. layoutParams (0, LayoutParams. WRAP_CONTENT); params. weight = 1; String [] array = {1, 2, 3}; for (int I = 0; I <3; I ++) {Button btn = new Button (this); btn. setBackgroundColor (Color. TRANSPARENT); btn. setTag (String. valueOf (I + 1); btn. setText (array [I]); btn. setOnClickListener (this); topll. addView (btn, params);} // set the background color height to the same as that of topbar ViewTreeObserver vto = topll. getViewTreeObserver (); vto. addOnPreDrawListener (new ViewTreeObserver. onPreDrawListener () {public boolean onPreDraw () {int height = topll. getMeasuredHeight (); RelativeLayout. layoutParams params = (RelativeLayout. layoutParams) grabackll. getLayoutParams (); params. height = height; grabackll. setLayoutParams (params); return true ;}});}

/*** Set the TextView width of the cyan background ** @ param width */private void setGraWidth (float width) {LinearLayout. layoutParams params = (LinearLayout. layoutParams) cywnxt. getLayoutParams (); params. width = (int) width; cywnxt. setLayoutParams (params );}

Private class GraPagerChangeListener implements OnPageChangeListener {@ Overridepublic void onPageScrollStateChanged (int state) {// TODO Auto-generated method stubswitch (state) {case ViewPager. SCROLL_STATE_DRAGGING: // This State indicates that the finger is sliding ViewPager. To prevent the index value Deviation Caused by continuous and rapid sliding, the index value oldindex = index; break; case ViewPager is loaded when sliding. SCROLL_STATE_IDLE: // This State indicates that ViewPager stops sliding. When sliding stops, the new index value is assigned to oldindexoldindex = index; offsetX = 0; Break; case ViewPager. SCROLL_STATE_SETTLING: // This indicates that the finger does not slide the ViewPager on the screen, but the inertial ViewPager is still sliding break; }}@ Overridepublic void onPageScrolled (int position, float scaleDist, int dist) {// TODO Auto-generated method stub // change the width of the TextView Of The cyan background when sliding. if (scaleDist! = 0) switch (type) {case 0: // slide dis to the Right = (float) screenWidth)/3 * scaleDist; setGraWidth (float) screenWidth) /3 * (oldindex) + dis + offsetX); break; case 1: // Slide left dis = (float) screenWidth)/3 * (1-scaleDist ); setGraWidth (float) screenWidth)/3 * (oldindex)-dis-offsetX); break ;}@ Overridepublic void onPageSelected (int position) {// TODO Auto-generated method stubindex = position + 1; offsetX = (float) screenWidth)/3 * (Math. abs (index-oldindex)-1 );}}

@Overridepublic void onClick(View v) {// TODO Auto-generated method stubint position = graViewPager.getCurrentItem();int newPosition = Integer.valueOf(v.getTag().toString()) - 1;if (newPosition > position)type = 0;else if (newPosition < position)type = 1;graViewPager.setCurrentItem(newPosition);}

Complete MainActivity code

 

 

Package com. example. gradationbar; import java. util. arrayList; import java. util. list; import android. graphics. color; import android. graphics. point; import android. OS. bundle; import android. support. v4.app. fragment; import android. support. v4.app. fragmentActivity; import android. support. v4.view. viewPager; import android. support. v4.view. viewPager. onPageChangeListener; import android. view. display; import android. view. gestureDetector; import android. view. motionEvent; import android. view. view; import android. view. view. onClickListener; import android. view. view. onGenericMotionListener; import android. view. view. onTouchListener; import android. view. viewTreeObserver; import android. widget. button; import android. widget. linearLayout; import android. widget. linearLayout. layoutParams; import android. widget. relativeLayout; import android. widget. textView; public class MainActivity extends FragmentActivity implements OnClickListener {private LinearLayout grabackll, topll; private TextView cywnxt; private ViewPager graViewPager; private List
 
  
FList = new ArrayList
  
   
(); Private GraAdapter graAdapter; private int screenWidth; private int oldindex = 1, index = 1; private float dis; private static int type = 0; // 0 indicates the right, 1 indicates to left private float oldX; private float offsetX = 0; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); // obtain the screen width Display dispaly = getWindowManager (). getdefadisplay display (); SC ReenWidth = dispaly. getWidth (); init ();} private void init () {// TODO Auto-generated method stubgrabackll = (LinearLayout) findViewById (R. id. gradation_back); topll = (LinearLayout) findViewById (R. id. top_bar); cywnxt = (TextView) findViewById (R. id. cywnText); graViewPager = (ViewPager) findViewById (R. id. gradation_pager); initFragment (); graAdapter = new GraAdapter (getSupportFragmentManager (), fList); graVi EwPager. setAdapter (graAdapter); graViewPager. setOnPageChangeListener (new GraPagerChangeListener (); graViewPager. setOnTouchListener (new OnTouchListener () {@ Overridepublic boolean onTouch (View v, MotionEvent event) {// TODO Auto-generated method stubfloat newX; // determine the slide direction switch (event. getAction () & MotionEvent. ACTION_MASK) {case MotionEvent. ACTION_DOWN: oldX = event. getX (); break; case MotionEvent. ACTION_MOVE: newX = event. getX (); if (newX-oldX> 0) type = 1; else if (newX-oldX <0) type = 0; break;} return false ;}}); initTopBar (); setGraWidth (float) screenWidth)/3);}/*** adds a sliding interface. Three interfaces are added here, the corresponding TopBar should be divided into three parts */private void initFragment () {// TODO Auto-generated method stubGraFragment1 f1 = new GraFragment1 (); GraFragment2 f2 = new GraFragment2 (); graFragment3 f3 = new GraFragment3 (); fList. add (f 1); fList. add (f2); fList. add (f3);} private void initTopBar () {// add the three buttons to topbarLinearLayout. layoutParams params = new LinearLayout. layoutParams (0, LayoutParams. WRAP_CONTENT); params. weight = 1; String [] array = {1, 2, 3}; for (int I = 0; I <3; I ++) {Button btn = new Button (this); btn. setBackgroundColor (Color. TRANSPARENT); btn. setTag (String. valueOf (I + 1); btn. setText (array [I]); btn. setOnClickListener (this ); Topll. addView (btn, params);} // set the background color height to the same as that of topbar ViewTreeObserver vto = topll. getViewTreeObserver (); vto. addOnPreDrawListener (new ViewTreeObserver. onPreDrawListener () {public boolean onPreDraw () {int height = topll. getMeasuredHeight (); int width = topll. getMeasuredWidth (); RelativeLayout. layoutParams params = (RelativeLayout. layoutParams) grabackll. getLayoutParams (); if (width> height) {params. width = Width; params. height = width;} else {params. width = height; params. height = height;} grabackll. setLayoutParams (params); return true ;}});}/*** set the TextView width of the cyan background ** @ param width */private void setGraWidth (float width) {LinearLayout. layoutParams params = (LinearLayout. layoutParams) cywnxt. getLayoutParams (); params. width = (int) width; cywnxt. setLayoutParams (params);} private class GraPagerChangeListe Ner implements OnPageChangeListener {@ Overridepublic void onPageScrollStateChanged (int state) {// TODO Auto-generated method stubswitch (state) {case ViewPager. SCROLL_STATE_DRAGGING: // This State indicates that the finger is sliding ViewPager. To prevent the index value Deviation Caused by continuous and rapid sliding, the index value oldindex = index; break; case ViewPager is loaded when sliding. SCROLL_STATE_IDLE: // This State indicates that ViewPager stops sliding. When sliding stops, the new index value is assigned to oldindexoldindex = index; offsetX = 0; break; case ViewPager. SCROLL_STAT E_SETTLING: // This status indicates that the finger does not slide the ViewPager on the screen, but the inertial ViewPager is still sliding break; }}@ Overridepublic void onPageScrolled (int position, float scaleDist, int dist) {// TODO Auto-generated method stub // change the width of the TextView Of The cyan background when sliding. if (scaleDist! = 0) switch (type) {case 0: // slide dis to the Right = (float) screenWidth)/3 * scaleDist; setGraWidth (float) screenWidth) /3 * (oldindex) + dis + offsetX); break; case 1: // Slide left dis = (float) screenWidth)/3 * (1-scaleDist ); setGraWidth (float) screenWidth)/3 * (oldindex)-dis-offsetX); break ;}@ Overridepublic void onPageSelected (int position) {// TODO Auto-generated method stubindex = position + 1; offsetX = (float) screenWidth)/3 * (Math. abs (index-oldindex)-1) ;}@ Overridepublic void onClick (View v) {// TODO Auto-generated method stubint position = graViewPager. getCurrentItem (); int newPosition = Integer. valueOf (v. getTag (). toString ()-1; if (newPosition> position) type = 0; else if (newPosition <position) type = 1; graViewPager. setCurrentItem (newPosition );}}
  
 

GraAdapter

 

 

package com.example.gradationbar;import java.util.List;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;public class GraAdapter extends FragmentPagerAdapter {private List
 
   fList;public GraAdapter(FragmentManager fm, List
  
    fList) {super(fm);this.fList = fList;// TODO Auto-generated constructor stub}@Overridepublic Fragment getItem(int arg0) {// TODO Auto-generated method stubreturn fList == null ? null : fList.get(arg0);}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn fList == null ? -1 : fList.size();}}
  
 

GraFragment1

 

 

Package com. example. gradationbar; import android. OS. bundle; import android. support. v4.app. fragment; import android. view. layoutInflater; import android. view. view; import android. view. viewGroup; import android. widget. textView; public class GraFragment1 extends Fragment {@ Overridepublic View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {// TODO Auto-generated method stubView view = inflater. inflate (R. layout. fragment_gra, null); TextView graTxt = (TextView) view. findViewById (R. id. fragment_gra); graTxt. setText (I am the first interface); return view ;}}

GraFragment2

 

 

Package com. example. gradationbar; import android. OS. bundle; import android. support. v4.app. fragment; import android. view. layoutInflater; import android. view. view; import android. view. viewGroup; import android. widget. textView; public class GraFragment2 extends Fragment {@ Overridepublic View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {// TODO Auto-generated method stubView view = inflater. inflate (R. layout. fragment_gra, null); TextView graTxt = (TextView) view. findViewById (R. id. fragment_gra); graTxt. setText (I am the second interface); return view ;}}

GraFragment3

 

 

Package com. example. gradationbar; import android. OS. bundle; import android. support. v4.app. fragment; import android. view. layoutInflater; import android. view. view; import android. view. viewGroup; import android. widget. textView; public class GraFragment3 extends Fragment {@ Overridepublic View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {// TODO Auto-generated method stubView view = inflater. inflate (R. layout. fragment_gra, null); TextView graTxt = (TextView) view. findViewById (R. id. fragment_gra); graTxt. setText (I am the third interface); return view ;}}

Fragment_gra.xml