모서리가 둥근 진행률 표시 줄?


85

이 진행률 표시 줄 디자인을 달성하려고합니다. 여기에 이미지 설명 입력

내가 가진 현재 코드는 다음을 생성합니다. 여기에 이미지 설명 입력

다음은 코드입니다.

<item android:id="@android:id/background">
    <shape>
        <corners android:radius="8dp"/>
        <solid android:color="@color/dirtyWhite"/>
    </shape>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </clip>
</item>

내 진행률 표시 줄 :

 <ProgressBar
            android:id="@+id/activeProgress"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:progress="10"
            android:progressDrawable="@drawable/rounded_corners_progress_bar"/>

나는 추가 시도 <size>온 속성 <shape><clip진행이 조금 더 작은 모양을 만드는 그러나 그것은 작동하지 않았다. 또한 진행 표시 줄이 평평하고 디자인에 따라 구부러지고 싶습니다. 디자인을 달성하기 위해 무엇을 변경해야합니까?


답변:


170

진행 모양을 조금 더 작게 만드는 방법은 무엇입니까?

진행률 항목에 다음과 같이 약간의 패딩을 제공해야합니다.

<item android:id="@android:id/progress"
    android:top="2dp"
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp">

진행률 표시 줄을 디자인에 따라 곡선으로 만드는 방법은 무엇입니까?

바꾸기 <clip></clip>와 요소를 <scale android:scaleWidth="100%"></scale>. 그러면 모양이 자랄 때 모양이 유지되고 잘리지 않습니다. 안타깝게도 처음에는 원치 않는 시각 효과가 약간 나타납니다. 모양 모서리에는 그릴 공간이 충분하지 않기 때문입니다. 그러나 대부분의 경우 충분할 수 있습니다.

전체 코드 :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:id="@android:id/background">
    <shape>
        <corners android:radius="8dp"/>
        <solid android:color="@color/dirtyWhite"/>
    </shape>
 </item>

 <item android:id="@android:id/progress"
    android:top="1dp"
    android:bottom="1dp"
    android:left="1dp"
    android:right="1dp">

    <scale android:scaleWidth="100%">
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </scale>
 </item>
</layer-list>

4
@habibullah 네이티브 ProgressBar 및 Layer-List를 사용하는 것은 매우 제한적입니다. 필요에 맞게 사용자 지정 진행률 표시 줄을 쉽게 구현할 수 있습니다. 예를 들어, 단색 배경이있는 경우 전경 9 경로를 사용하여 진행 상황을 제외한 모든 것을 숨 깁니다. 최신 Android 버전을 대상으로하는 경우 기본 제공 마스크 지원을 사용하면됩니다 (이전 버전에서는 지원되지 않음). 또 다른 옵션은 라이브러리를 사용하는 것입니다. github.com/akexorcist/Android-RoundCornerProgressBar . 여전히 문제가 있으면 새 질문을 게시하십시오. 건배.
Eyal Biran 2017

1
위의 설명을 참조 @AkshayMahajan
Eyal 님 비란

1
전체 코드를 적용했을 때 진행률이 100 %는 아니지만 전체 진행률 표시 줄이 기본 색상 (colorPrimaryDark)으로 채색되었습니다. @android : id / background 아래에 클립 태그를 추가했는데 수정되었지만 배경이 사라졌습니다. 내 임시 솔루션은 배경 항목을 제거하고 레이아웃에 배경색을 추가하는 것입니다 (둥근 모서리 없음).
Oğuzhan Koşar

6
제 경우에는 scalewith android:scaleWidth="100%"가 둥근 모서리로 표시하기 위해 트릭을 수행했습니다. 많은 감사합니다
Edison Spencer

1
감사. 당신은 내 하루를 구했습니다.
Nguyễn Anh Tuấn

9

재료 구성 요소 라이브러리를 사용하면 LinearProgressIndicatorapp:trackCornerRadius속성을 사용할 수 있습니다 .
다음과 같은 것 :

    <com.google.android.material.progressindicator.LinearProgressIndicator
        android:indeterminate="true"
        app:trackThickness="xxdp"
        app:trackCornerRadius="xdp"/>

여기에 이미지 설명 입력

또한을 제거 android:indeterminate="true"하거나 사용하여 진행률 표시기를 결정하는데도 작동합니다.android:indeterminate="false"

참고 : 최소한 버전이 필요합니다 1.3.0-alpha04.


2
@Arunachalamk LinearProgressIndicator 는 현재 최신 알파 버전 인 1.3.0-alpha04 와 함께 도입되었습니다 .
Gabriele Mariotti

8

좋은 질문과 이미지에 대해 Georgi Koemdzhiev에게 감사드립니다. 그와 비슷하게 만들고 싶은 사람들은 다음을 수행하십시오.

1) ProgressBar.

progress_bar_background.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <corners android:radius="3dp" />
    <stroke android:color="@color/white" android:width="1dp" />
</shape>

2) ProgressBar.

Curved_progress_bar.xml :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="2dp" />
            <solid android:color="@color/transparent" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="2dp" />
                <solid android:color="#ffff00" />
            </shape>
        </clip>
    </item>
</layer-list>

3) 레이아웃 파일에서 ProgressBar.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="6dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="20dp"
    android:background="@drawable/progress_bar_background"
    >

    <ProgressBar
        android:id="@+id/progress_bar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_margin="1dp"
        android:indeterminate="false"
        android:progressDrawable="@drawable/curved_progress_bar"
        />

</FrameLayout>

4

진행률 표시 줄에 따라 코드 생성
내부 진행 색상, 테두리 색상, 투명한 색상으로 빈 진행 상태로 진행률 표시 줄을 얻을 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape>
        <corners android:radius="15dip" />
        <stroke android:width="1dp" android:color="@color/black" />
    </shape>
</item>

<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <corners android:radius="5dip" />
            <gradient
                android:startColor="@color/black"
                android:centerColor="@color/trans"
                android:centerY="0.75"
                android:endColor="@color/black"
                android:angle="270"

                />
        </shape>
    </clip>
 </item>


 <item
    android:id="@android:id/progress"
    >
    <clip>
        <shape>
            <corners
                android:radius="5dip" />
            <gradient
                android:startColor="@color/black"
                android:endColor="@color/black"
                android:angle="270" />
        </shape>
    </clip>
 </item>
 </layer-list>

안녕하세요 Ravichandra, 답변 주셔서 감사합니다! 왜 당신의 코드가 그의 질문에 대답하는지 설명을 추가 할 수 있습니까? 그렇지 않으면 다른 사용자가 사용하기 어려울 것입니다. 감사!
Nander Speerstra 19

제한적이고 즉각적인 도움을 제공 할 수있는이 코드 스 니펫에 감사드립니다. 적절한 설명은 이것이 문제에 대한 좋은 해결책 인 이유를 보여줌으로써 장기적인 가치를 크게 향상시키고 다른 유사한 질문을 가진 미래의 독자에게 더 유용하게 만들 것입니다. 제발 편집 당신이 만든 가정 등 일부 설명을 추가 할 답변을. 또한이 질문에 이미 주어진 다른 답변보다 귀하의 답변이 더 나은 이유를 설명하십시오.
Qw3ry 19
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.