【学习笔记】Android 5.X UI 设计初识

Android 5.x系列开始使用新的设计风格Material Design来统一整个Android系统的界面设计风格。

一、材料的形态模拟

     材料的形态模拟是Material Design中最核心也是改变最大的一个设计，Google经过模拟天然界纸墨的形态变化、光线与阴影、纸与纸之间

的空间层级关系，带来一种真实的空间感。

二、Android5.X中大量加入了各类新的动画效果，让整个设计风格更加天然、和谐。而各类新的转场动画，能更加有效地指引用户的视觉焦点，

不至于由于复杂布局的界面重排而对总体效果产生影响，让使用者达到一个视觉连贯性。

三、大色块的使用

Material Design中用大量高饱和度、适中亮度的大色块来突出界面的主次，并一扫Android4.X系列Holo主题的沉重感，让界面更加富有时尚感

和视觉冲击力。

此外，还有不少新的设计风格，好比悬浮按钮、聚焦大图、无框按钮、波纹效果等新特性。

http://www.google.com/design/#resources

四、Material Design主题

默认有三种主题可设置：

@android:style/Theme.Material(dark version)

@android:style/Theme.Material.Light(light version)

@android:style/Theme.Material.Light.DarkActionBar

同时，Android5.X提出了Color Palette的概念，

如图所示，让开发者能够本身设定系统区域的颜色，使整个App的颜色风格和系统的颜色风格保持统一。

<style name="AppTheme" parent="@android:style/Theme.Material.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <!--actionbar background-->
        <item name="android:colorPrimary">@color/colorPrimary</item>
        <!--status bar-->
        <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
        <!---->
        <item name="android:navigationBarColor">#FFFF4130</item>
    </style>

Palette:可使用它来提取颜色，从而让主题可以动态适应当前页面的色调，作到整个App颜色基调和谐统一。

内置的提取色调的种类：

• Vibrant(充满活力的)
• Vibrant dark(充满活力的黑)
• Vibrant light(充满活力的亮)
• Muted(柔和的)
• Muted dark(柔和的黑)
• Muted light(柔和的亮)

使用Palette的API,能够从Bitmap中获取对应的色调，修改当前主题色调。

需引用的依赖：com.android.support:palette-v******

能够经过传递一个Bitmap对象给Palette，并调用它的Palette.generate()静态方法或者Palette.generateAsync()方法建立一个Palette.

接下来就可使用getter方法来检索相应的色调。

示例：（图片仅为喜爱，妹子不要告我侵权哦）

     

代码以下：

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.a);
        //建立Palette对象
        Palette.generateAsync(bitmap,
                new Palette.PaletteAsyncListener() {
                    @Override
                    public void onGenerated(Palette palette) {
                        //经过Palette来获取对应的色调
                        Palette.Swatch vibrant = palette.getDarkVibrantSwatch();
                        //将颜色设置给相应的组件
                        //actionbar的背景色
                        getActionBar().setBackgroundDrawable(new ColorDrawable(vibrant.getRgb()));
                        Window window = getWindow();
                        //statusbar背景色
                        window.setStatusBarColor(vibrant.getRgb());
                    }
                });

经过如下方法来提取不一样色调的颜色：

                       palette.getVibrantSwatch();
                        palette.getDarkVibrantSwatch();
                        palette.getLightVibrantSwatch();
                        
                        palette.getMutedSwatch();
                        palette.getDarkMutedSwatch();
                        palette.getLightMutedSwatch();

视图与阴影

在Android5.X中，View引入了一个新的属性-----> Z,对应垂直方向上的高度变化，

Z值由两部分组成，elevation和translationZ(都是Android5.X新引入的属性)。

elevation是静态的成员，translationZ能够在代码中使用来实现动画效果，

它们的关系：Z=elevation + translationZ

经过在XML布局中使用以下代码来静态设置View的视图高度：

android:elevation="**dp"

示例：（看哪呢，看哪呢，让你看阴影了，不要分散注意力啊）

代码以下：

<ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@mipmap/a"
        android:scaleType="centerCrop"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@mipmap/a"
        android:scaleType="centerCrop"
        android:elevation="5dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="100dp"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@mipmap/a"
        android:scaleType="centerCrop"
        android:elevation="10dp"
        android:layout_marginTop="10dp"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@mipmap/a"
        android:scaleType="centerCrop"
        android:elevation="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="100dp"/>

在程序中，一样可使用以下代码来动态改变视图高度：

mImageView.setTranslationZ(15);

效果：（吼，再来！！！）

使用属性动画来为视图高度改变的时候增长一个动画效果：

代码：

boolean flag = true;
mImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(flag){
                    mImageView.animate().translationZ(100);
                    flag = false;
                }else {
                    mImageView.animate().translationZ(0);
                    flag = true;
                }
            }
        });

Tinting 和 Clipping

Android5.X在对图像的操做上有了更多的功能------->Tinting(着色) 和 Clipping(剪裁)

着色 Tinting

示例：

代码：

<ImageView
        android:id="@+id/mImageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/a"
        android:scaleType="centerCrop"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/a"
        android:scaleType="centerCrop"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="100dp"
        android:tint="@android:color/holo_blue_bright"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/a"
        android:scaleType="centerCrop"
        android:layout_marginTop="10dp"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="add"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/a"
        android:scaleType="centerCrop"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="100dp"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="multiply"/>

Tint经过修改图像的Alpha遮罩来修改图像的颜色，从而达到从新着色的目的。

剪裁 Clipping：能够改变一个视图的外形

要使用Clipping，首先须要使用ViewOutlineProvider来修改outline，而后再经过setOutlineProvider将outline做用给视图

  

代码以下：

TextView tvtest = (TextView)findViewById(R.id.tvtest);
        //获取Outline
        ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //修改outline为特定形状
//                outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 30);

                outline.setOval(0, 0, view.getWidth(), view.getHeight());
            }
        };
        tvtest.setOutlineProvider(viewOutlineProvider);