Realization of micro-interface instance code _android with Viewpager and fragment

In today's internet age, micro-mail is a super app. This Viewpager + fragment implementation of a micro-letter interface, the previous useful fragmenttabhost implemented a similar interface, Viewpager implementation of the way is simpler than the fragmenttabhost way.

Viewpager:

Viewpager inherits from ViewGroup, is a container class and can add view to it.

Viewpager use is very simple, through the Setadapter () method to set a pageradapter can, this pageradapter need to write their own, to achieve some of the methods inside. This article wants to combine with fragment, so realize is Fragmentpageradapter class, Fragmentpageradapter inherits from Pageradapter.

Viewpager through the Addonpagechangelistener () method, you can set up a Viewpager.onpagechangelistener listener, and then call the corresponding method when the pager changes.

Fragment:

Fragment have their own life cycle, interested in their own through a variety of ways to study (their own log to see is the simplest way), here is not to repeat. Combined with Viewpager, there are several pager that need to be implemented in several different fragment.

First look at the final implementation of the effect chart:

The layout is divided into three parts:

The top of the layout_top.xml, mainly is the top of the title, just a TextView, the middle of the Viewpager, the bottom of the Layout_ The bottom.xml consists of three linear layouts, each of which includes a imageview and TextView.

Activity_main.xml:

<?xml version= "1.0" encoding= "Utf-8"?> <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"
tools:context= " Com.example.administrator.viewpagerl.MainActivity ">
<include layout=" @layout/layout_top "></ include>
<android.support.v4.view.viewpager
android:id= "@+id/viewpagerlayout"
android: Layout_width= "Match_parent"
android:layout_height= "match_parent"
android:layout_weight= "1" >
</android.support.v4.view.ViewPager>
<include layout= "@layout/layout_bottom" ></include>
</LinearLayout>

Layout_top.xml

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
android:orientation=" horizontal "
android:layout_width=" match_parent "
android:layout_" height= "Wrap_content"
android:paddingtop= "3DP"
android:paddingbottom= "3DP"
android:background= "@ Android:color/darker_gray ">
<textview
android:id=" @+id/viewtitle "
android:layout_ marginleft= "20DP"
android:layout_margintop= "5DP"
android:textsize= "25sp"
android:layout_width= " Wrap_content "
android:layout_height=" wrap_content "/>
</LinearLayout>

Layout_bottom.xml

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/" Android "android:orientation=" horizontal "android:layout_width=" Match_parent "android:layout_height=" wrap_content "Android:layout_alignparentbottom=" true "android:paddingtop=" 3DP "android:paddingbottom=" 3DP "android:background= "@android: Color/holo_green_light" > <linearlayout android:id= "@+id/firstlinearlayout" android:layout_width= " Wrap_content "android:layout_height=" wrap_content "android:orientation=" vertical "android:gravity=" center_ Horizontal "android:layout_weight=" 1 "> <imageview android:id=" @+id/firstimageview "android:background=" @
Drawable/tab_weixin "android:layout_width=" wrap_content "android:layout_height=" wrap_content "/> <TextView Android:id= "@+id/firsttextview" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android: text= "micro-letter"/> </LinearLayout> <linearlayout android:id= "@+id/secondlinearlayout" android:layouT_width= "Wrap_content" android:layout_height= "wrap_content" android:orientation= "vertical" android:gravity= " Center_horizontal "android:layout_weight=" 1 "> <imageview android:id=" @+id/secondimageview "Android:layout_ Width= "Wrap_content" android:layout_height= "wrap_content" android:background= "@drawable/tab_setting"/> < TextView android:id= "@+id/secondtextview" android:layout_width= wrap_content "android:layout_height=" wrap_content "android:text=" friend "/> </LinearLayout> <linearlayout android:id=" @+id/threelinearlayout "Android:layout_ Width= "Wrap_content" android:layout_height= "wrap_content" android:orientation= "vertical" android:gravity= "Center_" Horizontal "android:layout_weight=" 1 "> <imageview android:id=" @+id/threeimageview "android:layout_width="
Wrap_content "android:layout_height=" wrap_content "android:background=" @drawable/tab_find "/> <TextView Android:id= "@+id/threetextview" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:text= "Discovery"/> </LinearLayout> </LinearLayout> 

As mentioned above, Viewpager needs to implement a pageradapter, very simple to inherit fragmentpageradapter, implement the GetItem () and GetCount () method.

Viewpagerfragmentadapter. java

Package Com.example.administrator.viewpagerl;
Import android.support.v4.app.Fragment;
Import Android.support.v4.app.FragmentManager;
Import Android.support.v4.app.FragmentPagerAdapter;
Import Android.util.Log;
Import java.util.ArrayList;
Import java.util.List;
public class Viewpagerfragmentadapter extends Fragmentpageradapter {
private list<fragment> mlist = new Arraylist<fragment> ();
Public Viewpagerfragmentadapter (Fragmentmanager FM, list<fragment> List) {
super (FM);
this.mlist = list;
}
@Override public
Fragment getitem (int position) {return
mlist.get (position);
}
@Override public
int GetCount () {return
mlist!= null? Mlist.size (): 0;
}
}

Each pager of the Viewpager requires a fragment,fragment to instantiate the layout, displayed in each pager of the Viewpager

Chatfragment.java

