Android program development using the design package to achieve the QQ animation sideslip effect and sliding menu navigation _android

At the 2015 IO Conference, Google brought us a more detailed design specification for material, and also brought us a brand new Android Support Library, in this Support Google provides us with a more standardized MD design-style control. Most importantly, the Android design Support Library is more compatible and can be directly backward-compatible to Android 2.2. This has to be said to be a conscientious work.

Using the method is simple, you just need to add a line of dependencies

Compile ' com.android.support:design:24.0.0 '

First use tablayout and Snackbar and navigation to achieve the QQ sideslip animation effect and sliding

Project synchronized to: Https://github.com/nanchen2251/designNavigation-and-tabLayout

Last overall effect chart

The first thing to bring is tablayout.

The tab slide Toggle view is not a new concept, but Google is the first to provide complete support in the support library.
Also, the tablayout of the design library implements a fixed tab-the width of the view is evenly distributed,
A scrollable tab is also implemented-the view width is not fixed and can be scrolled horizontally. Tabs can be added dynamically in your program,
But most of the time we do not use this, usually the slide layout will be combined with viewpager, so we need Viewpager to help:
Through a word setupwithviewpager, we put Viewpager and tablayout together.

Last Run Diagram:

Look at the code

First is the XML file for the main page

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/" Apk/res/android "
xmlns:tools=" Http://schemas.android.com/tools "
xmlns:app=" http://schemas.android.com/ Apk/res-auto "
android:layout_width=" match_parent "
android:layout_height=" match_parent "
android:o" rientation= "vertical"
tools:context= "com.example.nanchen.designtablayoutdemo.MainActivity" >
< Android.support.design.widget.TabLayout
android:layout_width= "match_parent"
app:tabbackground= "@ Color/colorprimarydark "
app:tabtextcolor=" @android: Color/white "
app:tabselectedtextcolor=" #04b4ae "
android:layout_height= "wrap_content"
android:id= "@+id/main_tab_layout"/>
< Android.support.v4.view.ViewPager
android:layout_width= "match_parent"
android:layout_height= "0DP"
android:layout_weight= "1"
android:id= "@+id/main_vp"/>
</LinearLayout>

Because the control must be tablayout under the design package, it must be added

xmlns:app= "Http://schemas.android.com/apk/res-auto" <br><br> This allows you to use custom properties of it. It has a lot of properties, so simple to use a few, more people can go to try. <br> here, I only scroll three, if you have more App tab tag,

App:tabmode= "Scrollable" must specify this property, or you will find that if you do not see it, if the number of labels is low, or if the recommended setting is fixed, that will be equal.

<br><br> followed by fragment XML file <br><br>

<framelayout 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= " Com.example.nanchen.designtablayoutdemo.BlankFragment ">
<!--todo:update blank fragment layout-->
<textview
android:layout_width= "match_parent"
android:layout_height= "Match_parent"
Android:textsize= "30SP"
android:gravity= "center"
android:id= "@+id/fg_text"
android:text= "@ String/hello_blank_fragment "/>
</FrameLayout>

Mainactivity.java

