New changes and code combat in Material Design Library 23.1.0

Design Library has come out almost one months, at that time probably looked at the introduction of this new version of the change in the translation, the content is not much, I was most impressed by the percent Lib, appbarlayout and navigationview changes, Of course there are some design Lib control internal implementation changes are not introduced, so that in the use of the new version of the control is inevitable because the version of the differences will occur some exceptions, and I just in the last week to a project to change the library when found this problem, what problem?

Navigationview issues to use attention

Is that the internal implementation of Navigationview has changed, and it was implemented by the ListView prior to the 23.1.0 version, while the 23.1.0 (including this version) to be implemented by Recyclerview, in general we do not have any exception when we use, and if we need to add a headerview, this time we need to pay attention to, if we need to get headerview inside the control, As we did before, we just had to Findviewbyid () or Navigationview.findviewbyid () to get and use it, and after the 23.1.0 version, the internal implementation changed, If the controls inside the Headerview are obtained through Findviewbyid () or through Navigationview.findviewbyid (), a NullPointerException null pointer exception is reported, indicating that the 23.1.0 After the version, you cannot obtain an instance of the Headerview control by this method.

So let's take a look at the Navigationview source code, to see if its internal implementation has changed it?
I found two versions of the design package: The 23.0.1 version and the 23.1.0 version, respectively.
Let's take a look at the old version of the source code implementation of the (23.0.1) Navigationview:
Paste a few main, through a layer of view, we found the Navigation bar menu implementation Class Navigationmenuview, it inherits from the ListView

publicclass NavigationMenuView extends ListView implements MenuView {...}

The 23.1.0 version changes this implementation, using the Recyclerview implementation:

publicclass NavigationMenuView extends RecyclerView implements MenuView {...}

After 23.1.0 the correct practice is not addheaderlayout in the XML layout, but in the code through the Inflateheaderview (), this method will return the current inflate view instance, With it we can find the controls inside the Headerview:

View Headerview = Mnavigationview. Inflateheaderview(R. Layout. Header);Mheaderbutton = (Button) headerview. Findviewbyid(R. ID. BTN_header);Mheaderbutton. Setonclicklistener(New View. Onclicklistener() {@Override public void OnClick (View v) {Toast. Maketext(mainactivity. this,"click button!", Toast. LENGTH_short). Show();}        });

new changes in Design Library 23.1.0 Textinputlayout Adding the character count function

Normally we use EditText to write long text, usually in the lower right corner of the display of a text, to show the current edittext currently how many characters, previously we implement this function by using Textwatcher to listen to the changes in the text to calculate, The new version of the design package adds this functionality to textinputlayout, and we only need to set the

app:counterEnabled="true"

To turn on the Count function, which is not turned on by default, or is set in code:

TextInputLayout textInputLayout = (TextInputLayout) findViewById(R.id.til);        textInputLayout.setCounterEnabled(true);

So our edittext has a counting function, the effect is:

Of course we can also set the maximum word limit:
Set in XML:

app:counterMaxLength="100"

Set in code:

TextInputLayout textInputLayout = (TextInputLayout) findViewById(R.id.til);textInputLayout.setCounterEnabled(true);textInputLayout.setCounterMaxLength(100);

Obviously if you need to set the maximum number of words, must first turn on the Count function, set counterenabled to True
The effect is:

Of course, the maximum word limit is just a hint, meaning that we enter the number of characters to reach this limit, you can continue to input, such as:

Therefore, the logic of the forbidden input needs our own implementation, we can use the combination of Textwatcher to limit the maximum number of words of logic, by judging when the maximum amount of the limit to prohibit the continuation of input

If you want to use error hints and count these two functions at the same time, then of course you can, but the count is placed in the lower right corner, the effect

Of course, there are other APIs, although not new, by the way:

App:hintanimationenabled= "true"-sets the hint over to the upper-left corner to show whether excessive animation is used, default to true, and too stiff if set to False
App:hinttextappearance= ""-Sets the font style for hint, with a value of one style
App:errortextappearance= ""-Sets the font style for error prompts
App:countertextappearance= ""-sets the style of the count font
App:counteroverflowtextappearance= ""-this API is interesting, the timing of this trigger is to reach the maximum number of words, when the count of the font style will change to the style set here

The following shows the effect of this API, for example, we can set it to app:counteroverflowtextappearance when the number of words reaches the upper limit, the count font becomes larger and displays another color:

This makes it very obvious to see the difference.

appbarlayout new Rolling Flag-snap

According to Google's explanation, this flag is primarily intended to ensure that when scrolling is finished, the view will not be displayed in the middle of scrolling, that is, the unfinished part of the scroll will not be displayed, instead it will scroll to the nearest edge position so that it is displayed on the screen in a fully visible or scrolled state. This may be difficult to relate to, so take a look at the difference between setting this snap flag and not setting it in the actual effect:

Set Snap

For the sake of brevity, I only intercepted the Appbarlayout code:

