Android學習之合理利用標籤美化UI

簡介

表示的是一種圖像的概念，但是又不全是圖片，更可以通過顏色也可以構造出各種各樣的圖片效果。
一般通過XML來定義，在Android設計中，Drawable是一個抽象的類，具體如下圖：
Drawable的內部寬/高這兩個參數比較重要，可以通過getIntrinsicWidth 和 getIntrinsicHeight兩種方式
獲取，但是並不是所有的Drawable都有內部寬/高，比如，一張圖片的Drawable，就有，但是顏色所形成的就沒有
它其實沒有寬高概念，當用作View的背景時，Drawable會被拉伸到View的同等大小。

這裏主要是介紹了：
ClipDrawable
InsetDrawable
LayerDrawable
LevelListDrawable
ShapeDrawable
TransitionDrawable
RotateDrawable
ScaleDrawable

ClipDrawable介紹

簡介
ClipDrawable對應於< clip >標籤，它可以根據自己當前的等級(level)來裁剪另一個Drawable。
效果描述
可以用clip標籤對一張圖片進行修飾，然後可以設定某一level值可以截取原圖上相應的部分進行展示。比如設置level爲1000，那麼只能展示圖片的十分之一，如果爲9000則能展示圖片的十分之九。這裏的level可以理解爲範圍，展示原來圖片多大範圍內的內容。
代碼一

先在drawable資源目錄下面建立clip標籤爲根標籤的文件，裏面代碼內容如下：
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="vertical"
    android:drawable="@drawable/ss"
    android:gravity="center"
    />
    /**上述代碼中：clipOrientation表示裁剪方向，可以選擇水平或者豎直方向
     drawable表示針對哪一張圖片進行操作
     gravity表示裁剪是從哪裏入手，初始時候操作哪裏，比如center表示開始根據level從中間裁剪
     需要注意一點，如果你是豎直方向，但是你gravity設置的left,這樣兩個方向是衝突的，
     就會實現不了*/

代碼二

就是在佈局文件中使用，如下：
 <ImageView
        android:id="@+id/imageView_myclip"
        android:src="@drawable/myclip"
        android:layout_centerInParent="true"
        android:layout_width="200dp"
        android:layout_height="200dp" />

代碼三

只是上述部分還不能完成展示，還需要手動的設置level值，一張圖片一般會被分成1000層，
0表示一點也不顯示：
 int lev = clipImageView.getDrawable().getLevel();
 //上述方法可以得到當前圖片的level值
 clipImageView.getDrawable().setLevel(minlevel);
  //上述代碼可以設置當前圖片的level值

代碼四

常常利用clip標籤修飾來完成一個動態加載出本張圖片的效果(從無到有),如：
clipImageView = (ImageView) findViewById(R.id.imageView_myclip);
clipImageView.post(cliping);
//上述只是粘貼的主要代碼
private Runnable cliping = new Runnable() {
        @Override
        public void run() {
            if (minlevel<10000){
                minlevel += 200;
                clipImageView.getDrawable().setLevel(minlevel);
                clipImageView.postDelayed(cliping,200);
            }
        }
    };
    /**clipImageView.post()表示使用view裏面自帶的handler這是運行在主線程中的。
       clipImageView.postDelayed()表示在200ms之後在重新設置圖片的level
       這樣就實現了一張圖片動態加載出來的過程，類似與網頁上圖片加載類似，一點點出來。
    */

InsetDrawable

介紹
它一般是在要求圖片比背景要小的時候用，類似與padding屬性，但是又有所不同。
padding 指的是View裏面內容區域和View的邊界的距離，如果padding的值足夠大，
那麼內容區域就會變的不可見，但是inset不同，它是相當於將一個drawable嵌入進另
一個View中(按照其指定的距離來決定),
代碼一

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetBottom="30dp"
    android:insetLeft="40dp"
    android:insetRight="10dp"
    android:insetTop="50dp"
    android:drawable="@drawable/ss"
    >
    /**使用較爲簡單，還可以直接設定android:inset屬性，但是這個效果只有5.0纔有效果     
    還可以設定android:visibl設置是否可見*/

代碼二

 <ImageView
        android:background="#ea8585"
        android:id="@+id/imageView_myclip"
        android:src="@drawable/myinsert"
        android:layout_centerInParent="true"
        android:layout_width="300dp"
        android:layout_height="300dp" />

效果圖

LayerDrawable

介紹
可以完成將多張圖片進行疊加，其實使用layer_list標籤可以看成是生成了一個空間(容器)，然後你可以往這個容器中添加圖片，進行展示。
代碼一

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <bitmap android:src="@drawable/ss"
            android:gravity="center" />
    </item>
    <item android:top="100dp" android:left="100dp">
        <bitmap android:src="@drawable/ss"
            android:gravity="center" />
    </item>
    <item android:top="200dp" android:left="200dp">
        <bitmap android:src="@drawable/ss"
            android:gravity="center" />
    </item>
