Android Material Design-Getting Started(入门)-(一)



转载请注明出处:http://blog.youkuaiyun.com/bbld_/article/details/40400343

翻译自:http://developer.android.com/training/material/get-started.html


要创建materialdesign的app,我们按照如下的几个步骤:

1.        回顾material design的规范

2.        在app中使用material主题样式

3.        跟随material design准则去创建你的布局

4.        在你的view控件指定elevation(高度,可使控件投影的仰角变化)属性来投射阴影。

5.        使用系统的控件来设计列表和卡片。

6.        在你的app中使用自定义动画

 

保持向后兼容

你可以在你的app中添加许多material design的功能特性,同时对Android5.0之前的版本保持兼容。要获得更多这方面的信息请参看保持程序的兼性(MaintainingCompatibility)

 

采用material design更新你的app

要更新现有的app去包含体现material design,(你应该)跟随materialdesign的规范指导去更新你的布局。另外,还要确保结合深入、触摸反馈和动画。

 

采用material design创建新的app

如果你要通过materialdesign创建一个全新的app,material design的规范指导为你提供了一个紧密结合的设计框架。在Android框架设计和你的应用开发中遵循这些指导并使用新的功能特性。

 

 

使用Material主题

在你的app中使用material主题,(你应该)继承指定的主题:android:Theme.Material。

 

  1. <!-- res/values/styles.xml -->  
  2.   
  3. <resources>  
  4.   
  5.  <!-- your theme inherits from the material theme -->  
  6.   
  7.  <style name="AppTheme" parent="android:Theme.Material">  
  8.   
  9.    <!-- theme customizations -->  
  10.   
  11.  </style>  
  12.   
  13. </resources>  
<!-- res/values/styles.xml -->

<resources>

 <!-- your theme inherits from the material theme -->

 <style name="AppTheme" parent="android:Theme.Material">

   <!-- theme customizations -->

 </style>

</resources>


 

该material主题提供了已经更新的系统控件使得让你可以去设置它们(控件)的调色板和触摸反馈的默认动画和activity的过渡动画效果。获取更多的细节,请参看Using the Material Theme  [Android Material Design-Using the Material Theme(使用Material主题)-(二)]

 

设计你的布局

除了使用或定制material主题,你的布局同样应该符合materialdesign的规范指导。 当你设计布局时,需要特别注意一下几点:

l  基线网格

l  关键的边

l  间隔

l  触摸目标的大小

l  布局结构

 

在你控件中指定elevation (属性)

控件能够投射阴影,此外elevation属性值决定了一个view控件的影子和它绘制顺序的大小。要设置一个view控件的elevation属性,可以在布局中使用android:elevation属性去设置。

 

  1. <TextView  
  2.   
  3.    android:id="@+id/my_textview"  
  4.   
  5.    android:layout_width="wrap_content"  
  6.   
  7.    android:layout_height="wrap_content"  
  8.   
  9.    android:text="@string/next"  
  10.   
  11.    android:background="@color/white"  
  12.   
  13.    android:elevation="5dp" />  
<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控件levation属性时的动画效果。Elevation属性改变可能是有用的当响应触摸手势时。

更多详情,请参看Defining Shadows and Clipping Views(定义阴影和裁剪视图)

 

创建列表和卡片(控件)

RecyclerView是一个支持不同的布局类型同时提高了显示动态视图性能的增强版ListView。

CardView是一个卡片视图,可以在卡片内显示信息。可以使用下面的方式创建CardView。

 

  1. <android.support.v7.widget.CardView  
  2.   
  3.    android:id="@+id/card_view"  
  4.   
  5.    android:layout_width="200dp"  
  6.   
  7.    android:layout_height="200dp"  
  8.   
  9.    card_view:cardCornerRadius="3dp">  
  10.   
  11.    ...  
  12.   
  13. </android.support.v7.widget.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>


 

更多的信息,参看Creating Lists and Cards(创建列表和卡片)

 

自定义你的动画

Android 5.0(API级别21)包含许多新的API使得你可以在app中去创建自定义的动画。例如,你可以启用activity的过渡动画和定义activity的退出动画:

 

  1. public class MyActivity extends Activity {  
  2.   
  3.    
  4.   
  5.     @Override  
  6.   
  7.    protected void onCreate(Bundle savedInstanceState) {  
  8.   
  9.        super.onCreate(savedInstanceState);  
  10.   
  11.        // enable transitions  
  12.   
  13.        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);  
  14.   
  15.        setContentView(R.layout.activity_my);  
  16.   
  17.     }  
  18.   
  19.    
  20.   
  21.    public void onSomeButtonClicked(View view) {  
  22.   
  23.        getWindow().setExitTransition(new Explode());  
  24.   
  25.        Intent intent = new Intent(this, MyOtherActivity.class);  
  26.   
  27.        startActivity(intent,  
  28.   
  29.                       ActivityOptions  
  30.   
  31.                          .makeSceneTransitionAnimation(this).toBundle());  
  32.   
  33.     }  
  34.   
  35. }  
public class MyActivity extends Activity {

 

    @Override

   protected void onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       // enable transitions

       getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

       setContentView(R.layout.activity_my);

    }

 

   public void onSomeButtonClicked(View view) {

       getWindow().setExitTransition(new Explode());

       Intent intent = new Intent(this, MyOtherActivity.class);

       startActivity(intent,

                      ActivityOptions

                         .makeSceneTransitionAnimation(this).toBundle());

    }

}


 

当你从这个activity跳转到另一个activity时,退出过渡动画是激活的。

 

要了解更多关于新动画的API,请参看Defining Custom Animations(自定义动画)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值