안드로이드 추천 오픈소스6) RoundableLayout

📌 둥근 모서리의 레이아웃을 쉽고 다양하게 만들 수 있는 라이브러리입니다

 

https://github.com/zladnrms/RoundableLayout

zladnrms/RoundableLayout

 

📗 만들게 된 이유

둥근 모서리를 가진 레이아웃을 만들 때, 그림자 효과나 내부 뷰의 설정, Data Binding, Motion Layout 적용 등 다양한 상황 내에서 고려해야할 부분이 많습니다. 그러나 그 때마다  새로운 커스텀 뷰를 만들어주는 일이란 매우 번거롭습니다. 또한 기존에 존재하는 오픈소스들은 몇몇 환경에서는 오작동하거나, 그림자만 지원하거나, 한 방향의 모서리만 설정 가능한 등, 하나의 특징만 구현된 것이 많았습니다. 그래서 제가 직접 만들게 되었습니다.

 

📘 적용하면 좋은 상황

레이아웃 모서리를 둥글게 커스텀 해야 할 때

그 레이아웃 내부의 뷰들이 둥근 모서리 밖으로 빠져나가지 못 하게 막아야 할 때

그렇게 둥근 모서리까지 예쁘게 그림자가 표현되어야 할 때

 

위에 모든 상황을 모션레이아웃 혹은 데이터바인딩 에 적용시켜야 할 때

 

일일이 레이아웃을 만들어 줄 수 있지만 그럴려면 리소스도 많이 필요하고 귀찮은 단계를 거쳐야 합니다.

 

이제 그럴 필요 없이, 편하게 이것을 쓰세요.

 

📙 한장 소개

MotionLayout 적용 가능

여러가지 커스텀을 손쉽게

 

📕 장점

MotionLayout과 연동이 가능하여 멋있는 효과를 구현할 수 있습니다

레이아웃의 모서리 별로 둥글기 정도를 설정할 수 있어 편리합니다.

ConstraintLayout을 상속하여 구현하였기 때문에 즉시 수평 구조의 XML를 구성할 수 있습니다.

배경색을 지정할 수 있습니다.

 

📖 적용 방법

 

in build.gradle (Project: xxx)

allprojects {
  repositories {
    ...
    maven { url 'https://www.jitpack.io' }
  }
}

in build.gradle (Module:app) 

dependencies {
        implementation 'androidx.constraintlayout:constraintlayout:1.1.3 or high' // maybe already exists or add
        implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1 or high' // if you want to use motion layout
        implementation 'com.github.zladnrms:RoundableLayout:1.1.3'
}

 

🕹 사용 방법

in XML

  <com.tistory.zladnrms.roundablelayout.RoundableLayout
    android:id="@+id/layout_example"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:elevation="5dp" // native shadow options
    android:translationZ="5dp" // native shadow options
    app:backgroundColor="#FFFFFF" // if TRANSPARENT, shadow do not apply.
    app:cornerLeftTop="40dp"
    app:cornerRightTop="40dp"
    app:cornerLeftBottom="40dp"
    app:cornerRightBottom="40dp"
    app:strokeLineWidth="2dp"
    app:strokeLineColor="#222222"
    app:cornerLeftSide="25dp"
    app:cornerRightSide="25dp"
    app:dashLineWidth="10dp" // need stroke value 
    app:dashLineGap="4dp"> // need stroke value 

• cornerLeftTop : Layout's left top round value. (default = 0dp)

• cornerRightTop : Layout's right top round value. (default = 0dp)

• cornerLeftBottom : Layout's left bottom round value. (default = 0dp)

• cornerRightBottom : Layout's right bottom round value. (default = 0dp)

• backgroundColor : Layout's background color value. (default = Color.WHITE)

• dashLineWidth : Layout outline dash width value. (default = 0dp)

• dashLineGap : Layout outline dash gap value. (default = 0dp)

• strokeLineWidth : Layout outline stroke width value. (default = 0dp)

• strokeLineColor : Layout outline stroke color value. (default = NULL)

 

🕹 Attribute 설명

cornerLeftTop, cornerLeftBottom, cornerRightTop, cornerRightBottom

레이아웃의 왼쪽 위 / 아래, 오른쪽 위 / 아래의 둥글기 값을 dp 단위로 설정해줍니다

 

cornerLeftSide, cornerRightSide

레이아웃의 왼쪽 위, 아래  오른쪽 위, 아래의 둥글기 값을 dp 단위로 한번에 정합니다.

이는 MotionLayout의 CustomAttribute가 한 Constraint 당 최대 2개까지만 적용가능한 현재 상황을 고려하여 만들어졌습니다. 

 

backgroundColor

레이아웃 내의 전체적인 배경 색상을 설정해줍니다.

 

dashLineWidth, dashLineGap

일반적인 Stroke Dash 옵션입니다.

 

strokeLineWidth, strokeLineColor

일반적인 Stroke 옵션입니다.

 

 

사용해보시고 유용하시다면, github의 star 부탁드립니다.

 

#android layout round corner #android roundablelayout