Kotlin APPのビルドにホーム主流のフレームワークDrawerLayout + NavigationView +ツールバー+ ViewPager + BottomNavigationView

プログラミング 2020-01-15 11:31:25 訪問数: null

効果

ここに画像を挿入説明

構造解析ページ

これは、比較的一般的なAPPの住宅建設、家+サイドバーで、サイドバーは、メニューの一番下で、メニューの一部、ホームコントロールコンテンツ領域です、コンテンツ領域がスライド可能サブページです。合理的な全体的に、より快適に、各配列が、一緒にリンクされ、それに加えて、公共のお気に入りであることが可能Material Designなスタイルなので、APPの家の現在の主流の構造になります。
ここに画像を挿入説明
図は、より効果的にすることができた構造を明確に、シンプルなマインドマップが複雑ではないんです。


ページレイアウト

1.ホーム

全体の大きなコンテナいます。
ここに画像を挿入説明

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".module.MainActivity"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</androidx.drawerlayout.widget.DrawerLayout>
  • DrawerLayout包まれたincludeホームページとサイドバーコンテンツNavigationView。
  • app_bar_mainホームページの内容は、参照を使用すると、混乱を避けるために、明確な構造を含みます。
  • サイドバーには、NavigationViewヘッドのレイアウトに分けheaderLayoutて、メニューmenu、レイアウトメニューであることに注意してください。
  • 、他のノートNavigationView位置があるべき主内容app_bar_main同じレベルで、及びメインコンテンツ後。
  • DrawerLayoutの大きい使用は見ることができます。DrawerLayoutの用途は詳しく説明します。

2.ホーム

ホームは、ホームページのサイドバー以外の言うことをここにあります。
ここに画像を挿入説明

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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=".module.MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </com.google.android.material.appbar.AppBarLayout>

    <include layout="@layout/content_main"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="@dimen/dp_20"
        android:layout_marginEnd="@dimen/dp_20"
        android:layout_marginBottom="@dimen/dp_70"
        app:srcCompat="@android:drawable/ic_dialog_email"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

上記の真ん中がコンテンツ領域で、タイトルで、FloatingActionButtonは無視することができます。

3.ホームページコンテンツエリア

2と同様の効果

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".module.MainActivity"
    tools:showIn="@layout/app_bar_main">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:background="?android:attr/windowBackground"
            app:layout_constraintBottom_toTopOf="@+id/viewPager"
            app:menu="@menu/bottom_navigation" />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
  • 上記でViewPager、摺動可能なコンテンツ領域の充填Fragmentサブページ。
  • 以下は、BottomNavigationView上記ViewPagerに関連付けられたメニューの下、。

紹介のページレイアウトのこの部分は、以下のコードセクションを開始しました。


コードセクション

1.サイドバー

我々はする必要がありtoolbarますが、ポップアップサイドバーの許可をクリックすることができ、サイドバーを関連付けるためのボタンを追加します。

    /**
     * Drawer关联Toolbar
     */
    private fun initActionBarDrawer() {
        val toggle = ActionBarDrawerToggle(
            this,
            drawer_layout,
            toolbar,
            R.string.navigation_drawer_open,
            R.string.navigation_drawer_close
        )
        drawer_layout.addDrawerListener(toggle)
        toggle.syncState()
    }

2.コンテンツエリア

サイドバーに関連付けられている、我々はコンテンツ領域を見て、それはコードを見ては、達成するために、サブページフラグメントViewPagerが含まれているコンテンツ領域の上に述べました

    /**
     * 初始化Fragment
     */
    private fun initFragments() {
        val viewPagerAdapter = CommonViewPagerAdapter(supportFragmentManager)
        viewPagerAdapter.addFragment(HomeFragment())
        viewPagerAdapter.addFragment(TreeFragment())
        viewPagerAdapter.addFragment(NaviFragment())
        viewPagerAdapter.addFragment(ProjectFragment())

        view_pager.offscreenPageLimit = 1
        view_pager.adapter = viewPagerAdapter
    }

イベントの処理

