Summarize the MD style related controls in Android _android

To use the MD style control, you first need to include the support design Library in Gradle, for example:

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

First, Coordinatorlayout

1, Coordinatorlayout + appbarlayout

The layout file code is as follows:

<android.support.design.widget.coordinatorlayout xmlns:android= "Http://schemas.android.com/apk/res/android" xmlns:app= "Http://schemas.android.com/apk/res-auto" android:id= "@+id/main_content" android:layout_width= "Match_" Parent "android:layout_height=" match_parent "> <android.support.design.widget.appbarlayout android:id=" @+id/ AppBar "android:layout_width=" match_parent "android:layout_height=" wrap_content "android:theme=" @style/appthem E.appbaroverlay "> <android.support.v7.widget.toolbar android:id=" @+id/toolbar "android:layout_width = "Match_parent" android:layout_height= "Attr/actionbarsize" android:background= "Attr/colorprimary" app: 

    layout_scrollflags= "Scroll|enteralways" app:popuptheme= "@style/apptheme.popupoverlay" app:title= "MdView"/> <android.support.design.widget.tablayout android:id= "@+id/tablayout" android:layout_width= "Match_pare NT "android:layout_height=" Wrap_cOntent "/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.viewpager android: Id= "@+id/viewpager" android:layout_width= "match_parent" android:layout_height= "Match_parent" App:layout_behavi Or= "@string/appbar_scrolling_view_behavior"/> .... </. ...... Android.support.design.widget.coordinatorlayout>

Look at the effect:

Coordinatorlayout_1

With Coordinatorlayout, appbarlayout, we have achieved this effect, scroll up the list, toolbar hidden, tablayout top, and then scroll down toolbar is displayed.

Toolbar can scroll through the Hide \ Display, which is implemented by the following properties:app:layout_scrollFlags="scroll|enterAlways"


The related attribute values are interpreted as follows:

Scroll: The view that needs to scroll out of the screen needs to be set to the flag, and the view will be pinned to the top of the screen without setting.

enteralways: using this flag, scrolling down will make the view a visible state.

Setting the Layout_scrollflags sign for toolbar is just the first step, and we also need to provide a scrollable view in coordinatorlayout, we use Viewpager, and we nest recyclerview inside. You also need to set the following properties for Viewpager:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

Here is a brief tablayout of the use of:

