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://m.blog.naver.com/PostView.nhn?blogId=rjs5730&logNo=221260683805&proxyReferer=https:%2F%2Fwww.google.com%2F

 

원본 예제 코드

https://github.com/daimajia/AndroidSwipeLayout