[Android] 안드로이드 BottomSheet ( feat.Fragment )

👼🏻 초보 안드로이드 개발자가 매번 구글링하기 싫어서 정리하는 블로그 👼🏻 

 

안녕하세요! 🙋🏻‍♀️

 

오늘은 어플 첫 화면시 하단에서 쭈우욱~ 올라오는 BottomSheet 을 해볼거에요!

그게 뭐냐구여????

 

 

버튼 클릭 이벤트를 해줬지만, 보통 앱들은 onCreate 하면서 실행시킬거에요 !

 

이거!!!!!!! 😁

 

자 언넝언넝 후딱 해보러갑시다!

 

 

 

🧐 아참 참고로 처음으로 Fragment 라는걸 아주아주 간단하게 쓸건데 그게 뭔지 조금은 알고 계셔야 편할거에요!

[Android] Activity와 Fragment의 차이점

 

 

자 언제나  그랫듯 뷰부터 그리러 갑니다!

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    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="center">

    <Button
        android:id="@+id/btn_click"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click"
        />

</LinearLayout>

 

MainActivity 의 뷰는 아주 간단하죠? ☺️

 

자 이제 하단에 올라오는 BottomSheet 을 그리러 가봅시다!

BottomSheet 만드는 방법은 다양한데,

저는 그냥 Fragment 로 생성을 해서 필요한 코드만 납두고 지우는 편이에요!

 

어케 하는거냐믄

 

새로운 액티비티 만드는거랑 똑같아요!

딱 만들게 되면

 

이런식으로 코드 및 메소드들이 오버라이드 되면서 적혀나오는데 다 필요없어요!!!!!!

public class ExFragmenet extends Fragment

class 메소드 빼고 다 지워줍니다!!!

 

또한, 이렇게 만들면 자동으로 layout.xml 이 자동으로 생겨요

이런식으루!!

그래서 저는 layout 따로, Fragment 따로 만드는것보다 이렇게 만드는게 더 편하더라구요!

( 사람마다 다 다르기에 제 방법이 정답은 아닙니다!!!!!!!! 🚫 )

 

이렇게 만들었다면 이제 정말 BottomSheet 뷰를 그리러 가봅시다!

 

SMALL

 

fragment_bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".BottomSheet"
    android:padding="20dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/bottom_sheet"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <Button
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="하루동안 안보기"
            android:layout_marginRight="5dp"
            />
        <Button
            android:id="@+id/btn_close"
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="닫기"
            android:layout_marginLeft="5dp"
            />
    </LinearLayout>

</LinearLayout>

 

 

좋아요 그러면 이제 BottomSheet 에 관한 코드를 짜러 가봅시다!

 

BottomSheet

import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.google.android.material.bottomsheet.BottomSheetDialogFragment;

public class BottomSheet extends BottomSheetDialogFragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_bottom_sheet, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        view.findViewById(R.id.btn_close).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                dismiss();
            }
        });
    }
}

 

제가 아까 class 메소드 빼고 다 지운다고 했는데 뭐가 많이 생겼죠?

 

이건 MainActivity 의 onCreate 와 같은 Fragment 의 생명주기 메소드에요!

 

왜 갑자기 이게 튀어나왔냐면

BottomSheet 은 Fragment 이기때문입니다!!!!!!!!

 

그래서 상속받는것도 " BottomSheetDialogFragment " 인거죠!

 

이제 BottomSheet 을 사용할 MainActivity 로 넘어갑니다!

반응형

MainActivity

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    BottomSheet bottomSheet;
    Button btn_click;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btn_click = findViewById(R.id.btn_click);

        btn_click.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                bottomSheet = new BottomSheet();
                bottomSheet.show(getSupportFragmentManager(), bottomSheet.getTag());
            }
        });
    }
}

 

실제로 사용하는 MainActivity 는 아주 간단하죠?

 

이로써 초간단 BottomSheet 사용하기 끝입니다!!!

 

봐주셔서 감사합니다!!!