</layer-list>
/**android:top之類的屬性可以認爲是相距layer_list邊界的距離*/

代碼二

<ImageView
        android:src="@drawable/mylayerlist"
        android:id="@+id/imageView_myclip"
        android:layout_centerInParent="true"
        android:layout_width="200dp"
        android:layout_height="200dp"
        />

代碼三

這樣操作之後就可以顯示了，如下：

LevelListDrawable

介紹
可以管理一組可以進行切換的圖片，給每一張圖片設置上level值，然後代碼可以控制level水平，那麼系統就會自動匹配相應的圖片。如果要是沒有響應水平對應的圖片的話，就會顯示空白。另外需要注意的是，item的放置前後順序需要注意，系統會自上往下匹配，如果查找到item符合當前的狀態，就不會向下去查找其他item，需要注意的是，圖片切換時候沒有過渡過程。
代碼一

<level-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/ic_launcher"
        android:maxLevel="10"
        android:minLevel="0"/>

    <item android:drawable="@drawable/ss"
        android:maxLevel="60"
        android:minLevel="40"
        />

</level-list>

代碼二

<ImageView
        android:id="@+id/imageView_myclip"
        android:src="@drawable/mylevel_list"
        android:layout_centerInParent="true"
        android:layout_width="300dp"
        android:layout_height="300dp" />

代碼三

依舊需要代碼中動態設置level水平值。
如果你是用作的背景，那麼：
imageViwe.getBackgroud().setlevel();
如果你是用的圖片，那麼：
imageView.setImageLevel();
//需要注意的一點是，如果在相對應的level水平中沒有相對應的圖，那麼就會顯示空白的

ShapeDrawable**

更像是畫出自己需要的樣式出來，在使用的時候，可以當做是drawable類型的圖片去使用就可以。使用起來比較靈活，一些控件完全不需要自定義，直接畫出來就好了。
屬性介紹

在shape的根標籤中：
android:shape=" "可以選擇： 
  rectangle 矩形 
  oval 橢圓
  line 水平直線
  ring 環形
  /**先確定想要繪製的是什麼樣式的drawable*/

<gradient> 漸變子標籤 ，可以實現顏色的漸變，裏面的屬性有：
  android:startColor  起始顏色
  android:centerColor 中間顏色
  android:endColor  結束顏色
  android:angle  漸變角度，0從左到右，90表示從下到上，數值爲 45的整數倍數，默認爲0
  android:type  漸變的樣式 liner線性漸變  radial環形漸變  sweep 掃視漸變
  /***這是可選子標籤之一，可以確定漸變的顏色，其中，angle表示角度，可以理解爲決定了矢量，漸變的主要方向。/

<solid>  填充顏色子標籤，填充的是背景顏色,是shape的背景顏色。
    android:color  填充的顏色

<stroke> 描邊子標籤,針對於邊界線進行介紹。
    ndroid:width 邊界線的寬度
    android:color 邊界線的顏色
    android:dashWidth 表示'-' 破折號的寬度。代表的是虛線
    android:dashGap 表示'-' 破折號之間的距離
    /**Android 4.0之後要想出現虛線效果，需要在這裏面單獨配置layerType屬性纔可以*/

<corners> 圓角子標籤,可以使當前的shape有圓角效果。
    android:radius  圓角的半徑 值越大角越圓
    android:topRightRadius  右上圓角半徑
    android:bottomLeftRadius 右下圓角角半徑
    android:topLeftRadius 左上圓角半徑
    android:bottomRightRadius 左下圓角半徑
    /**針對與四個角的一些設置*/

size標籤
<size
        android:width="20dp"
        android:height="20dp" />
        其實就這兩個屬性，表示的是shape的大小，但並不是沒有意義的，比如你選擇的是橢圓，然後這裏在設置尺寸的時候，設置成一樣的，那麼就會變成圓了。

TransitionDrawable

介紹
只能管理兩層drawable，另外提供了兩層drawable之間切換的方法，切換時還會有淡入淡出的動畫效果。
代碼一

<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_launcher" />
    <item
        android:drawable="@drawable/ss"
        android:top="100dp"
        >
    </item>
</transition>
/**上述代碼所示，可以實現從ic_launcher到ss圖片的變化，但是，這裏不同的是多了一種過渡的效果。
不在是單純的直接就變化了，有一層朦朧感覺其中android:top="100dp"正常邏輯是轉換完成後原來的看不見了，但是加上top之後，在轉換完成後以前的圖片依舊可以看見100dp的部分。*/

代碼二

<ImageView
        android:src="@drawable/mytransition"
        android:id="@+id/imageView_myclip"
        android:layout_centerInParent="true"
        android:layout_width="300dp"
        android:layout_height="300dp"
        />

