안드로이드 스튜디오, java]프레그먼트, 탭, 메뉴 구성 응용

결과물 : 

 

 

다음 포스트를 응용해서 제작했습니다.

https://itstudy-mary.tistory.com/187

안드로이드 스튜디오, java] TabLayout과 ViewPager, Fragment를 이용하여 화면 구성

https://itstudy-mary.tistory.com/186

안드로이드 스튜디오,java]커스텀 액션 바 제작하기

https://itstudy-mary.tistory.com/184

안드로이드 스튜디오,java] 기초 액션바 만들기

 

res/menu/menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
    android:id="@+id/menu_1"
    android:title="메뉴1"
    app:showAsAction="always"/>
    <item
        android:id="@+id/menu_2"
        android:title="메뉴2"
        app:showAsAction="always"/>
    <item
        android:id="@+id/menu_3"
        android:title="메뉴3"
        app:showAsAction="always"/>
</menu>

 

 

tool_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tool_bar"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@android:color/black"
    app:contentInsetStart="0dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">



        <ImageView
            android:id="@+id/iv_hamburger"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="15dp"
            android:layout_marginBottom="10dp"
            app:srcCompat="@drawable/ic_menu" />

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:text="Mary"
            android:textColor="@android:color/white"
            android:textSize="22sp"
            android:textStyle="bold"
            android:gravity="center"/>

    </RelativeLayout>


</androidx.appcompat.widget.Toolbar>

 

meun_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@android:color/black"
    >
    <TextView
        android:id="@+id/tv_header_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Header"
        android:textColor="@android:color/white"
        android:textSize="30dp"
        android:textStyle="bold"
        android:gravity="center"/>

</LinearLayout>

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_drawer"
    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">

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="right|end"
        app:headerLayout="@layout/menu_header"
        app:menu="@menu/menu" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <include layout="@layout/tool_bar" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/layout_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </com.google.android.material.tabs.TabLayout>
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    </LinearLayout>

</androidx.drawerlayout.widget.DrawerLayout>

 

frag1.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    android:background="@android:color/holo_red_light">

    <TextView
        android:id="@+id/tv_frag2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Frag1"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

frag2.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    android:background="@android:color/holo_blue_bright">

    <TextView
        android:id="@+id/tv_frag1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Frag2"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

frag1.java

package com.mary.exercise1;

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;

public class Frag1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v=inflater.inflate(R.layout.frag1,container,false);

        return v;
    }
}

 

frag2.xml

package com.mary.exercise1;

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;

public class Frag2 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v=inflater.inflate(R.layout.frag2,container,false);

        return v;
    }
}

 

fragmentAdaper.java

package com.mary.exercise1;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

public class FragmentAdapter extends FragmentPagerAdapter {

    public List<Fragment> fragmentList=new ArrayList<>();

    public FragmentAdapter(@NonNull FragmentManager fm, int behavior) {
        super(fm, behavior);
    }

    public void addFragment(Fragment fragment){
        fragmentList.add(fragment);
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    @Override
    public int getCount() {
        return fragmentList.size();
    }
}

 

MainActivity.java

package com.mary.exercise1;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageView;

import com.google.android.material.tabs.TabLayout;

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "Main_Activity";

    private Toolbar toolbar;
    private ImageView imageView;
    private DrawerLayout drawerLayout;

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private FragmentAdapter adapter;

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

        imageView = findViewById(R.id.iv_hamburger);
        toolbar = findViewById(R.id.tool_bar);
        drawerLayout = findViewById(R.id.layout_drawer);

        tabLayout=findViewById(R.id.layout_tabs);
        viewPager=findViewById(R.id.view_pager);
        adapter=new FragmentAdapter(getSupportFragmentManager(),1);

        //툴바 변경
        setSupportActionBar(toolbar);

        //햄버거 버튼 출력
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d(TAG, "onClick: 클릭 되니 진짜?");
                drawerLayout.openDrawer(Gravity.RIGHT);
            }
        });

        //매니저에 프레그먼트 추가
        adapter.addFragment(new Frag1());
        adapter.addFragment(new Frag2());

        //뷰페이저와 어댑터 연결
        viewPager.setAdapter(adapter);

        //탭과 뷰페이저 연결
        tabLayout.setupWithViewPager(viewPager);

        tabLayout.getTabAt(0).setText("Tab1");
        tabLayout.getTabAt(1).setText("Tab2");
    }
}

 

딴건 문제가 아닌데, main_activity.xml을 짤 때 주의사항이 있습니다.

toolbar을 include 시키기 위해 LinearLayout을 이용하는데, 뷰페이저를 Linear 레이아웃 밖으로 빼버리면 탭 레이아웃이 정상적으로 출력되지 않고, 탭 레이아웃을 리니어 밖으로 빼면 wrap_content 여도 탭이 화면 전체를 차지해버리기 때문에 둘 다 툴바가 있는 레이아웃 내부에 넣어주세요.

 

그래서 탭이 저렇게 크게 출력되기 때문에 탭 레이아웃이 밖으로 빠진 상태에서 햄버거 버튼을 구현하게 될 경우 클릭리스너가 정상작동하지 않습니다.

 

-뷰 페이저가 밖으로 빠질 경우

 

탭 레이아웃이 밖으로 빠질 경우