天天看點
傳回

Android 5.X 新特性詳解（一）——主題、Palette、陰影、着色和裁剪

Android 5.X 系列開始使用新的設計風格Material Design來統一整個Android系統的界面設計風格。

Material Design 主題

Material Design 現在有三種預設的主題可以設定，代碼如下：

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

同時，Android 5.X 提出了Color Palette的概念，讓開發者可以自己設定系統區域的顔色，是整個app的顔色風格和系統的顔色風格保持統一。

通過如下所示代碼，可以通過使用自定義Style的方式來建立自己的Color Palette顔色主題，進而實作不同的顔色風格。

<!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Material.Light">
        <!-- Customize your theme here. -->

        <!--Main theme colors-->
        <!--your app branding color for the app bar-->
        <item name="colorPrimary">@color/colorPrimary</item>
        <!--darker variant for the status bar and contextual app bars-->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!--theme UI controls like checkboxes and text fields-->
        <item name="navigationBarColor">@color/colorAccent</item>
    </style>

Palette

Android 5.X 創新的使用Palette來提取顔色，進而讓主題能夠動态适應目前頁面的色調，做到整個app顔色基調和諧統一。

Android内置了幾種提取色調的種類，如下所示：

  • Vibrant（充滿活力的）
  • Vibrant dark（充滿活力的黑）
  • Vibrant light（充滿活力的亮）
  • Muted（柔和的）
  • Muted dark（柔和的的黑）
  • Muted light（柔和的的亮）

使用Palette的API，能夠讓我們從bitmap中擷取對應的色調，修改目前的主題色調。

使用Palette首先需要在Android Studio 中引用相關的依賴，在項目清單中點選F4，然後在Module Setting的Dependencies頁籤中添加com.android.support:palette-v7:24.0.0引用，重新Sync項目即可。可以通過傳遞一個Bitmap對象給Palette，并調用它的Palette.generate()靜态方法或者Palette.generateAsync()方法來建立一個Palette。接下來，就可以使用getter方法來檢索相應的色調。

下面的例子示範了如何通過加載的圖檔的柔和色調來改變狀态欄和Actionbar的色調，代碼如下所示：

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test);
        // 建立Palette對象
        Palette.generateAsync(bitmap,
                new Palette.PaletteAsyncListener() {
                    @Override
                    public void onGenerated(Palette palette) {
                        // 通過Palette來擷取對應的色調
                        Palette.Swatch vibrant = palette.getDarkVibrantSwatch();
                        // 将顔色設定給相應的元件
                        getActionBar().setBackgroundDrawable(new ColorDrawable(vibrant.getRgb()));
                        Window window = getWindow();
                        window.setStatusBarColor(vibrant.getRgb());
                    }
                });
    }
}

效果圖如下：

Android 5.X 新特性詳解（一）——主題、Palette、陰影、着色和裁剪

視圖與陰影

Material Design 的一個很重要的特點就是拟物扁平化。通過展現生活中的材質效果、恰當地使用陰影和光線，配合完美的動畫效果，模拟出一個動感十足又美麗大膽的視覺效果。

以往的Android View通常具有兩個屬性——X和Y，而在Android 5.X 中，Google為其增加了一個新的屬性——Z，對應垂直方向上的高度變化。

在Android 5.X 中，View的Z值由兩部分組成，elevation和translationZ(它們都是Android 5.X 新引入的屬性)。elevation是靜态的成員，translationZ可以在代碼中使用來實作動畫效果，它們的關系如下所示：

Z = elevation + translationZ

通過在XML布局中使用如下所示代碼來靜态設定View的視圖高度。

通過下面的代碼，示範了不同視圖高度所顯示效果的不同，XML代碼如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@mipmap/ic_launcher"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:elevation="2dp"
        android:background="@mipmap/ic_launcher"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:elevation="10dp"
        android:background="@mipmap/ic_launcher"/>

</LinearLayout>

效果圖如下：

Android 5.X 新特性詳解（一）——主題、Palette、陰影、着色和裁剪

在程式中，同樣可以使用如下代碼來動态改變視圖高度。

通常也會使用屬性動畫來為視圖高度改變的時候增加一個動畫效果，代碼如下所示：

if (mFlag) {
                    view.animate().translationZ();
                    mFlag = false;
                } else {
                    view.animate().translationZ();
                    mFlag = true;
                }

Tinting 和 Clipping

Android 5.X 在對圖像的操作上增加了更多的新功能，比如Tinting（着色）和Clipping（裁剪）。

Tinting（着色）

Tinting的使用非常簡單，隻要在XML中配置好tint和tintMode就可以了。在下面的代碼中，設定了幾種不同的tint和tintMode來示範Tinting效果，XML代碼如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:layout_margin="5dp"
        android:src="@mipmap/ic_launcher" />

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:layout_margin="5dp"
        android:src="@mipmap/ic_launcher"
        android:tint="@android:color/holo_blue_bright"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:layout_margin="5dp"
        android:src="@mipmap/ic_launcher"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="add"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:layout_margin="5dp"
        android:src="@mipmap/ic_launcher"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="multiply"/>

</LinearLayout>

效果圖如下：

Android 5.X 新特性詳解（一）——主題、Palette、陰影、着色和裁剪

Tint通過修改圖像的Alpha遮罩來修改圖像的顔色，進而達到重新着色的目的。

Clipping（裁剪）

Clipping可以改變一個視圖的外形，要使用Clipping，首先需要使用ViewOutlineProvider來修改outline，然後再通過setOutlineProvider将outline作用給視圖。

在下面的例子中，将一個正方形的TextView通過Clipping裁剪成一個圓角正方形和一個圓，XML代碼如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_rect"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="1dp"
        android:layout_margin="5dp" />

    <ImageView
        android:id="@+id/tv_cicle"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="1dp"
        android:layout_margin="5dp" />

</LinearLayout>

程式代碼如下：

public class ClippingActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_clipping);

        View view1 = findViewById(R.id.tv_rect);
        View view2 = findViewById(R.id.tv_cicle);

        //擷取Outline
        ViewOutlineProvider viewOutlineProvider1 = new ViewOutlineProvider() {

            @Override
            public void getOutline(View view, Outline outline) {
                //修改outline為特定的形狀
                outline.setRoundRect(, , view.getWidth(), view.getHeight(), );
            }
        };
        //擷取Outline
        ViewOutlineProvider viewOutlineProvider2 = new ViewOutlineProvider() {

            @Override
            public void getOutline(View view, Outline outline) {
                //修改outline為特定的形狀
                outline.setOval(, , view.getWidth(), view.getHeight());
            }
        };

        //重新設定形狀
        view1.setOutlineProvider(viewOutlineProvider1);
        view2.setOutlineProvider(viewOutlineProvider2);
    }

}

效果圖如下：

Android 5.X 新特性詳解（一）——主題、Palette、陰影、着色和裁剪

代碼位址

android群英傳 material clipping Tinting palette Elevation
上一篇: 詳解Python第三方庫（三）----- Pillow庫
下一篇: Python-pandas處理資料-删除重複資料摘要

繼續閱讀