관리 메뉴

정상에서 IT를 외치다

[Android,Material with refresh] 머테리얼 변형 예제 본문

안드로이드

[Android,Material with refresh] 머테리얼 변형 예제

사용자 Black-Jin 2019. 1. 2. 12:08
728x90
반응형


안녕하세요. 블랙진입니다.


머테리얼 디자인을 변형하여 상단에 버튼이 고정되고 SwipeRefresh 기능이 추가된 예제를 만들어 보았습니다.



1. 상단에 버튼을 고정 하자


보통 AppbarLayout 과 CollapsingToolbarLayout 을 사용하여 머테리얼 디자인을 만듭니다.

<android.support.design.widget.AppBarLayout
android:id="@+id/AppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="48dp"
app:layout_collapseMode="pin"/>

</android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

이때 사용하는 플래그에 대해 잠시 살펴보겠습니다. 저는 위와 같은 기능을 구현하기 위해 CollapsingToolbarLayout 에서는 scrollexitUntilCollapsed 를 설정 Toolbar 에서는 pin을 설정하였습니다.

CollapsingToolBarLayout의 플래그


Toolbar의 플래그


public class CollapsingToolbarLayout extends FrameLayout 

ToolBar를 둘러싸고 있는 CollapsingToolbarLayout 을 보면 FrameLayout 을 상속하고 있는것을 확인할 수 있습니다. FrameLayout 의 특징을 이용하여 아래와 같이 xml을 변경해 보았습니다.


<android.support.design.widget.AppBarLayout
android:id="@+id/AppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

<android.support.constraint.ConstraintLayout
android:layout_marginBottom="48dp"
android:layout_width="match_parent"
android:layout_height="256dp">

<ImageView
android:id="@+id/imageView"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="256dp" />

<TextView
android:textStyle="bold"
android:textSize="30sp"
android:textColor="#ffffff"
android:text="Aqua Man"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="48dp"
app:layout_collapseMode="pin"/>

<!-- 툴바 하단에 버튼이 3개 있는 뷰를 추가해 줍니다. -->
<LinearLayout
android:background="#ffff00"
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="horizontal"
android:layout_gravity="bottom">

<Button
android:id="@+id/button1"
android:text="btn1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />

<Button
android:id="@+id/button2"
android:text="btn2"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />

<Button
android:id="@+id/button3"
android:text="btn3"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />

</LinearLayout>

</android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

FrameLayout 특성상 xml 위차가 중복되면 가장 하단에 있는 뷰가 화면에 노출됩니다. 위와 같이 3개의 버튼이 있는 화면을 툴바 하단에 두고 gravity 값을 bottom 으로 설정하며 툴바가 고정될 화면 앞에 버튼이 3개있는 뷰를 노출시킬 수 있습니다. 이때 toolbar와 커스터마이징한 뷰의 height 값을 모두 동일해야겠죠?



2. SwipeRefresh 기능을 추가하자


CoordinatoryLayout 안에서 아래 옵션을 SwipeRefreshLayout에 추가해줍니다.

app:layout_behavior="@string/appbar_scrolling_view_behavior"

이 옵션을 통해 스크롤 이벤트가 발생하고, 발생한 이벤트를 CoordinatorLayout이 받아 AppBarLayout에게 전달합니다.

<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

</android.support.v4.widget.SwipeRefreshLayout>

이렇게 xml 을 구성하면 모든 준비는 끝났습니다.




3. Activity 초기화


AppBarLayout 초기화

// set toolbar
setSupportActionBar(toolbar)
supportActionBar?.title = null

// set toolbar image
Glide.with(this)
.load("https://i.ytimg.com/vi/vLRZ6U1XMfc/maxresdefault.jpg")
.into(imageView)

툴바를 설정하게 되면 title 이 defalt 로 노출됩니다. 이에 supportActionBar에서 title 값을 null로 변경해 줍니다.



리스트뷰 초기화

// set recycler view
with(recyclerView) {
layoutManager = LinearLayoutManager(this@MainActivity)
adapter = this@MainActivity.adapter
}

// set item
adapter.setItems(getMovieItems())

// set Swipe
swipeLayout.setOnRefreshListener(this)

swipeLayout에 리스너를 등록하여 원하는 액션을 취할 수 있습니다. 

이때 Activity 에는 SwipeRefreshLayout.OnRefreshListener 를 추가해 주어야 합니다.



위와 같은 방법으로 머테리얼 디자인을 변형하여 데모영상과 같은 앱을 제작해 보았습니다.

소스가 필요하신 분은 링크에서 다운받으실 수 있습니다. :)

반응형
0 Comments
댓글쓰기 폼