Android 自定義View之3D骰子旋轉(zhuǎn)

你可以指定立方體中每一面骰子的點數(shù),顏色和背景,同時也可以指定執(zhí)行的動畫時間和動畫插值器

更多有趣的view

screenshot1.gif
screenshot2.gif
screenshot3.gif

使用

在根目錄的build.gradle添加這一句代碼:

allprojects {
    repositories {
        //...
        maven { url 'https://jitpack.io' }
    }
}

在app目錄下的build.gradle添加依賴使用:

dependencies {
    implementation 'com.github.samlss:DiceLoadingView:1.0'
}


在開始介紹DiceLoadingView之前,先看一下骰子即DeiceView的組成

DiceView

在DiceLoadingView中應(yīng)用的骰子view

以下為效果圖:

screenshot4.png

使用

布局中:

<com.iigo.library.DiceView
            android:layout_marginTop="10dp"
            app:number="one"
            app:bgColor="@android:color/white"
            app:borderColor="@color/colorPrimary"
            app:pointColor="@color/colorPrimary"
            android:layout_width="50dp"
            android:layout_height="50dp" />

代碼:

diceView.setNumber(2); //設(shè)置骰子點數(shù),必須為1-6
diceView.setPointColor(Color.RED); //設(shè)置點的顏色
diceView.setBgColor(Color.RED); //設(shè)置背景顏色
diceView.setBorderColor(Color.RED); //設(shè)置邊界顏色

屬性說明:

開始描述效果圖之前,先看一張說明圖:

description2.png
attr description
number 骰子點數(shù) one(1), two(2), three(3), four(4), five(5), six(6)
pointColor 點的顏色
bgColor 背景顏色
borderColor 邊界顏色

DiceLoadingView

使用

布局中使用:

 <com.iigo.library.DiceLoadingView
                    android:id="@+id/dlv_loading1"
                    app:animDuration="2000"
                    app:animInterpolator="AccelerateDecelerateInterpolator"
                    app:firstSideDiceNumber="1"
                    app:firstSideDicePointColor="@color/colorPrimary"
                    app:firstSideDiceBgColor="@android:color/white"
                    app:firstSideDiceBorderColor="@color/colorPrimary"
                    app:secondSideDiceNumber="2"
                    app:secondSideDicePointColor="@android:color/holo_orange_dark"
                    app:secondSideDiceBgColor="@android:color/white"
                    app:secondSideDiceBorderColor="@android:color/holo_orange_dark"
                    app:thirdSideDiceNumber="3"
                    app:thirdSideDicePointColor="@android:color/holo_red_dark"
                    app:thirdSideDiceBgColor="@android:color/white"
                    app:thirdSideDiceBorderColor="@android:color/holo_red_dark"
                    app:fourthSideDiceNumber="4"
                    app:fourthSideDiceBgColor="@android:color/white"
                    app:fourthSideDiceBorderColor="@android:color/holo_green_dark"
                    app:fourthSideDicePointColor="@android:color/holo_green_dark"
                    android:layout_width="50dp"
                    android:layout_height="50dp" />


代碼中使用:

diceLoadingView.start(); //開始動畫
diceLoadingView.stop(); //停止動畫
diceLoadingView.pause(); //暫停動畫
diceLoadingView.resume(); //恢復(fù)動畫
diceLoadingView.release(); //不需要使用該loading view的時候可手動釋放,例如在activity的ondestroy()中

diceLoadingView.setDuration(3000); //設(shè)置動畫時間
diceLoadingView.setInterpolator(new AnticipateOvershootInterpolator()); //設(shè)置動畫插值器
diceLoadingView.setFirstSideDiceNumber(2); //設(shè)置第一面骰子點數(shù)(1-6)
diceLoadingView.setFirstSidePointColor(Color.parseColor("#FF7D81")); //設(shè)置第一面骰子點的顏色
diceLoadingView.setFirstSideDiceBgColor(Color.WHITE); //設(shè)置第一面骰子背景顏色
diceLoadingView.setFirstSideDiceBorderColor(Color.GRAY); //設(shè)置第一面骰子邊界顏色

diceLoadingView.setSecondSideDiceNumber(3); //設(shè)置第二面骰子點數(shù)(1-6)
diceLoadingView.setSecondSidePointColor(Color.BLUE); //設(shè)置第二面骰子點的顏色
diceLoadingView.setSecondSideDiceBgColor(Color.WHITE); //設(shè)置第二面骰子背景顏色
diceLoadingView.setSecondSideDiceBorderColor(Color.BLUE); //設(shè)置第二面骰子邊界顏色

diceLoadingView.setThirdSideDiceNumber(4); //設(shè)置第三面骰子點數(shù)(1-6)
diceLoadingView.setThirdSidePointColor(Color.GREEN); //設(shè)置第三面骰子點的顏色
diceLoadingView.setThirdSideDiceBgColor(Color.WHITE); //設(shè)置第三面骰子背景顏色
diceLoadingView.setThirdSideDiceBorderColor(Color.GREEN); //設(shè)置第三面骰子邊界顏色

diceLoadingView.setFourthSideDiceNumber(5); //設(shè)置第四面骰子點數(shù)(1-6)
diceLoadingView.setFourthSidePointColor(Color.RED); //設(shè)置第四面骰子點的顏色
diceLoadingView.setFourthSideDiceBgColor(Color.WHITE); //設(shè)置第四面骰子背景顏色
diceLoadingView.setFourthSideDiceBorderColor(Color.RED); //設(shè)置第四面骰子邊界顏色


屬性說明:

開始描述效果圖之前,先看兩張張說明圖:

針對立方體而言


description1.png

針對每一個骰子面而言:


description2.png
attr description
animDuration 動畫時間
animInterpolator 動畫加速器
firstSideDiceNumber 第一面骰子點數(shù)(1-6)
firstSideDicePointColor 第一面骰子點的顏色
firstSideDiceBgColor 第一面骰子背景顏色
firstSideDiceBorderColor 第一面骰子邊界顏色
secondSideDiceNumber 第二面骰子點數(shù)(1-6)
secondSideDicePointColor 第二面骰子點的顏色
secondSideDiceBgColor 第二面骰子背景顏色
secondSideDiceBorderColor 第二面骰子邊界顏色
thirdSideDiceNumber 第三面骰子點數(shù)(1-6)
thirdSideDicePointColor 第三面骰子點的顏色
thirdSideDiceBgColor 第三面骰子背景顏色
thirdSideDiceBorderColor 第三面骰子邊界顏色
fourthSideDiceNumber 第四面骰子點數(shù)(1-6)
fourthSideDicePointColor 第四面骰子點的顏色
fourthSideDiceBgColor 第四面骰子背景顏色
fourthSideDiceBorderColor 第四面骰子邊界顏色



Github

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容