### Basic concept of Material Design

Material Design (referred to as MD) : introduced from Android5.0, is a new virtual Design language (translated as “Material Design”), in fact, is a Design style, concept, principle advocated by Google. It is a combination of imitative design and flat design. I’ve also absorbed some of the latest scientific and technological ideas. This design style is cross-platform: we see it all the time on the web, oN IOS, etc.

For example, in order to increase the hierarchical sense of APP, we can design the z-axis coordinate size of View to accomplish this. When we want compatibility, we can do it ourselves through layerList.

#### Understanding of Material Design by different personnel

  1. For artists: follow MD’s interface design, icon collection.
  2. For product manager: follow MD interface design, page jump and animation effects, interaction design.
  3. For developers: participate in prototyping and assist artists in preparing materials for prototyping. Develop and implement MD design —- interface, animation, transition animation, etc.

Among them, the masturbation code is our focus. For more information, you can go to the official website of Google MD. Of course, there are also translated documents in China, such as geek Academy documents: Geek Academy Documents

###Material Design use and development

Google has opened up and collected some of the latest open source projects (many of them self-developed) into the latest support compatibility support packages and the latest 5.x apis.

  1. Android-support-v4: compatible with Android 1.6, including ViewPager and other controls.
  2. Android – support-V7: AppCompat, CardView, GridLayout, MediarOuter, Palette, Preference, recyclerView(minimum compatible to 3.0)
  3. V14 preference: Setting page, through the configuration file to achieve the effect of interface design. (Used less often)

Of these, v7 is minimally compatible with Android 2.1 (different libraries may be higher). This project allows developers to unify development standards and ensure compatibility across all versions of the system. (e.g. : Theme,value, layout, new controls, new animation implementation)

######Tips1: Development is now almost always compatible to 4.0, so there are generally no compatibility issues. ######Tips2: Compatibility package error: SDK upgrade: API upgrade, compatibility package upgrade, tool upgrade. Because a new compatibility package may introduce new classes, resources, and so on.

###Material Design — the use of style

First we need to use the V7 package, why use the AppCompat project? Because the inside is Carefully prepared by Google — to solve the problem of android fragmentation development egg pain, let our APP compiled in a variety of high and low versions, ROM produced by different manufacturers between the effect of UI controls display a more consistent experience.

######Tips: There are several important SDK releases in the history: 14 (4.0), 19 (4.4), 21 (5.0), and appCompat is compatible with these different releases. If we use the AppCompat package, the system will automatically use the latest version.

The default for creating projects with Android Studio is the V7 package, so we can use themes from the V7 package and configure the colors, for example:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <! <item name="colorPrimary">#f00</item> <! StatusBarColor --> <item name="colorPrimaryDark">#0f0</item> <item name="android:statusBarColor"> <item name="colorAccent">#00f</item> <! -- We usually do not configure the following --> <! <item name="windowBackground"># FFF </item> <! - the background color of the navigation bar at the bottom of the - > < item name = "android: navigationBarColor" > # f00 < / item > <! <item name="textColorPrimary">#000</item> </style>Copy the code

Among them, the corresponding relationship of various colors is shown in the figure below:

######Tips1: Some of the apis with the lowest attributes are higher and therefore need to be configured in different values folders. ######Tips2: just to make it easier to write the Demo, we will write the colors to death. In the actual project, we need to create the colors file ourselves.

#### Use of compatibility controls for MaterialDesign

Especially in AppCompat-V7 there are many controls built for compatibility so that high and low versions and different ROMs can be experienced consistently! It can also be used with appCompat themes for consistency. Such as:

  1. android.support.v7.app.AlertDialog

  2. Progress bar style style = “@ style/Widget. AppCompat. ProgressBar. Horizontal”

  3. SwipeRefreshLayout drop-down refresh

  4. PopupWindow, ListPopupWindow, PopupMenu, Button, EditText, etc

  5. Android. Support. V7. Widget. Add wrapped inside of all child controls LinearLayoutCompat interval line (such as “about page” entry)

     <android.support.v7.widget.LinearLayoutCompat
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     app:divider="@drawable/abc_list_divider_mtrl_alpha"
 	app:dividerPadding="10dp"
     app:showDividers="beginning|middle"
     android:orientation="vertical" >
Copy the code

The showDividers attribute sets the location of which entry is displayed. For example, if you only set end, only a separator line will be added below the last entry. Of course, you can also set the padding, so I won’t bother with that. There’s a little bit of a pit where you can only set left and right Padding at the same time.

######Tips: If your project uses Material Design, it is recommended to use these compatibility controls, otherwise you don’t have to bother.

#### extension -LinearLayoutCompat source code analysis

Looking at the source code requires a purpose to look at it, so we can guess:

How does the LinearLayoutCompat add dividing lines between all the children inside it?

First of all, we know that the View will be drawn by three methods: onMearsue (measure itself and all its child controls),onLayout (place all its child controls),onDraw (draw)

Guess:

  1. MearsuredWidth, mearsuredHeight get bigger (plus line)
  2. ChildView: left/top/right/bottom
  3. ChildView: left/top/right/bottom

Look at the onMearsue:

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { if (mOrientation == VERTICAL) { measureVertical(widthMeasureSpec, heightMeasureSpec); } else { measureHorizontal(widthMeasureSpec, heightMeasureSpec); }}Copy the code

OnMeasure is divided into horizontal and vertical conditions, and we take the vertical situation as an example for analysis. We assume that the height of the separation line must have been added to the measurement (just look at the core code) :

void measureVertical(int widthMeasureSpec, int heightMeasureSpec) { for (int i = 0; i < count; ++i) { final View child = getVirtualChildAt(i); // If there is a separator line, If (mTotalLength > 0 && hasDividerBeforeChildAt(count)) {mTotalLength += mDividerHeight; }}}Copy the code

Let’s move on to onLayout:

@Override protected void onLayout(boolean changed, int l, int t, int r, int b) { if (mOrientation == VERTICAL) { layoutVertical(l, t, r, b); } else { layoutHorizontal(l, t, r, b); }}Copy the code

Similarly, we just look at layoutVertical:

void layoutVertical(int left, int top, int right, int bottom) { for (int i = 0; i < count; i++) { if (hasDividerBeforeChildAt(i)) { childTop += mDividerHeight; }}}Copy the code

You can also see the associated code. Finally, draw:

@Override protected void onDraw(Canvas canvas) { if (mDivider == null) { return; } if (mOrientation == VERTICAL) { drawDividersVertical(canvas); } else { drawDividersHorizontal(canvas); }}Copy the code

I believe you will understand it when you see it here. Finally, let’s analyze how some of the dividing lines are drawn:

void drawVerticalDivider(Canvas canvas, int left) {
    mDivider.setBounds(left, getPaddingTop() + mDividerPadding,
            left + mDividerWidth, getHeight() - getPaddingBottom() - mDividerPadding);
    mDivider.draw(canvas);
}
Copy the code

The mDivider is a Drawable object that requires you to set a drawing range before drawing.

For more information about the use of LinearLayoutCompat, please refer to:

http://blog.csdn.net/zhangphil/article/details/48899585

If you feel that my words are helpful to you, welcome to pay attention to my public number:

My group welcomes everyone to come in and discuss all kinds of technical and non-technical topics. If you are interested, please add my wechat huannan88 and I will take you into our group.