Android Application Design Support Library fully uses instances, androiddesign

Android Application Design Support Library fully uses instances, androiddesign

[Craftsman if water http://blog.csdn.net/yanbober reprinted please indicate the source, respect sharing results]

1. Background

Last week's annual Google I/O global Developer Conference just ended. There were not many highlights of Google's optimization on Android. After reading the related introduction on the Blog of Android Developer and Android Developer, Google upgraded the Support Library. So here we will take the lead to try it out (this article has been in the draft box for three or four days .... Finally, we have time to see her ).

First, let's take a look at the Demo. It uses the Design Support Library control of Google IO 2015 for code writing. As follows:

To download the Demo, click: Design Support Library Demo

[Craftsman if water http://blog.csdn.net/yanbober reprinted please indicate the source, respect sharing results]

2 Design Support Library 2-1 Overview

Supports Android 2.1 and later devices.

Gradle build script dependency:

Compile 'com. android. support: design: 22.2.0 '// you can change the version number to your own match.

The Design Support Library contains eight controls:

Widget Name	Description
Android. support. design. widget. TextInputLayout	Powerful MD-style EditText with prompts
Android. support. design. widget. FloatingActionButton	MD-style circular button, from ImageView
Android. support. design. widget. Snackbar	Similar to Toast, a simple single Action is added
Android. support. design. widget. TabLayout	Tab
Android. support. design. widget. NavigationView	SlideMenu of DrawerLayout
Android. support. design. widget. CoordinatorLayout	Super FrameLayout
Android. support. design. widget. AppBarLayout	MD-style slide Layout
Android. support. design. widget. CollapsingToolbarLayout	Foldable MD style ToolbarLayout

The following describes the features and precautions of these controls.

2-2 TextInputLayout Control

In MD, The EditText is encapsulated using TextInputLayout, and the prompt information is changed to a floating label displayed on the EditText, so that users always know what they are currently inputting, in addition, excessive animation is smooth. You can also set the Error prompt through setError below. It is relatively simple to use, so it is not described too much. For details, see the Demo source code.

Note:

At least one EditText is nested in TextInputLayout.

2-3 FloatingActionButton Control

A circular button that displays basic operations on the interface. The FloatingActionButton in the Design library implements a floating OPERATION button with the default color as colcent in the topic. In addition to the floating OPERATION button of the general size, it also supports mini size (fabSize = "mini "). FloatingActionButton is inherited from ImageView. You can use any android: src or ImageView method, such as setImageDrawable () to set icons in FloatingActionButton.

No special note, similar to a common control.

2-4 Snackbar Control

Snackbar Provides Lightweight and fast feedback for an operation. The Snackbar is displayed at the bottom of the screen (with MD animation effects emerging and disappearing) and contains text information and an optional operation button. It automatically disappears after the specified time. In addition, you can slide and delete it before the timeout. Snackbar is seen as a more powerful fast feedback mechanism than Toast, and you will find that their APIs are very similar. You should note that a View is used as the first parameter in the make () method (Snackbar tries to find a suitable parent to ensure that you are placed at the bottom ).

No special note, similar to Toast.

2-5 TabLayout Control

Switching views through tabs is not a new concept in MD. They are the same concept as the top-level navigation mode or the content of different groups in the organizational app (for example, different styles of music. TabLayout of the Design library not only implements fixed tabs (the average width of the View is allocated), but also implements scrollable tabs (the View width is not fixed and can be horizontally rolled ). If you use ViewPager to switch between tabs, you can directly create a tab from getPageTitle () of PagerAdapter, and then use setupWithViewPager () to associate the two. It enables the Selected tab event to update ViewPager, while ViewPager
To update the Selected tab status.

Note:

If you use ViewPager to switch between tabs horizontally, remember to create a tab directly from getPageTitle () of PagerAdapter, and then use setupWithViewPager () to associate the two.

2-6 NavigationView Control

Drawer navigation is the key to app recognition and internal navigation. Maintaining Design consistency is crucial to app availability, especially for users who use it for the first time. NavigationView makes the implementation easier by providing the framework required for drawer navigation. It can also directly generate navigation elements through menu resource files. Use NavigationView as the content view of DrawerLayout. The relationship between NavigationView and the status bar has been processed to ensure that the NavigationView correctly interacts with the status bar on the API21 + device.

Note:

You can set an OnNavigationItemSelectedListener and use setNavigationItemSelectedListener () to obtain the selected callback event of an element. It provides you with the clicked menu elements, allowing you to process selection events, change the status of check boxes, load new content, close navigation menus, and any other operations you want. You will notice that the two new custom attributes of NavigationView are as follows:

New attr	Description
App: headerLayout	Control the head Layout
App: menu	Resource file in the navigation menu (you can also configure it at runtime)

2-7 CoordinatorLayout Control

Gestures, as well as scrolling la S, MD gestures have many components, including touch ripples and meaningful transitions. The Design library introduces CoordinatorLayout, which controls the layout of touch events between child views from the other layer. Many controls in the Design library use it. A good example is when you add FloatingActionButton as a sub-View to CoordinatorLayout and pass CoordinatorLayout to Snackbar. make (), on devices 3.0 and above, the Snackbar is not displayed on the floating button, but FloatingActionButton uses the callback method provided by CoordinatorLayout, when the Snackbar enters the animation effect, it automatically moves up and gives way to the outbound position, and returns to the original position when the Snackbar animation disappears, without additional code.

Another use case of CoordinatorLayout is ActionBar and scrolling techniques. You may have used a Toolbar in your own layout, which allows you to customize its appearance more freely and integrate with the rest of the layout. The Design library brings this Design to a higher level. Using AppBarLayout enables your Toolbar and other views (such as TabLayout tabs) to respond to rolling events of views marked with ScrollingViewBehavior.

Note:

When you scroll through RecyclerView, AppBarLayout can respond to the rolling event as follows:

Controls how the child view enters (rolls in the screen) and exits (rolls out the screen) based on the scroll flag of the Child view ).

Flag includes:

• Scroll: this flag must be set for all views that want to scroll out of the screen. A View without this flag will be fixed at the top of the screen.
• EnterAlways: this flag enables any downward scrolling to make the View visible and enables quick "return mode ".
• EnterAlwaysCollapsed.
• ExitUntilCollapsed: this flag causes the view to scroll off until it is 'collapsed '(its minHeight) before exiting.

Note: All views that use scroll flag must be defined before those that do not use scroll flag, so that all views exit from the top and leave fixed elements.

CoordinatorLayout also provides the layout_anchor and layout_anchorGravity attributes, which can be used to place floating views, such as the relative location of FloatingActionButton and other views. See the Demo.

2-8 AppBarLayout Control

This is a ViewGroup, Which is used with ToolBar and CollapsingToolbarLayout. Is a pure container class.

No special note.

2-9 CollapsingToolbarLayout Control

You can use the enterAlwaysCollapsed and exitUntilCollapsedscroll labels to add a scalable Toolbar to AppBarLayout. However, you cannot control how different elements respond to the details of Collapsing. Here the app of CollapsingToolbarLayout is used: layout_collapseMode = "pin" to ensure that the Toolbar is still fixed at the top of the screen when the view is folded. It can also achieve better results. When you use CollapsingToolbarLayout and Toolbar together, the title will automatically become larger during expansion, while the font is folded to the default value. Note that in this case, you must call setTitle () on CollapsingToolbarLayout instead of the Toolbar. In addition to fixed View, you can also use app: layout_collapseMode = "parallax" (and use app: layout_collapseParallaxMultiplier = "0.7" to set the parallax factor) to implement the parallax scrolling effect (for example, an ImageView in CollapsingToolbarLayout). In this case, the app: contentScrim = "? The attr/colorPrimary attribute works perfectly together.

One thing you must note is that CoordinatorLayout does not know the internal working principle of FloatingActionButton or AppBarLayout. It only uses Coordinator. behavior provides additional APIs, which allow the child View to better control touch events and gestures, declare dependencies between them, and receive callbacks through onDependentViewChanged.

You can use CoordinatorLayout. defaultBehavior (your View. behavior. class) annotation or use app: layout_behavior = "com. example. app. your View $ Behavior attribute defines the default Behavior of the view. Framework makes it possible to combine any View with CoordinatorLayout.

Note:

Note that the description above has been declared and no additional instructions are required.

3. Conclusion

By now, the new suppory package control of 2015 Google IO has been fully introduced. For details, refer to the developer> tools> support library of AD. So far, we can only expect the release of Android M as soon as possible.

PS: the Android Studio 1.3 preview version has been used, but the compilation of M may fail, and there are bugs. Other differences are not found for the time being. Another difference is that it looks a little faster than 1.2. Haha, is it my heart?

To download the Demo, click: Design Support Library Demo

[Craftsman if water http://blog.csdn.net/yanbober reprinted please indicate the source, respect sharing results]