ANDROID L——Material Design详细解释(UI控制)

简介:

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持!



Android L:


Google已经确认Android L就是Android Lollipop(5.0)。


前几天发现Android5.0正式版的sdk已经能够下载了。并且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市。

所以是时候開始学习Android L了。

关于Android L怎样配置模拟器和创建项目,假设大家有兴趣的话能够看看我之前的一篇文章:

Android L——模拟器配置及创建项目





Material Design:



Material Design是Google推出的一个全新的设计语言,它的特点就是拟物扁平化。


Material Design包括了非常多内容,我大致把它分为四部分:

主题和布局——ANDROID L——Material Design具体解释(主题和布局)

视图和阴影——ANDROID L——Material Design具体解释(视图和阴影)

UI控件——ANDROID L——Material Design具体解释(UI控件)

动画——ANDROID L——Material Design具体解释(动画篇)


今天就先来说说第三部分——Material新增的UI控件




UI控件

在Android L中新增了两个控件各自是RecyclerViewCardView


RecyclerView:


RecyclerView是ListView的升级版,它提供了更好的性能并且更easy使用。




RecyclerView这个控件是一个能够装载大量的视图集合,而且能够很效率的进行回收和滚动。当你list中的元素常常动态改变时能够使用RecyclerView控件。

RecyclerView很easy使用,它提供了例如以下两个功能:

为每一个条目位置提供了layout管理器(RecyclerView.setLayoutManager

为每一个条目设置了操作动画(RecyclerView.setItemAnimator


以下的样例介绍了怎样定义和使用一个RecyclerView

1.在布局文件里加入一个RecyclerView

<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
    android:id="@+id/my_recycler_view"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>


2.初始化RecyclerView參数。设置layoutManager和adapter

public class MyActivity extends Activity {
    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_activity);
        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

        // improve performance if you know that changes in content
        // do not change the size of the RecyclerView
        mRecyclerView.setHasFixedSize(true);

        // use a linear layout manager
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);

        // specify an adapter (see also next example)
        mAdapter = new MyAdapter(myDataset);
        mRecyclerView.setAdapter(mAdapter);
    }
    ...
}

3.创建一个adapter

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    private String[] mDataset;

    // Provide a reference to the type of views that you are using
    // (custom viewholder)
    public static class ViewHolder extends RecyclerView.ViewHolder {
        public TextView mTextView;
        public ViewHolder(TextView v) {
            super(v);
            mTextView = v;
        }
    }

    // Provide a suitable constructor (depends on the kind of dataset)
    public MyAdapter(String[] myDataset) {
        mDataset = myDataset;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {
        // create a new view
        View v = LayoutInflater.from(parent.getContext())
                               .inflate(R.layout.my_text_view, parent, false);
        // set the view's size, margins, paddings and layout parameters
        ...
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // - get element from your dataset at this position
        // - replace the contents of the view with that element
        holder.mTextView.setText(mDataset[position]);

    }

    // Return the size of your dataset (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return mDataset.length;
    }
}


CardView:


CardView继承自FrameLayout。同意你在card视图中显示信息. CardView也能够设置阴影和圆角。(事实上如今非常多应用都自己定义了Card视图,Google这回将card视图作为基本控件,能够拿来直接使用了)





Layout中为CardView设置圆角使用card_view:cardCornerRadius属性

代码中为CardView设置圆角使用CardView.setRadius方法

CardView设置背景颜色使用card_view:cardBackgroundColor属性


在布局中包括一个CardView,例如以下:

<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="4dp">

    <TextView
        android:id="@+id/info_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v7.widget.CardView>

兼容性:

RecyclerViewCardView都包括在Android L Developer Preview Support Library中。所以他们能够在之前的版本号中使用,仅仅会有一些限制。




总结:


我将Material Design分为例如以下四部分:

主题和布局——ANDROID L——Material Design具体解释(主题和布局)

视图和阴影——ANDROID L——Material Design具体解释(视图和阴影)

UI控件——ANDROID L——Material Design具体解释(UI控件)

动画——ANDROID L——Material Design具体解释(动画篇)


本文所介绍的两个控件(RecyclerViewCardView)很重要,由于在以后Android L的开发中会经经常使用到。



这篇文章介绍的内容都是从官方文档翻译过来的,大家看着可能有点迷糊。只是没关系。过几天我会更新一个介绍RecyclerViewCardView在Android Studio和Eclipse中是怎样导包。和两个控件结合使用的小Demo。

Android L——RecyclerView,CardView导入和使用(Demo)


Material Desgin的介绍仅仅剩下动画部分了我会尽快更新,敬请期待。。。



版权声明:本文博客原创文章,博客,未经同意,不得转载。







本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/4681969.html,如需转载请自行联系原作者


相关文章
|
12月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
10月前
|
API C# 开发者
基于Material Design风格开源、免费的WinForms UI控件库
基于Material Design风格开源、免费的WinForms UI控件库!
241 0
|
12月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
278 1
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
134 0
|
前端开发 开发者 C#
深度解析 Uno Platform 中的 MVVM 模式:从理论到实践的全方位指南,助你轻松掌握通过 C# 与 XAML 构建高效可维护的跨平台应用秘籍
【8月更文挑战第31天】本文详细介绍如何在优秀的跨平台 UI 框架 Uno Platform 中实施 MVVM(Model-View-ViewModel)模式,通过一个简单的待办事项列表应用演示其实现过程。MVVM 模式有助于分离视图层与业务逻辑层,提升代码组织性、易测性和可维护性。Uno Platform 的数据绑定机制使视图与模型间的同步变得高效简便。文章通过构造 `TodoListViewModel` 类及其相关视图,展示了如何解耦视图与模型,实现动态数据绑定及命令处理,从而提高代码质量和开发效率。通过这一模式,开发者能更轻松地构建复杂的跨平台应用。
176 0
|
前端开发 JavaScript 开发者
Angular Material 超厉害!与传统自定义 UI 大对比,构建美观一致 UI 的绝佳选择!
【8月更文挑战第31天】在前端开发中,构建美观一致的用户界面至关重要。Angular Material 是一个基于 Material Design 规范的强大 UI 组件库,提供丰富的预定义组件和设计指南。本文通过对比 Angular Material 和传统自定义 UI,展示了前者在设计理念、组件丰富度、响应式设计及主题定制方面的显著优势。
366 0
|
4月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
147 15
|
4月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
142 11
|
3月前
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
170 56
|
3月前
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
198 55