唱片機(jī)

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

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

RotateDrawable

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

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

之所以說RotateDrawable和ClipDrawable相似，是因?yàn)樗鼈儍蓚€(gè)都可以通過調(diào)用方法setLevel(int level)來控制drawable的狀態(tài)，ClipDrawable可以通過調(diào)用方法setLevel(int level)來控制截取區(qū)間的大小。同樣，RotateDrawable可以通過調(diào)用方法setLevel(int level)來控制旋轉(zhuǎn)角度的大小，取值同樣是在0~10000之間，可以理解為把起始角度和終點(diǎn)角度之間的角度均等分為10000份，當(dāng)level等于0的時(shí)候處于起始位置，當(dāng)level等于10000的時(shí)候處于終點(diǎn)位置，至于中間部分由level的取值大小來決定。

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

唱片機(jī)

操縱桿

唱片

注意、注意、一定要注意，重要的事情說三遍：在選擇或者制作素材的時(shí)候一定要注意一點(diǎn)，因?yàn)镽otateDrawable是用于drawable的旋轉(zhuǎn)操作，所以關(guān)于drawable的中心點(diǎn)位置必須嚴(yán)格要求，否則制作出來的drawable在旋轉(zhuǎn)的時(shí)候會(huì)十分別扭。

唱片PS圖

操縱桿PS圖

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

那好，既然素材已經(jīng)準(zhǔn)備完成，而且它們的中心點(diǎn)也都確認(rèn)完畢。緊接著，我們就在XML中定義這兩個(gè)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>

最后，只要將這兩個(gè)drawable引用到兩個(gè)相互疊加的ImageView上，并結(jié)合線程和屬性動(dòng)畫適當(dāng)?shù)恼{(diào)用ImageView.getDrawable().setLevel(int level)方法就能實(shí)現(xiàn)完美的效果啦 ?。。?/p>

<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>

實(shí)現(xiàn)效果圖

附上一張效果圖，需要源碼的小伙伴也可以點(diǎn)擊這里下載哦?。。?/p>

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