드래그로 Fragment 크기 조절 in Android Studio

마치 안드로이드 폰에서 화면 분활해서 쓸 때 드래그를 통해서 화면 크기를 조절하는 것처럼 

Fragment 두개를 드래그를 통해서 크기를 조절하게 만들었다.

 

 

 

 

1. activity, fragment 만들기

 

옆의 사진처럼 FrameLayout이 배치되도록 하기 위해서 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            ...
    android:orientation="vertical"
    android:id="@+id/linearLayout">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:id="@+id/fl_1"/>
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/fl_2"/>
</LinearLayout>

위의 코드 같이 위의 FrameLayout은 layout_height를 400dp로 주었고 

밑의 것은 0dp를 주고 layout_weight를 1로 설정해주면서 위의 FrameLayout의 height만 설정해주면 밑의 것도 자동으로 알맞게 채워지도록 했다.

 

그리고 각각의 FrameLayout에 띄울 Fragment의 layout과 class도 밑에 fragment1의 코드같이 fragment2또한 만들어줬다.

 

 

fragment_1.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment1"
    android:background="#94CFC9"
    android:id="@+id/ffl_1">
</FrameLayout>

fragment1.java

        ...
public class Fragment1 extends Fragment {
    @Nullable
    @org.jetbrains.annotations.Nullable
    @Override
    public View onCreateView(@NonNull @org.jetbrains.annotations.NotNull LayoutInflater inflater, @Nullable @org.jetbrains.annotations.Nullable ViewGroup container, @Nullable @org.jetbrains.annotations.Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_1, container, false);
    }
}

 

 

 

2. fragment 띄우기

FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
Fragment1 fragment1 = new Fragment1();
Fragment2 fragment2 = new Fragment2();
 
transaction.replace(R.id.fl_1, fragment1);
transaction.replace(R.id.fl_2, fragment2);
transaction.commit();

fragment를 띄우기 위해서 FragmentTransaction을 이용해서 

fl_1, fl_2에 각각 fragment1, fragment2를 띄워줬다.

 

 

 

 

3. setOnTouchListener() 

드래그하는 정보를 입력 받기 위해서 setOnTouchListener()을 이용하기로 했다.

linearLayout.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        int action = motionEvent.getAction();
        if (action == MotionEvent.ACTION_DOWN) {
            lastY = (int)motionEvent.getY();
        } else if (action == MotionEvent.ACTION_MOVE && Math.abs(lastY - fl_1.getHeight()) < 20) {
            curY = (int)motionEvent.getY();
            fl_1.setLayoutParams(new LinearLayout.LayoutParams(mpWidth, fl_1.getHeight() + curY - lastY));
            lastY = (int)motionEvent.getY();
        }
        return true;
    }
});

 위 코드에서 fl_1는 첫번째 FrameLayout를 담고 있는 변수이다. [fl_1=(FrameLayout)findViewById(R.id.fl_1)]

1~3 - setOnTouchListener()은 화면에 터치했을때 호출되는 이벤트이고 motionEvent를 인자로 받아서 여러 정보를 받을수도 있다.

4 - action에 motionEvent.getAction()으로 얻은 정보를 넣어준다. 

5~6 - action을 통해서 터치했을 때 전역변수로 설정한 lastY에 현재 손의 y좌표를 정수의 형태로 저장한다.

(여기서 터치를 손을 갖다대는 것을 말하고 때는 것은 포함되지않는다.)

7~11 - action을 통해서 터치한채로 드래그할 때 실행되도록 했고 터치한 위치와 fl_1의 height의 편차를 통해서 손가락을 댄 곳이 두 fragment의 사이일 때만 실행되게 했다.

    8 - curY에 현재 손의 y좌표를 정수 형태로 저장한다.

    9 - fl_1.setLayoutParams()를 통해서 width를 mpWidth, height를 fl_1.getHeight() + curY - lastY으로 설정한다.

         width는 밑에서 설명하겠다. height는 원래 height즉 fl_1.getHeight()에 손가락 위치의 편차 즉 curY-lastY를 더해준 것이다.

    10 - 다시 나중에 드래그를 했을 때 편차를 구하기 위해서 다시 lastY를 초기화해준다.

 

 

 

위 코드에서 fl_1의 width를 match_parent로 설정하는 것과 같은 효과를 내기위해서 parent인 layout의 width를 구할 필요가 있었다.

layout의 크기를 구하기 위해서는 밑 코드와 같은 함수 안에서 구할 수 있다.

@Override
public void onWindowFocusChanged(boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);
    mpWidth = linearLayout.getWidth();
}

 

 

4. 결과