Android App design Support library full use instance

"Craftsman Joshui Http://blog.csdn.net/yanbober Reprint Please indicate the source, respect the results of sharing"

1 Background

Last week's annual Google IO Global Developers conference just ended, Google in the Android this piece apart from some optimizations are not too big highlights. On Android Developer and Android Developer blog to read the relevant introduction, Google upgraded the new support Library. So here we have to take the lead in the first experience (this article has been in the draft case for three or four days ....) Finally had time to let her see the daylight.)

Take a look at the demo demo and write code using the controls for the design support library of Google IO 2015. As follows:

To download the demo, click: Design Support Library Demo

"Craftsman Joshui Http://blog.csdn.net/yanbober Reprint Please indicate the source, respect the results of sharing"

2 Design Support Library usage Introduction 2-1 Reviews

Supports Android 2.1 + devices.

Gradle Build Script Dependency:

‘com.android.support:design:22.2.0‘//可修改版本号为自己匹配

The Design support Library contains 8 controls, as follows:

Widget Name	Description
Android.support.design.widget.TextInputLayout	Powerful MD-style edittext with hints
Android.support.design.widget.FloatingActionButton	MD-style Round button, from ImageView
Android.support.design.widget.Snackbar	Like toast, add a simple single action
Android.support.design.widget.TabLayout	Options tab
Android.support.design.widget.NavigationView	Drawerlayout's Slidemenu
Android.support.design.widget.CoordinatorLayout	Super Framelayout
Android.support.design.widget.AppBarLayout	MD-style sliding layout
Android.support.design.widget.CollapsingToolbarLayout	foldable MD Style Toolbarlayout

Here's a detailed look at the features and usage considerations for these controls.

2-2 textinputlayout Controls

In MD, the EditText is encapsulated using textinputlayout, prompting the message to become a floating label that appears above the EditText so that the user always knows what they are typing, and the over-animation is smooth. You can also set the error hint below through SetError, the use is relatively simple, so do not do too much, see the demo source for details.

Note Item:

At least one edittext is nested in the textinputlayout.

2-3 Floatingactionbutton Controls

A circular button that is responsible for displaying the basic operation of the interface. The Floatingactionbutton in the Design Library implements a hover action button with a default color of coloraccent in the theme. In addition to the general size of the hover operation button, it also supports mini size (fabsize= "Mini"). Floatingactionbutton inherits from ImageView, you can use any method of android:src or ImageView, such as setimagedrawable () To set the icon inside the Floatingactionbutton.

No special note, similar to normal controls.

2-4 Snackbar Controls

The Snackbar provides lightweight, fast feedback for an operation. The snackbar appears at the bottom of the screen (with the MD animation effect appearing and disappearing), containing text messages and an optional action button. Automatically disappears after the specified time has ended. In addition, the user can also swipe the delete before timing out. Snackbar is seen as a more powerful quick feedback mechanism than toast, and you'll find that their APIs are very similar. You should have noticed. The make () method takes a view as the first argument (Snackbar tries to find a suitable father to make sure that he is placed at the bottom).

No special considerations, similar to toasts.

2-5 tablayout Controls

Switching between view via tabs is not a new concept in MD, they are the same concept as the top-level navigation mode or different grouped content in the Organization app (for example, different styles of music). The tablayout of the Design library implements both a fixed tab (average width distribution of the view) and a scrollable tab (view width is not fixed and can be scrolled horizontally). If you use Viewpager to switch horizontally between tabs, you can create a tab directly from Pageradapter's Getpagetitle () and then use Setupwithviewpager () to link the two together. It enables tab-selected events to update Viewpager, while Viewpager
The page change can update the tab's selected state.

Note Item:

If you use Viewpager to switch horizontally between tabs, remember to create a tab directly from Pageradapter's Getpagetitle () and then use Setupwithviewpager () to connect the two.

2-6 Navigationview Controls

Drawer navigation is key to app recognition and internal navigation, and maintaining design consistency here is critical to app usability, especially for first-time users. Navigationview is easier to implement by providing the framework needed for drawer navigation, and it can directly generate navigation elements directly from menu resource files. Use Navigationview as a content view for drawerlayout. Navigationview handles the relationship with the status bar and ensures that the navigationview is properly interacting with the status bar on the api21+ device.

Note Item:

You can get the callback event that the element is selected by setting a Onnavigationitemselectedlistener and using its setnavigationitemselectedlistener (). It provides you with clicked menu elements that allow you to handle selection events, change check box status, load new content, close the navigation menu, and any other actions you want to do. You will notice that the two new custom attributes of Navigationview are as follows:

