Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android5.0的Palette(調色板)、視圖陰影、著色和裁剪介紹

Android5.0的Palette(調色板)、視圖陰影、著色和裁剪介紹

編輯:關於Android編程

隨著Android5.0的發布,google帶來了Material Design,俗稱:材料設計。並帶來了一些新的東西,這裡就一一介紹這些新的設計元素。   1、Palette(調色板)   在5.0以後的android版本中可以使用調色板來提取顏色,讓app的主題顏色動態的適應當前頁面的色調,使得你的app整體看起來主題基調和諧統一;下面是官網的介紹和使用說明,先截個圖,後面簡單翻譯下: \ 翻譯: palette這是一個可以從image中提取顏色的類,它可以從image中提取及幾種不同的色調,如下: Vibrant : 充滿活力的, Vibrantdark :充滿活力的黑 Vibrant light :充滿活力的亮 Muted :柔和的 Muted dark : 柔和的黑 Muted light : 柔和的亮 使用Palette可以在Android studio中的gradle添加以下依賴:
compile 'com.android.support:palette-v7:23.4.0'
從示例代碼中,我們可以看到:通過傳遞一個bitmap對象給Palette,並調用他的Palette.generate()靜態方法或者在靜態方法中添加異步接口的方法來創建一個Palette,接下來就可以使用Palette的getter方法來檢索相應的色調,就是是昂面那6中色調;下面顯示一段代碼,將通過背景圖片的柔和色調來改變ActionBar和狀態來的色調,使之能夠統一,然而並不是所有6種顏色方案都可用,每種顏色方案都返回為Palette.Swatch,如果圖片示例包含的顏色不足以產生兼容的方案,則對應的顏色方案可能為null。為了展示這個功能,我們將創建一個圖片圖塊的背景和標題將通過Palette主題話。效果如下:   \   是不是給人很不一樣的感覺了,接下來就介紹代碼,如下:       item_list.xml 如下:



    

    
適配器中的調色板顏色 ColorfulAdapter.class  
package com.world.hello.colorfullistactivity;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.os.AsyncTask;
import android.support.v7.graphics.Palette;
import android.util.SparseArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by chengguo on 2016/6/12.
 */
public class ColorfulAdapter extends ArrayAdapter {

    private static final int[] IMAGES = {
            R.drawable.bricks, R.drawable.flower,
            R.drawable.grass, R.drawable.stones,
            R.drawable.wood, R.drawable.dog
    };

    private static final String[] NAMES = {
            "Bricks", "Flower",
            "Grass", "Stones",
            "Wood", "Dog"
    };

    private SparseArray mImages;
    private SparseArray mBackgroundClolors;

    public ColorfulAdapter(Context context) {
        super(context, R.layout.item_list, NAMES);
        mImages = new SparseArray(IMAGES.length);
        mBackgroundClolors = new SparseArray(IMAGES.length);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = LayoutInflater.from(getContext()).inflate(R.layout.item_list, parent, false);
        }
        View root = convertView.findViewById(R.id.root);
        ImageView imageView = (ImageView) convertView.findViewById(R.id.image);
        TextView textView = (TextView) convertView.findViewById(R.id.text);

