Day4

sumi Yoo·2022년 9월 5일
android

Fragment에서 BottomNavigationView 숨기기

MainActivity에 BottomNavigationView가 정의되어 있고, Fragment①에서 Fragment②로 이동할 때 BottomNavigation을 숨기고자 한다. → Fragment②에서 작업해주면 된다.

이 Fragment에서만 내비게이션을 숨기고, 이 Fragment에서 벗어나면 다시 내비게이션이 보이게 된다.

override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = WebviewFragmentBinding.inflate(inflater, container, false)
        binding!!.webView.settings.javaScriptEnabled=true
        binding!!.webView.webViewClient = WebViewClient()
        binding!!.webView.loadUrl("https://boostcamp.connect.or.kr")

        hideBottomNavigation(true)

        return binding!!.root
    }

    override fun onDestroyView() {
        super.onDestroyView()
        hideBottomNavigation(false)
    }

    fun hideBottomNavigation(bool:Boolean) {
        val bottomNavigation = (activity as GameActivity).findViewById<BottomNavigationView>(R.id.bnv_main)
        if (bool == true)
            bottomNavigation.setVisibility(View.GONE);
        else
            bottomNavigation.setVisibility(View.VISIBLE);
    }

BottomNavigationView 숨기기

Kotlin Fragment에서 Activity 호출

(activity as 엑티비티명).메서드명()

val bottomNavigation = (activity as GameActivity).findViewById<BottomNavigationView>(R.id.bnv_main)

Activity 호출

1. 툴바를 사용하기 위해서 theme.xml을 액션바를 사용하지 않도록 바꾸어줍니다. 이 작업을 하지 않으면 오류가 납니다.

<style name="Theme.NavigationDrawer" parent="Theme.MaterialComponents.DayNight.NoActionBar">

2. layout/activity_main.xml

<androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawer_layout">

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

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/Theme.NavigationDrawer">

        </androidx.appcompat.widget.Toolbar>

    </RelativeLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/navi_header"
        app:menu="@menu/navi_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

네비게이션 드로어를 사용하기 위해서는 DrawerLayout을 사용해야 합니다. 가장 바깥에 DrawerLayout을 깔아주고, 그 안에 원하는 레이아웃을 넣은 후 화면을 구성하면 됩니다. 네비게이션 드로어 화면은 화면에 계속 보여지는 것이 아니므로 RelativeLayout 밖에 뷰를 넣어줘야 합니다. 따라서 NavigationView는 RelativeLayout 밖이고, 마지막에 넣어주어야 합니다.

3. layout/navi_header.xml

네비게이션 드로어는 header와 content로 이루어져 있습니다.

4. menu/navi_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/item_info"
        android:title="내 정보" />
    <item
        android:id="@+id/item_report"
        android:title="리포트" />
        
</menu>

5. MainActivity.java

class GameActivity : AppCompatActivity() {

    private var binding: GameActivityBinding?=null
    private var drawerLayout: DrawerLayout? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 바인딩 초기화
        binding=GameActivityBinding.inflate(layoutInflater)
        // 레이아웃(root뷰) 표시
        setContentView(binding!!.root)

        drawerLayout = binding!!.drawerLayout
        setSupportActionBar(binding!!.toolbar)
        // 툴바 활성화
        supportActionBar!!.setDisplayHomeAsUpEnabled(true)
        // 햄버거 버튼 이미지 불러오기
        supportActionBar!!.setHomeAsUpIndicator(R.drawable.ic_others)
        // 툴바에 적힐 제목
        supportActionBar.setTitle("게임 설정");
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when (item.getItemId()){
            android.R.id.home->{ // 왼쪽 상단 버튼 눌렀을 때
                drawerLayout!!.openDrawer(GravityCompat.START)
                return true
            }
        }
        return super.onOptionsItemSelected(item)
    }

    override fun onBackPressed() {
        if(drawerLayout!!.isDrawerOpen(GravityCompat.START)){
            drawerLayout!!.closeDrawer(GravityCompat.START)
        }
        else super.onBackPressed()
    }
 }

Navigation Drawer

햄버거 버튼 생성(아이콘 생성)

햄버거 버튼 이미지를 파일에 저장

res 파일 안 drawable 파일에 우클릭 -> new -> Image Asset을 클릭

