IT TIP

Android에서 머티리얼 디자인 원형 진행률 표시 줄을 구현하는 방법

itqueen 2020. 12. 7. 21:22
반응형

Android에서 머티리얼 디자인 원형 진행률 표시 줄을 구현하는 방법


Inbox by Gmail Android 앱에있는 것과 같은 머티리얼 디자인 원형 진행률 표시 줄을 만들고 싶습니다. 이를 달성하려면 어떻게해야합니까 (사전 롤리팝 장치에서)?

이와 비슷한 효과를 얻으려고 노력하고 있습니다. Inbox by Gmail 머티리얼 디자인 원형 진행률 표시 줄


<ProgressBar
android:id="@+id/loading_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTintMode="src_atop"
android:indeterminateTint="@color/your_customized_color"
android:layout_gravity="center" />

효과는 다음과 같습니다.

img


머티리얼 디자인 원형 진행률 표시 줄에 대한 멋진 구현 ( rahatarmanahmed / CircularProgressView ),

<com.github.rahatarmanahmed.cpv.CircularProgressView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/progress_view"
    android:layout_width="40dp"
    android:layout_height="40dp"
    app:cpv_indeterminate="true"/>

여기에 이미지 설명 입력


세 가지 머티리얼 디자인 프로그 레스 드로어 블을 Android 4.0으로 백 포팅했습니다. Android 4.0 ProgressBar은 정확히 동일한 모양으로 일반을 대체 할 수 있습니다 .

이러한 드로어 블은 또한 색조 API (및 RTL 지원)를 백 포트 ?colorControlActivated했으며 기본 색조로 사용 합니다. 편의를 위해 MaterialProgressBar확장 되는 위젯 ProgressBar도 도입되었습니다.

DreaminginCodeZH / MaterialProgressBar

이 프로젝트는 진행 대화를 위해 afollestad / material-dialogs 에서도 채택되었습니다 .

Android 4.4.4에서 :

안드로이드 4.4.4

Android 5.1.1 :

Android 5.1.1


다음은 머티리얼 디자인 순환 중간 진행률 표시 줄 https://gist.github.com/castorflex/4e46a9dc2c3a4245a28e 의 멋진 구현입니다 . 구현은 안드로이드 앱의받은 편지함과 같이 다양한 색상을 추가하는 기능이 부족하지만 이것은 꽤 훌륭한 작업입니다.


cozeJ4의 답변 외에도 해당 요점업데이트 버전이 있습니다.

Original one lacked imports and contained some errors. This one is ready to use.


The platform uses a vector drawable, so you can't reuse it as in in older versions.
However, the support lib v4 contains a backport of this drawable : http://androidxref.com/5.1.0_r1/xref/frameworks/support/v4/java/android/support/v4/widget/MaterialProgressDrawable.java It has a @hide annotation (it is here for the SwipeRefreshLayout), but nothing prevents you from copying this class in your codebase.


Was looking for a way to do this using simple xml, but couldn't find any helpful answers, so came up with this.

이것은 롤리팝 이전 버전에서도 작동하며 머티리얼 디자인 진행률 표시 줄에 매우 가깝습니다. 당신은이를 사용할 필요 drawable는 AS indeterminate drawableProgressBar배치.

<?xml version="1.0" encoding="utf-8"?><!--<layer-list>-->
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360">
    <layer-list>
        <item>
            <rotate xmlns:android="http://schemas.android.com/apk/res/android"
                android:fromDegrees="-90"
                android:toDegrees="-90">
                <shape
                    android:innerRadiusRatio="2.5"
                    android:shape="ring"
                    android:thickness="2dp"
                    android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

                    <gradient
                        android:angle="0"
                        android:endColor="#007DD6"
                        android:startColor="#007DD6"
                        android:type="sweep"
                        android:useLevel="false" />
                </shape>
            </rotate>
        </item>
        <item>
            <rotate xmlns:android="http://schemas.android.com/apk/res/android"
                android:fromDegrees="0"
                android:toDegrees="270">
                <shape
                    android:innerRadiusRatio="2.6"
                    android:shape="ring"
                    android:thickness="4dp"
                    android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->
                    <gradient
                        android:angle="0"
                        android:centerColor="#FFF"
                        android:endColor="#FFF"
                        android:startColor="#FFF"
                        android:useLevel="false" />
                </shape>
            </rotate>
        </item>
    </layer-list>
</rotate>

ProgressBar에서 위의 드로어 블을 다음과 같이 설정합니다.

  android:indeterminatedrawable="@drawable/above_drawable"

참고 URL : https://stackoverflow.com/questions/26814798/how-to-implement-a-material-design-circular-progress-bar-in-android

반응형