Android Development Step by step 71:coordinatorlayout+appbarlayout+recyclerview+viewpager Create app main frame that can swipe up or down

After watching a lot of apps, you will find that many of the main framework of the app now can swipe up and down, left and right, we will naturally think of Viewpager, but can swipe up and down, and the top of the ad or background after the row, but also need to retain the tab tag with what to achieve? Read a lot of information, and finally found that the SDK Android support V7 has Coordinatorlayout+appbarlayout+recyclerview, two component combinations can be supported up and down sliding effect, In addition, the Coordinatorlayout+appbarlayout+nestedscrollview can also be achieved up and down the sliding effect, but the test proved that the Nestedscrollview need itself can slide, that is, the data inside the full screen need to slide In order to appbarlayout up.

First give, sorry, do not know how to make a dynamic diagram, give two static.

OK, now let's implement this function, here are the main steps.

First step: Introducing the V7 Support Library

Build.gradle inside introduced

dependencies {    Compile filetree (dir: ' Libs ', include: [' *.jar '])    compile ' com.android.support:design:22.2.0 '    compile ' com.android.support:recyclerview-v7:22.2.0 '}

Step Two: Design the main page face Activity_main.xml

<?xml version= "1.0" encoding= "Utf-8"? ><android.support.design.widget.coordinatorlayout android:id= "@+id/ Main_content "xmlns:android=" http://schemas.android.com/apk/res/android "xmlns:app=" http://schemas.android.com/ Apk/res-auto "android:layout_width=" match_parent "android:layout_height=" match_parent "> <android.support.de Sign.widget.AppBarLayout android:id= "@+id/appbar" android:layout_width= "Match_parent" Android:layout_            height= "Wrap_content" android:theme= "@style/themeoverlay.appcompat.dark.actionbar" > <linearlayout            Android:id= "@+id/toolbar" android:layout_width= "match_parent" android:layout_height= "100DP" Android:background= "#123456" app:layout_scrollflags= "scroll|enteralways" app:popuptheme= "@ Style/themeoverlay.appcompat.light "android:gravity=" center_vertical "android:orientation=" vertical "       > <textview         Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" Android:te Xt= "The best app"/> </LinearLayout> <android.support.design.widget.tablayout Android Oid:id= "@+id/tabs" android:layout_width= "match_parent" android:layout_height= "40DP" Andro id:background= "#810e88"/> </android.support.design.widget.AppBarLayout> < Android.support.v4.view.ViewPager android:id= "@+id/vp_body" android:layout_width= "Match_parent" Andro id:layout_height= "Match_parent" app:layout_behavior= "@string/appbar_scrolling_view_behavior" > </android.su Pport.v4.view.viewpager></android.support.design.widget.coordinatorlayout>

Step Three: Write Mainactivity.java

Package Com.figo.study;import Android.os.bundle;import Android.support.design.widget.tablayout;import Android.support.v4.app.fragment;import Android.support.v4.app.fragmentactivity;import Android.support.v4.app.fragmentmanager;import Android.support.v4.app.fragmentpageradapter;import Android.support.v4.view.viewpager;import Android.util.log;import Android.view.view;import Com.figo.study.fragment.activityfragment;import Com.figo.study.fragment.exchangefragment;import Com.figo.study.fragment.mefragment;import Java.util.arraylist;import Java.util.list;public class MainActivity    Extends Fragmentactivity {private Viewpager mvpbody;    Arraylist<fragment> fragmentslist;    private int currindex;    List<string> titles;        @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);        Setcontentview (R.layout.activity_main);    Initviewpager (); } private void Initviewpager () {try {tablayout Mtablayout = (tablayout) Findviewbyid (r.id.tabs);            Titles = new arraylist<> ();            Titles.add ("Exchange");            Titles.add ("Activity");            Titles.add ("Me");            Mtablayout.addtab (Mtablayout.newtab (). SetText (titles.get (0)));            Mtablayout.addtab (Mtablayout.newtab (). SetText (Titles.get (1)));            Mtablayout.addtab (Mtablayout.newtab (). SetText (Titles.get (2)));            Mtablayout.settabtextcolors (Getresources (). GetColor (R.color.white), Getresources (). GetColor (r.color.selected));            Mvpbody = (Viewpager) Findviewbyid (r.id.vp_body);            Fragmentslist = new arraylist<fragment> ();            Bundle bundle = new bundle ();            Fragment exchangefragment = exchangefragment.newinstance (mainactivity.this, bundle);            Fragment activityfragment = activityfragment.newinstance (mainactivity.this, bundle);                 Fragment mefragment = mefragment.newinstance (   Mainactivity.this, bundle);            Fragmentslist.add (exchangefragment);            Fragmentslist.add (activityfragment);            Fragmentslist.add (mefragment); Tabfragmentpageradapter tabfragmentpageradapter = new Tabfragmentpageradapter (getsupportfragmentmanage            R (), fragmentslist);            Mvpbody.setadapter (New Tabfragmentpageradapter (Getsupportfragmentmanager (), fragmentslist));            Mvpbody.setcurrentitem (0);            Mvpbody.setonpagechangelistener (New Myonpagechangelistener ());            Mtablayout.setupwithviewpager (Mvpbody);        Mtablayout.settabsfrompageradapter (Tabfragmentpageradapter);        } catch (Exception e) {log.e ("Initviewpager", "Initviewpager", e); }} public class Tabfragmentpageradapter extends Fragmentpageradapter {arraylist<fragment> MFRAGMENTSL        Ist        Public Tabfragmentpageradapter (fragmentmanager FM) {super (FM);        }Public Tabfragmentpageradapter (Fragmentmanager FM, arraylist<fragment> fragmentslist) {super (FM);        Mfragmentslist = fragmentslist;        } @Override public Fragment getItem (int position) {return mfragmentslist.get (position);        } @Override public int getcount () {return mfragmentslist.size ();        } @Override public charsequence getpagetitle (int position) {return titles.get (position);        }} public class Tabonclicklistener implements View.onclicklistener {private int index = 0;        Public Tabonclicklistener (int i) {index = i;        } @Override public void OnClick (View v) {mvpbody.setcurrentitem (index);    }    }    ; public class Myonpagechangelistener implements Viewpager.onpagechangelistener {@Override public void OnPage    Selected (int arg0) {switch (arg0) {case 0:                Break                Case 1:break;            Case 2:break;        } currindex = arg0; } @Override public void onpagescrolled (int arg0, float arg1, int arg2) {} @Override PU Blic void onpagescrollstatechanged (int arg0) {}}}

