Android Material design new UI control using Daquan II

Preface

In the previous article we introduced a few simple new UI controls, I believe many small partners to materil design visual effects have a certain understanding, today we continue to introduce a few other controls to play the law, let us explore materil design, Let's take a look at the coordinatorlayoutwe're going to introduce today,appbarlayout,collapsingtoolbarlayout and tablayout. , OK, we will then parse the controls, uncover their mystical veil, and serve us, let's Go.

Tablayout

Let's look at the official introduction first:

The
• tablayout is a horizontal layout that provides a display tabs;
The instance of

• Tabs is obtained through Tablayout.tab , which you can do by calling NewTab () , and you can call SetText ( Charsequence text) and setIcon (int) to change the Tab name and icon, if you want to show these tabs, you need to call AddTab (Tab) , Example code:

  
tablayout tablayout = ...;
Tablayout.addtab (Tablayout.newtab (). SetText ("tab 1"));
Tablayout.addtab (Tablayout.newtab (). SetText ("tab 2"));
Tablayout.addtab (Tablayout.newtab (). SetText ("tab 3"));


• You need to set up a Setontabselectedlistener (Ontabselectedlistener) To listen for a callback that changes state when the tab is selected, and if you use Viewpager in your layout, you need to call Setupwithviewpager (Viewpager) To bind the two, this layout automatically fills in the title and content of the Viewpager;

• Of course, you can also add TabItem directly to the layout file for presentation, sample code:

<android.support.design.widget.tablayout         android:layout_height= "wrap_content"         android:layout_width= "Match_parent" >     <android.support.design.widget.tabitem             android:text= "@string/tab_text"/>     <android.support.design.widget.tabitem             android:icon= "@drawable/ic_android"/> </ Android.support.design.widget.tablayout>

We often use Viewpager with fragment to achieve the effect, generally we may use the Viewpagerindicator Open source framework to achieve, such as the effect:

But now TabLayout , we can directly use the Google native control to achieve this effect, we generally will be used in conjunction with Viewpager, we first look at:

Combined with the Viewpager

1 XML file configuration (only the core code is posted)

<android.support.design.widget.tablayout    android:id= "@+id/tablayout"    android:layout_width= "Match_ Parent "    android:layout_height=" wrap_content "/><android.support.v4.view.viewpager    android:id=" @+ Id/tab_viewpager "    android:layout_below=" @id/tablayout "    android:layout_width=" Match_parent "    Android : layout_height= "match_parent"    android:background= "@android: Color/white"/>

2 binding both in code (only the core code is posted)

mViewpager.setAdapter(new MyCusAdapter(fm));
mTablayout.setTabMode(TabLayout.MODE_FIXED);
mTablayout.setupWithViewPager(mViewpager);


Note: mTabLayout When setting tab mode, there are two values, one is, and the TabLayout.MODE_FIXED other is, let's take a TabLayout.MODE_SCROLLABLE look at the official two worth of explanations.

• mode_fixed:fixed tabs Display all tabs concurrently and is best used with content this benefits from quick pivots between Tabs.
• mode_scrollable:scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larg ER number of tabs.

In fact, is a sentence to explain, MODE_SCROLLABLE suitable for a lot of tabs situation, MODE_FIXED is the fixed label is not a lot of tab to say the case, the default is mode_fixed; we can clearly see the difference between the two pictures, on the left side MODE_SCROLLABLE , the right side isMODE_FIXED

GitHub address point me, the related code is wrapped in the project tablayout

Coordinatorlayout

Let's take a look at the official explanation of Coordinatorlayout:

Coordinatorlayout is a super-powered framelayout.

Coordinatorlayout is intended for the primary use cases:

As a top-level application decor or chrome layout

As a container for a specific interaction with one

• Coordinatorlayout is a powerful framelayout.
• The Coordinatorlayout has two main application directions:
  
  • Decoration as a top-level application or a chrome layout
  • As a container for special interactions with one or more child views

In fact, Coordinatorlayout is just one from another level to control the layout of the touch event between the sub-view, can achieve different visual scrolling effect, we next through a few simple examples to illustrate the role of coordinalayout;

Coordinatorlayout combined with Floatingactionbutton and Snackbar

We know that when there are Snackbarsnackbar can be displayed on top of other UI components, but we can let Floatingactionbutton not be covered by Snackbar, when Snackbar appears, Floatingactionbutton move up, Snackbar disappears, Floatingactionbutton down. We can look at the difference between using coordinatorlayout and use, the left image is not used when the Snackbar pop-up effect, the right image for use when the effect of Snackbar pop-up:

It is also very simple to use in our code, as long as you use Coordinatorlayout as the basic layout, you will automatically produce an upward moving animation. The floating action button has a default behavior to detect the addition of the snackbar and to have the buttons appear above the Snackbar with high animations such as Snackbar.

tip:: It's main function is-to-move Floatingactionbutton views So, any FloatingActionButton.Behavior displayed snackbars does not cover them.

code example:

<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.v7.widget.RecyclerView         android:id= "@+id/rv"         android:layout_width= "Match_parent         " android:layout_height= "Match_parent" >   </android.support.v7.widget.RecyclerView>   < Android.support.design.widget.FloatingActionButton        android:layout_width= "Wrap_content"        android: layout_height= "Wrap_content"        android:layout_gravity= "bottom|right"        android:layout_margin= "16DP"        android:src= "@mipmap/search"        app:layout_anchor= "@id/rv"        app:layout_anchorgravity= "bottom|right |end "/> </android.support.design.widget.CoordinatorLayout>

There are two properties that we may not be familiar with, setting App:layout_anchor and app:layout_anchorgravity to build a specific position and effect Floatingactionbutton.

• App:layout_anchor-Sets the anchor point of the Fab, that is, which control sets the bit for the reference point, etc.
• App:layout_anchorgravity-Sets the location of the Fab relative anchor points with values bottom, center, right, left, top, etc.

Finally, when we construct the Snackbar, we need to pass the coordinatorlayout as the view parameter, as follows:


Snackbar.make(mCoordinator, "Snackbar show", Snackbar.LENGTH_SHORT).show();


You can also look at GitHub to write the demo address point I, corresponding to the class forCoordinatorLayoutFloatingActivity

We continue to analyze a few other controls in the next article, we would like to have a beautiful today, not to be continued ...

Android Material design new UI control using Daquan II