Custom Loading dengan CAShapeLayer


Selamat pagi ...
Pagi ini udara begitu nikmat sekali karena polusinya tidak terlalu parah dari pada siang nanti 😙. Pagi juga waktu yang paling efektif untuk dibuat olahraga minimal jalan kaki, setidaknya begitu bagi saya. Walaupun kadang tubuh begitu enggan untuk diajak kompromi tetapi yang sudahlah mungkin segelas air putih dan tarikan nafas yang panjang minimal menggantikan udara yang begitu kotor dalam paru - paru kita 😝. Pagi ini saya menyempatkan sejenak untuk keluar dari kotak nyaman saya untuk melihat indahnya sang mentari. Mentari pagi ini memberikan pelajaran penting bagi saya, kita harus selalu bangkit dalam kondisi dan situasi apapun entah itu dari kegagalan usaha yang dilakukan, prestasi yang tidak sesuai dengan keinginan sampai kegagalan dalam hal percintaan. Kita harus selalu bangkit, moving forward karena kita harus melanjutkan hidup, sayang sekali bukan jika sisa hidup yang tuhan berikan kepada kita tidak dimanfaatkan, mari nikmati dan berikan yang terbaik pada semesta ini.

Pelajaran berharga dari terbitnya matahari adalah prosesmaksudnya gimana?. Maksudnya dalam hidup ini kita tidak bisa langsung untuk menggapai sesuatu secara instan walaupun itu bisa saja terjadi, tapi hanya sedikit kemungkinan tapi  kebanyakan dari kita harus melakukannya tahap demi tahap. Kita harus mempelajarinya tahap demi tahap baru kita akan mencapai tujuan, begitupun matahari untuk bener - bener berada tepat diatas ubun - ubun kita matahari perlu proses, perlahan - lahan tapi pasti untuk mencapainya. Dimulai dari menampakkan warna jingga yang begitu indah sebelum terbit,  kemudian ia keluar perlahan - lahan dengan memberi kehangatan bagi penikmatnya sampai penikmatnya pergi meninggalkannya karena begitu menyengat panas sang mentari, tapi kehadiran mentari masih berguna bagi tukang loundry untuk mengeringkan pakaiannya.

Loh... kok jadi kemana - mana ini  😂. Untuk kali ini saya akan membuat custom loading di swift 4  dengan menggunakan  CAShapeLayer. CAShapeLayer adalah fitur yang terdapat dalam xcode yang berguna untuk membuat bentuk yang menghubungkan koordinat - koordinat dalam layar. bentuk yang dihasilkan  tergantung dari imaginasi yang anda terapkan serta  anda dapat memodifikasi sesuai dengan keinginan anda sendiri. Misalnya anda memberikan animasi zoom in zoom out ataupun mode bergerak dan lainnya. Untuk lebih lengkapnya anda bisa baca sendiri di dokumentasi apple.

Kali ini saya akan mencoba untuk menerapkan CAShapeLayer dalam konteks yang sederhana terlebih dahulu, nantinya dikembangkan seperti Gambar dibawah ini.


Let's go .....!!
Untuk pertama, kita buat function untuk CAShapeLayer, kita buat dalam bentuk function karena nantinya dengan satu function ini kita dapat menambahkannya di view lebih dari satu layer, sehingga  coding lebih sedikit rapi. Cara menambahkan layer dalam view adalah  view.layer.addSubLayer("") .

private func circleshapeLayout(strokeColor: UIColor, fillColor: UIColor)->CAShapeLayer {
let circle = CAShapeLayer()
let circularPath = UIBezierPath(arcCenter: .zero, radius: 100, startAngle: 0 , endAngle: 2 *
CGFloat.pi, clockwise: true)
circle.path = circularPath.cgPath
circle.strokeColor = strokeColor.cgColor
circle.lineWidth = 20
circle.fillColor = fillColor.cgColor
circle.lineCap = .round
circle.position = view.center
return circle
 }

UIBezierPath digunakan untuk membuat lingkaran yang dimulai dari sudut 0 derajat sampi 360 derajat, dengan rotasi searah jarum jam. seperti yang saya bilang sebelumnya CAShapeLayer bentuknya berdasarkan apa yang kita inginkan, dalam CAShapeLayer ada yang namanya path, path adalah wadah dari bentuk yang dimasukkan jadi tinggal masukkan aja bentuk yang diinginkan pada path. Kita juga bisa mengganti warna luar dari bentuk dengan strokeColor dan warna dalam dengan fillColorlineCap nya juga bisa diganti, terdapat tiga pilihan bentuk yang diberikan, kali ini saya menggunaka round agar melengkung.

Pada percobaan kali ini  linenya saya mode bergerak, untuk itu kita buat function untuk menggerakkannya misalnya kita download video, nanti write downloadnya kita buat antrian yang dimulai dari strokeStart =  0 sampai strokeEnd =  1, seperti berikut ini : 

func urlSession(_ session: URLSession, downloadTask: URLSessionDownloadTask, didWriteData bytesWritten: Int64, totalBytesWritten: Int64, totalBytesExpectedToWrite: Int64) {
        print(totalBytesWritten, totalBytesExpectedToWrite)
        
        let percentage = CGFloat(totalBytesWritten) / CGFloat(totalBytesExpectedToWrite)
        
        DispatchQueue.main.async {
            self.percentageLabel.text = "\(Int(percentage*100))%"
            self.shapeLayer.strokeEnd = percentage
        } 
    }

Dan untuk memperindah UInya saya buat strokenya zoom in  zoom out menggunakan BasicAnimation yang udah disediakan di xcode. agar kelihatan bergerak bagian luar lingkarannya. pada BasicAnimation kita dapat mengatur durasi, fill mode nya juga, seperti function berikut ini.

 fileprivate func extractedFunc() {
        let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")
        basicAnimation.toValue = 1
        basicAnimation.duration = 2
        basicAnimation.fillMode = .forwards
        basicAnimation.isRemovedOnCompletion = false
        shapeLayer.add(basicAnimation, forKey: "urSoBasic")
    }

Nanti Output yang diberikan tergantung dari bagaimana kita mengcustom CAShapeLayer. untuk awal ini outputnya simple aja yang penting berjalan dan kita mengerti komponen yang digunakan. Jika kurang memahami apa yang saya deskripsikan diatas, mungkin anda coba lihat dan jalankan scriptnya, link githubnya udah saya sertakan dibawah. silahkan dicoba, Good jobs... 😋💪 














Custom Loading dengan CAShapeLayer Custom Loading dengan CAShapeLayer Reviewed by sdiik on July 23, 2019 Rating: 5

6 comments:

  1. sangat membantu gan, di tunggu tutorial selanjutnya

    ReplyDelete
  2. Code nya kalau bisa bedakan dari tulisan yang lain gan, agak sulit bacanya kalo style nya sama

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Mantap sekali juragan, semangat terus buat juragan yang sudah berbagi ilmunya, coba font basicnya diganti yang lebih friendly buat pembaca juragan

    ReplyDelete

Powered by Blogger.