Android入門教程 |res資源目錄簡介與shape的繪製和使用

res資源目錄簡介

簡單介紹Android工程中的資源目錄（resources），res。

Android裡的資源指的是什麼？

資源是指程式碼使用的附加檔案和靜態內容，例如點陣圖、佈局定義、介面字串、動畫說明等。

把資源放進對應的目錄後，可使用在專案 R 類中生成的資源 ID 來訪問這些資源。形如 R.drawable.icon，R.layout.main_activity。 R類是自動生成的。代表resources。

分組資源型別

將各類資源放入專案  res/ 目錄的特定子目錄中。 子目錄的名字特別重要。我們把不同的資源放到不同的子目錄中。

• animator/：用於定義屬性動畫的 XML 檔案。
• anim/：用於定義漸變動畫的 XML 檔案。（屬性動畫也可儲存在此目錄中，但為了區分這兩種型別，屬性動畫首選 animator/ 目錄。）
• color/：用於定義顏色狀態列表的 XML 檔案。
• drawable/：點陣圖檔案（.png、.9.png、.jpg、.gif）或編譯為以下可繪製物件資源子型別的 XML 檔案： 點陣圖檔案、九宮格（可調整大小的點陣圖）、狀態列表、形狀、動畫可繪製物件、其他可繪製物件。
• mipmap/：適用於不同啟動器圖示密度的可繪製物件檔案。應用圖示放這裡。
  mipmap後面跟著的dpi類別，比如hdpi mdpi，裡面的圖示尺寸大小是不同的。可以參考預設圖示的大小，來切App的圖示。如果要省事，可以用一個圖示複製進各個目錄中。
• layout/： 用於定義使用者介面佈局的 XML 檔案。放 layout 檔案。
• menu/： 用於定義應用選單（如選項選單、上下文選單或子選單）的 XML 檔案。
• raw/：需以原始形式儲存的任意檔案。如要使用原始 InputStream 開啟這些資源，請使用資源 ID（即 R.raw.filename）呼叫 Resources.openRawResource()。 但是，如需訪問原始檔名和檔案層次結構，則可以考慮將某些資源儲存在 assets/ 目錄（而非 res/raw/）下。assets/ 中的檔案沒有資源 ID，因此只能使用 AssetManager 讀取這些檔案。
• values/：包含字串、整型數和顏色等簡單值的 XML 檔案。其他 res/ 子目錄中的 XML 資原始檔會根據 XML 檔名定義單個資源，而 values/ 目錄中的檔案可描述多個資源。對於此目錄中的檔案，  <resources style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px;"> 元素的每個子元素均會定義一個資源。例如， <string style="box-sizing: inherit;"> 元素會建立 R.string 資源， <color style="box-sizing: inherit;"> 元素會建立 R.color 資源。由於每個資源均使用自己的 XML 元素進行定義，因此您可以隨意命名檔案，並在某個檔案中放入不同的資源型別。
  但是，您可能需要將獨特的資源型別放在不同的檔案中，使其一目瞭然。
  例如，對於可在此目錄中建立的資源，下面給出了相應的檔名約定：
  arrays.xml：資源陣列（型別陣列）。
  colors.xml：顏色值。
  dimens.xml：尺寸值。
  strings.xml：字串值。
  styles.xml：樣式。
• xml/：可在執行時透過呼叫  Resources.getXML() 讀取的任意 XML 檔案。各種 XML 配置檔案（如可搜尋配置）都必須儲存在此處。
• font/：帶有副檔名的字型檔案（如 .ttf、.otf 或 .ttc），或包含 元素的 XML 檔案。

注意：切勿將資原始檔直接儲存在 res/ 目錄內，因為這樣會造成編譯錯誤。

最開始階段，我們接觸比較多的是 layout目錄。如果要新增一些圖片，可以直接放進 drawable目錄。

修改應用圖示，應該放進 mipmap對應的目錄。例如 mipmap-hdpi裡的圖示是72x72畫素的, mipmap-mdpi是48x48畫素的。 圖省事的話，拿一個圖示，分別複製進mipmap的所有dpi目錄裡，一定要統一檔名，比如 ic_your_launcher.png。 然後在清單檔案 AndroidManifest.xml中，修改icon。

<application
        android:icon="@mipmap/ic_your_launcher"

後面如果我們要定義Button，TextView的一些樣式，比如設定顏色，背景。會接觸到 drawable目錄。

shape的繪製和使用

工程目錄中有一個 drawable資料夾，裡面存放的是一些靜態的圖片資原始檔。 比如點陣圖檔案（.png、.9.png、.jpg、.gif）；或一些可繪製物件資源子型別的 XML 檔案（本文稱為drawable檔案）。

