정상에서 IT를 외치다

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

안드로이드

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

Black-Jin 2019. 1. 2. 12:08
반응형


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


머테리얼 디자인을 변형하여 상단에 버튼이 고정되고 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 에서는 scroll 과 exitUntilCollapsed 를 설정 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 를 추가해 주어야 합니다.



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

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

반응형

'안드로이드' 카테고리의 다른 글

[Android, Canvas, Paint] 안드로이드 캔버스 기본 예제  (4) 2019.01.21
[리액티브 프로그래밍] 스케줄러 개념 배우기  (0) 2019.01.03
[Android, MVVM] ViewModel, LiveData, DataBinding, Koin 을 사용한 MVVM  (3) 2018.12.27
[리액티브 프로그래밍] 리액티브 연산자의 활용  (0) 2018.12.19
[리액티브 프로그래밍] 리액티브 연산자 입문  (0) 2018.12.19
'안드로이드' Related Articles more
Comments