Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "what are the application methods of Android MaterialDesign". Xiaobian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "what are the application methods of Android MaterialDesign" can help you solve the problem.

1: Slide up top background image slowly disappears, title floats

1.1: CoordinatorLayout settings

Add dependency before, in the previous article has been said, in this is not repeated, coordinator layout this time added a new layout CollapsingToolbarLayout (folding toolbar layout), it is obvious that the above effect in the toolbar slide up while folding the picture into, this is an animation effect, if not MaterialDesign library powerful, this is our own writing. Let's analyze what is used in the renderings, just look at the colored text, an apple background image, and a floating button (attached to the lower right corner of CollapsingToolbarLayout). Let's analyze the main code

Outermost--> Inner or CoordinatorLayout-->AppBarLayout-->CollapsingToolbarLayout. Even the folded part is toolbar and background image, which should be written in CollapsingToolbarLayout, because the above coordinator layout and appbar layout are very simple, not written here, only posted the folded layout code (inside the comments have been added after posting, pay attention to the syntax when using the code). Here you can see that I added a height of 180dp in ImageView, which must be added here, and the following errors will occur if the toolbar is not on the side, 1: Text is not displayed. 2: Show only the title bar. 3: The picture is too big to fill the whole screen. Of course, not everyone has these problems.

This is our foldout layout, and our FloatingActionButton, highlighted in red.

Written here is basically completed, the code is less, the effect is good is the powerful library, the use in Activity is basically the same as the previous article. There are also many attributes for this floating button, which are not written one by one here. Here, it is only used as an auxiliary to make us more comfortable in vision.

2: Add layout to the title column and put some search boxes

2.1: Layout Writing

The layout here is the same as above, just replace imageview with LinearLayout layout, and write the familiar input box and picture button in the layout.

Outermost--> Inner or CoordinatorLayout-->AppBarLayout-->CollapsingToolbarLayout-->LinearLayout.

3: Use of Input Box TextInputEditText

In the most common time, we write the input box, to add regular expressions to determine which line does not meet the requirements of the data, and then use a toast to prompt the user, which seems to be a very poor user experience, some users have not finished reading toast on the turn off, and the specific line error is not marked red, this is very embarrassing, then today this control is also an input box, but the outer layer plus a layout (TextInputLayout), you can achieve accurate to a line prompt specific error.

TextInputLayout is a new control added in 22.2.0 to be used with EditText(or a subclass of EditText) and can contain only one EditText(or subclass of EditText).

In general, EditText will hide the hint automatically when it gets the cursor, which is not very friendly. TextInputLayout is a subclass of LinearLayout, which is used to assist in displaying prompt information. When EditText gets the cursor, EditText's hint will show itself at the top, with animated transitions.

Now it is only excessive effect, there is no hint information, the usage is very simple, but note that TextInputLayout can only contain one TextInputEditText, if you write the user name and password, then write two TextInputLayout, oh, this outermost layout has nothing to do with the coordinator layout, just a linear layout.

Note here that Id is added to TextInputLayout, and the layout obtained in Activity is also obtained, so how to obtain the data input by edittext? There are methods.

viewById.getEditText().addTextChangedListener(this);

Get the text inside and add text change listening, here to implement three methods

public void afterTextChanged(Editable s) //Called after content has changed

These two methods are not used on simple demos, so there is no more explanation here.

@Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { }

Here we focus on the afterTextChanged method, where only the first control is added with the listener (contrast).

@Override public void afterTextChanged(Editable s) { if(s.length()

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.