Fourth Step: Write fragment, here is given one of the Activityfragment.java

Package Com.figo.study.fragment;import Android.animation.animator;import Android.animation.animatorlisteneradapter;import Android.animation.objectanimator;import Android.annotation.targetapi;import Android.content.context;import Android.content.intent;import Android.os.Build ; Import Android.os.bundle;import Android.support.annotation.nullable;import Android.support.v7.widget.linearlayoutmanager;import Android.support.v7.widget.recyclerview;import Android.view.layoutinflater;import android.view.view;import Android.view.viewgroup;import com.figo.study.R;/** * Activity */public class Activityfragment extends Android.support.v4.app.Fragment {public static activityfragment Newin        Stance (Context Context,bundle Bundle) {activityfragment newfragment = new Activityfragment ();        Newfragment.setarguments (bundle);    return newfragment;    } private Recyclerview Mrecyclerview; @Override public View Oncreateview (layoutinflater inflater, ViewGroup container, Bundle Savedinstancestate) {Mrecyclerview = (Recyclerview) inflater.inflate (R.layout.fragment_activity_new, Conta        Iner, false);    return mrecyclerview; } @Override public void onactivitycreated (Bundle savedinstancestate) {super.onactivitycreated (savedinstances        Tate);        Mrecyclerview.setlayoutmanager (New Linearlayoutmanager (Mrecyclerview.getcontext ()));    Mrecyclerview.setadapter (New Recyclerviewadapter (Getactivity ())); } public class Recyclerviewadapter extends recyclerview.adapter<recyclerviewadapter.viewholder> {private        Context Mcontext;        Public Recyclerviewadapter (Context mcontext) {this.mcontext = Mcontext;            } @Override Public Recyclerviewadapter.viewholder oncreateviewholder (viewgroup parent, int viewtype) { View view = Layoutinflater.from (Parent.getcontext ()). Inflate (r.layout.fragment_activity, parent,            FALSE);      return new Viewholder (view);  } @TargetApi (Build.version_codes. LOLLIPOP) @Override public void Onbindviewholder (final recyclerviewadapter.viewholder holder, int position)        {Final view view = Holder.mview;        } @Override public int getitemcount () {return 1;            } public class Viewholder extends Recyclerview.viewholder {public final View MView;                Public Viewholder (view view) {super (view);            MView = view; }        }    }}

you can see that the real fragment layout is actually a recylerview.

Fragment_activity_new.xml layout

<?xml version= "1.0" encoding= "Utf-8"? ><android.support.v7.widget.recyclerview    xmlns:android= "http:/ /schemas.android.com/apk/res/android "    android:id=" @+id/rv_activity "    android:layout_width=" match_parent "    android:layout_height=" Match_parent "/>

Fragment_activity.xml layout

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "    android:orientation=" vertical "android:layout_width=" match_parent "    android:layout_height=" Match_parent ">    <textview        android:layout_width=" wrap_content "        android:layout_height=" Wrap_ Content "        android:text=" Activity "        android:id=" @+id/textview "        android:layout_gravity=" Center_ Horizontal "/></linearlayout>

Note that, if there is a ListView inside the Fragment_activity.xml, the layout of the ListItem must be linearlayout, and the height of the ListView must be calculated, otherwise the effect of sliding up or down is useless.

Fifth step: Related style design Style.xml file

<style name= "Theme.designdemo" parent= "Base.Theme.DesignDemo" >    </style>    <style name= " Base.Theme.DesignDemo "parent=" Theme.AppCompat.Light.NoActionBar ">        <item name=" Colorprimary "># 0fb73d</item>        <item name= "Colorprimarydark" > #0ba823 </item>        <item name= "Coloraccent" > #FF4081 </item>        <item name= "Android:windowbackground" > @color/window_background</item>    </style>

Sixth step: Androidmanifest.xml configuration

<?xml version= "1.0" encoding= "Utf-8"? ><manifest xmlns:android= "http://schemas.android.com/apk/res/ Android "    package=" Com.figo.study ">    <application        android:allowbackup=" true "        android:icon= "@mipmap/ic_launcher"        android:label= "@string/app_name"        android:theme= "@style/theme.designdemo" >        <activity            android:name= ". Mainactivity "            android:label=" @string/app_name ">            <intent-filter>                <action android:name=" Android.intent.action.MAIN "/>                <category android:name=" Android.intent.category.LAUNCHER "/>            </intent-filter>        </activity>    </application></manifest>

With the above 6 steps, I believe you can also create apps that can have sliding effects up or down.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Android Development Step by step 71:coordinatorlayout+appbarlayout+recyclerview+viewpager Create app main frame that can swipe up or down