代碼三

 private TransitionDrawable ts;
 clipImageView = (ImageView) findViewById(R.id.imageView_myclip);
 ts = (TransitionDrawable) clipImageView.getDrawable();
 //這兩個是控制變化效果的關鍵代碼
 ts.startTransition(1000);//表示，由一到了二，在變化時候，會出現過渡效果，但依舊是二圖片
 ts.reverseTransition(2000);//表示，由一變到二，在變化時候，是從二變到一

RotateDrawable

介紹
首先這不是動畫，直觀的效果就是可以讓圖片旋轉某個角度，一般圖片都是平放置的，而這個標籤，可以使得圖片進行旋轉一定角度放置。
代碼一

需要在res/drawable文件夾下面建立以rotate爲根標籤的XML文件：
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ss"
    android:fromDegrees="180"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360"
    >
</rotate>
/**fromDegrees:表示從哪個角度(位置)開始，toDegrees:表示到那個角度(位置)結束
 pivotX：表示X軸的重心，pivotY:表示y軸的重心*/

代碼二

在佈局文件XML中使用：
    <ImageView
        android:src="@drawable/myrotate"
        android:id="@+id/imageView_myclip"
        android:layout_centerInParent="true"
        android:layout_width="30dp"
        android:layout_height="30dp"
        />

代碼三

還有一個重要的屬性，就是level，rotate標籤將整個fromDegress 到 toDegress過程
分爲了10000份，所以還需要手動設置level水平，系統可以根據你的水平，從過程中扣出相
匹配的圖來
clipImageView.getDrawable().setLevel(minlevel);
//上述代碼就是動態設置水平的關鍵代碼。

代碼四

完全可以模仿成動畫的效果，那種旋轉效果：
  clipImageView = (ImageView) findViewById(R.id.imageView_myclip);
  clipImageView.post(cliping);
  //上述代碼一般是在onCreate()方法裏面完成。
  private Runnable cliping = new Runnable() {
        @Override
        public void run() {
            if (minlevel<10000){
                minlevel += 200;
                clipImageView.getDrawable().setLevel(minlevel);
            }
        }
    };

ScaleDrawable

介紹
字面解釋就是縮放，就是將一張圖片進行縮小/放大。
代碼一

在res/drawable文件夾下面：
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_launcher"
    android:scaleGravity="center"
    android:scaleHeight="50%"
    android:scaleWidth="50%"
    >
</scale>
/**這裏以scale爲根標籤scaleGravity:表示縮放重心，scaleHeight:表示縮放高度，
   scaleWidth:表示縮放寬度*/

代碼二

 <ImageView
        android:src="@drawable/myscale"
        android:id="@+id/imageView_myclip"
        android:layout_centerInParent="true"
        android:layout_width="100dp"
        android:layout_height="100dp"
        />

代碼三

 clipImageView.getDrawable().setLevel(minlevel);
 //此行代碼是關鍵代碼，和rotate一樣，必須指定level水平，從完成上述過程中提取某一個部分出來，纔會有效果圖展示。

*代碼四

可以模仿動畫中的那種效果，關鍵代碼如下：
clipImageView = (ImageView) findViewById(R.id.imageView_myclip);
clipImageView.post(cliping);
//上述一般是在onCreate()方法裏面去完成。
private Runnable cliping = new Runnable() {
        @Override
        public void run() {
            if (minlevel<10000){
                minlevel += 500;
                clipImageView.getDrawable().setLevel(minlevel);
                clipImageView.postDelayed(cliping,200);
            }
        }
    };

總結

通過上面的整理，發現可以通過標籤就可以完成許多效果圖，比如：
clip標籤、rotate標籤、scale標籤、level_list標籤分別描述了剪切、旋轉、縮放、都是描述了一個過程，然後代碼中通過level水平來顯示某一時刻對應的圖，而且也能讓其完整的展示出過程出來(前面參考代碼四)
shape標籤、transition標籤、layer_list標籤、inset標籤等等測試在圖片上進行了修飾，上面只是單純的介紹了每個標籤怎麼使用，一般項目中都是多個標籤相互嵌套去使用。

Android學習之合理利用標籤美化UI

簡介

ClipDrawable介紹

InsetDrawable

LayerDrawable

LevelListDrawable

ShapeDrawable**

TransitionDrawable

RotateDrawable

ScaleDrawable

總結

[轉帖]使用NMT和pmap解決JVM資源泄漏問題原創

Python實現大麥網搶票的四大關鍵技術點解析

Python 安裝庫指令大全

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

一款開源的.NET程序集反編譯、編輯和調試神器

關於接口協議，你必須要知道這些！

基於 Milvus + LlamaIndex 實現高級 RAG

【2024-05-21】以茶會友

Android自帶Switch系列彙總學習

利用View自身的方法實現倒計時功能

Android學習之合理利用標籤美化UI

FileProvider使用以及遇到的坑記錄

運行時權限

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結