728x90
반응형
쇼핑몰 앱을 보면 화면 하단에 홈,마이페이지,장바구니 등 이런 메뉴가 구성돼있는 걸 본적 있을 겁니다.
이런 UI구성을 하는데 안드로이드에서 Fragment를 사용해서 액티비티 내에서 여러 프라그먼트를 조합하여 다양한 화면 레이아웃을 만들 수 있습니다..
어떻게 사용하는지 알아봅시다.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/frame"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true">
<Button android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="@+id/btn_1"
android:layout_weight="1"
android:text="menu_1"/>
<Button android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="@+id/btn_2"
android:layout_weight="1"
android:text="menu_2"/>
<Button android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="@+id/btn_3"
android:layout_weight="1"
android:text="menu_3"/>
<Button android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="@+id/btn_4"
android:layout_weight="1"
android:text="menu_4"/>
</LinearLayout>
</RelativeLayout>
전체 레이아웃은 <RelativeLayout>으로 만들고 화면이 표시될 <FrameLayout>, 화면 전환시킬 버튼을 만들면 됩니다.
그리고 각 버튼에 맞는 레이아웃을 만들어 줍니다. text에 내용을 각각 바꿔서 확인할때 차질없도록 합니다.
MainActivity
package com.example.fragmenexample;
import android.view.View;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import androidx.fragment.app.FragmentTransaction;
public class MainActivity extends AppCompatActivity {
Button btn1, btn2,btn3,btn4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn1 = findViewById(R.id.btn_1);
btn2 = findViewById(R.id.btn_2);
btn3 = findViewById(R.id.btn_3);
btn4 = findViewById(R.id.btn_4);
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
Fragment1 fragment1 = new Fragment1();
transaction.replace(R.id.frame, fragment1);
transaction.commit();
}
});
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
Fragment2 fragment2 = new Fragment2();
transaction.replace(R.id.frame, fragment2);
transaction.commit();
}
});
btn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
Fragment3 fragment3 = new Fragment3();
transaction.replace(R.id.frame, fragment3);
transaction.commit();
}
});
btn4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
Fragment4 fragment4 = new Fragment4();
transaction.replace(R.id.frame, fragment4);
transaction.commit();
}
});
}
}
FragmentTransaction은 프라그먼트를 관리하고 제어하는 클래스입니다.
그리고 각 버튼에 Fragment1,2,3,4 객체가 보일텐데 이 객체들
package com.example.fragmenexample;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import org.jetbrains.annotations.NotNull;
public class Fragment1 extends Fragment {
public Fragment1(){
}
@Nullable
@org.jetbrains.annotations.Nullable
@Override
public View onCreateView(@NonNull @NotNull LayoutInflater inflater, @Nullable @org.jetbrains.annotations.Nullable ViewGroup container, @Nullable @org.jetbrains.annotations.Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment1, container, false);
}
}
Fragment를 상속하고 onCreateView메서드로 프라그먼트 레이아웃을 설정합니다.
inflater.inflate는 Inflater 객체를 사용해서 레이아웃 파일을 View 객체로 메모리에 로드합니다.
container는 부모 뷰를 나타내고 false는 container에 프라그먼트를 즉시 추가하지 않고, 나중에 액티비티의 레이아웃에 수동으로 추가하겠단 뜻입니다. true로 하면 container에 자동으로 추가됩니다.
이제 결과를 보겠습니다.
728x90
반응형