1.サイドバーのクリックイベント

        /**
         * 侧边栏点击事件
         */
        nav_view.setNavigationItemSelectedListener {
            // Handle navigation view item clicks here.
            when (it.itemId) {
                R.id.nav_collect -> {
                    ToastUtilKt.showToast("收藏")
                }
                R.id.nav_share -> {
                    ToastUtilKt.showToast("分享")
                }
                R.id.nav_about -> {
                    ToastUtilKt.showToast("关于")
                }
                R.id.nav_logout -> { 
                    ToastUtilKt.showToast("退出") 
                }
            }

            //关闭侧边栏
            drawer_layout.closeDrawer(GravityCompat.START)

            true
        }

するためによるとitemIdトリガイベントを決定し、サイドバーを閉じて、このステップはオプションですが、あなたはサイドバーをオフにすることはできません開いたままになります。

2.view_pagerスライディングモニター

        /**
         * view_pager 滑动监听
         */
        view_pager.addOnPageChangeListener(object : OnPageChangeListener {
            override fun onPageScrollStateChanged(state: Int) {
            }

            override fun onPageScrolled(
                position: Int,
                positionOffset: Float,
                positionOffsetPixels: Int
            ) {
            }

            override fun onPageSelected(position: Int) {
                bottom_navigation.menu.getItem(position).isChecked = true
                //设置checked为true，但是不能触发ItemSelected事件，所以滑动时也要设置一下标题
                when (position) {
                    0 -> {
                        toolbar.title = resources.getString(R.string.app_name)
                    }
                    1 -> {
                        toolbar.title = resources.getString(R.string.title_tree)
                    }
                    2 -> {
                        toolbar.title = resources.getString(R.string.title_navi)
                    }
                    else -> {
                        toolbar.title = resources.getString(R.string.title_project)
                    }
                }
            }
        })

view_pager新しいタイトルを選択して設定するメニューの対応一番下をスライドした後。

メニューをクリックしてイベントの3.bottom_navigation底

        /**
         * bottom_navigation 点击事件
         */
        bottom_navigation.setOnNavigationItemSelectedListener {
            when (it.itemId) {
                R.id.navigation_home -> {
                    view_pager.currentItem = 0
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.navigation_tree -> {
                    view_pager.currentItem = 1
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.navigation_navi -> {
                    view_pager.currentItem = 2
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.navigation_project -> {
                    view_pager.currentItem = 3
                    return@setOnNavigationItemSelectedListener true
                }
            }
            false
        }

第二段階が実際に相互されると、彼らはまた、応答view_pagerスライドの位置を許可し、メニューの一番下をクリックしてください。


この全体のセットアップがコントロールを初期化し、その後、イベントを処理するために、ページレイアウトから、完了し、全体的なアイデアは、明確に迅速に構築、小さな機能の詳細、その後、完璧なサウンド[OK]をデバッグする必要があります。


完全なコード

https://github.com/yechaoa/wanandroid_kotlin


書き込みは容易ではない、賞賛の聖歌を指すように便利です^ _ ^


yechaoaの ブログの専門家
公開された248元の記事 ・ ウォンの賞賛446 ・ ビュー690 000 +
彼のメッセージボードの 懸念

おすすめ

転載: blog.csdn.net/yechaoa/article/details/103975634
おすすめ
Apache Doris バージョン 2.0.10 が正式にリリースされました。
Open Source Daily | 大手モデルが戦争に突入、大手モデルのユニコーンが身売りしていることが明らかに; 最大のオープンソース AI コミュニティが GPU の共有に 1,000 万ドルを提供すると示唆
ランキング
ジャンゴ使用KindEditorアップロード写真
FirstOrDefault VS C＃の検索
SQL UNIONルール
VS Code は HTML スタートアップを実装し、ホット アップデート サービスを提供します
Linux プログラミング: 1. コルーチンの設計原則
目标检测的“尽头”竟是语言建模？Hinton团队提出Pix2Seq：性能优于DETR
CTFdインストールの新バージョン以降の操作および保守について話します
構造体へのポインタ出力4人の学生学生ID名前性別年齢を使用することにより
1.3.2リリース、連続ファイル同期ツールをSyncthing
PyQt5 インストールチュートリアル
アーカイブ
もっと
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)

コードワールド

© 2018 codetd.com