Android Viewpager and fragment for top navigation interface sliding effect

In the project, we often need to realize the effect of the interface sliding switch. For example, the left and right slide transitions of the interface. So how did this effect come true? Today I'll take you through the Viewpager, and use examples to achieve this effect.

I. Viewpager OFFICIAL API

First, let's take a look at Viewpager's official explanation,

The specific meanings are as follows:

Layout The Manager allows the user to swipe left and right on the page to flip the page. You might consider implementing the pageradapter interface to display the effect.

Viewpagermany times it will combineFragment, this approach makes it easy to manage the life cycle of each page. Among them, there are someAdaptercan be adapted to the specific implementation of thisViewPageRcombinedFragmentuse of the case. TheseAdapterinclude:Fragmentpageradapter,and the Fragmentstatepageradapter.

In this paper, the effect of left and right sliding is realized by Viewpager combined with fragment using Fragmentpageradapter adaptor.

Two. The effect is as follows:

Three. Code implementation:

1.xml Layout file

1> Main layout Activity_main.xml

<span style= "Font-family:microsoft yahei;font-size:18px;" ><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:orientation= "vertical" >    <include layout= "@layout/activity_main_top_tab"/>    < Android.support.v4.view.ViewPager        android:id= "@+id/id_page_vp"        android:layout_width= "Match_parent"        android:layout_height= "0DP"        android:layout_weight= "1" >    </android.support.v4.view.viewpager ></LinearLayout></span>

Note: Load Android.support.v4.view.ViewPager in layout, all need to introduce Android-support-v4.jar (normal system will be introduced automatically)

2> Top Navigation Activity_main_top_tab.xml

<span style= "Font-family:microsoft yahei;font-size:18px;" ><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=" Wrap_content "Android:orien tation= "vertical" > <linearlayout android:id= "@+id/id_switch_tab_ll" android:layout_width= "Match_pa Rent "android:layout_height=" wrap_content "android:orientation=" Horizontal "android:baselinealigned= "False" > <linearlayout android:id= "@+id/id_tab_chat_ll" Android:layout_width= "M Atch_parent "android:layout_height=" Wrap_content "android:layout_weight=" 1 "android:backg            round= "@drawable/guide_round_selector" android:gravity= "center" android:orientation= "Horizontal" android:padding= "10dip" > <textview android:id= "@+id/id_chat_tv"               Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" Android oid:gravity= "center" android:text= "chat" android:textcolor= "#0000FF" Android:te            Xtsize= "15dip"/> </LinearLayout> <linearlayout android:id= "@+id/id_tab_friend_ll" Android:layout_width= "Match_parent" android:layout_height= "Wrap_content" Android:layout_wei ght= "1" android:background= "@drawable/guide_round_selector" android:clickable= "true" Android oid:gravity= "center" android:orientation= "horizontal" android:padding= "10dip" Android:sav Eenabled= "false" > <textview android:id= "@+id/id_friend_tv" Android:layout_                Width= "Wrap_content" android:layout_height= "wrap_content" android:gravity= "center" android:text= "Friends"               Android:textcolor= "#000000" android:textsize= "15dip"/> </LinearLayout>            <linearlayout android:id= "@+id/id_tab_contacts_ll" android:layout_width= "Match_parent" android:layout_height= "Wrap_content" android:layout_weight= "1" android:background= "@drawable/gui De_round_selector "android:focusable=" false "android:gravity=" center "android:orientation = "Horizontal" android:padding= "10dip" > <textview android:id= "@+id/id_contacts_                TV "Android:layout_width=" Wrap_content "android:layout_height=" Wrap_content " android:gravity= "Center" android:text= "Contacts" android:textcolor= "#000000" Andro Id:textsize= "15dip"/> </LinearLayout> </LinearLayout> <imageview android:id= "@+id/i D_tab_line_iv "anDroid:layout_width= "200DP" android:layout_height= "wrap_content" android:contentdescription= "tab" Android oid:background= "@drawable/tab_selected_pressed_holo" > </ImageView> <view android:layout_width= "M Atch_parent "android:layout_height=" 1DP "android:background=" #000000 "/></linearlayout></span&gt ;

