Android 24)JetPackビュー(2)

Toolbar

1. Toolbar

ツールバーには、開発者が使用できるように

ビューが用意されています.

ツールバーはActionBarの目的と同じです

アクションバーは、アクティブウィンドウが自動的に出力アクティブコンポーネント

である.

ツールバーは、開発者が制御するビュー

である.
開発者がコンテンツ領域を制御する必要がある場合には

を用いる、例えば、ユーザがコンテンツ領域をスクロールできるようにする場合には

を用いる.
2.Toolbarの使い方
1)アクションバー出力を無効にする

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.AndroidEx"
    parent="Theme.MaterialComponents.DayNight.NoActionBar">
    ...

values>themes.xmlのアクションバーを画面

に出力しないように設定.
2)XMLファイルにToolbarを登録する

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.MaterialComponents.Toolbar.Primary" />

3)Toolbarの適用

setSupportActionBar(binding.toolbar)

setSupportActionBar(binding.toolbar)構文は、アクティブなアクションバー(title、action item、menuなど)に適用され、ツールバーに適用されます.

FloatingActionButton

1. ExtendedFloatingActionButton

フローティングボタンビュー

はFloatingActionButtonビューを提供し、

でよく使用される.

ExtendedFloatingActionButtonは、FloatingActionButtonと同じ目的またはボタンを文字列の

に出力することができる.
2.ExtendedFloatingActionButtonの使用方法
1)レイアウトの登録

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:text="extended FAB"
    app:icon="@android:drawable/ic_input_add"/>

画像が

icon属性であることを指定すると、画像を画面上に囲んで出力

を空にすることができる.

のテキスト情報を指定する、icon情報のみを指定する場合は円形

である.
2)ActivityでClickイベントを作成する

binding.fab.setOnClickListener {
    when(binding.fab.isExtended) {
        true -> binding.fab.shrink()
        false -> binding.fab.extend()
    }
}

コードでは、タッチは文字列に拡張されたり、アイコンに折り畳まれたりすることができます.

DrawerLayout

1. DrawerLayout

DrawerLayoutは、アクティブな画面に表示されないコンテンツが左側または右側でユーザーswifeイベントに引き付けられる

の機能を提供します.
2.DrawerLayoutの使い方
1)レイアウトの登録

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <LinearLayout ...>
        ...
    </LinearLayout>
    
    <TextView
        android:layout_gravity="start"/>
</androidx.drawerlayout.widget.DrawerLayout>

レイアウトXMLファイルDrawerが出力すべきルートタグをDrawerLayoutと宣言

DrawerLayoutの下に2つのビュー宣言があります

は、第1のサブタグ部分をアクティブスクリーン

に出力する.

第2サブタブ部分が見えずに引きずり出され、

が出力される.

android:layout gravityプロパティ値を使用して画面の方向を指定
指定

左、右、start、

start値を与えると、言語の書く方向に応じて、

が左、右から自動的に決定される.
2)切替ボタン

toggle = ActionBarDrawerToggle(this, binding.drawer, R.string.drawer_opened, R.string.drawer_closed)

supportActionBar?.setDisplayHomeAsUpEnabled(true)
// 스와이프로 열고 닫을 때와 토글 버튼으로 열고 닫을 때를 싱크 맞추기 위한 것
toggle.syncState()

// 토글 버튼이 메뉴 취급이 되어서 메뉴에서 실행되는 onOptionsItemSelected 함수가 실행
// onOptinosItemSelected가 토글에서 실행되면 메뉴에서의 로직이 실행되지 않도록 처리
override fun onOptionsItemSelected(item:MenuItem): Boolean {
    if(toggle.onOptionItemSelected(item)) {
        return true
    }
    return super.onOptionsItemSelected(item)
}

DrawerLayoutは

swifeで再生できるが、通常はツールバー領域に切替ボタン

が付随する.

drawer切替ボタンActionBarDrawerToggleクラスより提供
3. NavigationView

<com.google.android.material.navigation.NavigationView
    android:id="@+id/main_drawer_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    // header 부분의 xml 파일 지정
    app:headerLayout="@layout/navigation_header"
    // menu 부분의 xml 파일 지정
    app:menu="@menu/menu_navigation" />

アイテムを一覧表示する画面を設定する場合は、前述のようにNavigationViewを使用します.

NavigationViewはDrawerLayoutが引き付けて出力する部分のビュー

である.