New attr	Description
App:headerlayout	Control the layout of the head
App:menu	Resource files for the navigation menu (also configurable at run time)

2-7 coordinatorlayout Controls

gestures, and scrolling layouts, MD gestures have many components, including touch ripples and meaningful transitions. The design library introduces Coordinatorlayout, a layout that controls touch events between sub-view from another level, and many of the controls in the design library take advantage of it. A good example is when you add Floatingactionbutton as a child view into coordinatorlayout and pass coordinatorlayout to Snackbar.make (), On devices with 3.0 and more, the Snackbar does not appear on top of the hover button, but rather Floatingactionbutton uses the callback method provided by Coordinatorlayout to automatically move up the yield when the Snackbar is entered by the animation effect, and in snack Bar animates to the original position when it disappears, no additional code is required.

Another use case for Coordinatorlayout is actionbar and scrolling tricks. You may have already used the toolbar in your layout, which allows you to customize its appearance more freely to integrate with the rest of the layout. The design library brings this to a higher level, Using appbarlayout allows your toolbar and other view (such as the Tablayout tab) to respond to the scrolling events of the view labeled Scrollingviewbehavior.

Note Item:

When the user scrolls Recyclerview,appbarlayout can respond in this way to scrolling events:

Control how they enter (roll into the screen) and exit (roll out the screen) based on the scroll flag (scroll flag) of the child view.

Flag includes:

• Scroll: Any view that wants to scroll out of the screen needs to have this flag set, and the view without the flag set will be pinned to the top of the screen.
• Enteralways: This flag allows any downward scrolling to cause the view to become visible, enabling quick "return mode".
• Enteralwayscollapsed: When your view has already set the MinHeight property and use this flag, your view can only be entered at the minimum height, and only when the scrolling view reaches the top will it expand to full height.
• Exituntilcollapsed:this flag causes the view to scroll off until it was ' collapsed ' (its minheight) before exiting.

Special Note: All view using scroll flag must be defined in front of a view that does not use scroll flag to ensure that all view exits from the top, leaving a fixed element.

PS Sentence: Coordinatorlayout also provides Layout_anchor and Layout_anchorgravity properties together, can be used to place floating view, For example, the relative position of Floatingactionbutton with other view. Meet Demo in demo.

2-8 appbarlayout Controls

This has no explanation, is a viewgroup, with toolbar and collapsingtoolbarlayout and other use. is a pure container class.

No special attention.

2-9 collapsingtoolbarlayout Controls

Retractable folding Toolbar (collapsing Toolbar), directly add Toolbar to Appbarlayout allows you to use enteralwayscollapsed and Exituntilcollapsedscroll flags , but there is no way to control how different elements respond to collapsing details. The collapsingtoolbarlayout app:layout_collapsemode= "pin" is used here to ensure that the toolbar is still pinned to the top of the screen when the view is folded. can also achieve better results, when you let collapsingtoolbarlayout and toolbar in the use of the time, the title will be expanded automatically when expanding, and in the collapse of the font to transition to the default value. It must be noted that in this case you must raise the Settitle () on the collapsingtoolbarlayout instead of on the toolbar. In addition to the fixed view, you can also use the app:layout_collapsemode= "parallax" (as well as using the app:layout_collapseparallaxmultiplier= "0.7" To set the Parallax factor) to achieve the Parallax scrolling effect (such as a imageview in Collapsingtoolbarlayout), which is the case and Collapsingtoolbarlayout app:contentscrim= "? Attr/colorprimary "property to work together more perfectly.

One thing to be aware of is that Coordinatorlayout does not know the internal workings of Floatingactionbutton or appbarlayout, It simply provides an additional API in the form of Coordinator.behavior, which enables child view to better control touch events and gestures, and to declare dependencies between them, and receive callbacks through Ondependentviewchanged ().

You can use Coordinatorlayout.defaultbehavior (your View.Behavior.class) annotation or use app:layout_behavior= in the layout " Com.example.app. Your View$behavior property to define the default behavior of the view. The framework makes it possible for arbitrary view and coordinatorlayout to be combined.

Note Item:

Note The above Description section has been declared and no additional instructions are required.

3 Summary

The new Suppory package controls for Google IO are fully covered. Detailed details can be turned over the wall to read the ad's Developer->tools->support library. You can only expect Android M to be released as soon as possible.

PS: Already used Android Studio 1.3 preview, just m to compile will be wrong, there are bugs, other temporarily did not find what difference, there is a little more than 1.2 seems a little faster, Haha, is my heart role?

To download the demo, click: Design Support Library Demo

"Craftsman Joshui Http://blog.csdn.net/yanbober Reprint Please indicate the source, respect the results of sharing"

Android App design Support library full use instance