使用Material Design设计应用:
- Take a look at thematerial design specification.
- Apply the materialthemeto your app.
- Define additionalstylesto customize the material theme.
- Create yourlayoutsfollowing material design guidelines.
- Specify theelevationof your views to cast appropriate shadows.
- Use the newwidgetsfor complex views, such as lists and cards.
- Use the new APIs to customize theanimationsin your app.
Update Your App for the Android L Developer Preview
为Android L 开发者预览版升级现有应用,你可以参考material design指导准则,来设计新的布局,通过触摸反馈、UI动画增强用户体验。
Create New Apps for the Android L Developer Preview
为Android L 开发者预览版新的应用,Material design指导准则为你的app提供了一个有凝聚力的设计框架,在你的app设计、开发中依从这些准则和新的功能。
Apply the Material Theme
在app中使用material theme,你必须在style声明android:Theme.Material:
<!-- res/values/styles.xml -->
<resources>
<!-- your app's theme inherits from the Material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<!-- theme customizations -->
</style>
</resources>
Material theme提供了新的系统widgets,可以在触摸反馈、Activity切换中使用颜色调色板和默认动画。更多细节,参考Material Theme.
Design Your Layouts
除了使用或者自定义Material theme,你的布局必须和Material theme指导准则保持一致。当你设计应用时,请特意注意一下几点:
- Baseline grids
- Keylines
- Spacing
- Touch target size
- Layout structure
Specify Elevation in Your Views
视图可以投射阴影,视图的高程值决定了它的影子的大小和它绘制顺序,在你的布局中可以设置android:elevation属性,来定义投影的仰角。
<TextView
android:id="@+id/my_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/next"
android:background="@color/white"
android:elevation="5dp" />
新的translationZ属性,可以为view创建反映仰角临时变化的动画,这个对触摸手势是非常有用的。更多细节,请参考Views and Shadows.
Use the New UI Widgets
RecyclerView为ListView提高了显示动态视图性能,而且更加简单易用。CardView是一个卡片
视图,可以在卡片内显示信息。可以使用下面的方式创建CardView。
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="3dp">
...
</android.support.v7.widget.CardView>
更多细节请参考UI Widgets.
Customize Your Animations
Android L 开发者预览版提供了新的apis,以支持创建自定义动画。你可以创建activity的启动过渡和退出过渡。
// inside your activity
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
// set an exit transition
getWindow().setExitTransition(new Explode());
当你启动另外的Activity时,退出transition 是激活的。
学习更多新特性,请参考:Animations.
参考:
http://developer.android.com/preview/material/get-started.htm
分享到:
相关推荐
Covering all major design principles and guidelines and including enough of the technologies and code required to implement them, the book is designed so that you can get started with building your ...
Covering all major design principles and guidelines and including enough of the technologies and code required to ...can get started with building your own material interfaces from the very beginning.
Get to grips with the principles of Material Design and Google Web components Make full use of the Polymer Designer Tool, Polymer Starter Kit, and Dart to create responsive web apps An in-depth guide ...
It uses the Web Components specifications for the components and Material Design concepts to create a beautiful user interface. This focused, fast-paced guide deals with Polymer web components. We ...
Chapter 1: Getting Started as a WordPress Theme Designer 7 WordPress perks 7 Does a WordPress site have to be a blog? 8 Pick a theme or design your own? 9 Drawbacks to using an already built theme...
Unfortunately, there is very little material available to help those new to the area to get started. Even this insight into the process is not actually stated anywhere, although it is implicitly ...
If you do decide to go for a custom driver, Cant's simple generic drivers will help get you started.) The second strength of this book is its discussion of a variety of techniques for testing and ...
Each chapter and app has been designed and tested to provide the knowledge and experience you need to get started in Android development. Big Nerd Ranch specializes in developing and designing ...
Fully updated for Android 6, ... are ready to download Android Studio and the Android SDK, have access to a Windows, Mac or Linux system and ideas for some apps to develop, you are ready to get started.
get started on developing your own project. Available in the 'Hardware' folder are the complete board schematic and layout, bill of material and Gerber files. You can also find various web links in ...
Fully updated for Android ... are ready to download Android Studio and the Android SDK, have access to a Windows, Mac or Linux system and ideas for some apps to develop, you are ready to get started.
Android Studio 2.3 Development... are ready to download Android Studio and the Android SDK, have access to a Windows, Mac or Linux system and ideas for some apps to develop, you are ready to get started.
This idea led to two books: ShaderX2: Introductions & Tutorials with DirectX 9 ShaderX2: Shader Programming Tips & Tricks with DirectX 9 The first book helps the reader get started with ...
This idea led to two books: ShaderX2: Introductions & Tutorials with DirectX 9 ShaderX2: Shader Programming Tips & Tricks with DirectX 9 The first book helps the reader get started with ...
Advanced material explains the most current design practices for Ajax usability. You'll learn to avoid user experience mistakes with proven design patterns. Beyond the how-to, Ajax on Rails helps you...
Get started with building cool, crisp user interfaces How to display data in Table Views How to draw to the screen using Core Graphics How to use iOS sensor capabilities to map your world How to get ...
Get started with building cool, crisp user interfaces How to display data in Table Views How to draw to the screen using Core Graphics How to use iOS sensor capabilities to map your world How to get ...
Use material design components and animations in Angular 4 About the Author Shravan Kumar Kasagoni is a developer, gadget freak, technology evangelist, mentor, blogger, and speaker living in ...
Starting with an overview of the MVC pattern, you will quickly dive into the aspects that you need to know to get started with ASP.NET. You will learn about the core architecture of model, view, and ...
There is plenty of freeduan.com sample code (plus a custom Visual C++ AppWizard that generates skeleton code for a default WDM driver) to get you started. Examples for working with the S5933 PCI chip...