Android侧边栏Kotlin实现

其他 2020-03-23 09:58:47 阅读次数: 0

前言

本例是基于AndroidStudio以Kotlin语言开发，实现Android应用中常见的侧边划出栏。

就像下面这样

image.png

接下来进入实现部分

首先新建一个工程

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 的一点改动

看图片标红部分

image.png

这里用到了res的style，直接将这个style的代码贴出，后续还有部分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显示我的首页内容

image.png

image.png

需要注意的是，这里还需要对这个xml进行一个设置，看下图标红处代码

image.png

处理完之后再看我们的图形化界面，多出一个标题栏

image.png

新建一个ToolBar

用系统自带的ActionBar会把侧边栏挡住（我的是这样，如果能解决请告诉我一下_）

我们先新建一个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>

同样标红处需要关注一下，可能需要手动加入

image.png

制作侧边栏的表头

这里就是简单的 ImageView 和 TextView 的组合，就不详细赘述了，直接放出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="[email protected]" />

</LinearLayout>

效果图如下

image.png

制作侧边栏的选项

先新建一个menu

image.png

这里仅仅是添加了几个MenuItem，直接贴出xml代码（这里为了好看一点，加了几个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 ，这就是放侧边栏的容器了

image.png

记得指定id，再为它添加表头xml，和menu（可以直接在属性栏哪里设置）

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

菜单选项页面

为了每一个菜单都有一个页面与之对应，建立三个 Fragment （简单Deomo ，使用BankFragment）

image.png

image.png

重复建立三个

在res添加一个navigatin

image.png

点击添加我们的 Fragment

image.png

image.png

切记一定把每一个Fragment的ID改成和其对应的Menu选项一致

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下载地址

Shanyaliux
发布了12 篇原创文章 · 获赞 3 · 访问量 1016
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_41121080/article/details/104616859
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022