Android Studio Medium Design Tools Suite Provides a complete development kit , So that developers can efficiently carry out UI Design 、 Prototype design 、 Build and debug code . These tools include Layout Editor ( Typesetting editor )、Navigation Editor (Navigation Editor )、Motion Editor ( Action editor )、Resource Manager ( Explorer ) and Layout Inspector ( Layout checker ) etc. . stay Android Studio 4.1 In the iteration of , We will focus on listening to and dealing with feedback from users , And as a basis to improve the existing tools , In the end, we not only redesigned some of the existing ways of interaction , There are also some missing features . This article will introduce us to Android Studio stay UX Some improvements have been made , The content mentioned in this article can also be found in What’s new in Design Tools Talk Look at this video .
Layout editor ( Layout editor )
better ConstraintHelpers Support
ConstraintLayout 1.1 For the first time Barriers and Guidelines In this way ConstraintHelper, They can make an invisible view Reference multiple widget, And without the need to write code repeatedly for widget Group alignment (group-align). stay ConstraintLayout 2.0 edition in , We continue to expand helper The concept of : Added something like Flow and Groups In this way VirtualLayouts, To allow some behavior to be applied to all referenced objects at the same time widget On . for example , Use Flow, It's easy to globally adjust the spacing between interfaces (gap) And surround style (wrap style) Come on view Make horizontal or vertical typesetting .
stay Android Studio 4.1 in , We hope to be able to IDE I support these very well helper The function of , So as to achieve a better interactive experience . therefore , From the user's point of view , We have found out a set from the corresponding function 、 Create on your own 、 And then make changes to the created project, which is the whole process of using , On this basis , Let's go further to improve the efficiency of each step of the operation process . for example , We are Palette Added a Helpers bar , So that users can easily find and use those available helper Tools .
Palette Newly added Helpers One column
When creating something helper when , You can choose more than one view, Right click to select one helper,Android Studio It will automatically add the correct id.
In the case of multiple choices helper establish
For based on helper The operation of , We hope Flow It's easier to use , So in the property panel (property panel) Some common properties are extended in , Especially for Flow. for example , A corresponding indicator icon has been added to the quick alignment button , And added for quick rearrangement view Of Reference Views bar .
Operate through the new property panel options helper
When the design (Design-time) Property switch for
Android Studio A variety of Tool attribute , They are all android:tools Under the namespace XML attribute , Use them to enable design time (design-time) Some functions of ( For example, show fragment Layout ). These attributes are removed when building the application , They are only used for design / In development , So for the generated APK Size or runtime behavior has no effect .
In the build UI In the process ,tools:visibility And for absolute positioning tools:layout_editor_absoluteX and tools:layout_editor_absoluteY Is the most widely used tool attribute , The former allows designers to understand UI Make a temporary show or hide operation , The latter can be found in Layout Editor Precise positioning of the interface before setting constraints in . However , From the actual observation of user use cases, we find that , It's hard to judge view When or whether the tool properties are set , Therefore, users often appear in Layout Editor There is a big difference between the preview effect seen in and the effect rendered on the simulator or real machine . for example , In the screenshot below , The images in the right column use absolute positioning , Even if they are Layout Editor There seems to be nothing wrong with the preview of , But in the simulator , They all overlap on the left side of the screen .
Because of the tool properties , Lead to Layout Editor There is a difference between the preview effect in and the rendering effect of the simulator
To solve this problem , We decided to Layout Editor A switch is added to the top right corner of the design panel , With it, users can easily switch tools:visibility and absolute positioning Two kinds of state .
Use the new tool property switch
Through this switch , We want to provide users with more accurate 、 Out of design (non-design-time) Rendering effect of , And let users know if they are using these tool properties .
stay Component Tree Middle control Visibility attribute
As we said in the previous section ,Visibility ( visibility ) yes view A very common and important property of , Especially when you need to display according to different conditions and specific logic / Hide something UI when , For example, only authenticated users are allowed to view the corresponding user data , It's particularly useful . therefore , We hope to provide a quick way to easily Layout Editor Set in visibility Of show/hide/gone ( Show / hide / remove ) Three states , Thus optimize visibility attribute .
stay Component Tree Use the new visibility Property controller
from 4.1 Version start , You can go to Component Tree Any one of the columns view side , Use visibility Attribute selector (visibility control picker) Make changes to this property . thus , You just need to have a look Component Tree Display status of , You can understand that view Of visibility state , And then you can do it on demand UI Make changes accordingly .
Component Tree Use icons to show different visibility state
We also provide tools and android Two visibility The namespace of , To cover different user needs . What we should pay attention to here is , In design (design-time) in ,tools The namespace will override android Under the namespace visibility attribute , This behavior is also reflected in the control — If you set tools:visibility, It will be UI It's a high priority on the Internet . for example , In the screenshot below ,student Set up android:visibility = visible and tools:visibility = gone, In this case tools:visibility Higher priority , It is shown in the following figure .
tools covers android Under the namespace visibility attribute
Keyboard shortcut and mapping settings
We all recognize the importance of keyboard shortcuts in improving productivity and development efficiency . stay Studio 4.1 In the version , We are right. Design Tools Suite All the shortcut keys in Have a new look at , And registered them all to Preferences > Keymap in , You can explore the corresponding shortcut key settings , It can also be changed , Make it the best development tool for the way you work .
contain design editor Keyboard mapping settings for shortcut keys
There's some feedback from developers , Hope to be able to deal with view Of Transform Property to improve the accuracy of the operation , We have also improved this in this edition . To adjust more easily view Of Transform attribute , We've added visual display to show in real time view Of 3D Conversion effect , And add a slider for more detailed operation . In the properties panel , Once you choose one view after , Then you can be in "Transform" Adjust the control in the .
stay Transform Rotate in the panel to see service dog picture
Resource manager ( Explorer )
spacing Drawable Resource selector
stay Android Studio 3.6 In the version , We introduced Color picker resource tab ( Color picker Resources tab ), It can help you quickly update the color values in your application . Because the picker mode provides interaction from text ( Code ) To vision ( Color ) Seamless transition of , So this feature is very popular . Users can use the code editor without changing the context , Using a graphical interface at the same time (GUI) To improve development efficiency . stay 4.1 In the version , We brought the same idea to Drawable in , When the project file contains Drawable Resource time , You'll find a gutter icon ( Spacing Icon ) Appears next to the editor , It allows you to quickly change Drawable resources . Besides , single click "browse" The resource dialog box also opens , For a broader search .
Automatic download Vector asset Icon resources in
This update may not be impressive , But it works a lot . We've received a lot about Material.io Medium Material The icon is the same as Vector Asset wizard Complain about inconsistent icons in , The main reason for the inconsistency is Android Studio The release rhythm and Material The rhythm of the update is inconsistent . To solve this problem , We've updated and streamlined the process , Now every time Material Update its library Icon ,Vector Asset wizard It will also be automatically updated in the background . therefore , Now you can go to wizard Use the latest version of Material The icon ！
Navigation editor (Navigation Editor )
stay Split View Using a graphical structure to show destinations (Destination)
stay Android Studio 3.6 In the version , A new way to switch design file editing mode is introduced Split View, The first mock exam is to optimize navigation files and Navigation editor ( Navigation bar editor ) The side by side view of creates opportunities . One of the ways to optimize is in Navigation Editor Using component tree in (Component Tree) To show the destination map . This way, the user can choose the destination ( Including the nested hierarchy involved ) And operation at a glance , And can be in split The selected content in the pattern 1:1 It maps to the code .
stay Split View The destination is shown in a graphical structure
By the way , This approach is very helpful to the health of our code base , Because it can reuse common components in all our design tools .
Deeplink Dialog box supports new properties , And support automatic filling
Navigation 2.3.0 by deeplink Two new attribute types are introduced : MIME and Action. In order to make Android Studio The design tools of support this function , We are Navigation Editor Create in DeepLink These two properties are added to the dialog box , And added the function of automatic filling and verification .
Motion editor ( Action editor )
Graphical editing of action keyframe path
MotionLayout Supports different types of keyframes , The most commonly used type is Postion keyframes (<KeyPosition …/>), It allows developers to widget Modify the path at a specific time during the animation . adopt 4.0 Version of Motion Editor, Users can manipulate these keyframes directly by dragging on the interface . however , The problem is that in this way , Different keyframe Setting mode , Will lead to the final application of keyframe The attributes of have different meanings . for example , take keyframe Drag left 20%, But this 20% There is no context to determine that it is relative to the path 20% Or relative to the parent layout 20%. To solve this problem ,4.1 In the version , When dragging in the design interface , We added a floating layer , It displays the coordinate values based on the current coordinate system and the coordinate axis in real time , So every time the developer needs to edit it manually keyframe when , You can better understand their boundaries 、 Axis and direction .
Show the grid and coordinate values of the keyframe position
Transition Curve editor
Same as above Layout Editor in Transform The panel is similar to , We've also received a lot of feedback from developers , I think we should make it with pure numbers Transition The curve is difficult . therefore , stay 4.1 In the version , We are Motion Editor Added right GUI Curve editor support , It allows developers to improve the desired curve effect through visualization and control handle .
Use Transition Curve editor
We look forward to your trial use of these new features . We will continue to collect feedback , In order to improve our products .Design Tools Suite The goal is to provide visualization or GUI Support to enrich 、 Complement and enhance your coding experience . Some of the improvements mentioned in this article will also be applied to Jetpack Compose in . for example , Some selector experience ( for example visibility State switching 、 spacing Drawable Resource selector ) It's where we can further explore and optimize , Because they are context based 、 Non distracting , At the same time, they provide a unique way to apply design tools to the development process .
As always , If you have any problems using these tools , Or some new ideas to improve your work efficiency , Please in our Issue Tracker Submit your suggestions in or below the message area . We will continue to optimize editor performance , Continuous improvement to fix problems , And listen to 、 Take your advice and feedback .