Home>

To use md-style controls,First you need to add support design library to gradle, for example:

compile "com.android.support:design:24.1.1"

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/apptheme.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_parent"
      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_behavior="@ string/appbar_scrolling_view_behavior" />
    ...
</android.support.design.widget.coordinatorlayout>

Take a look at the effect:

coordinatorlayout_1

With coordinatorlayout and appbarlayout, we achieve this effect,When scrolling up the list,The toolbar is hidden, the tablayout is set to the top, and the toolbar is scrolled down to display it.

The reason why the toolbar can be scrolled and hidden \ displayed is through the following attributes:app:layout_scrollflags="scroll | enteralways"

The relevant attribute values ​​are explained as follows:

scroll:The view that needs to scroll out of the screen needs to set this flag. If it is not set, the view will be fixed at the top of the screen.

enteralways:With this flag, scrolling down will make the view visible.

Setting layout_scrollflags for the toolbar is only the first step.You also need to provide a scrollable view in the coordinatorlayout. We use the viewpager and nest the recyclerview inside. At the same time, the following properties need to be set for the viewpager:

app:layout_behavior="@ string/appbar_scrolling_view_behavior"

Here is a brief description of the use of tablayout:

//Set the tablayout to scroll to ensure that it can display normally when there are too many tabs
    mtablayout.settabmode (tablayout.mode_scrollable);
    //The two parameters correspond to the text color of the unselected tab and the selected text color, respectively
    mtablayout.settabtextcolors (color.white, color.red);
    //Binding viewpager
    mtablayout.setupwithviewpager (mviewpager);
    //Set the layout of the tablayout (gravity_fill, gravity_center)
    mtablayout.settabmode (tablayout.mode_fixed);
    mtablayout.settabgravity (tablayout.gravity_fill);
    //Set the tablayout selection listener
    mtablayout.addontabselectedlistener (new tablayout.ontabselectedlistener () {
      //Callback when the tab is clicked
      @override
      public void ontabselected (tablayout.tab tab) {
        mviewpager.setcurrentitem (tab.getposition ());
      }
      @override
      public void ontabunselected (tablayout.tab tab) {
      }
      //Callback when the tab is repeatedly clicked
      @override
      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:fitssystemwindows="true"
      app:contentscrim="?attr/colorprimary"
      app:layout_scrollflags="scroll | exituntilcollapsed">
      <imageview
        android:id="@ + id/detail_img"
        android:layout_width="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/apptheme.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>

Take a look at the effect:

coordinatorlayout_2

Combined with collapsing toolbar layout, when we slide up, the imageview is hidden and the toolbar is displayed.Similar to the effect of folding and unfolding.In collapsingtoolbarlayout viaapp:contentscrim="?attr/colorprimary" Sets the background of the toolbar to the top,is also set app:layout_scrollflags="scroll | exituntilcollapsed" The horoscope, the meaning of scroll=has been explained,The meaning of exituntilcollapsed is as follows:

exituntilcollapsed:Scroll to exit the screen.Finally folded at the top

At the same time, the height of the appbarlayout is the first fixed value when needed,In this way collapsingtoolbarlayout has the effect of folding.

The toolbar can be fixed to the top after folding becauseis used app:layout_collapsemode="pin" attribute, in addition to the attribute value, there is a parallax:

pin:Fixed mode,Finally fixed to the top when folded

parallax:Parallax mode,There will be a parallax folding effect when folding

Also usedin imageview app:layout_collapsemode="parallax" phase, to produce the effect of parallax gradient,Useapp:layout_collapseparallaxmultiplier="0.7" can control the change of parallax,The range of the attribute value is [0.0, 1.0]. The larger the value, the greater the inspection.

Finally, you need to setin nestedscrollview app:layout_behavior="@ string/appbar_scrolling_view_behavior attribute.

3.coordinatorlayout + floatingaction button

Take a 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:drawable/ic_menu_share" />
</android.support.design.widget.coordinatorlayout>

The parent view of floatingactionbutton is coordinatorlayout, which is displayed in the lower right corner of the screen.In java code we can use it like this:

mfab.setonclicklistener (new view.onclicklistener () {
      @override
      public void onclick (view view) {
        snackbar.make (mcoordinatorlayout, "Come and share!", snackbar.length_short) .show ();
      }
    });

See the effect:

coordinatorlayout_3

The floatingactionbutton moves up when the snackbar is displayed, and moves down when it is hidden.If the parent view of the floatingactionbutton is a relativelayout or other container, the floatingactionbutton will not move up and be covered by the snackbar.

Incoordinatorlayout_2In the gif effect, when we slide up, the floatingaction button will collapse and disappear.In fact, only the following two attributes are required.

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

The first property causes the floatingactionbutton to be displayed in the appbarlayout area, and the second property determines the specific position of the display.

Toolbar

To use the toolbar, first 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&​​lt;/item>
    <item name="coloraccent">@ color/coloraccent</item>
  </style>

colorprimary:Corresponds to the color of the actionbar.

colorprimarydark:The color of the status bar

coloraccent:Corresponds to colors such as edittext and floatingactionbutton background.

The usage in the layout file can refer to the code above,After getting the toolbar in the java code, pass thesetsupportactionbar (mtoolbar); Make the toolbar replace the original actionbar.

Next look at a picture:

toolbar

Marked some common extension methods of toolbar,This way we can better customize our toolbar according to the needs. Specific practical lessons refer to the source code.

Three, navigationview

First look at the effect:

navigationview

In fact, navigationview is used to achieve the effect of our common sliding menu.

Code in 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_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
  <android.support.design.widget.navigationview
    android:id="@ + id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitssystemwindows="true"
    app:menu="@ menu/menu_drawer"
    app:headerlayout="@ layout/nav_head_main" />
</android.support.v4.widget.drawerlayout>

With drawerlayout as the root layout,content_main as the main interface layout,The last is navigationview, viaandroid:layout_gravity="start" is set to the left slide menu,Same asandroid:layout_gravity="end" stands for the right sliding menu.

among them

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

The two attributes represent the top header layout of the navigationview and the menu item layout below. For details, please refer to the source code.

Prepared the layout file,The next step is initialization:

private void initnavigationview () {
    //Initialize the icon and name of the head of the navigationview
    imageview icon=(imageview) mnavview.getheaderview (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 navigation view corresponding to the 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 simple, it is to initialize the top header and menu item of the navigationview.

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

actionbardrawert toggle 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,At the same time, three horizontal lines are displayed in the upper left corner of the toolbar.The upper left corner opens the left slide menu.

There is another way:

//Set the icon in the upper left corner of the toolbar
    mtoolbar.setnavigationicon (r.mipmap.ic_launcher);
    mtoolbar.setnavigationonclicklistener (new view.onclicklistener () {
      @override
      public void onclick (view view) {
        mdrawerlayout.opendrawer (gravitycompat.start);
      }
    });

First set the icon in the upper left corner of the toolbar.And bind events,Viamdrawerlayout.opendrawer (gravitycompat.start); Open the left-slide menu.

The above two methods,Open and close the left-slide menu respectively:

mdrawerlayout.opendrawer (gravitycompat.start);
mdrawerlayout.closedrawer (gravitycompat.start);

If you use the right-click menu, you can change gravitycompat.start to gravitycompat.end to switch the right-click menu.

  • Previous First exposure to the amazing Bootstrap menus and navigation
  • Next Simple example of AngularJS ng-controller directive