0
0

bottom navigation

Posted at

以下の手順に従って、Bottom Navigationの実装を行います。1. Navigation Graphの作成:まず、Navigation Graphを作成します。これは、アプリ内の各画面やタブに対応する目的地を定義します。Android StudioのProjectウィンドウで、res フォルダーを右クリックし、New → Android Resource File を選択します。ファイル名を nav_graph.xml とし、Resource type を Navigation に設定し、OK をクリックします。Navigation Editorが開き、各画面やタブに対応するDestinationを追加します。各Destinationは、FragmentやActivityと関連付けられます。2. Menu Resourceの作成:次に、Bottom Navigationの各タブに表示されるアイコンとテキストを含むMenu Resourceを作成します。Android StudioのProjectウィンドウで、res フォルダーを右クリックし、New → Android Resource File を選択します。ファイル名を bottom_nav_menu.xml とし、Resource type を Menu に設定し、OK をクリックします。bottom_nav_menu.xmlを開き、各タブに対応するメニューアイテムを追加します。各アイテムには、アイコンとオプションでテキストを指定します。3. Activityの準備:次に、Bottom Navigationを含むActivityを作成し、Navigation GraphとMenu Resourceを関連付けます。MainActivity.ktを作成し、Navigation Graphをセットアップします。import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.navigation.NavController
import androidx.navigation.findNavController
import androidx.navigation.ui.setupWithNavController
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val navController = findNavController(R.id.nav_host_fragment)
    bottom_navigation.setupWithNavController(navController)
}

}
activity_main.xmlでBottomNavigationViewを配置します。<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:menu="@menu/bottom_nav_menu" />
これで、Bottom Navigationの基本的な実装が完了しました。必要に応じて、各Destinationに対応するFragmentやActivityを実装し、Navigation GraphとMenu Resourceを調整してください。

Navigation GraphやMenu Resourceの作成に関しては、コードを提供することはできません。これらのファイルは通常、Android Studioのビジュアルエディタを使用して作成されます。ただし、次の手順をフォローして作成することができます。Navigation Graphの作成手順:res フォルダーで右クリックして、New → Android Resource File を選択します。ファイル名を nav_graph.xml とし、Resource type を Navigation に設定し、OK をクリックします。Navigation Editorが開き、必要なDestinationを追加します。Menu Resourceの作成手順:res フォルダーで右クリックして、New → Android Resource File を選択します。ファイル名を bottom_nav_menu.xml とし、Resource type を Menu に設定し、OK をクリックします。bottom_nav_menu.xmlを開き、各タブに対応するメニューアイテムを追加します。Navigation GraphとMenu Resourceを作成した後は、次の手順に従ってActivityを準備します。提供されたコード例では、これらのファイルが既に作成されていることを前提としています。

Android StudioのKotlinでBottom Navigationのアイテム数が4つ以上になると、デフォルトの設定では各アイテムのタイトルが常に表示されなくなります。代わりに、アイテムを選択したときだけタイトルが表示されます。これはスペースの節約やデザインの簡潔さのために行われる一般的なアプローチです。ただし、タイトルを常に表示するようにカスタマイズすることも可能です。以下はその方法です:<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="@menu/bottom_navigation_menu"
app:labelVisibilityMode="labeled" />
app:labelVisibilityMode="labeled" を使用すると、タイトルが常に表示されるようになります。この方法を使用すると、Bottom Navigationのアイテム数が4つ以上でも、常にタイトルが表示されます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0