OK를 누르고 Next -> Finish를 하면 이미지 저장이 완료된다.

아이콘 생성

RelativeLayout

부모(Parent) View 또는 자식(Child) View의 상대적 위치 관계를 정의하여 UI를 배치하는 Layout입니다. 객체간의 상대적인 위치 관계를 정의하지 않으면 배치가 되지 않습니다.

부모(상위) 객체에 상대적인 위치

부모의 좌측 상단에 배치, 부모의 중앙에 배치, 부모의 우측 하단에 배치 등 처럼 부모를 기준으로 자식 View의 위치를 정의할 수 있습니다.

XML attributes
layout_alignParentTop부모의 상단에 객체를 배치
layout_alignParentBottom부모의 하단에 객체를 배치
layout_alignParentRight부모의 우측에 객체를 배치
layout_alignParentLeft부모의 좌측에 객체를 배치
layout_centerHorizontal부모의 가로축 중앙에 객체를 배치
layout_centerVertical부모의 세로축 중앙에 객체를 배치
layout_centerInParent부모의 가로, 세로 축 중앙에 객체를 배치
<TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="TextView01"
        android:background="#80cbc4"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" />

자식(하위) 객체들에 상대적인 위치

부모뿐만 아니라 자식 객체 간의 상대적인 위치도 정의할 수 있습니다.

|XML attributes||
|layout_above|어떤 자식 객체의 상단에 배치|
|layout_below|어떤 자식 객체의 하단에 배치|
|layout_toRightOf|어떤 자식 객체의 우측에 배치|
|layout_toLeftOf|어떤 자식 객체의 좌측에 배치|

<TextView
        android:id="@+id/tv02"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView02"
        android:gravity="center"
        android:background="#ababab"
        android:layout_toRightOf="@id/tv01"
        android:layout_below="@id/tv01"/>

라인 정렬하여 배치

객체들을 동일 라인에 정렬하여 배치할 수 있습니다.

|XML attributes||
|layout_alignTop|객체들을 상단 라인에 정렬하여 배치|
|layout_alignBottom|객체들을 하단 라인에 정렬하여 배치|
|layout_alignLeft|객체들을 좌측 라인에 정렬하여 배치|
|layout_alignRight|객체들을 우측 라인에 정렬하여 배치|

<TextView
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:text="TextView04"
        android:gravity="center"
        android:background="#ababab"
        android:layout_alignTop="@id/tv01"
        android:layout_toRightOf="@id/tv01"/>

Baseline(기준선)에 맞추어 배치

문자열에서 Baseline이란, 아래 그림처럼 기준이 되는 선을 말합니다.

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView03"
        android:background="#29b6f6"
        android:textSize="20sp"
        android:layout_toRightOf="@id/tv01"
        android:layout_alignBaseline="@id/tv01"/>


RelativeLayout

ConstraintLayout

ConstraintLayout

FrameLayout

여러 개의 뷰를 중첩으로 배치하고 그중 하나를 레이아웃의 전면에 표시할 때 사용하는 레이아웃입니다.

layout_gravity 속성


FrameLayout

Style과 Theme

뷰에 중복되어 사용되는 속성 값을 하나로 모을 수 있다.

style.xml 파일 만들기

style.xml에 style 추가하기 - /res/values/style.xml

<resources>
    <style name="SumiStyle">
        <item name="android:textColor">@color/black</item>
        <item name="android:textSize">20sp</item>
    </style>
</resources>

뷰에 스타일 지정

<Button 
	style="@style/SumiStyle" />

Theme(스타일을 테마로 적용)

스타일을 만들 때와 동일한 방식으로 테마를 만들 수 있습니다. 차이점은 적용 방식입니다. 뷰에서 style 속성으로 스타일을 적용하는 대신 AndroidManifest.xml 파일의 application 태그 또는 activity 태그에서 android:theme 속성으로 테마를 적용합니다.

예를 들어 다음은 Android 지원 라이브러리의 머티리얼 디자인 '어두운' 테마를 앱 전체에 적용하는 방법입니다.

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

다음은 하나의 활동에만 '밝은' 테마를 적용하는 방법입니다.

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

Style과 Theme

profile
sumi Yoo
이전 포스트

운영체제

다음 포스트

프로그래밍

0개의 댓글