• Android 5.X UI设计初步
  • Android 5.X新增特性分析

一:5.X UI设计初步
新特性

  • 材料的形态模拟
  • 更加真实的动画
  • 大色块的使用

二:Material Design主题
Material Design现在有三种默认的主题可以设置

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

同时Android 5.X提出了Color Palette的概念,开发者可以设定系统区域的颜色,使整个App颜色风格和系统颜色风格保持统一

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Material">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#BEBEBE</item>
        <item name="colorPrimaryDark">#FF5AEBFF</item>
        <item name="android:navigationBarColor">#FFFF4130</item>

    </style>

</resources>

三:Palette

Android 5.X创新地使用palette来提取颜色,从而让主题能够动态适应当前页面的色调。做到整个App颜色基调和谐统一。

Android内置了几种提取色调的种类,

  • Vibrant(充满活力的)
  • Vibrant dark(充满活力的黑)
  • Vibrant light(充满活力的亮)
  • Muted(柔和的)
  • Muted dark(柔和的黑)
  • Muted light(柔和的亮)
    使用Palette的API,能够让我们从Bitmap中获取对应的色调,修改当前的主题色调。

使用Palette首先再AS中引用相关依赖。
implementation 'com.android.support:palette-v7:28.0.0' 可以传递一个Bitmap对象给Palette,并调用它的Palette.generate()静态方法或者Palette.generateAysnc()方法来创建一个Palette。接下来就可以使用getter方法来检索相应的色调。这些色调就是上面列出来的色调。
下面的例子是如何通过加载的图片的柔和色调来改变状态栏和Actionbar的色调。

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.seekbar_bg_pic);
        //创建Palette对象
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(@Nullable Palette palette) {
                //通过Palette来获取对应的色调
                Palette.Swatch vibrant = palette.getDarkVibrantSwatch();
                //将颜色设置给相应的组件
                getActionBar().setBackgroundDrawable(new ColorDrawable(vibrant.getRgb()));
                Window window = getWindow();
                window.setStatusBarColor(vibrant.getRgb());
            }
        });
    }
}

android little Android Little Butter_ide


通过不同方法提取不同色调的颜色

palette.get...Swatch();

四:视图与阴影
阴影效果

Google增加了View的新属性——Z,对应垂直方向上的高度变化。
Android5.X中,View的Z值由两部分组成,elevation和translationZ(都是新引入的属性)。elevation是静态的成员,translationZ可以在代码中使用来实现动画效果

Z = elevation + translationZ

通过在XML布局代码中使用如下代码来静态设置View的视图高度。

android:elevation = "XXdp'

通过下面的代码演示了不同视图高度所显示的效果不同
在程序中同样可以使用如下代码动态改变视图高度

view.setTranlationZ(XXX);

通常也会使用属性动画来为视图高度改变的时候增加一个动画效果

if(flag){
	view.animate().translationZ(100);
	flag = false;
}else{
	view.animate().translationZ(0);
	flag = true;
}

五:Tinting和Clipping
Tinting(着色) Clipping(裁剪)。
TInting(着色)

在XML文件的imageView标签中设置tint属性和tintMode属性。tint属性设置颜色,tintMode设置着色模式。

Clipping(裁剪)

Clipping可以让我们改变一个视图的外形。要使用Clipping,首先要使用ViewOutlineProvider来修改outline,然后再通过setOutlineProvider将outline作用给视图。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_rect"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        android:elevation="1dp"
        android:gravity="center" />

    <TextView
        android:id="@+id/tv_circle"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        android:elevation="1dp"
        android:gravity="center" />

</LinearLayout>

Java代码

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        View v1 = findViewById(R.id.tv_rect);
        View v2 = findViewById(R.id.tv_circle);
        //获取Outline
        ViewOutlineProvider viewOutlineProvider1 = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //修改outline为特定形状
                outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 30);
            }
        };
        //获取Outline
        ViewOutlineProvider viewOutlineProvider2 = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //修改outline为特定形状
                outline.setOval(0, 0, view.getWidth(), view.getHeight());
            }
        };
        //重新设置形状
        v1.setOutlineProvider(viewOutlineProvider1);
        v2.setOutlineProvider(viewOutlineProvider2);
    }
}

android little Android Little Butter_Android 5.X新特性详解_02


六:列表与卡片

RecyclerView

使用RecyclerView,要导入recyclerView的依赖在V7包中,同样需要list item子目录,在Material Design中通常与CardView配合使用
RecyclerView相比ListView更加先进的是,它已经封装好了ViewHolder,只需要实现功能就可以了。

RecyclerView定义了LayoutManager来帮助开发者更加方便地创建不同的布局。也可以自定义LayoutManager创建自己的布局。

mRList.setLayoutManager(new LinearLayoutManager(RecyclerTest.this));
mRList.setLayoutManager(new GridLayoutManager(RecyclerTest.this,3));

CardView是一个容器类布局

它提供了卡片这一种形式,开发者可以定义卡片的大小与视图高度,并设置圆角角度,也需要引入v7包中cardView的依赖。其次需要引入新的名字空间

xmlns:card_view=http://schems.android.com/apk/res-auto来添加。这样才可以通过自定义的名字空间来引用它的属性。

card_view:cardBackgroundColor="@color/cardview_background"
card_view:cardCornerRadius="8dp"

两个属性,前者设置背景颜色,后者设置圆角的角度。
七:Activity过渡动画

曾经的Android在Activity进行跳转的时候,只是非常生硬地切换,即使通过overridePendingtransition(int Id,int outId)这个方法来给Activity增加一些切换动画,效果也是差强人意。
更加丰富的Activity转场效果动画。三种Transition类型

  • 进入:一个进入的过渡动画决定Activity中所有的视图怎么进入屏幕。
  • 退出:一个退出的过渡动画决定Activity所有视图怎么退出屏幕。
  • 共享元素:一个共享元素过渡动画决定两个Activitys之间的过渡,怎么共享它们的视图。
    其中,进入和退出效果包括:
  • explode(分解)——从屏幕中间进或出,移动视图。
  • slide(滑动)从屏幕边缘进或出,移动视图
  • fade(淡出)通过改变屏幕上视图的不透明度达到添加或者移除视图
    共享元素包括:
  • changeBounds——改变 目标视图的布局文件
  • changeClipBounds——裁剪目标视图的边界
  • changeTransform——改变目标视图的缩放比例和旋转角度
  • changeImageTransform——改变目标图片的大小和缩放比例

首先看三种Activity过渡动画,例如从活动A到活动B。

startActivity(intent,ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

8.1ripple波纹效果

8.2Circular Reveal

具体表现为一个View以圆形的形式展开,揭示出来

8.3View state changes Animation

视图状态切换动画

  • StateListAnimator
    视图改变时的动画效果
  • animated-selector
    类似帧动画的切换效果,把图片组合为动画

九Toolbar

这里是引用
Toolbar比Actionbar自由,可控。
要使用要引入v7包支持,设置主题为NoActionBar.

十Notification