关闭

Android(Lollipop/5.0) Material Design(二) 入门指南

标签: androiddesign
92人阅读 评论(0) 收藏 举报

转载原文地址:http://blog.csdn.net/jjwwmlp456/article/details/40582277

官网地址:https://developer.android.com/training/material/get-started.html

开始

2. 应用材料设计主题
3. 以材料设计的指导方针来创建layouts
4. 投影:指定view的 evevation 属性 
5. 使用系统组件 lists and cards
6. 自定义动画

保持向后兼容性



Apply the Material Theme 运用材料主题

<span class="com"><!-- res/values/styles.xml --></span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="tag" style="color: rgb(0, 0, 136);"><resources></span><span class="pln" style="color: rgb(0, 0, 0);">
  </span><span class="com"><!-- your theme inherits from the material theme --></span><span class="pln" style="color: rgb(0, 0, 0);">
  </span><span class="tag" style="color: rgb(0, 0, 136);"><style</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">name</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"AppTheme"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">parent</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"android:Theme.Material"</span><span class="tag" style="color: rgb(0, 0, 136);">></span><span class="pln" style="color: rgb(0, 0, 0);">
    </span><span class="com"><!--</span><span class="pln" style="color: rgb(0, 0, 0);"> theme customizations </span><span class="com">--></span><span class="pln" style="color: rgb(0, 0, 0);">
  </span><span class="tag" style="color: rgb(0, 0, 136);"></style></span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="tag" style="color: rgb(0, 0, 136);"></resources></span>

详见 使用Material主题


Design Your Layouts  设计你的布局

除了应用和自定义材料的主题,你的布局应符合材料的设计准则。当你设计你的布局,以下需要特别注意:

· 基线网格

· Keylines

· 间距

· 触摸目标尺寸

· 布局结构


Specify Elevation in Your Views  在View中指定elevation属性

View可以投下的阴影,一个View的elevation值决定了它的阴影的大小和绘制的顺序。可以设置一个视图的elevation,在布局中使用属性:android:elevation

<span class="tag" style="color: rgb(0, 0, 136);"><TextView</span><span class="pln" style="color: rgb(0, 0, 0);">
    </span><span class="atn" style="color: rgb(136, 34, 136);">android:id</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@+id/my_textview"</span><span class="pln" style="color: rgb(0, 0, 0);">
    </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_width</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"wrap_content"</span><span class="pln" style="color: rgb(0, 0, 0);">
    </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_height</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"wrap_content"</span><span class="pln" style="color: rgb(0, 0, 0);">
    </span><span class="atn" style="color: rgb(136, 34, 136);">android:text</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@string/next"</span><span class="pln" style="color: rgb(0, 0, 0);">
    </span><span class="atn" style="color: rgb(136, 34, 136);">android:background</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@color/white"</span><span class="pln" style="color: rgb(0, 0, 0);">
    </span><span class="atn" style="color: rgb(136, 34, 136);">android:elevation</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"5dp"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);">/></span>

新的translationz属性使您能够创建一个反映了暂时的elevation变化的动画。elevation的变化可在响应触摸手势时可能是有用的

 详见 定义阴影和裁剪View


创建 Lists and Cards

RecyclerView是一个可插入版本的列表视图,支持不同的布局类型并提供性能改进
CardView 允许您在app中显示一块块 使用一致外观的卡片
下面的代码示例演示了如何在你的布局: CardView
  1. <android.support.v7.widget.CardView  
  2.     android:id="@+id/card_view"  
  3.     android:layout_width="200dp"  
  4.     android:layout_height="200dp"  
  5.     card_view:cardCornerRadius="3dp">  
  6.     ...  
  7. </android.support.v7.widget.CardView>  

详见 创建 Lists and Cards


Customize Your Animations  自定义动画

可以自定义动画,如激活Activity的过渡动画和结束过渡动画

<span class="kwd" style="color: rgb(0, 0, 136);">public</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">class</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">MyActivity</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">extends</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">Activity</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);">

    </span><span class="lit" style="color: rgb(0, 102, 102);">@Override</span><span class="pln" style="color: rgb(0, 0, 0);">
    </span><span class="kwd" style="color: rgb(0, 0, 136);">protected</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">void</span><span class="pln" style="color: rgb(0, 0, 0);"> onCreate</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="typ" style="color: rgb(102, 0, 102);">Bundle</span><span class="pln" style="color: rgb(0, 0, 0);"> savedInstanceState</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);">
        </span><span class="kwd" style="color: rgb(0, 0, 136);">super</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">onCreate</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">savedInstanceState</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);">
        </span><span class="com">// enable transitions</span><span class="pln" style="color: rgb(0, 0, 0);">
        getWindow</span><span class="pun" style="color: rgb(102, 102, 0);">().</span><span class="pln" style="color: rgb(0, 0, 0);">requestFeature</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="typ" style="color: rgb(102, 0, 102);">Window</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">FEATURE_CONTENT_TRANSITIONS</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);">
        setContentView</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">R</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">layout</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">activity_my</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);">
    </span><span class="pun" style="color: rgb(102, 102, 0);">}</span><span class="pln" style="color: rgb(0, 0, 0);">

    </span><span class="kwd" style="color: rgb(0, 0, 136);">public</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">void</span><span class="pln" style="color: rgb(0, 0, 0);"> onSomeButtonClicked</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="typ" style="color: rgb(102, 0, 102);">View</span><span class="pln" style="color: rgb(0, 0, 0);"> view</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);">
        getWindow</span><span class="pun" style="color: rgb(102, 102, 0);">().</span><span class="pln" style="color: rgb(0, 0, 0);">setExitTransition</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">new</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">Explode</span><span class="pun" style="color: rgb(102, 102, 0);">());</span><span class="pln" style="color: rgb(0, 0, 0);">
        </span><span class="typ" style="color: rgb(102, 0, 102);">Intent</span><span class="pln" style="color: rgb(0, 0, 0);"> intent </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">new</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">Intent</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">this</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">MyOtherActivity</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="kwd" style="color: rgb(0, 0, 136);">class</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);">
        startActivity</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">intent</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);">
                      </span><span class="typ" style="color: rgb(102, 0, 102);">ActivityOptions</span><span class="pln" style="color: rgb(0, 0, 0);">
                          </span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">makeSceneTransitionAnimation</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">this</span><span class="pun" style="color: rgb(102, 102, 0);">).</span><span class="pln" style="color: rgb(0, 0, 0);">toBundle</span><span class="pun" style="color: rgb(102, 102, 0);">());</span><span class="pln" style="color: rgb(0, 0, 0);">
    </span><span class="pun" style="color: rgb(102, 102, 0);">}</span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="pun" style="color: rgb(102, 102, 0);">}</span>
当你在这个Activity中启动其他的Activity时,exit transition将被激活

详见 使用自定义动画

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:346次
    • 积分:6
    • 等级:
    • 排名:千里之外
    • 原创:0篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章存档