[안드로이드] 슬라이딩 레이아웃 만들기

레이아웃을 만들다보면 슬라이딩 페이지가 필요할 때도 있는거 같아요.

 

이번엔 아래에서 위로 또는 위에서 아래로 슬라이딩 해서

 

화면 위에 다른 화면이 나타나도록 하는 방법입니다.

 

우선 해당 라이브러리를 가져와야합니다.

 

https://github.com/umano/AndroidSlidingUpPanel

umano/AndroidSlidingUpPanel

여기에서 gradle에 넣을 라이브러리를 가져올 수 있습니다.

 

dependency에 implementation 'com.sothree.slidinguppanel:library:3.4.0' 를 추가해줍니다.

 

이제 슬라이딩 페이지를 사용할 준비는 되었습니다.

 

xml에서 화면을 만들어줍니다.

 

<MainActivity.java>

package com.slidinguppannel;
 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        final ListView listView = findViewById(R.id.listView);
        listView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,
                new String[]{"copy","past","cut","delete","convert","open", "copy","past","cut","delete","convert","open", "copy","past","cut","delete","convert","open"}));
 
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(getApplicationContext(), position+" 번째 값 : " + parent.getItemAtPosition(position), Toast.LENGTH_SHORT).show();
            }
        });
    }
}
 

<activity_main.xml>

<?xml version="1.0" encoding="utf-8"?>
<com.sothree.slidinguppanel.SlidingUpPanelLayout 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"
    android:gravity="bottom"
    app:umanoDragView="@id/dragView"
    app:umanoScrollableView="@id/listView"
    app:umanoPanelHeight="70dp"
    app:umanoOverlay="false"
    app:umanoParallaxOffset="200dp"
    app:umanoShadowHeight="10dp">
    <!-- gravity 를 bottom으로 하면 아래에서 위로 드래그, top으로 하면 위에서 아래로 드래그 할 수 있다.
         umanoDragView 드래그 해서 보여줄 view를 선택
         umanoScrollableView  슬라이딩 패널에 내용물이 패널에 표시되는것보다 많을 때 스크롤 해서 보여줄 view 부분
         umanoParallaxOffset 에 값을 주면 해당 높이만큼 뒤에 화면을 올려준다.
         umanoShadowHeight 는 슬라이딩 패널 윗부분에 그림자 효과
         umanoOverlay 를 false로 해주면 슬라이딩 패널이 위로 보이고 뒷 부분은 반투명하게 보인다. -->
 
    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:text="Main Content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
 
    </android.support.constraint.ConstraintLayout>
 
    <!-- 올라오는 화면을 꽉 채우고 싶다면 match_parent, 내용물 만큼만 보이고 뒷 배경이 반투명처리로 보이고 싶다면 wrap_content-->
    <LinearLayout
        android:id="@+id/dragView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="false"
        android:orientation="vertical">
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:orientation="vertical">
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="16sp"
                android:text="Action"
                android:textSize="24sp" />
 
        </LinearLayout>
 
        <!-- 스크롤 해서 보여줄 부분은 listview 또는 custom listview 또는 recyclerview를 사용 -->
        <ListView
            android:id="@+id/listView"
            android:layout_width="match_parent"
            android:layout_height="300dp">
 
        </ListView>
 
    </LinearLayout>
 
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

 

이렇게 하시면 완료입니다.

 

리스트뷰로 만든 내용중에 뭔가 선택해서 그 부분에 해당하는 이벤트를 처리하고 싶다면 listview에 setOnItemClickListener를 걸어주셔서 사용하시면 됩니다.

 

동작하는 영상은 아래를 참고해주세요.