jetpack compose实战——TopAppBar的使用和

2022-05-04 本文已影响0人 Peakmain

前言

项目地址：https://github.com/Peakmain/ComposeProject
上篇文章我们讲到基本框架搭建，这篇我们讲讲TopAppBar的使用和封装

TopAppBar的使用

源码

有两个源码，我们看其中一个

@Composable
fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable (() -> Unit)? = null,
    actions: @Composable RowScope.() -> Unit = {},
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation
)

title:标题
navigationIcon：左边图标
actions：右边图标
backgroundColor：背景颜色
contentColor:内容区域的颜色，包括Icon,Text等
elevation:阴影

image.png

       Scaffold(topBar = {
           TopAppBar(title = {
               Text(text = "我是系统的TopAppBar")
           },navigationIcon = {
               Icon(imageVector = Icons.Default.ArrowBack, contentDescription = null)
           },actions = {
               Icon(imageVector = Icons.Default.Add, contentDescription = null)
           })
       })

上面我们看的是参数源码，我们看下方法体的源码

fun TopAppBar(
...
) {
    AppBar(
        backgroundColor,
        contentColor,
        elevation,
        AppBarDefaults.ContentPadding,
        RectangleShape,
        modifier
    ) {
        if (navigationIcon == null) {//👈🏻①
            Spacer(TitleInsetWithoutIcon)
        } else {
            //👈🏻②
            Row(TitleIconModifier, verticalAlignment = Alignment.CenterVertically) {
                CompositionLocalProvider(
                    LocalContentAlpha provides ContentAlpha.high,
                    content = navigationIcon
                )
            }
        }

        Row(
       //注释③
            Modifier.fillMaxHeight().weight(1f),
            verticalAlignment = Alignment.CenterVertically
        ) {
            ProvideTextStyle(value = MaterialTheme.typography.h6) {
                CompositionLocalProvider(
                    LocalContentAlpha provides ContentAlpha.high,
                    content = title
                )
            }
        }
      //注释④
        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
            Row(
                Modifier.fillMaxHeight(),
                horizontalArrangement = Arrangement.End,
                verticalAlignment = Alignment.CenterVertically,
                content = actions
            )
        }
    }
}

我们看到AppBar有个默认padding值是AppBarDefaults.ContentPadding=4.dp,AppBar的默认高度是56dp

image.png
我们看注释①

private val AppBarHorizontalPadding = 4.dp
private val TitleInsetWithoutIcon = Modifier.width(16.dp - AppBarHorizontalPadding)

我们可以看到，如果左边没有图标，那么它会设置一个12dp的空白区域

tips:Spacer空白区域，通过 modifier 设置空白区域的大小

注释②
- 如果左边返回按钮不为空，那么就会执行我们创建的navigationIcon,只是默认设置成了垂直居中
- CompositionLocalProvider大家可以先理解成只是用来传递数据的，后面会介绍到
- TitleIconModifier源码

private val AppBarHorizontalPadding = 4.dp
private val TitleIconModifier = Modifier.fillMaxHeight()
    .width(72.dp - AppBarHorizontalPadding)

设置naviationIcon的大小为68.dp

注释③：我们可以看到它实际设置了weight=1，那也就是说，如果有左图标或者右图标，那么文字其实并不会居中，而是填满剩余部分，然后垂直居中
注释④，默认是居右，然后有4dp的距离

