TIL18 -progress bar

future0159 1월 17일 AM 07:27 8 0
future0159 Profile Image Level 9
1

Progress bar를 Circle로 만들어 보기

1) 투명도가 큰 원 만들기

ZStack {
        Circle()
    //                lineWidth로 지정된 stroke copy로 새로운 shape를 생성시켜준다. 
    //                stroke를 지정하지 않으면 filled된 circle이 만들어진다.
                .stroke(lineWidth: 20.0)
    //                opacity는 투명성(transparency)를 의미한다.
                .opacity(0.3)
                .foregroundColor(.red)
                .frame(width: 150, height: 150)
            
        }

위 코드를 통해서, 사진과 같이 투명도가 있는 원이 만들어 진다

2) 투명도가 없는 원을 만들어 진행상황 표시하기.

ZStack {
            Circle()
                .stroke(lineWidth: 20.0)
                .opacity(0.3)
                .foregroundColor(.red)
            Circle()
//              trim함수를 통해서, 원에서 원하는 구간만큼 자르게 된다. 
                .trim(from: 0.0, to: CGFloat(min(progressCookedValue, 100) / 100))
                .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                .foregroundColor(.red)
//              이떄 rotation Effect를 통해서 회전 시키지 않으면, 원에서 시작지점이 3시이다. 
                .rotationEffect(.degrees(-90))
            Text("\(String(format: "%.1f" ,(progressCookedValue)))% 조리가 완료 되었습니다.")
                .fontWeight(.bold)
        }

위 코드를 통해서, 투명도가 없는 진한 원과 투명도가 있는 원이 overlap된다.
이때 trim함수의 용도는 원에서 원하는 부분만큼 자르는 것으로서, 3시부터 시계방향에서 시작되어 parameter to값을 기준으로 자르게 된다.(0.0 <= from, to <= 1.0)
그래서 만약 12시부터 progress bar를 만들고 싶다면, rotationEffect함수를 통해서 -90도 회전시켜 주어야 한다.

댓글