<android. Support. Design. Widgets. AppbarlayoutAndroid:layout_width="Match_parent"android:layout_height="256DP"Android:theme="@style/apptheme.appbaroverlay"> <android. Support. Design. Widgets. CollapsingtoolbarlayoutAndroid:layout_width="Match_parent"android:layout_height="Wrap_content"app:contentscrim="@color/colorprimary"app:layout_scrollflags="Scroll|exituntilcollapsed|snap"> <imageview android:layout_width="Match_parent"android:layout_height="Match_parent"Android:scaletype="Centercrop"Android:src="@mipmap/bg"App:layout_collapsemode="Parallax"App:layout_collapseparallaxmultiplier="0.7"/> <android. Support. V7. Widgets. ToolbarAndroid: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. Widgets. Collapsingtoolbarlayout> </android. Support. Design. Widgets. Appbarlayout>

The effect is:

Do not set snap

<android. Support. Design. Widgets. AppbarlayoutAndroid:layout_width="Match_parent"android:layout_height="256DP"Android:theme="@style/apptheme.appbaroverlay"> <android. Support. Design. Widgets. CollapsingtoolbarlayoutAndroid:layout_width="Match_parent"android:layout_height="Wrap_content"app:contentscrim="@color/colorprimary"app:layout_scrollflags="scroll|exituntilcollapsed"> <imageview android:layout_width="Match_parent"android:layout_height="Match_parent"Android:scaletype="Centercrop"Android:src="@mipmap/bg"App:layout_collapsemode="Parallax"App:layout_collapseparallaxmultiplier="0.7"/> <android. Support. V7. Widgets. ToolbarAndroid: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. Widgets. Collapsingtoolbarlayout> </android. Support. Design. Widgets. Appbarlayout>

The effect is:

According to the comparison of the above two effects, it is obvious that the snap logo is the main function is not to let the unfinished part of the scroll is displayed, the SNAP flag is obviously, when the scroll a little distance, it will bounce back, and scroll to the end of the state, is to scroll to the nearest edge position to hide it, then swipe down, toolbar is displayed, and without the snap flag effect, you can display the unfinished part of scrolling.

support to start scrolling from within Appbarlayout

Appbarlayout now allows users to scroll from within the appbarlayout, rather than scrolling from within the scrolling view, and can also control whether scrolling from within Appbarlayout can be controlled by adding dragcallback this behavior
For a better understanding, take two:
23.1. version 0:

23.0.1 Previous Versions:
In order to have the effect of the previous version of 23.0.1, I specifically came up with a demo that I wrote on a previous version of 23.0.1.

As you can see from these two effects, in the old version, when we scroll in appbarlayout, we find that we cannot scroll, but when we scroll on the new version 23.1.0, we can scroll within the appbarlayout, which is the new version of the improvements

Navigationview can extend a custom view

By using App:actionlayout or Menuitemcompat.setactionview (), you can add custom views to a drawer's menu items, which allows Navigationview to be more scalable
Take a look:

Set in Menu.xml:

<?xml version= "1.0" encoding= "Utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"Xmlns:app ="Http://schemas.android.com/apk/res-auto">        <group android:checkablebehavior="single">        <itemandroid:icon="@mipmap/ic_launcher"android:title="One" app:actionlayout="@layout/action" />                                    ...</Group></Menu>

or set it in code:

        MenuItem menuItem = mNavigationView.getMenu().getItem(1);        MenuItemCompat.setActionView(menuItem,R.layout.action);

You can see the menu item added a custom view later, which is more convenient for us to extend the function, such as the blogger himself wrote a few times before the Simple Mail app, menu items are some inbox, Outbox, Drafts, etc., and these need to have a reminder of the number of messages in the function, This feature was not added due to the poor extensibility of the Navigationview In the 23.1.0 version, the extensibility of the Navigationview has been improved, see the blue area of the second item in the graph, this area is just how we customize the view, so that Navigationview and some third-party drawer can be comparable to

percent percent layout library new support aspect ratio

Percent Layout Library As I understand it:

The Percent layout library is based on the width of the parent ViewGroup and dynamically sets the height of the Child view (ViewGroup) based on the percentage set by the child view (ViewGroup)

The previous percent layout only supports setting the width and height separately, and this new feature can be set by setting the aspect ratio, by setting the aspect ratio to only a single width or height and using the App:aspectratio setting, Then percentframelayout or percentrelativelayout will automatically adjust the other dimensions

palette supports extracting colors from a specific area of a bitmap

Palette can get the color from the image, now there is a new method Setregion (), which supports extracting from a specific area of a bitmap

Recyclerview's animation system gets better

By using the Itemanimator new Canreuseupdatedviewholder () method, you can choose to reuse an existing viewholder so that it supports the content animation of item
The item animation we defined Recyclerview was often implemented by inheriting Recyclerview.itemanimator, and the new version recommended that we inherit from the Recyclerview.simpleitemanimator class to implement our animations, because this type of encapsulation The new API also provides support for older APIs, and some methods have been removed from this version, such as before we passed Recyclerview.getitemanimator (). Setsupportschangeanimations ( False) This method sets the animation support when the content of item changes, and the new version of this method will no longer be valid, but needs to be set by the following code:

ItemAnimator animator = recyclerView.getItemAnimator();ifinstanceof SimpleItemAnimator) {  ((SimpleItemAnimator) animator).setSupportsChangeAnimations(false);}

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced. Reprint Annotated Source: Sunzxyong

New changes and code combat in Material Design Library 23.1.0