[移动开发] Android开发之仿微信底部导航切换(Compose版本)附加源码下载

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> Android开发之仿微信底部导航切换(Compose版本)附加源码下载 -> 正文阅读

[移动开发]Android开发之仿微信底部导航切换(Compose版本)附加源码下载

老套路，先上(献上)效果图

实际上这个页面在Android开发中太常见了。所以学些了下Compose版本

说下核心：

1.需要记录每次切换的页面position

 var currentNavigationIndex by remember {
        mutableStateOf(0)
    }

2.使用对应的导航小部件BottomNavigation

本文中重点笔记如上，现在来看下完整代码

首页代码

package com.example.composelearning

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.composelearning.ui.page.HomeFrame
import com.example.composelearning.ui.theme.ComposeLearningTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeLearningTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) { HomeFrame() }
            }
        }
    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun DefaultPreview() {
    ComposeLearningTheme {
        HomeFrame()
    }
}

HomeFrame部件

package com.example.composelearning.ui.page

import android.annotation.SuppressLint
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.absolutePadding
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.DateRange
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Person
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import com.example.composelearning.model.BottomNavigationItem

@Composable
fun HomeFrame() {
    //首页底部的标题title
    val homeString = listOf("学习", "任务", "菜单", "我的")
    //标题对应底部的四个tab
    val bottomNavigationItems = listOf(
        BottomNavigationItem(homeString[0], Icons.Filled.Home),
        BottomNavigationItem(homeString[1], Icons.Filled.DateRange),
        BottomNavigationItem(homeString[2], Icons.Filled.Menu),
        BottomNavigationItem(homeString[3], Icons.Filled.Person)
    )
    var currentNavigationIndex by remember {
        mutableStateOf(0)
    }

    Scaffold(bottomBar = {
        BottomNavigation(backgroundColor = MaterialTheme.colors.surface) {
            bottomNavigationItems.forEachIndexed { index, bottomNavigationItem ->
                BottomNavigationItem(
                    selected = currentNavigationIndex == index,
                    onClick = { currentNavigationIndex = index },
                    icon = {
                        Icon(imageVector = bottomNavigationItem.icon, contentDescription = null)
                    },
                    label = {
                        Text(text = bottomNavigationItem.title)
                    },
                    selectedContentColor = Color(0xFF149ee7),
                    unselectedContentColor = Color(0xFF999999),
                    alwaysShowLabel = true
                )
            }
        }
    }) {
        when (currentNavigationIndex) {
            0 -> StudyScreen()
            1 -> TaskScreen()
            2 -> MenuScreen()
            3 -> MineScreen()
        }
    }
}

再看下对应的四个TextView四个写法都一样，改下名字即可

package com.example.composelearning.ui.page

import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun StudyScreen() {
    Text(text = "学习页面")
}

@Preview
@Composable
fun StudyScreenPreview() {
    StudyScreen()
}

好了完整代码基本如上

此文章源码下载：源码下载

整个Compose学习源码下载：GitHub下载