Android Material Design 之 圖形

格式塔原理介紹

Material Design 運用了格式塔原理，尤其是在圖形的設計上。

格式塔理論是心理學中為數不多的理性心理學之一。格式塔學派以某些相當抽象的，與知覺和思維的性質以及心理經驗的結構有關的觀念解釋了熟悉的觀察資料。
格式塔心理學派斷言：人們在觀察時，眼腦並不是在一開始就區分一個形象的各個單一的組成部分，而是將各個部分組成起來，使之成為一個更易於理解的整體。此外，他們堅持認為，在一個格式塔（即一個單一視場，或單一參照系）內，眼睛的能力只能接受少數幾個不相關聯的整體單位。這種能力的強弱取決於這些整體單位的不同與相似，以及它們之間的相關位置。如果一個格式塔中包含了太多的互不相關的單位，眼腦就會試圖簡化，把各個單位加以組合，使之成為易於處理的整體。如果辦不到這一點，整體形象將繼續呈現無序狀態或混亂，從而無法被正確認知，簡單的說就是看不懂或無法接受。格式塔理論明確提出：眼腦作用是一個不斷組織，簡化，統一的過程，正是通過這一過程，才產生出易於理解，協調的整體。

格式塔心理學主要有五個原則：
1. Proximity 接近
2. Similarity 相似
3. Closure 閉合
4. Continually 連續
5. Simplicity 簡單

Gestalt laws of grouping 又被稱為Principles of grouping

網格和關鍵線

關於元素組件之間的布局，可按照一定的原則來設計。
1. 使用8dp的網格來對齊組件，即圖像，圖標的大小，間距，外邊框，內邊框都是8dp的整數
2. 使用4dp的網格來對齊文字，即文本高度是4dp的整數。
3. 這些8dp和4dp的網格，允許我們很輕松的就運用上面介紹的分組定律即laws of grouping，使我們的UI有序，平衡，並且和操作協調的其他部分協調一致。
4. 關鍵線用來在用戶界面中垂直或水平對齊組件對象。從美學上來講，關鍵線使得UI井然有序，也能更快速的掃描屏幕並接受信息。常用的關鍵線，對於圖片和頭像等輔助的對象，經常使用從左到右16dp的外邊框；而對於標題和內容等主要內容，則使用從左到右72dp的外邊框。如果沒有輔助內容，那麼主要內容也應該從左到右16dp的外邊框。

色彩

Primary color 使用這個主色彩來展現應用的品牌定位或品牌個性。可以將這個色彩應用到一個大的區塊裡面，比如appbar或toolbar使得我們的應用一眼就被認出來。 Accent color 這個強調色，顏色更加飽和，更加鮮亮。可以使用這個顏色來講用戶的注意力引導到特定的元素上面，比如我們使用的FAB。 只使用兩種色彩顯然是不夠用的，material design提供了一些人工選出來的調色板，在調色板上對應著一些數字，這些數字對於我們來說只需要記住，500 代表的是primary color，比500更大的數字表示顏色更深，反之顏色更淺，而使用A開頭的數字代表accent color。

假設我們要使用一個靛藍色為主色，而粉紅色為強調色的風格，那麼我們應該如何進行配置呢
4.1. 添加顏色到資源文件中

    #7986CB
    #3551B5
    303F9F
    #FF4081
    

4.2. 應用到主題中

4.3 使用這些色彩

注意：這裡為什麼使用?colorPrimary而不直接使用那個顏色值比如：@color/indigo_500。
這裡？colorPrimary表示使用主題中的本地屬性的值，也可以將其改為？attr/colorPrimary
除了可以定制material design 主題的這三個色彩，我們還可以定制android:statusBarColor ,windowBackground ，navigationBarColor等，參考官方文檔

從圖像中提取色彩
我們可以根據一張圖片利用com.android.support.palette來提取一張圖片的重要的色彩。
首先：
build.gradle 文件添加依賴

    ...
    dependencies {
        ...
        compile 'com.android.support:palette-v7:23.4.0'
    }

其次:

    private void processPalette(){
        Bitmap bitmap = BitmapFactory.decodeResource(getResource(), R.drawable.xk);
        Palette p = Palette.form(bitmap).generate(new Palette.PaletteAsyncListner(){
            @override
            public void onGenerated(Palette p){

            }
        });
    }

生成material design palette 展示material design 設計

字體

西文字體： Roboto， 這是隨著Andorid 4.0引入的一種無襯線字體系列,詳見Github Roboto。 非拉丁字體，如中文： Android 官方預設的Noto系列的字體，詳見Google Noto。中文的話就是: Noto Sans CJK SC/TC，這個字體和Adobe fonts 中的思源黑體(Source Han Sans)是同一種字體。 sp 是英語（Scale-independent pixel)的縮寫，縮放獨立像素，主要用於字體大小的尺寸，Android 允許用戶自定義其字體的大小，在“設置”–“輔助功能”中，我們可以找到這項字體大小的設置，那麼這個設置會對字體的顯示進行改變，通常normal (100%)字體大小，我們app設置的16sp大小的字體就和16dp大小的字體一樣大，但若設置為大好字體，即125%後，16sp = 16dp * 125% = 20dp。 當然如果我們不想我們設置的字體大小會隨著這個設置進行改變，那麼我們可以直接將字體的大小設置為其他的單位，如dp，px甚至mm。 關於西文字體，在繪制的時候，需要注意字體的幾個概念，baseline, x-height, cap height, ascenders, descenders, leading。如下圖所示 詳細的西文字體解剖：

