唱片機

有一段時間沒有更新文章了，記得上一篇文章講的是《用ClipDrawable實現音頻錄制麥克風講話效果》，用戶反響也都還不錯，自己也是深受鼓舞。其實從那之后就一直想寫一篇關于RotateDrawable的文章，原因很簡單，RotateDrawable其實和上一篇文章中的ClipDrawable很相似。正愁著不知道以什么樣的方式向大家介紹，也正是這個原因吧，一直沒有發表新的文章。趕巧了，在用朋友手機的時候發現了一款名叫‘網易云音樂’的APP，在主播放頁面有一個唱片機的功能感覺不錯誒，于是乎，把玩了一番，心想著，何不用RotateDrawable實現這樣一個功能呢？ 說干就干！！！

老規矩，使用之前我們還是先要來了解一下今天的主角RotateDrawable

RotateDrawable

其實從名字中就不難理解，RotateDrawable一定是一個和旋轉有關的Drawable，的確，RotateDrawable可以控制drawable的旋轉，在XML文件中定義RotateDrawable對象使用的根元素是<rotate… />元素，該元素包含以下幾個重要的屬性：

• android:drawable：指定將要進行旋轉操作的Drawable對象。
• android:visible：視圖是否可見，注意默認是false，也就是不可見。
• android:pivotX：pivotX表示旋轉軸心在x軸橫坐標上的位置，用百分比表示，表示在當前drawable總寬度百分之幾的位置。
• android:pivotY：同理，pivotY表示旋轉軸心在y軸橫坐標上的位置，用百分比表示，表示在當前drawable總高度百分之幾的位置。
• android:fromDegrees：fromDegrees表示起始角度，值大于0，則表示順時針旋轉，值小于0，則表示逆時針旋轉。
• android:toDegrees：fromDegrees表示終點角度，同理，值大于0，則表示順時針旋轉，值小于0，則表示逆時針旋轉。

之所以說RotateDrawable和ClipDrawable相似，是因為它們兩個都可以通過調用方法setLevel(int level)來控制drawable的狀態，ClipDrawable可以通過調用方法setLevel(int level)來控制截取區間的大小。同樣，RotateDrawable可以通過調用方法setLevel(int level)來控制旋轉角度的大小，取值同樣是在0~10000之間，可以理解為把起始角度和終點角度之間的角度均等分為10000份，當level等于0的時候處于起始位置，當level等于10000的時候處于終點位置，至于中間部分由level的取值大小來決定。

了解了RotateDrawable的使用原理，那我們就進入正題，如何使用RotateDrawable實現唱片機的效果，首先呢，當然是要準備素材！ 素材大家可以到Iconfont下載，有能力的也可以自己PS，其實我們的今天要用到的幾張素材很簡單，會簡單的PhotoShop操作基本就都能夠做出來：

唱片機

操縱桿

唱片

注意、注意、一定要注意，重要的事情說三遍：在選擇或者制作素材的時候一定要注意一點，因為RotateDrawable是用于drawable的旋轉操作，所以關于drawable的中心點位置必須嚴格要求，否則制作出來的drawable在旋轉的時候會十分別扭。

唱片PS圖

操縱桿PS圖

如上面兩張截圖顯示的一樣，我制作素材的圖片的大小是240x240，唱片的中心點坐標是120x120，也就是pivotX = 50%、pivotY = 50% 。操縱桿的中心點坐標是192x24， 那么pivotX = 80%、pivotY = 10%。

那好，既然素材已經準備完成，而且它們的中心點也都確認完畢。緊接著，我們就在XML中定義這兩個RotateDrawable：

唱片rotate_cd.xml：

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%"
    android:pivotY="50%"
    android:visible="true"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:drawable="@mipmap/cd" >
</rotate>

操縱桿rotate_hander.xml：

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotY="10%"
    android:pivotX="80%"
    android:toDegrees="0"
    android:visible="true"
    android:fromDegrees="-30"
    android:drawable="@mipmap/box_handbar" >
</rotate>

最后，只要將這兩個drawable引用到兩個相互疊加的ImageView上，并結合線程和屬性動畫適當的調用ImageView.getDrawable().setLevel(int level)方法就能實現完美的效果啦 ！！！

<RelativeLayout    
    android:layout_width="140dp"    
    android:layout_height="140dp"    
    android:background="@mipmap/box_background" >

    <ImageView        
        android:src="@drawable/rotate_cd"        
        android:id="@android:id/progress"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/box_background" />  

    <ImageView        
        android:id="@android:id/background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"        
        android:src="@drawable/rotate_hander" />
</RelativeLayout>

實現效果圖

附上一張效果圖，需要源碼的小伙伴也可以點擊這里下載哦！！！

如果文中有表述不當或闡述錯誤的地方，還望正在看文章的您可以幫忙指出，有疑惑呢，也可以在評論中提問或者私信，期待您的意見和建議，歡迎關注交流。