所以代码其实等价于

     Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .background(Color_149EE7)
                    .padding(4.dp),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Row(modifier = Modifier
                    .fillMaxHeight()
                    .width(68.dp)
                    .background(Color.Red),
                    verticalAlignment = Alignment.CenterVertically) {
                    CompositionLocalProvider(
                        LocalContentAlpha provides ContentAlpha.high,
                        content = {
                            Icon(imageVector = Icons.Default.ArrowBack,
                                contentDescription = null,
                                tint = Color.White)
                        }
                    )
                }
                Row(
                    Modifier
                        .fillMaxHeight()
                        .weight(1f),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    ProvideTextStyle(value = MaterialTheme.typography.h6) {
                        CompositionLocalProvider(
                            LocalContentAlpha provides ContentAlpha.high,
                            content = {
                                Text(text = "我是自定义的TopAppBar", color = Color.White)
                            }
                        )
                    }
                }
                CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
                    Row(
                        Modifier.fillMaxHeight(),
                        horizontalArrangement = Arrangement.End,
                        verticalAlignment = Alignment.CenterVertically,
                        content = {
                            Icon(
                                imageVector = Icons.Default.Add,
                                contentDescription = null,
                                modifier = Modifier.background(Color.Blue),
                                tint = Color.White
                            )
                        }
                    )
                }
          }

image.png

存在的问题

想要的效果:首页的文字居中，如下图

image.png
上面我们分析知道title实际设置了weight=1，当左边有图标的时候，文字设置居中实际是模块居中，而不是标题文本内容居中

image.png

如上图，"封装首页"其实才是我们想要的效果，"系统首页"是现有的TopAppBar的样式。那么想达到我们想要的效果应该怎么做呢？在封装前我们还需要了解一个控件ConstraintLayout

ConstraintLayout的使用

ConstraintLayout 可以让组件相对屏幕或其他同级组件进行布局，减少 Row、Column、Box 布局的互相嵌套。
想要在项目中使用ConstraintLayout，必须在build.gradle 中增加依赖,我的放在library中

  api "androidx.constraintlayout:constraintlayout-compose:1.0.0"

用法：constraintlayout使用有两种方式，我这里主要介绍一种方式，大家可以自行查询你第二种方式

给 ConstraintsLayout 设置 ContraintSet
通过 createRefs 或 createRefFor 创建引用，每一个组件需要有一个引用
通过设置 layoutId 来关联组件
contraintSet中constrain的body块使用linkto等设置约束
parent 是默认的父组件的引用，可以直接使用

 val constraintSet = ConstraintSet {
     val ceshi1 = createRefFor("ceshi1")
     val ceshi2 = createRefFor("ceshi2")
     constrain(ceshi1) {
         start.linkTo(parent.start)
         end.linkTo(parent.end)
         top.linkTo(parent.top)
         bottom.linkTo(parent.bottom)
     }
     constrain(ceshi2) {
         top.linkTo(parent.top)
         bottom.linkTo(parent.bottom)
     }
 }
 ConstraintLayout(constraintSet,
     Modifier
         .height(56.dp)
         .background(Color.Red)
         .fillMaxWidth()) {
     Text(
         text = "测试11",
         modifier = Modifier.layoutId("ceshi1"),
         color = Color.White
     )
     Text(
         text = "测试12",
         modifier = Modifier.layoutId("ceshi2"),
         color = Color.White
     )
}

效果如图

image.png

TopAppBar的封装

结合上面分析，我们的需要注意几点:
1.TopAppBar的高度是56dp
2.TopAppBar的两边的间距是4dp

直接贴代码

@Composable
fun TopAppBarCenter(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable (() -> Unit)? = null,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    actions: @Composable RowScope.() -> Unit = {},
    content: @Composable (PaddingValues) -> Unit
) {
   Scaffold(topBar = {
       val constraintSet = ConstraintSet {
           val titleRef = createRefFor("title")
           val navigationIconRef = createRefFor("navigationIcon")
           val actionsRef = createRefFor("actions")
           constrain(titleRef) {
               start.linkTo(parent.start)
               end.linkTo(parent.end)
               top.linkTo(parent.top)
               bottom.linkTo(parent.bottom)
           }
           constrain(navigationIconRef) {
               top.linkTo(parent.top)
               bottom.linkTo(parent.bottom)
           }
           constrain(actionsRef){
               top.linkTo(parent.top)
               bottom.linkTo(parent.bottom)
               end.linkTo(parent.end)
           }
       }
       ConstraintLayout(constraintSet,
           modifier = Modifier
               .fillMaxWidth()
               .background(backgroundColor)
               .height(TopAppBarHeight)
               .then(modifier)) {
           Box(
               Modifier
                   .layoutId("title")
                   .padding(horizontal = 4.dp)
           ) {
               ProvideTextStyle(value = MaterialTheme.typography.h6) {
                   CompositionLocalProvider(
                       LocalContentAlpha provides ContentAlpha.high,
                       content = title
                   )
               }
           }
           if (navigationIcon != null) {
               Box(modifier = Modifier
                   .layoutId("navigationIcon")
                   .padding(start = 4.dp)) {
                   CompositionLocalProvider(
                       LocalContentAlpha provides ContentAlpha.high,
                       content = navigationIcon
                   )
               }
           }
           Row(
               Modifier.layoutId("actions").padding(end = 4.dp),
               content = actions
           )

       }
   }) {
        content(it)
   }

}