        int imageId = IMAGES[position];
        if (mImages.get(imageId) == null) {
            new ImageTask().execute(imageId);
            textView.setTextColor(Color.BLACK);
        } else {
            imageView.setImageBitmap(mImages.get(imageId));

            Palette.Swatch colors = mBackgroundClolors.get(imageId);
            if (colors != null) {
                root.setBackgroundColor(colors.getRgb());
                textView.setTextColor(colors.getTitleTextColor());
            }
        }
        textView.setText(NAMES[position]);
        return convertView;
    }

    private class ImageResult {
        public int imageId;
        public Bitmap image;
        public Palette.Swatch colors;

        public ImageResult(int imageId, Bitmap image, Palette.Swatch colors) {
            this.imageId = imageId;
            this.image = image;
            this.colors = colors;
        }
    }

    /**
     * 因為從磁盤加載圖片和使用Palette分析這些圖片的過程會花費一些時間,所以我們要在後台執行此工作,
     * 以免阻塞主線程太長時間,因此放在AsyncTask中執行
     */
    private class ImageTask extends AsyncTask {

        @Override
        protected ImageResult doInBackground(Integer... params) {

            int imageId = params[0];
            //確保圖片縮率圖不會太大
            BitmapFactory.Options options = new BitmapFactory.Options();
            options.inSampleSize = 4;
            Bitmap image = BitmapFactory.decodeResource(getContext().getResources(), imageId, options);
            Palette colors = Palette.generate(image);
            Palette.Swatch selected = colors.getVibrantSwatch();
            if (selected == null) {
                selected = colors.getMutedSwatch();
            }
            
            return new ImageResult(imageId, image, selected);
        }

        @Override
        protected void onPostExecute(ImageResult imageResult) {
            updateImageItem(imageResult);
            notifyDataSetChanged();
        }
    }

    /**
     * 更新一項的顏色
     *
     * @param imageResult
     */
    private void updateImageItem(ImageResult imageResult) {
        mImages.put(imageResult.imageId, imageResult.image);
        mBackgroundClolors.put(imageResult.imageId, imageResult.colors);
    }
}

activity.class
package com.world.hello.colorfullistactivity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.GridView;

public class MainActivity extends AppCompatActivity {

    private GridView mGridView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mGridView = new GridView(this);
        mGridView.setNumColumns(2);
        mGridView.setAdapter(new ColorfulAdapter(this));

        setContentView(mGridView);
    }
}

      2、視圖和陰影   在Material Design中很重要的風格就是擬物扁平化,使用陰影和光線,在配合完美的動畫,展示出現實生活中的效果,看起來就感覺非常的美麗 以前的UI設計都只有X、Y軸這個兩個方向,現在多出來一個垂直於手機屏幕的Z軸,那麼設置Z軸的高度,然後配合光線,然後就在UI的下方看到陰影,這樣就實現了擬物效果。 View的Z軸由兩部分組成,elevation和translationZ,這兩個屬性都是5.0以後才引入的。elevation是靜態的成員,translationZ可以在代碼中使用來實現動畫效果,他們的關系是:   Z = elevation + translationZ   elevation是在XML布局文件中使用,如果android版本小於5.0設置的elevation是不生效的,只有大於5.0的android系統設置elevation才行;下面是xm示例



    

    

    


  效果圖如下:   \   然而,在java代碼中要使用setTranslationZ()來動態改變視圖的高度 通常是使用屬性動畫來為視圖高改變的時候增加一個動畫效果,例如:


 

    if (flag){
            view.animate.translationZ(100);
            flag = false;
        }else {
            view.animate.translationZ(0);
            flag = true;
        }
  3、著色和裁剪   在andorid5.0中還增加了兩個非常實用的功能:Tinting(著色)和Clipping(裁剪) 3.1 使用Tinting非常簡單,只需要在XML文件中使用tint和tintMode就行了,有幾種配合效果,t它的實質是通過修改圖像的Alpha遮罩層來修改圖像的顏色,從而達到重新著色的目的。對圖像處理使用起來非常方便如下:  



    


    


    


    


    

    

    

    

  \ 3.2 Clipping裁剪,它可以改變一個視圖的外觀,首先,要使用ViewOutlineProvider來修改outline,然後再通過setOutlineProvider將outline作用給視圖;下面使用IamgeView通過Clipping裁剪成圓角正方形和一個圓形;示例如下:



    

    


package com.example.chengguo.paletteexample;

import android.graphics.Outline;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewOutlineProvider;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    private ImageView mRectView;
    private ImageView mCircleView;

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

        mRectView = (ImageView) findViewById(R.id.image_rect);
        mCircleView = (ImageView) findViewById(R.id.image_circle);
        //獲取outline
        ViewOutlineProvider outLine1 = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //修改outline為特定形狀
                outline.setRoundRect(0,0,view.getWidth(),view.getHeight(),10);
            }
        };

        //獲取outline
        ViewOutlineProvider outline2 = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                outline.setOval(0,0,view.getWidth(),view.getHeight());
            }
        };
        //重新為兩個imageView設置外形
        mRectView.setOutlineProvider(outLine1);
        mCircleView.setOutlineProvider(outline2);
    }
}
\        
  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved