Android构建Material Design应用详解

长久以来。Android的UI并不算美观,以至于很多IT公司在进行界面设计的时候,为了保证双平台的统一性,强烈要求Android端的界面风格必须与iOS端一致,我认为这里非常不合理的,同一操作系统中各个应用之间的界面统一性要远比一个应用在双平台的界面统一性重要的多,只有这样,才能给使用者带来更好的用户体验。为了解决这个问题,Google公司在2014年IO大会上推出了一套全新的界面设计语言——Material Design(材料设计语言),这次Google在界面设计上确实下足了功夫,一个词,好看。并且在2015年IO大会上推出了一个Design Support库,这个库将Material Design中最具代表性的一些控件和效果进行了封装,使得开发者在不了解Material Design的情况下也可以轻松地将自己的应用Material化。

1.Toolbar

1.基本的Toolbar

Toolbar 控件是由 appcompat-v7 库提供的,使用需要添加依赖:

compile 'com.android.support:appcompat-v7:25.3.1'

我们使用Toolbar来替代ActionBar,因此需要指定一个不带ActionBar的主题,通常有Theme.AppCompat.NoActionBar (深色) 主题或者Theme.AppCompat.Light.NoActionBar (淡色) 主题这两种主题可选。

Theme:

<!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Toolbar的颜色 --> <item name="colorPrimary">@color/colorPrimary</item> <!-- 通知栏的颜色 --> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <!-- 悬浮图标等颜色,更多的表达了一种强调的意思,比如一些控件的选中状态也会使用该颜色 --> <item name="colorAccent">@color/colorAccent</item> </style>

Layout:

<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> </android.support.design.widget.AppBarLayout>

AppBarLayout 是一个垂直方向的 LinearLayout,它在内部做了很多滚动事件的封装,并应用了一些 Material Design 的设计理念,AppBarLayout 解决了 在 FrameLayout 中 Toolbar 被遮挡的问题。

Activity:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar);

2.RecyclerView向上滚动隐藏Toolbar

Toolbar 添加一行代码 app:layout_scrollFlags="scroll|enterAlways|snap" 即可。

Layout:

<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_scrollFlags="scroll|enterAlways|snap"/> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

app:layout_behavior="@string/appbar_scrolling_view_behavior" 属性则保证了 RecyclerView 遮挡 Toolbar 的问题。

2.悬浮按钮和可交互提示

1.FloatingActionButton

FloatingActionButton 是由 design support 库提供的,使用需要添加依赖:

compile 'com.android.support:design:25.3.1'

Layout:

<android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="16dp" android:src="@drawable/ic_circle"/>

2.Snackbar

Snackbar 是由 design support 库提供的。Snackbar 的第一个参数需要传入一个View,可以是当前界面布局的任意一个View,然后会使用这个View来自动查找最外层的布局,用于展示Snackbar。

Activity:

Snackbar.make(view, "This is Snackbar.", Snackbar.LENGTH_SHORT) // 设置动作 .setAction("ok", new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(context, "onClick", Toast.LENGTH_SHORT); } }).show();

不过有一个bug,Snackbar和悬浮按钮同时使用并且悬浮按钮在界面右下角时,弹出的Snackbar会将悬浮按钮给遮住,这种用户体验是不友好的,要解决这个问题只需要借助 CoordinatorLayout 就可以轻松解决。

3.CoordinatorLayout

Snackbar 是由 design support 库提供的,CoordinatorLayout 可以说是加强版的 FrameLayout,CoordinatorLayout 可以监听其所有子控件的各种事件,然后自动帮我们做出最为合理的响应,就比如刚才说的 Snackbar 那个bug,借助 CoordinatorLayout,就可以使得 Snackbar 向上偏移,从而确保不会被 Snackbar 遮挡住。

Layout:

<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="16dp" android:src="@drawable/ic_circle"/> </android.support.design.widget.CoordinatorLayout>

另外,由于 CoordinatorLayout 本身就是 加强版的 FrameLayout,所以替换 FrameLayout 也不会有任何的副作用。

3.卡片式布局

1.CardView

CardView 控件是由 cardview-v7 库提供的,用于实现一个立体的卡片,提供了圆角、阴影等效果。使用需要添加依赖:

compile 'com.android.support:cardview-v7:25.3.1'

Layout:

<android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" app:cardCornerRadius = "10dp" app:elevation="5dp" app:cardBackgroundColor="#71C3DE"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="20dp" android:text="CardView控件,可以设置阴影和圆角效果"/> </android.support.v7.widget.CardView>

运行后效果图如下:

4.全透明状态栏

需要 Android 5.0及以上。

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Window window = getWindow(); window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); window.setStatusBarColor(Color.TRANSPARENT); window.setNavigationBarColor(Color.TRANSPARENT); } setContentView(R.layout.activity_main); } }

5.Material效果Dialog

1.AlertDialog

样式效果向下兼容到 Android 2.1

new android.support.v7.app.AlertDialog.Builder(context) .setTitle("AlertDialog") .setMessage("Something important.") .setCancelable(false) //设置点击Dialog以外的界面不消失,按返回键也不起作用 .setPositiveButton("OK", new android.content.DialogInterface.OnClickListener() { @Override public void onClick(android.content.DialogInterface dialogInterface, int i) { } }) .setNegativeButton("Cancel", null) .show();

2.ProgressDialog

样式效果向下兼容到 Android 5.0

ProgressDialog progressDialog = new ProgressDialog(context); progressDialog.setTitle("ProgressDialog"); progressDialog.setMessage("Loading.."); progressDialog.setCancelable(true); progressDialog.show();

3.ripple_drawable资源

Android5.0 推出的 “水波涟漪”效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

时间: 2024-08-02 09:42:25

Android构建Material Design应用详解的相关文章

使用 Sketch 和 Pixate 构建 Material Design 原型 - 第二部分

本文讲的是使用 Sketch 和 Pixate 构建 Material Design 原型 - 第二部分, 在教程的 第一部分 我们制作了一个简单的登录界面并导出了所有资源. 在第二部分,我们打算继续在 Pixate 里创建一个原型.对于这一部分,你需要: Android 或者 IOS 设备(最好是 Android ).如果你能弄到屏幕尺寸是 1080 x 1920 的设备那更好了,但那不是必须的, Pixate 将为你缩放原型. Pixate Studio 下载 Pixate app 到你的 

使用 Sketch 和 Pixate 构建 Material Design 原型 - 第一部分

本文讲的是使用 Sketch 和 Pixate 构建 Material Design 原型 - 第一部分, 你是否曾经对某一款应用有过很棒的想法或者想向别人展示你的想法会带来改变?可是否又有以下限制令你止步? 没时间去开发款概念产品来证明自己 你对色调.布局和动画等等该如何展示没有把握 你是位应用开发者,想尝试但不知该如何设计 你是位应用设计师,想了解 Sketch 和 Pixate 在设计和构建原型的优势 你对 Material Design 能否提升你的应用没有把握但又想知道到底会变成怎样(

《Android多媒体应用开发实战详解:图像、音频、视频、2D和3D》——2.1节简析Android安装文件

2.1 简析Android安装文件 Android多媒体应用开发实战详解:图像.音频.视频.2D和3D 当下载并安装Android后,会在其安装目录中看到一些安装文件.了解这些文件具体是干什么用的,对于我们后面的驱动开发知识学习十分有用,所以在本节的内容中将简要介绍这些安装文件的基本知识. 2.1.1 Android SDK目录结构 安装Android SDK后,其安装目录的具体结构如图2-1所示. temp:里面包含了一些常用的文件模板. tools:包含了一些通用的工具文件. usb_dri

使用 Sketch 和 Pixate 构建 Material Design 原型 - 第三部分

本文讲的是使用 Sketch 和 Pixate 构建 Material Design 原型 - 第三部分, 在本系列的 Part 2 我们已经将在 Sketch 中完成的作品导入到了 Pixate ,并且新建了一个简单的登陆原型. 最后在这个总结性的第三部分,我们将进一步深入,同时将会作出一个更细致的原型. 开始之前,你应该已经完成了 Part 1 andPart 2 , 如果没有的话,先去看看这两篇内容吧. 我已经上传了你在 Part 3 里所有需要的 Sketch 资源 , 你要做的就是将它

Android开发之对话框案例详解(五种对话框)

下面通过实例代码给大家分享5种android对话框,具体内容详情如下所示: 1 弹出普通对话框 --- 系统更新 2 自定义对话框-- 用户登录 3 时间选择对话框 -- 时间对话框 4 进度条对话框 -- 信息加载.. 5 popuWindow对话框 1 弹出普通对话框 --- 系统更新 //弹出普通对话框 public void showNormalDialog(View v) { AlertDialog.Builder builder = new Builder(this); //设置Di

Android 中ContentProvider的实例详解

Android 中ContentProvider的实例详解 Content Provider 的简单介绍: * Android中的Content Provider 机制可支持在多个应用中存储和读取数据.这也是跨应用 共享数据的唯一方式.在Android系统中,没有一个公共的内存区域,供多个应用共享存储数据: * Android 提供了一些主要数据类型的ContentProvider ,比如:音频.视频.图片和私人通讯录等: 在android.provider 包下面找到一些android提供的C

Android中的Compass(罗盘) 详解

Compass(罗盘)是一个定制的视图, 继承View类, 重写了视图的边界(onMeasure)和内容(onDraw); 如图: 以下是Compass的具体设计: 1. 创建CompassView类, 罗盘视图 位置: java->package->CompassView package mzx.spike.compass.app; import android.content.Context; import android.content.res.Resources; import and

android 显示gif图片实例详解

  android 显示gif图片实例详解           在android中不支持gif格式的图片,但是由于我希望在我的程序中刚刚加载的时候有一个小人在跑步表示正在加载.而这个小人跑就是一个gif图片.也就是希望程序一启动时就加载gif图片.在网上查找了一些方法不知道是我使用的android的版本高(android4.4)还是什么问题就是加载不出来.最后想了一个办法加载了出来.这个办法就是将gif放在webView中让其显示. 下面是关于这个的代码: activity_prepare_fu

Android中Service(后台服务)详解

  这篇文章主要介绍了Android中Service(后台服务)详解,本文讲解了Service的概念.作用.生命周期.启动方式和代码实例等内容,需要的朋友可以参考下 1.概念: (1).Service可以说是一个在后台运行的Activity.它不是一个单独的进程,它只需要应用告诉它要在后台做什么就可以了. (2).它要是实现和用户的交互的话需要通过通知栏或者是通过发送广播,UI去接收显示. (3).它的应用十分广泛,尤其是在框架层,应用更多的是对系统服务的调用. 2.作用: (1).它用于处理一