當我們想給button或者TextView設定背景時，我們會想到純色背景。如果要求圓角背景，或是漸變色背景，我們該如何實現呢？ 一種辦法是製作相應的美術素材，也就是切圖。另一種辦法是使用xml格式的資原始檔。 本文要介紹的是 shape。使用這類資源，可以完成一些比較簡單的美術設計。

例子

接下來我們新建一個shape試試，要求帶有外圍邊框，有圓角，裡面用漸變色填充。 在 res/drawable/目錄中，右鍵新建一個Drawable Resource file檔案，起名 shape_rect_gradient_red.xml。 root element選擇 shape。

程式碼：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="
    android:shape="rectangle">
    <stroke
        android:width="2dp"
        android:color="#0E30B1" />
    <corners android:radius="6dp" />
    <gradient
        android:centerColor="#F55353"
        android:endColor="#F71515"
        android:startColor="#FD7575" /></shape>

as的右邊可以開啟預覽，看看效果。 其中

• android:shape="rectangle"表示的是選擇長方形的形狀。
• stroke標籤代表的是邊框。裡面設定邊框寬度是2dp，邊框顏色是#0E30B1。
• corners標籤代表的是圓角。如果不設定，則預設為直角。這裡我們設定圓角的半徑為6dp。
• gradient表示漸變色。分別可以設定起始，中間和結束的顏色值。

在layout中，給Button的background設定使用這個shape。xml的檔名就是它的資源名稱。

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_rect_gradient_red" />

再稍微完善一下這個Button。

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_rect_gradient_red"
        android:text="RFDev btn 1"
        android:textAllCaps="false"
        android:textColor="#ffffff" />

執行一下，可以看到效果。 

shape介紹

shape又稱為“形狀可繪製物件”。為了簡便，以下都稱作shape或者“shape檔案”。 shape是一種在 XML 檔案中定義的通用形狀。經過編譯後，可以得到GradientDrawable物件。

資源引用

• 在 Java 中：R.drawable.filename
• 在 XML 中：@[package:]drawable/filename

語法

上面那個栗子我們認識了幾個元素，gradient，corners和stroke。下面是語法的詳細介紹。

<?xml version="1.0" encoding="utf-8"?><shape
    xmlns:android="
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="float"
        android:centerY="float"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" /></shape>

圓角背景的例子

上文介紹了corners的用法。我們來看一個圓角背景的實現方法。 新建檔案 shape_btn_2_normal.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="
    android:shape="rectangle">
    <solid android:color="#6CB3DD" />
    <corners android:radius="25dp" /></shape>

在layout中給TextView使用這個背景。

<TextView
        android:id="@+id/tv1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/shape_btn_2_normal"
        android:gravity="center"
        android:text="RFDev 圓角背景TextView 1"
        android:textColor="#ffffff" />

TextView的高度設定成了50dp，而背景的圓角半徑設定成了25dp。 執行可以看到效果。

如果想要漸變色，再增加gradient的設定就好。

程式碼中使用資源

在java程式碼中使用資源，比如在activity中設定背景。

Resources res = getResources();
Drawable shape = ResourcesCompat.getDrawable(res, R.drawable.shape_btn_2_normal, getTheme());
TextView tv = (TextView)findViewById(R.id.tv1);
tv.setBackground(shape);

使用這種方式，我們可以自己實現一些簡單的按鈕效果。更復雜的顏色和效果，需要美術設計師的支援。

環形的例子

尺寸和長度自己設定。

環形  thumb_round_1.xml。

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="
    android:shape="oval">
    <solid android:color="#ffffff" />
    <stroke
        android:width="@dimen/audio_seek_bar_thumb_ring_width"
        android:color="#7095fc" />
    <size
        android:width="@dimen/audio_seek_bar_thumb_size"
        android:height="@dimen/audio_seek_bar_thumb_size" /></shape>

帶漸變的環形  thumb_round_progress_1.xml。

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android=">
    <item>
        <shape android:shape="oval">
            <size
                android:width="@dimen/audio_seek_bar_thumb_size"
                android:height="@dimen/audio_seek_bar_thumb_size" />
            <solid android:color="#ffffff" />
        </shape>
    </item>
    <item>
        <shape
            android:innerRadius="4dp"
            android:thicknessRatio="6"
            android:shape="ring"
            android:useLevel="false">
            <gradient
                android:endColor="#ffffff"
                android:startColor="#7095fc"
                android:type="sweep" />
            <size
                android:width="@dimen/audio_seek_bar_thumb_size"
                android:height="@dimen/audio_seek_bar_thumb_size" />
        </shape>
    </item></layer-list>