Package Com.example.nanchen.designtablayoutdemo;
Import Android.os.Bundle;
Import Android.support.design.widget.TabLayout;
Import Android.support.v4.view.ViewPager;
Import android.support.v7.app.AppCompatActivity;
Import java.util.ArrayList;
Import java.util.List;
public class Mainactivity extends Appcompatactivity {
@Override
protected void OnCreate (Bundle Savedinstancestate) {
super.oncreate (savedinstancestate);
Setcontentview (r.layout.activity_main);
Viewpager VP = (viewpager) Findviewbyid (R.ID.MAIN_VP);
Tablayout tablayout = (tablayout) Findviewbyid (r.id.main_tab_layout);
list<string> list = new arraylist<> ();
for (int i = 1; i < 4; i++) {
//List.add (String.Format (Locale.china, "02d% page", i));
List.add ("First" +i+ "page");
}
Vp.setadapter (New Myadapter (Getsupportfragmentmanager (), list);
Tablayout.setupwithviewpager (VP);
}

Fragment is used to store the following data

Package Com.example.nanchen.designtablayoutdemo;
Import Android.os.Bundle;
Import android.support.annotation.Nullable;
Import android.support.v4.app.Fragment;
Import Android.view.LayoutInflater;
Import Android.view.View;
Import Android.view.ViewGroup;
Import Android.widget.TextView;
/** * A Simple {@link Fragment} subclass. */public class Blankfragment extends Fragment {public blankfragment () {//Required empty public constructor} public St
atic blankfragment newinstance (String text) {Bundle args = new Bundle (); Args.putstring ("text", text);
Blankfragment fragment = new Blankfragment ();
Fragment.setarguments (args);
return fragment;  @Override public View Oncreateview (layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) {//Inflate
The layout for this fragment return Inflater.inflate (R.layout.fragment_blank, container, false); @Override public void onviewcreated (view view, @Nullable Bundle savedinstancestate) {super.onviewcreated view, Savedin
Stancestate); TExtview Text = (TextView) View.findviewbyid (R.id.fg_text);
String str = getarguments (). getString ("text");
Text.settext (str); }
}

Need a Pageradapter

Customize one.

Package Com.example.nanchen.designtablayoutdemo;
Import android.support.v4.app.Fragment;
Import Android.support.v4.app.FragmentManager;
Import Android.support.v4.app.FragmentPagerAdapter;
Import java.util.List;
/**
* Created by South Dust on 2016/7/12.
* * Public
class Myadapter extends Fragmentpageradapter {
private list<string> List;
Public Myadapter (Fragmentmanager FM, list<string> List) {
super (FM);
this.list = list;
}
@Override public
Fragment getitem (int position) {return
blankfragment.newinstance (list.get (position));
}
@Override public
int GetCount () {return
list.size ();
}
@Override public
charsequence getpagetitle (int position) {return
list.get (position);
}

2) again to see how to use navigation and drawerlayout to achieve Sideslip function animation Demo

The use of the tablayout under the design package is explained earlier, and the following will bring the linkage of Navagationview and drawlayout as well as toolbar.

Navigationview is simpler to implement by providing a framework for drawer navigation, and it can directly generate navigation elements directly through a menu resource file. Use the Navigationview as a drawerlayout content view. Navigationview handles the relationship with the status bar to ensure that Navigationview interacts with the status bar correctly on the api21+ device.

The following code is modified on the basis of the preceding code.

Mainactivity.java

Package Com.example.nanchen.designtablayoutdemo;
Import Android.os.Bundle;
Import Android.support.design.widget.NavigationView;
Import Android.support.design.widget.TabLayout;
Import Android.support.v4.view.GravityCompat;
Import Android.support.v4.view.ViewPager;
Import Android.support.v4.widget.DrawerLayout;
Import Android.support.v7.app.ActionBarDrawerToggle;
Import android.support.v7.app.AppCompatActivity;
Import Android.support.v7.widget.Toolbar;
Import Android.view.MenuItem;
Import Android.widget.Toast;
Import java.util.ArrayList;
Import java.util.List;
public class Mainactivity extends Appcompatactivity implements Navigationview.onnavigationitemselectedlistener {
Private Drawerlayout drawerlayout; @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (
R.layout.activity_main);
Viewpager VP = (viewpager) Findviewbyid (R.ID.MAIN_VP);
Tablayout tablayout = (tablayout) Findviewbyid (r.id.main_tab_layout); Toolbar Toolbar = (TooLbar) Findviewbyid (R.id.main_toolbar);
Drawerlayout = (drawerlayout) Findviewbyid (r.id.main_drawerlayout);
Set up toolbar and drawerlayout to realize animation and linkage This.setsupportactionbar (toolbar);
Actionbardrawertoggle Toggle = new Actionbardrawertoggle (this,drawerlayout,toolbar,0,0); Drawerlayout.adddrawerlistener (toggle),//Set listening toggle.syncstate (), plus sync Getsupportactionbar ().
Setdefaultdisplayhomeasupenabled (TRUE);
list<string> list = new arraylist<> (); for (int i = 1; i < 5; i++) {//List.add (String.Format (Locale.china, 02d% page, i)); List.add ("+i+ page"); vp.setadapter
(New Myadapter (Getsupportfragmentmanager (), list);
Tablayout.setupwithviewpager (VP);
Navigationview Navigationview = (navigationview) Findviewbyid (r.id.main_navigation);
Navigationview.setnavigationitemselectedlistener (this); @Override public boolean onnavigationitemselected (MenuItem item) {switch (Item.getitemid ()) {case R.id.menu_item1:toa
St.maketext (This, "you clicked Menu 1", Toast.length_short). Show ();
Break Case R.ID.MENU_ITEM2: Toast.maketext (This, "you clicked Menu 2", Toast.length_short). Show ();
Break
Case R.id.menu_item3:toast.maketext (This, "you clicked Menu 3", Toast.length_short). Show ();
Break
Case R.id.menu_item4:toast.maketext (This, "you clicked Menu 4", Toast.length_short). Show ();
Break
} drawerlayout.closedrawer (Gravitycompat.start);
return true; }
}

Master Layout

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/"
Android "xmlns:tools=" Http://schemas.android.com/tools "xmlns:app=" Http://schemas.android.com/apk/res-auto " Android:layout_width= "Match_parent" android:layout_height= "match_parent" android:orientation= "vertical" tools: context= "Com.example.nanchen.designtablayoutdemo.MainActivity" > <!--toolbar,actionbar alternatives--> < Android.support.v7.widget.Toolbar android:id= "@+id/main_toolbar" App:theme= "@style ThemeOverlay.AppCompat.Dark.ActionBar "android:background=" @color/colorprimary "android:layout_width=" Match_ Parent "android:layout_height=" actionbarsize "/> <android.support.v4.widget.drawerlayout android:layout_ Width= "Match_parent" android:layout_height= "0DP" android:id= "@+id/main_drawerlayout" android:layout_weight= "1" > <linearlayout android:orientation= "vertical" android:layout_width= "match_parent" Match_parent "> <android.support.deSign.widget.TabLayout android:layout_width= "match_parent" app:tabbackground= "@color/colorprimarydark" app:
Tabtextcolor= "@android: Color/white" app:tabselectedtextcolor= "#04b4ae" android:layout_height= "Wrap_content"
Android:id= "@+id/main_tab_layout"/> <android.support.v4.view.viewpager android:layout_width= "Match_parent" android:layout_height= "0DP" android:layout_weight= "1" android:id= "@+id/main_vp"/> </LinearLayout> <
Android.support.design.widget.NavigationView app:menu= "@menu/navigation" android:id= "@+id/main_navigation"
android:layout_gravity= "Start" app:headerlayout= "@layout/header" app:itemicontint= "@color/navigation_selector" App:itemtextcolor= "@color/navigation_selector" android:layout_width= "match_parent" android:layout_height= "Match_ Parent "> </android.support.design.widget.NavigationView> </android.support.v4.widget.drawerlayout  > </LinearLayout>

Navigation.xml

<?xml version= "1.0" encoding= "Utf-8"?> <menu xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
<group android:checkablebehavior=" single ">
<item android:id=" @+id/single_1 "Android : title= "Single selection 1" android:icon= "@mipmap/ic_launcher"/> <item android:id= "@+id/single_2"
android:title= "single election 2" android:icon= "@mipmap/ic_launcher"/>
<item android:id= "@+id/single_3" android:title= "Radio 3" android:icon= "@mipmap/ic_launcher"/>
</group>
<item android:id= "@+id/menu_item1" android:title= "Menu 1" android:icon= "@mipmap/ic_launcher"/> <item android:id= "@+id/menu_item2" android:title= "
Menu 2" android: icon= "@mipmap/ic_launcher"/> <item android:id= @+id/menu_item3 "android:title="
menu 3 "android:icon=" @ Mipmap/ic_launcher "/>
<item android:id=" @+id/menu_item4 "android:title=" Menu 4 "android:icon=" @mipmap/ic_ Launcher "/>
</menu>

Header.xml

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
android:layout_width=" match_parent "
android:orientation=" vertical "
android:gravity=" Center "
android:background=" @drawable/header_bg "
android:layout_height=" 200DP ">
<imageview
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:src= "@mipmap Ic_launcher "/>
<textview
android:layout_width=" wrap_content "android:layout_height=" Wrap_
Content "
android:text=" text "/>
</LinearLayout>

Header.bg.xml

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
<gradient android:type=" linear "android:angle=" android:startcolor= "
#143e52" Android : endcolor= "#06a0ff"/>
</shape>

Navigation_selector.xml

<?xml version= "1.0" encoding= "Utf-8"?> <selector xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
<item android:color=" #fa08ca "android:state_checked=" true "/>
<item android:color=" # 6B6A6A "android:state_checked= false"/>

The above is a small set up to introduce the Android program to the use of the design package to achieve the QQ animation sideslip effect and sliding menu navigation, 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!