Package com.example.administrator.fragment;
Import Android.os.Bundle;
Import android.support.annotation.Nullable;
Import android.support.v4.app.Fragment;
Import Android.util.Log;
Import Android.view.LayoutInflater;
Import Android.view.View;
Import Android.view.ViewGroup;
Import Android.widget.TextView;
Import COM.EXAMPLE.ADMINISTRATOR.VIEWPAGERL.R;
public class Chatfragment extends Fragment {
View mview;
@Nullable
@Override public
View Oncreateview (layoutinflater inflater, @Nullable viewgroup container, @ Nullable Bundle savedinstancestate) {
if (Mview = = null) {
Mview = inflater.inflate (R.layout.fragment_layout, NULL);
((TextView) Mview.findviewbyid (R.id.mtextview)). SetText ("chat interface");
Return Mview
}
}

Here need three fragment, because the layout used here is very simple, three layout is basically consistent, friendfragment, Findfragment here will not post code. Micro-letter in the chat list, friends list in the fragment inside the instantiation of the layout of a ListView, through the ListView way to achieve, here just to record Viewpager did not realize those, interested in can do their own, in fact, it is not difficult.

In the activity only need to give Viewpager set above that adapter, set a monitor to know how pager change can. Click on the bottom of the micro-letter, friends, found three buttons, through the Viewpager Setcurrentitem () method can jump to the corresponding pager, in addition to these also is through some simple logic, control the interface changes on the line, not too difficult things.

Mainactivity.java

Package Com.example.administrator.viewpagerl;
Import android.support.v4.app.Fragment;
Import Android.support.v4.app.FragmentManager;
Import Android.support.v4.view.ViewPager;
Import android.support.v7.app.AppCompatActivity;
Import Android.os.Bundle;
Import Android.util.Log;
Import Android.view.View;
Import Android.widget.LinearLayout;
Import Android.widget.TextView;
Import com.example.administrator.fragment.ChatFragment;
Import com.example.administrator.fragment.FindFragment;
Import com.example.administrator.fragment.FriendFragment;
Import java.util.ArrayList;
Import java.util.List; public class Mainactivity extends Appcompatactivity implements View.onclicklistener {private static final String TAG = "M
Ainactivity.tag ";
TextView Titletextview;
Public LinearLayout firstlinearlayout;
Public LinearLayout secondlinearlayout;
Public LinearLayout threelinearlayout;
Viewpager Mviewpager;
Viewpagerfragmentadapter Mviewpagerfragmentadapter;
Fragmentmanager Mfragmentmanager; String[] TitleName= new string[] {"Micro-letter", "friend", "Discovery"};
list<fragment> mfragmentlist = new arraylist<fragment> (); @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Mfragmentmanager =
Getsupportfragmentmanager ();
Setcontentview (R.layout.activity_main);
Initfragmetlist ();
Mviewpagerfragmentadapter = new Viewpagerfragmentadapter (mfragmentmanager,mfragmentlist);
Initview ();
Initviewpager (); @Override protected void Onresume () {Super.onresume ();} public void Initviewpager () {Mviewpager.addonpagechangelisten
ER (new Viewpagetonpagerchangedlisenter ());
Mviewpager.setadapter (Mviewpagerfragmentadapter);
Mviewpager.setcurrentitem (0);
Titletextview.settext (Titlename[0]);
Updatebottomlinearlayoutselect (True,false,false);
public void Initfragmetlist () {Fragment chat = new Chatfragment ();
Fragment friend = new Friendfragment ();
Fragment find = new findfragment ();
Mfragmentlist.add (chat);
Mfragmentlist.add (friend);
Mfragmentlist.add (find); } public void INITview () {Titletextview = (TextView) Findviewbyid (r.id.viewtitle); Mviewpager = (Viewpager) Findviewbyid (
R.id.viewpagerlayout);
Firstlinearlayout = (linearlayout) Findviewbyid (r.id.firstlinearlayout);
Firstlinearlayout.setonclicklistener (this);
Secondlinearlayout = (linearlayout) Findviewbyid (r.id.secondlinearlayout);
Secondlinearlayout.setonclicklistener (this);
Threelinearlayout = (linearlayout) Findviewbyid (r.id.threelinearlayout);
Threelinearlayout.setonclicklistener (this);
@Override public void OnClick (View v) {switch (V.getid ()) {case R.id.firstlinearlayout:mviewpager.setcurrentitem (0);
Updatebottomlinearlayoutselect (True,false,false);
Break
Case R.id.secondlinearlayout:mviewpager.setcurrentitem (1);
Updatebottomlinearlayoutselect (False,true,false);
Break
Case R.id.threelinearlayout:mviewpager.setcurrentitem (2);
Updatebottomlinearlayoutselect (false,false,true);
Break
Default:break; } private void Updatebottomlinearlayoutselect (Boolean F, Boolean S, Boolean t) {FirstliNearlayout.setselected (f);
Secondlinearlayout.setselected (s);
threelinearlayout.setselected (t); Class Viewpagetonpagerchangedlisenter implements Viewpager.onpagechangelistener {@Override public void onpagescrolled (int position, float positionoffset, int positionoffsetpixels) {//LOG.D (TAG, "onpagescrooled");} @ Override public void onpageselected (int position) {LOG.D (TAG, ' onpageselected '); boolean[] state = new Boolean[titlename.
Length];
State[position] = true;
Titletextview.settext (Titlename[position]);
Updatebottomlinearlayoutselect (state[0],state[1],state[2]);
@Override public void onpagescrollstatechanged (int state) {LOG.D (TAG, "onpagescrollstatechanged");} }

The above is a small set to introduce the Viewpager and fragment together to achieve micro-letter Interface example code, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!