3>fragment Show Layout activity_tab_chat.xml,activity_tab_contacts.xml,activity_tab_friend.xml (give only one, other similar)

<span style= "Font-family:microsoft yahei;font-size:18px;" ><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:orientation= "vertical" ><textview    android:layout_width= "match_parent"    android:layout _height= "Match_parent"    android:text= "Chat interface"    android:textcolor= "#FF0000"    android:textsize= "20SP"    android:gravity= "center"    ></TextView></LinearLayout></span>

4> main function Mainactivity.java

<span style= "Font-family:microsoft yahei;font-size:18px;" >package Com.example.viewpagerdemo;import Java.util.arraylist;import Java.util.list;import Android.graphics.color;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.util.displaymetrics;import Android.util.log;import Android.widget.imageview;import Android.widget.linearlayout;import Android.widget.textview;public class Mainactivity extends Fragmentactivity {private list<fragment> Mfragmentlist = new arraylist<fragment> ();p rivate fragmentadapter mfragmentadapter;private ViewPager mPageVp;/* * * Tab display content TextView */private TextView Mtabchattv, MTABCONTACTSTV, mtabfriendtv;/** * tab of the Guide line */private ImageView Mtabli neiv;/** * Fragment */private chatfragment mchatfg;private friendfragment mfriendfg;private ContactsFragment mcontactsfg;/** * VIEWPAger the currently selected page */private int currentindex;/** * screen width */private int screenwidth; @Overrideprotected void OnCreate (Bundle saved Instancestate) {super.oncreate (savedinstancestate); Setcontentview (R.layout.activity_main); FindById (); Init (); Inittablinewidth ();} private void FindByID () {Mtabcontactstv = (TextView) This.findviewbyid (R.ID.ID_CONTACTS_TV); Mtabchattv = (TextView) This.findviewbyid (R.ID.ID_CHAT_TV); Mtabfriendtv = (TextView) This.findviewbyid (R.ID.ID_FRIEND_TV); mTabLineIv = ( ImageView) This.findviewbyid (R.ID.ID_TAB_LINE_IV); Mpagevp = (Viewpager) This.findviewbyid (R.ID.ID_PAGE_VP);} private void Init () {MFRIENDFG = new friendfragment (); MCONTACTSFG = new Contactsfragment (); MCHATFG = new Chatfragment (); MF Ragmentlist.add (MCHATFG); Mfragmentlist.add (MFRIENDFG); Mfragmentlist.add (MCONTACTSFG); mFragmentAdapter = new Fragmentadapter (This.getsupportfragmentmanager (), mfragmentlist); Mpagevp.setadapter (MFragmentAdapter); Mpagevp.setcurrentitem (0); Mpagevp.setonpagechangelistener (New Onpagechangelistener ({/** * State has three states in sliding State (0,1,2) 1: Sliding 2: Sliding finish 0: nothing. */@Overridepublic void onpagescrollstatechanged (int state) {}/** * Position: Current page, and the page you clicked to swipe offset: Percentage of current page offset * Offsetpixels: Pixel position of the current page offset */@Overridepublic void onpagescrolled (int position, float Offset,int offsetpixels) { Linearlayout.layoutparams LP = (linearlayout.layoutparams) mtablineiv.getlayoutparams (); LOG.E ("offset:", offset + "");/** * Use Currentindex (current page) and position (next page) and offset to set the left margin of the Mtablineiv slide scene: * Remember 3 pages, * from the left To the right are 0,1,2 * 0->1; 1->2; 2->1; 1->0 */if (Currentindex = = 0 && Position = = 0)//0->1{lp.leftmargin = (int) (OFFSET * (ScreenWidth * 1.0/3 ) + currentindex* (SCREENWIDTH/3));}  else if (Currentindex = = 1 && Position = = 0)//1->0{lp.leftmargin = (int) (-(1-offset) * (ScreenWidth * 1.0/ 3) + currentindex* (SCREENWIDTH/3));} else if (Currentindex = = 1 && Position = = 1)//1->2{lp.leftmargin = (int) (OFFSET * (ScreenWidth * 1.0/3) + currentindex* (ScreenwidtH/3));}  else if (Currentindex = = 2 && Position = = 1)//2->1{lp.leftmargin = (int) (-(1-offset) * (ScreenWidth * 1.0/ 3) + currentindex* (SCREENWIDTH/3));} MTABLINEIV.SETLAYOUTPARAMS (LP);} @Overridepublic void onpageselected (int position) {Resettextview (); switch (position) {Case 0:mtabchattv.settextcolor ( Color.Blue); break;case 1:mtabfriendtv.settextcolor (Color.Blue); Break;case 2:mtabcontactstv.settextcolor ( Color.Blue); break;} Currentindex = position;}});} /** * Sets the width of the slider to 1/3 of the screen (depending on the number of tabs) */private void Inittablinewidth () {displaymetrics dpmetrics = new Displaymetrics (); GetWindow (). Getwindowmanager (). Getdefaultdisplay (). Getmetrics (dpmetrics); screenwidth = Dpmetrics.widthpixels; Linearlayout.layoutparams LP = (linearlayout.layoutparams) mtablineiv.getlayoutparams (); lp.width = SCREENWIDTH/3; MTABLINEIV.SETLAYOUTPARAMS (LP);} /** * Reset color */private void Resettextview () {mtabchattv.settextcolor (color.black); Mtabfriendtv.settextcolor ( Color.Black); Mtabcontactstv.settextcolor (color.bLACK);}} </span>

Attention:

1.MainActivity inherits from Fragmentactivity;

2. Initialize the width of the navigation bar: Inittablinewidth (), as this example gives 3 interface switching, solid length of the entire screen width of 1/3;

3. The onpagescrolled method of monitoring event Onpagechangelistener mainly captures the sliding events;

The meaning of the 3 parameters is given. Depending on the change in the sliding 4 (left-middle-right-middle-left), the left margin of the navigation bar is displayed, showing the effect of the navigation bar sliding.

5>fragment Adapter Fragmentadapter, inherited from Fragmentpageradapter

<span style= "Font-family:microsoft yahei;font-size:18px;" >package Com.example.viewpagerdemo;import Java.util.arraylist;import Java.util.list;import Android.support.v4.app.fragment;import Android.support.v4.app.fragmentmanager;import Android.support.v4.app.fragmentpageradapter;public class Fragmentadapter extends Fragmentpageradapter {List< fragment> fragmentlist = new arraylist<fragment> ();p ublic fragmentadapter (Fragmentmanager fm,List< Fragment> fragmentlist) {super (FM); this.fragmentlist = Fragmentlist;} @Overridepublic Fragment getItem (int position) {return fragmentlist.get (position);} @Overridepublic int GetCount () {return fragmentlist.size ();}} </span>

6>fragment Show function Chatfragment.java,contactsfragment.java,friendfragment.java (give only one, other similar)

<span style= "Font-family:microsoft yahei;font-size:18px;" >package Com.example.viewpagerdemo;import Android.os.bundle;import Android.support.v4.app.fragment;import Android.view.layoutinflater;import Android.view.view;import Android.view.viewgroup;public class ChatFragment Extends Fragment {@Overridepublic View oncreateview (layoutinflater inflater,viewgroup container,bundle Savedinstancestate) {Super.oncreateview (Inflater, container, savedinstancestate); View Chatview = inflater.inflate (R.layout.activity_tab_chat, Container,false); return chatview;} @Overridepublic void onactivitycreated (Bundle savedinstancestate) {super.onactivitycreated (savedinstancestate);}} </span>

Above is all the content of this article.

Source: http://download.csdn.net/detail/a123demi/7943901

Android Viewpager and fragment for top navigation interface sliding effect