12/08/2018, 16:23

[Android] Flex Recyclerview create tab menu

I.Giới thiệu Minh sẽ hướng dẫn các bạn tạo 1 thanh Tab menu uốn cong 1 cách đơn giản nhất với việc sử dụng RecycleView. Tab menu của mình có các tính chất sau đây + Tab trung tâm sẽ được chọn làm giá trị hiển thị. + Uốn cong theo vòng cung + Scale tại vị trí trung tâm + Scroll trái phải để chọn ...

I.Giới thiệu Minh sẽ hướng dẫn các bạn tạo 1 thanh Tab menu uốn cong 1 cách đơn giản nhất với việc sử dụng RecycleView. Tab menu của mình có các tính chất sau đây + Tab trung tâm sẽ được chọn làm giá trị hiển thị. + Uốn cong theo vòng cung + Scale tại vị trí trung tâm + Scroll trái phải để chọn tab + Click trái phải để chọn tab

demo: https://j.gifs.com/KZOMw8.gif

II.Các thực hiện

  1. Sử dụng 1 thư viện để đính ghim vị trí trung tâm, và scale vị trí trung tâm

    • Mình dùng thằng này: https://github.com/BCsl/GalleryLayoutManager
    • Thêm đúng 1 câu lệnh đơn giản để add lib
        dependencies {
            compile 'github.hellocsl:GalleryLayoutManager:{lastest-release-version}'
        }
    
  2. Scale và uốn cong theo vị trí trung tâm

    • Tận dụng lớp Transformer chúng ta sẽ tính được độ di chuyển sang trái sang phải dựa vào đó để scale phần tử ở chính giữa
    • Ở đây fraction nhận các giá trị (-1 0 1)
    • Khi đã Scale phần tử ở giữa sẽ làm cho phần tử đó to ra và chiếm diện tích lớn hơn, vì thế để cân bằng cho giao diện chúng ta setTranslationX lệch trái, lệch phải tương ứng với giá trị đã Scale ra.
    • Để uống cong mình setTranslationY công thức tính đường cong (dy = (radius - (radius * radius) / (float) Math.sqrt(radius * radius + dx * dx))            </div>
            
            <div class=
0