使用就非常简单了

    TopAppBarCenter(title = {
        Text(text = "封装首页", color = Color.White)
    }, navigationIcon = {
        Icon(imageVector = Icons.Default.ArrowBack,
            contentDescription = null,
            tint = Color.White)
    }, actions = {
        Icon(imageVector = Icons.Default.Add, contentDescription = null, tint = Color.White)
    }) {
        //绘制内容区
        Text(text = "我是首页")
    }

沉浸式状态栏

首先开启沉浸式状态栏

//MainActivity
//设置沉浸式状态栏
WindowCompat.setDecorFitsSystemWindows(window, false)

1、如果是沉浸式状态栏，那么我们需要将状态栏设置透明
- 这里对状态栏设置我们用到Google的库 System UI Controller for Jetpack - Compose
- 添加依赖

    def accompanist_version = "0.24.7-alpha"
    api "com.google.accompanist:accompanist-systemuicontroller:${accompanist_version}"

使用

        val systemUiController = rememberSystemUiController()
        SideEffect {
            systemUiController.setSystemBarsColor(
                color = Color.Transparent,
                darkIcons = darkIcons
            )
        }

2、获取状态栏的高度，原本TopAppStatus的高度+状态栏的高度

//获取状态栏的高度
 with(LocalContext.current) {
     statusBarHeight =
         resources.getDimensionPixelSize(resources.getIdentifier("status_bar_height",
             "dimen",
             "android"))
 }
 with(LocalDensity.current) {
     statusBarHeightDp = statusBarHeight.toDp()
 }

3、设置padding（top=状态栏的高度）

      ConstraintLayout(constraintSet, modifier = Modifier
            .fillMaxWidth()
            .background(backgroundColor)
            .height(topAppBarHeight + statusBarHeightDp)
            .padding(top = statusBarHeightDp) //设置padding（top=状态栏的高度）
            .then(modifier))

效果如下

image.png

但是当我们把虚拟导航栏打开，我们再看看效果

image.png
我们我们发现下方的BottomNavigation被挡住了，怎么解决呢？这时候我们需要用到另一个Google的库, Insets for Jetpack Compose

添加依赖

    api "com.google.accompanist:accompanist-insets:$accompanist_version"

修改BottomNavigation，添加modifier

  BottomNavigation(backgroundColor = MaterialTheme.colors.surface
                , modifier = Modifier.navigationBarsPadding()

运行起来看下效果

image.png

总结

我们首先对TopAppBar的源码进行分析，我们发现原有的TopAppBar并不能满足我们的需求，于是我们自己重写了一个TopAppBar,使用的技术其实也很简单，主要就是使用到了ConstraintLayout。关于沉浸式呢，我们用的都是Google自带的库，用起来也是非常简单。
至此，我们的TopAppBar的封装已经结束了，下篇将介绍Banner图的使用和封装。
最后贴下TopAppBar的源码地址TopAppBar.kt

jetpack compose实战——TopAppBar的使用和

前言

TopAppBar的使用

源码

ConstraintLayout的使用

TopAppBar的封装

沉浸式状态栏

总结

猜你喜欢

热点阅读