Android Imitation micro-letter Bottom Implementation Tab TAB switch effect _android

On the Internet to see more of the tutorial on the tab, found all very messy. More use is made of Titlepagertabstrip and Viewpaper. But Titlepagertabstrip has a very big flaw, the content of the tab inside just enter is not, want to slide one time can load out. And sliding, the tab inside the content location is not fixed, the final slip will appear a blank, very beautiful. Although there are other remedial methods, but very troublesome, so I followed my own approach to achieve a good and very simple.

Direct click or sliding interface, you can go to the corresponding page.

Effect Chart:

The principle is to use three buttons and Viewpaper, abandoned the Titlepagertabstrip.

Viewpaper in layman's parlance, it is a container that is loaded with pages. As shown above I have three different interfaces, because I added three view. Then add the Viewpaper to the layout of the main interface.

In this way, there are three buttons on the main interface, the button below is a viewpaper, the Viewpaper has three views, I will jump to the corresponding view every slide or click the button.

So what we see is actually the main interface, and the button is always there. We just keep changing the view of the container inside the viewpaper.

Layout code for the main interface:

<relativelayout 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 "
  tools:context= ". Mainactivity ">

  <android.support.v4.view.viewpager
    android:id=" @+id/viewpager "
    android:layout _width= "Wrap_content"
    android:layout_height= "wrap_content" >
 
    
 
</RelativeLayout>

How to implement, press the corresponding button to jump to the corresponding view in the Viewpaper? Quite simply, just set up a listener for the button and then call the Viewpaper Setcurrentitem () function.

For the corresponding page, our button should also have a corresponding change, as shown in our button in the English into √. This is just a function of overloading onpageselected () in a Viewpaper listener.

This function is called when each page is selected. In this function to determine which is the current page, and then make a corresponding change to the button.
OnCreate's Code

 Set Viewpaper Viewpager pager = null;

  

  arraylist<view> viewcontainter = new arraylist<view> ();
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);

    Setcontentview (R.layout.activity_add);



    Instantiate Viewpaper pager = (Viewpager) This.findviewbyid (R.ID.VIEWPAGER3); The Set button jumps to the corresponding Viewpaper page button 1.setOnClickListener (new View.onclicklistener () {@Override public void OnC

      Lick (View v) {//Skip to First page pager.setcurrentitem (0);

    }
    });
        Button 2.setOnClickListener (new View.onclicklistener () {@Override public void OnClick (View v) {//second page

      Pager.setcurrentitem (1);
    
    }
    });
        Button 3.setOnClickListener (new View.onclicklistener () {@Override public void OnClick (View v) {//Third page

      Pager.setcurrentitem (2);
    
    
    

    }
    });
   Set content for Viewpaper//view is what we put into the viewpaper, set the layout for it, and put it in. View View1 = Layoutinflater.from (this). Inflate (r.layout. Own layout file 1, null);
    View View2 = Layoutinflater.from (this). Inflate (r.layout. Own layout file 2, null);

    View VIEW3 = Layoutinflater.from (this). Inflate (r.layout. Own layout file 3, null);
    This is a ArrayList, added 3 view viewcontainter.add (VIEW1);
    Viewcontainter.add (VIEW2);
    

    Viewcontainter.add (VIEW3); Set the adapter here to copy the code Pager.setadapter (the number of components in the new Pageradapter () {//viewpager @Override public int get
      Count () {return viewcontainter.size ();
                  }//Slide switch when destroying the current component @Override public void Destroyitem (ViewGroup container, int position,
      Object) {((Viewpager) container). Removeview (Viewcontainter.get (position)); The component generated @Override public Object instantiateitem (viewgroup container, int position) {(
        (Viewpager) container). AddView (Viewcontainter.get (position));
      return Viewcontainter.get (position);

 }     @Override public boolean isviewfromobject (View arg0, Object arg1) {return arg0 = = Arg1;
      @Override public int GetItemPosition (object) {return Super.getitemposition (object);

    }


    });  Monitor changes when the page Changes button Pager.setonpagechangelistener (new Viewpager.onpagechangelistener () {@Override public void onpagescrolled (int i, float v, int i1) {} @Override public void onpageselected (int i) {SWI
            TCH (i) {//If it is the first page case 0: Button 1.setText ("√");
            Button 2.setText ("TAB2");

            Button 3.setText ("TAB3");

          Break
            If it is the second page Case 1: Button 1.setText ("TAB1");
            Button 2.setText ("√");
            Button 3.setText ("TAB3");
            
          Break
            If it is the third page Case 1: Button 1.setText ("TAB1");
            Button 2.setText ("TAB2");
            Button 3.setText ("√");



        Break

  }    @Override public void onpagescrollstatechanged (int i) {}});

 }

If you want to use the controls in each view, the controls are not found on the main interface and are empty. Must be specified in the Instantiateitem function.

@Override public
      Object instantiateitem (viewgroup container, int position) {
        (Viewpager) container). AddView ( Viewcontainter.get (position));

        Switch (position) {case

          0: {

            //on first page}
          }}

The above is the entire content of this article, I hope to help you learn.