tags: 鐵人賽

自定義progressDialog&&progressBar

1.先寫個funtion出來
建一個AlertDialog
創建LayoutInflater inflate進來
set View - root是是否有上一層綁定
接下來是創建(create && show)
如果要取消就用 cancel or dismiss

cancel ->setOnCancelListener的監聽事件 ->再去執行dismiss
dismiss執行dismiss

    private fun showProgressDialog() {
        val builder = AlertDialog.Builder(this)
       
        val inflater = this.getLayoutInflater()

        builder.setView(inflater.inflate(R.layout.dialog_signin, null))

        builder.create()

        builder.show()
    }

2.接下來到自定義的時候

第一個ProgressBar，主要是在indeterminateDrawable 自定義

  <ProgressBar
        android:indeterminateDrawable="@drawable/pb1"
        android:id="@+id/progressBar2"
        style="?android:attr/progressBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

有上一篇提到的layer-list
第一層是 item->shape->ring 環狀
如果是LevelListDrawable使用時為true，否則為false

第二層為item->rotate->shape->solid

rotate設定來自哪個角度 到哪個角度
第一個就是繞一圈
然後solid是填滿顏色

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


    <item android:id="@android:id/background">
        <shape android:shape="ring" android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <rotate android:fromDegrees="270"

            android:toDegrees="270">
            <shape android:shape="ring"
                android:useLevel="true">
                <solid android:color="@color/colorAccent"/>
            </shape>
        </rotate>
    </item>
</layer-list>

第二個主要改變的地方只有 fromDegress 到 toDegress改變

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

    <item android:id="@android:id/background">
        <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <rotate android:fromDegrees="0"
            android:toDegrees="360">
            <shape
                android:innerRadiusRatio="3"
                android:shape="ring"
                android:useLevel="true">
                <solid android:color="@color/colorAccent"/>
            </shape>
        </rotate>
    </item>
</layer-list>

第三個不用兩層，主要重點是在gradient的部分 設定Center color跟 StartColor與EndColor為重點

<?xml version="1.0" encoding="utf-8"?>
<rotate android:fromDegrees="-90"
    android:pivotY="50%"
    android:pivotX="50%"
    android:toDegrees="270"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <shape android:shape="ring"
        android:useLevel="false">
        <gradient
            android:centerColor="#00fd1d1d"
            android:useLevel="false"
            android:type="sweep"
            android:centerY="0.5"
            android:endColor="#E1F78DA0"

            android:startColor="#00fd1d1d"/>
    </shape>
</rotate>

第四個也是差不多只是改顏色而已

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="-90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="270">

    <shape android:useLevel="false"
        android:shape="ring">

        <gradient android:endColor="#ff0000"
            android:centerColor="#00bfff"
            android:startColor="#ff0000"
            android:type="sweep"
            android:useLevel="false"/>
    </shape>

</rotate>

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360">

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="10"
        android:useLevel="false">

        <gradient
            android:centerColor="#FFFFFF"
            android:centerY="0.50"
            android:endColor="#FFFF00"
            android:startColor="#00FFFF"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

dialog_singin.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="vertical">

    <ProgressBar
        android:indeterminateDrawable="@drawable/pb1"
        android:id="@+id/progressBar2"
        style="?android:attr/progressBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <ProgressBar
        android:indeterminateDrawable="@drawable/pb2"
        android:id="@+id/progressBar3"
        style="?android:attr/progressBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <ProgressBar
        android:id="@+id/progressBar4"
        android:indeterminateDrawable="@drawable/pb3"
        style="?android:attr/progressBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <ProgressBar
        android:indeterminateDrawable="@drawable/pb4"
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <ProgressBar
        android:indeterminateDrawable="@drawable/pb5"
        android:id="@+id/progressBar5"
        style="?android:attr/progressBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />


</LinearLayout>