//set Tablayout scrollable to display Mtablayout.settabmode when the number of tabs is too high (tablayout.mode_scrollable
    );
    Two parameters corresponding to the tab unselected text color and selected text color mtablayout.settabtextcolors (color.white, color.red);
    Binding Viewpager Mtablayout.setupwithviewpager (Mviewpager);
    Set the layout mode of the Tablayout (Gravity_fill, Gravity_center) Mtablayout.settabmode (tablayout.mode_fixed);
    Mtablayout.settabgravity (Tablayout.gravity_fill);
      Set Tablayout selection Listener Mtablayout.addontabselectedlistener (new Tablayout.ontabselectedlistener () {//Click tab to callback
      @Override public void ontabselected (Tablayout.tab Tab) {Mviewpager.setcurrentitem (tab.getposition ());
      Callback @Override @Override public void ontabunselected (Tablayout.tab tab) {}///Click Tab repeatedly
      public void ontabreselected (Tablayout.tab Tab) {scrolltotop (Mfragments.get (Tab.getposition ()). Gettypelist ()); 
}
    });

2, Coordinatorlayout + appbarlayout + collapsingtoolbarlayout

The layout file code is as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <android.support.design.widget.coordinatorlayout xmlns:android= " Http://schemas.android.com/apk/res/android "xmlns:app=" Http://schemas.android.com/apk/res-auto "xmlns:tools="
  Http://schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent " Android:fitssystemwindows= "true" android:id= "@+id/detail_content" tools:context= "
    Com.othershe.mdview.DetailActivity "> <android.support.design.widget.appbarlayout android:id=" @+id/app_bar " Android:layout_width= "Match_parent" android:layout_height= "200DP" android:fitssystemwindows= "true" Android: Theme= "@style/apptheme.appbaroverlay" > <android.support.design.widget.collapsingtoolbarlayout android:id= "@+id/toolbar_layout" android:layout_width= "match_parent" android:layout_height= "Match_parent" android:f Itssystemwindows= "true" app:contentscrim= "? Attr/colorprimary" App:layout_scrollflags= "scroll|exituntilcollapsed" > <imageview android:id= "@+id/detail_img" Android:layout_w Idth= "Match_parent" android:layout_height= "Match_parent" android:fitssystemwindows= "true" Android:

      Scaletype= "Fitxy" app:layout_collapsemode= "parallax" app:layout_collapseparallaxmultiplier= "0.7"/>
        <android.support.v7.widget.toolbar android:id= "@+id/toolbar" android:layout_width= "Match_parent" android:layout_height= "attr/actionbarsize" app:layout_collapsemode= pin "app:popuptheme=" @style/app Theme.popupoverlay "/> </android.support.design.widget.CollapsingToolbarLayout> </ Android.support.design.widget.appbarlayout> <android.support.v4.widget.nestedscrollview Android:layout_ Width= "Match_parent" android:layout_height= "match_parent" app:layout_behavior= "@string/appbar_scrolling_view_ Behavior "> <webview android:id=" @+id/webview "android:layout_width=" "Match_parent" android:layout_height= "Match_parent"/> </android.support. V4.widget.nestedscrollview> .... </android.support.design.widget.CoordinatorLayout>..........

Look at the effect:

Coordinatorlayout_2

Combined with collapsingtoolbarlayout, we slide up ImageView hidden, toolbar display, downward slide is the opposite, similar to the effect of folding expansion.
In the collapsingtoolbarlayout through the app:contentScrim="?attr/colorPrimary" Zodiac set toolbar folding to the top of the background, at the same time set the app:layout_scrollFlags="scroll|exitUntilCollapsed" zodiac, which scroll = meaning has been explained, The meaning of exituntilcollapsed is as follows:

exituntilcollapsed: Scroll out of the screen, and finally collapse at the top

At the same time the height of the appbarlayout requires the first fixed value, so that the collapsingtoolbarlayout has the effect of folding.

After folding toolbar can be fixed at the top because of the use of app:layout_collapseMode="pin" attributes, the property value in addition to a pin and a parallax:

pin: fixed mode, last fixed at top of folding

Parallax: parallax pattern, there will be a disparity folding effect in folding

At the same time in the ImageView use of the app:layout_collapseMode="parallax" Zodiac, to produce the effect of parallax gradient, use app:layout_collapseParallaxMultiplier="0.7" can control parallax changes, the range of attribute values is [0.0, 1.0], the greater the value of inspection.

Finally, you need to set the app:layout_behavior="@string/appbar_scrolling_view_behavior properties in Nestedscrollview.

3, Coordinatorlayout + Floatingactionbutton

Look at the layout file code:

<android.support.design.widget.coordinatorlayout xmlns:android= "Http://schemas.android.com/apk/res/android"
  xmlns:app= "Http://schemas.android.com/apk/res-auto"
  android:id= "@+id/main_content"
  android:layout _width= "Match_parent"
  android:layout_height= "Match_parent" > .......
  ...... ...
  <android.support.design.widget.floatingactionbutton
    android:id= "@+id/fab"
    android:layout_width= " Wrap_content "
    android:layout_height=" wrap_content "
    android:layout_gravity=" End|bottom "
    android: Layout_margin= "16DP"
    android:src= "@android:d rawable/ic_menu_share"/>

</ Android.support.design.widget.coordinatorlayout>

Floatingactionbutton's parent view is Coordinatorlayout, shown in the lower-right corner of the screen, which we can use in Java code:

Mfab.setonclicklistener (New View.onclicklistener () {
      @Override public
      void OnClick (view view) {
        Snackbar.make (mcoordinatorlayout, "dot I share Oh!") ", Snackbar.length_short). Show ();
      }
    );

See Effect:

Coordinatorlayout_3

When the Snackbar show Floatingactionbutton up, hide the current move. If Floatingactionbutton's parent view is relativelayout or other container, Floatingactionbutton does not move up and is overwritten by Snackbar.

In the coordinatorlayout_2 gif, when we slip, Floatingactionbutton collapses and disappears, but it only takes the following two attributes to

App:layout_anchor= "@id/app_bar"
app:layout_anchorgravity= "Bottom|end"

The first property causes Floatingactionbutton to appear in the Appbarlayout area, and the second property determines where the display is.

Second, Toolbar

Using toolbar first to hide the original Actionbar, we can add a theme

<style name= "Apptheme.noactionbar" >
    <item name= "Windowactionbar" >false</item>
    <item Name= "Windownotitle" >true</item>
  </style>

You can also extend the original theme,

<style name= "Apptheme" parent= "Theme.AppCompat.Light.NoActionBar" >
    <item name= "Colorprimary" >@ color/colorprimary</item>
    <item name= "Colorprimarydark" > @color/colorprimarydark</item>
    <item name= "coloraccent" > @color/coloraccent</item>
  </style>

colorprimary: corresponds to the color of the Actionbar.

Colorprimarydark: The color of the corresponding status bar

coloraccent: corresponds to EditText editing, Floatingactionbutton background and other colors.

The usage in the layout file can refer to the above code and then get toolbar in the Java code to setSupportActionBar(mToolbar); replace the original Actionbar by toolbar.

Next look at a picture:

Toolbar

Some toolbar extensions are marked out so that we can tailor our toolbar to our needs. The specific practice lesson reference source code.

Third, Navigationview

First look at the effect:

Navigationview

In fact, Navigationview is used to achieve the effect of our common sideslip menu.

Code in the layout file:

 <?xml version= "1.0" encoding= "Utf-8"?> < Android.support.v4.widget.DrawerLayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:app= "
  Http://schemas.android.com/apk/res-auto "android:id=" @+id/drawer_layout "android:layout_width=" Match_parent " android:layout_height= "Match_parent" android:fitssystemwindows= "true" > <include layout= "@layout/content_mai N "android:layout_width=" match_parent "android:layout_height=" match_parent "/> <android.support.design.wi Dget. Navigationview android:id= "@+id/nav_view" android:layout_width= wrap_content "android:layout_height=" Match_par Ent "android:layout_gravity=" "Start" android:fitssystemwindows= "true" app:menu= "@menu/menu_drawer" App:head erlayout= "@layout/nav_head_main"/> </android.support.v4.widget.drawerlayout> 

With Drawerlayout as the root layout, content_main as the main interface layout, and finally Navigationview, by android:layout_gravity="start" setting to the left sliding menu, the same as the android:layout_gravity="end" right sliding menu.

which

app:menu= "@menu/menu_drawer"
app:headerlayout= "@layout/nav_head_main"

The two properties represent the top header layout of the Navigationview and the menu item layout below, which can refer to the source code.

The layout file is ready, and the next step is to initialize the work:

private void Initnavigationview () {//Initialize the icon and name ImageView icon of the top head of Navigationview = (ImageView) mnavview.get
    Headerview (0). Findviewbyid (R.id.nav_head_icon);
    Icon.setimageresource (R.mipmap.ic_launcher);
    TextView name = (TextView) mnavview.getheaderview (0). Findviewbyid (R.id.nav_head_name);
    Name.settext ("Vipothershe"); Set the Navigationview corresponding to menu item click Mnavview.setnavigationitemselectedlistener (NEW  Navigationview.onnavigationitemselectedlistener () {@Override public boolean onnavigationitemselected (MenuItem
          Item {switch (Item.getitemid ()) {case r.id.nav_item1:break;
          Case R.id.nav_item2:break;
          Case R.id.nav_set:break;
          Case R.id.menu_share:break;
        Case R.id.nav_about:break;
        }//Hide Navigationview mdrawerlayout.closedrawer (Gravitycompat.start);
      return true;
  }
    }); }

Very simply, initialize the top header and menu Item of the Navigationview.

Let's take a look at how to use the right sliding menu with toolbar:

Actionbardrawertoggle Toggle = new Actionbardrawertoggle (this
        , Mdrawerlayout, Mtoolbar, R.string.navigation_ Drawer_open, r.string.navigation_drawer_close);
    Mdrawerlayout.adddrawerlistener (toggle);
    Set the upper left corner to display three horizontal lines
    toggle.syncstate ();

Bind the two together by setting, with three horizontal lines in the upper-left corner and a left-toolbar menu open in the upper-left corner.

You can also take another approach:

 Set toolbar upper left corner icon
    Mtoolbar.setnavigationicon (r.mipmap.ic_launcher);
    Mtoolbar.setnavigationonclicklistener (New View.onclicklistener () {
      @Override public
      void OnClick (view view ) {
        mdrawerlayout.opendrawer (gravitycompat.start);
      }
    });

First set the toolbar icon in the upper-left corner and bind the event by mDrawerLayout.openDrawer(GravityCompat.START); opening the left-slide menu.

The above two methods correspond to the open and close left-sliding menu, respectively:

Mdrawerlayout.opendrawer (Gravitycompat.start);
Mdrawerlayout.closedrawer (Gravitycompat.start);

If you use the right sliding menu to change the Gravitycompat.start to Gravitycompat.end, you can implement the right sliding menu switch.

The above is a summary of the MD style-related controls in Android, and the article is detailed with examples, hoping to help you in Android development app.