(Android) SwipeLayout - 옆으로 넘기는 레이아웃

안드로이드 앱에 하단의 그림과 같이

Swipe하는 것을 많이 본적이 있을겁니다.

 

하단 원본 사진 참고.

이렇게 만들면 좁은 화면의 앱에 많은 숨김 기능을 넣을 수 있죠.

아래의 예제에서 간단하게 구현해 봅시다.

SwipeLayout 예제

1. Gradle 추가하기

swipelayout를 사용하기 위해 Gradle을 추가해줍니다.

compile 'com.daimajia.swipelayout:library:1.2.0@aar'

2. xml 만들기

activity_main.xml 외에 swipelayout을 만들 "swip_sample1.xml" 을 추가해줍니다.

swipe_sample.xml 코드

<?xml version="1.0" encoding="utf-8"?>

<com.daimajia.swipe.SwipeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent" android:layout_height="match_parent">

<LinearLayout

android:tag="Bottom2"

android:layout_width="wrap_content"

android:layout_height="match_parent">

<ImageView

android:id="@+id/magnifier"

android:src="@android:drawable/ic_menu_search"

android:layout_width="70dp"

android:background="#f7e79c"

android:paddingLeft="25dp"

android:paddingRight="25dp"

android:layout_height="match_parent" />

<ImageView

android:id="@+id/star"

android:src="@android:drawable/ic_dialog_alert"

android:layout_width="70dp"

android:background="#4cd964"

android:paddingLeft="25dp"

android:paddingRight="25dp"

android:layout_height="match_parent" />

<ImageView

android:id="@+id/trash"

android:src="@android:drawable/ic_delete"

android:layout_width="70dp"

android:background="#ff9999"

android:paddingLeft="25dp"

android:paddingRight="25dp"

android:layout_height="match_parent" />

</LinearLayout>

<LinearLayout

android:padding="10dp"

android:orientation="vertical"

android:background="#ffffff"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:tag="Hover"

android:text="Swipe Example"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<Button

android:visibility="invisible"

android:id="@+id/click"

android:text="Click"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</LinearLayout>

</com.daimajia.swipe.SwipeLayout>

 

위 swipe_sample1.xml코드를  activity_main.xml 코드에 inlcude로 포함시켜줍니다.

acivity_main.xml 코드

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<include android:id="@+id/swipe_sample1" layout="@layout/swipe_sample1"

android:layout_width="match_parent" android:layout_height="80dp"/>

</android.support.constraint.ConstraintLayout>

 

3. MainActivity 

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.Toast;

import com.daimajia.swipe.SwipeLayout;

public class MainActivity extends AppCompatActivity {

private SwipeLayout swipe_sample1;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

swipe_sample1=(SwipeLayout)findViewById(R.id.swipe_sample1);

swipe_sample1.setShowMode(SwipeLayout.ShowMode.LayDown);

//오른쪽에서 나오는 drag (tag로 설정한 HideTag가 보여짐

swipe_sample1.addDrag(SwipeLayout.DragEdge.Right,swipe_sample1.findViewWithTag("HideTag"));

//swipe_layout을 클릭한 경우

swipe_sample1.getSurfaceView().setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(MainActivity.this, "Click on surface", Toast.LENGTH_SHORT).show();

}

});

//star버튼을 클릭한 경우

swipe_sample1.findViewById(R.id.star).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(MainActivity.this, "Star", Toast.LENGTH_SHORT).show();

}

});

}

}

 

위 예제는 간단하게 만든 경우지만 일반적으로는 

RecyclerView와 많이 쓰입니다. 

사용방법은 아래 참고되어있는 원본 파일에서 확인하시면 되겠습니다.ㅎ

원본 예제 코드

https://github.com/daimajia/AndroidSwipeLayout