Android側(cè)邊欄Kotlin實(shí)現(xiàn)

原文鏈接https://www.shanya.world/archives/39c4da83.html

前言

本例是基于AndroidStudio以Kotlin語言開發(fā)，實(shí)現(xiàn)Android應(yīng)用中常見的側(cè)邊劃出欄。

就像下面這樣

image.png

接下來進(jìn)入實(shí)現(xiàn)部分

首先新建一個工程

image.png
image.png
image.png

添加兩個依賴

    implementation 'androidx.navigation:navigation-ui:2.0.0'
    implementation 'androidx.navigation:navigation-ui-ktx:2.0.0'
    implementation 'androidx.navigation:navigation-fragment:2.0.0'
    implementation 'androidx.navigation:navigation-fragment-ktx:2.0.0'

對 AndroidManifestest.xml 的一點(diǎn)改動

看圖片標(biāo)紅部分

image.png

這里用到了res的style，直接將這個style的代碼貼出，后續(xù)還有部分xml用到了

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>

新建一個xml顯示我的首頁內(nèi)容

image.png
image.png

需要注意的是，這里還需要對這個xml進(jìn)行一個設(shè)置，看下圖標(biāo)紅處代碼

image.png

處理完之后再看我們的圖形化界面，多出一個標(biāo)題欄

image.png

新建一個ToolBar

用系統(tǒng)自帶的ActionBar會把側(cè)邊欄擋住（我的是這樣，如果能解決請告訴我一下_）

我們先新建一個xml文件

image.png

添加一個 AppBarLayout

image.png

還需要將 content_mian.xml 這一文件 include 引入

直接放出xml代碼，更加直觀

<?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=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        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">

        </androidx.appcompat.widget.Toolbar>

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

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


</androidx.coordinatorlayout.widget.CoordinatorLayout>

同樣標(biāo)紅處需要關(guān)注一下，可能需要手動加入

image.png

制作側(cè)邊欄的表頭

這里就是簡單的 ImageView 和 TextView 的組合，就不詳細(xì)贅述了，直接放出xml代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="176dp"
    android:background="#91AD70"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="Navgaton Header"
        android:paddingTop="8dp"
        app:srcCompat="@mipmap/ic_launcher_round" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="8dp"
        android:text="Shanya"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="shanyaliux@qq.com" />

</LinearLayout>

效果圖如下

image.png

制作側(cè)邊欄的選項(xiàng)

先新建一個menu

image.png

這里僅僅是添加了幾個MenuItem，直接貼出xml代碼（這里為了好看一點(diǎn)，加了幾個Vector Assert，這個就自行添加了，反正不重要）

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

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_one"
            android:icon="@drawable/ic_looks_one_black_24dp"
            android:title="one" />
        <item
            android:id="@+id/nav_two"
            android:icon="@drawable/ic_looks_two_black_24dp"
            android:title="two" />
        <item
            android:id="@+id/nav_three"
            android:icon="@drawable/ic_looks_3_black_24dp"
            android:title="three" />
    </group>
</menu>

這里的效果圖就不好看了

image.png

activity_main.xml 的修改

首先，先把ConstraintLayout 改為 DrawerLayout

image.png
image.png

指定一個id，這個就隨意了

然后，用include 把上面做的app_bar_main.xml 文件引入

image.png

再添加一個 NavigationView ，這就是放側(cè)邊欄的容器了

image.png

記得指定id，再為它添加表頭xml，和menu（可以直接在屬性欄哪里設(shè)置）

image.png

還有一些處理，直接放代碼查看吧

<?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: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/drawer_menu" />
</androidx.drawerlayout.widget.DrawerLayout>

效果圖

image.png

菜單選項(xiàng)頁面

為了每一個菜單都有一個頁面與之對應(yīng)，建立三個 Fragment （簡單Deomo ，使用BankFragment）

image.png
image.png

重復(fù)建立三個

在res添加一個navigatin

image.png

點(diǎn)擊添加我們的 Fragment

image.png
image.png

切記一定把每一個Fragment的ID改成和其對應(yīng)的Menu選項(xiàng)一致

image.png

在 content_main.xml 文件添加上 NavHostFragment

image.png

這里就不是一個鐵憨憨，可以把那個TextView刪除了

image.png

MainActivity 代碼

package com.shanya.drawerdemo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import androidx.appcompat.widget.Toolbar
import androidx.drawerlayout.widget.DrawerLayout
import androidx.navigation.findNavController
import androidx.navigation.ui.AppBarConfiguration
import androidx.navigation.ui.navigateUp
import androidx.navigation.ui.setupActionBarWithNavController
import androidx.navigation.ui.setupWithNavController
import com.google.android.material.navigation.NavigationView

class MainActivity : AppCompatActivity() {

    private lateinit var appBarConfiguration: AppBarConfiguration

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val toolbar: Toolbar = findViewById(R.id.toolbar)
        setSupportActionBar(toolbar)

        val drawerLayout: DrawerLayout = findViewById(R.id.drawer_layout)
        val navView: NavigationView = findViewById(R.id.nav_view)
        val navController = findNavController(R.id.nav_host_fragment)

        appBarConfiguration = AppBarConfiguration(setOf(
            R.id.nav_one, R.id.nav_two, R.id.nav_three), drawerLayout)
        setupActionBarWithNavController(navController, appBarConfiguration)
        navView.setupWithNavController(navController)
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        // Inflate the menu; this adds items to the action bar if it is present.
        menuInflater.inflate(R.menu.main, menu)
        return true
    }

    override fun onSupportNavigateUp(): Boolean {
        val navController = findNavController(R.id.nav_host_fragment)
        return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
    }
}

Github源碼地址

CSDN Demo下載地址

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容