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