但中文中並沒有這些概念，自然在繪制的時候會出現一些問題，如Android Canvas drawText實現中文垂直居中

加載自定義字體

首先將字體放在assets文件夾中，如assets/NotoSans-Bold.ttf

在代碼中加載字體

@override
protected void onCreate(Bundle savedInstanceState){
    Typeface myTypeface = Typeface.createFromAssets(getAssets(), "NotoSans-Bold.ttf");
    TextView tv = (TextView)findViewById(R.id.text1);
    tv.setTypeface(myTypeface);
}

圖片

優質的圖像是使得用戶與主題構成聯系並與他們的喜怒哀樂產生共鳴，盡管只是通過感受，好的圖像還能讓我們回憶起熟悉的味道和聲音。選擇圖片時，應該選擇貼近用戶的圖像，是用戶觸景生情或者取悅用戶。
照片 photography
如果是針對內容，照片會是一個很好的選擇，如果顯示的是特定的人物，地點或者事物，照片能夠快速且漂亮的將其傳達給用戶。在使用照片時得確保使用高質量的照片以避免像素不足的情況， 也完全可以把照片當作背景用來設定希望屏幕所傳達出來的情感。 插圖 illustration
如果我們要傳達照片無法體現的抽象概念或比喻，插圖會是個很好的辦法。創建插圖時，務必做到清晰明確，避免過度修飾，只要想傳達的聚焦點和消息即可，並最好讓一系列插圖之間保持一致性，使它們能夠相互的聯系起來，例如，使用統一的視角，調色板或紋理。 圖標 icon
圖標的使用是為了便於尋找。它與插圖相反，插圖是為了簡明扼要的解釋清楚意思，圖標應方便識別，並在應用中起來解釋的作用。獲取更多的icon , 如何設計icon

 

圖片的縮放，ImageView.ScaleType: 三個Center,四個Fit,一個Matrix：
圖片的縮放本質上對ImageView的mDrawableMatrix進行設置，我們知道Matrix矩陣的值，用來定義縮放，平移，旋轉，錯切等。
matrix詳解 ScaleType 理解 CENTER 圖像並不會進行縮放，但會將drawable進行平移到imageView的中央 CENTER_CROP 圖像會進行等比例縮放，並且保證圖像的寬或高縮放後都大於或者等於ImageView的相應的寬或者高，即縮放後的圖像能夠遮蓋住imageview；然後再將縮放後的圖像進行平移居中，超出的部分將會被剪裁 CENTER_Inside 這個分兩種情形，當我們的圖像的寬和高都小於或者等於imageView時，圖像將會和Center一樣，即不進行縮放；但是當圖像的寬或高至少有一個大於imageview相應的寬或高時，會進行等比例縮放以保證寬或高都小於或等於imageview的寬或高的，此時與FitCenter效果一樣。 FIT_CENTER 和Matrix.ScaleToFit為CENTER一樣，對圖像進行等比例壓縮，並保證圖像的寬和高壓縮後都比imageview的寬或高小或等於。並將圖像居中，空白的地方分別上下左右 FIT_START 和Matrix.ScaleToFit為START一樣，對圖像進行等比例壓縮，並保證圖像的寬和高壓縮後都比imageView的寬或高小或等於。並將圖像左對齊或者上對齊 FIT_END 和Matrix.ScaleToFit為END一樣，對圖像進行等比例壓縮，並保證圖像的寬和高壓縮後都比imageView的寬或高小或等於。並將圖像右對齊或者下對齊 FIT_XY 和Matrix.ScaleToFit為FILL一樣，對圖像進行縮放，不用保持原來的比例，只須保證圖像的寬或高和imageview的寬和高一樣。 MATRIX 利用matrix來對drawable進行縮放，平移或者選擇等，這是上面所有類型的原理

 

圓形的圖片
通常我們會使用到圓形的圖片來作為用戶的頭像等，介紹material design 庫來生成圓形的圖片:

public void createRoundDrawable(Bitmap bitmap){
    RoundedBitmapDrawerable drawable = RoundedBitmapDrawerableFactory.create(context.getResources(),bitmap);
    drawable.setCircular(true);
}

 

寬高固定比的ImageView,例如寬:高 = 3： 2

創建一個類繼承ImageView

 class ThreeTowImageView extends ImageView {
        public void ThreeTowImageView(Context context){
            super(context);
        }

        pulic void ThreeTowImageView(Context context, Attributes attrs){
        super(context, attrs);
    }
        public ThreeTowImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

public ThreeTowImageView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    public void onMeasure(int widthSpec, int heightSpec){
        int threeTowHeight = MeasureSpec.getSize(widthSpec) * 2 / 3;
        int threeTowHeighSpec = MeasureSpec.makeMeasureSpec(threeTowHeight, MeasureSpec.EXACTLY);
        super.onMeasure(widthSpec, threeTowHeightSpec);
    }
}

在xml中使用

 

背景保護
當圖片作為背景的時候，圖片上的文字或者圖標有可能會因為色彩相近而讓用戶很難辨別清楚，這是時候最好在xml中處理一下，即在圖片上添加一層漸變色。

創建漸變

使用到xml布局中

<framelayout ...="">
    
    
    
</framelayout>