Android Compose Bloom 项目实战 (一) : 项目说明与配置
1. 项目介绍
Bloom
是谷歌 AndroidDevChallenge
(Android 开发挑战赛) 中的一期活动,目的是为了推广Compose
,非常适合用来练手,通过这个项目,我们可以很好的入门Compose
。本文介绍了如何从零开始,开发这个Compose项目。
设计稿和素材的下载地址 :
Android Compose Bloom 素材
其中,有个Bloom.pdf
,里面是Bloom
项目所需的UI设计稿。
我们要实现的效果如下所示,可以看到,一共有三个页面 : 欢迎页、登录页和主页。
当然也可以直接运行项目Demo的源码,看一下效果 : ComposeBloom源码地址
2. 新建项目
首先,我们需要新建一个Compose
项目,这里选择Empty Compose Activity
这里项目名取为Bloom
,包名我取为com.heiko.bloom
3. 配置素材
看Bloom PDF
的第一页,有我们所需要的素材
3.1 配置颜色、字体和形状
3.1.1 配置颜色
我们打开com.heiko.bloom.ui.theme
包名下的Color.kt
,复制如下内容
package com.heiko.bloom.ui.themeimport androidx.compose.ui.graphics.Colorval Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)val pink100 = Color(0xFFFFF1F1)
val pink900 = Color(0xFF3F2C2C)
val white = Color(0xFFFFFFFF)
val white850 = Color(0xD9FFFFFF)
val gray = Color(0xFF232323)
3.1.2 配置字体
在res
文件夹下新建font
文件夹,将这几个字体放到该文件夹下
然后,打开com.heiko.bloom.ui.theme
包名下的Type.kt
,复制如下内容
package com.heiko.bloom.ui.themeimport androidx.compose.material.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.android.style.LetterSpacingSpanEm
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import com.heiko.bloom.R// Set of Material typography styles to start with
val Typography = Typography(body1 = TextStyle(fontFamily = FontFamily.Default, fontWeight = FontWeight.Normal, fontSize = 16.sp)
)val nunitoSansFamily = FontFamily(Font(R.font.nunitosans_light, FontWeight.Light),Font(R.font.nunitosans_semibold, FontWeight.SemiBold),Font(R.font.nunitosans_bold, FontWeight.Bold)
)val h1 = TextStyle(fontSize = 18.sp, fontFamily = nunitoSansFamily, fontWeight = FontWeight.Bold
)val h2 = TextStyle(fontSize = 14.sp,fontFamily = nunitoSansFamily,letterSpacing = 0.15.sp,fontWeight = FontWeight.Bold
)val subtitle1 = TextStyle(fontSize = 16.sp, fontFamily = nunitoSansFamily, fontWeight = FontWeight.Light
)val body1 = TextStyle(fontSize = 14.sp, fontFamily = nunitoSansFamily, fontWeight = FontWeight.Light
)val body2 = TextStyle(fontSize = 12.sp, fontFamily = nunitoSansFamily, fontWeight = FontWeight.Light
)val button = TextStyle(fontSize = 14.sp, fontFamily = nunitoSansFamily, fontWeight = FontWeight.SemiBold
)val caption = TextStyle(fontSize = 12.sp, fontFamily = nunitoSansFamily, fontWeight = FontWeight.SemiBold
)
3.1.3 配置形状
打开com.heiko.bloom.ui.theme
包名下的Shape.kt
,复制如下内容
package com.heiko.bloom.ui.themeimport androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Shapes
import androidx.compose.ui.unit.dpval Shapes = Shapes(small = RoundedCornerShape(4.dp),medium = RoundedCornerShape(4.dp),large = RoundedCornerShape(0.dp)
)val small = RoundedCornerShape(4.dp)
val medium = RoundedCornerShape(24.dp)
3.2 添加资源文件
复制矢量图片到drawable
文件夹下
复制JPEG
图片到drawable-xxhdpi
文件夹下
3.3 配置沉浸式状态栏
如果不配置这几行代码,状态栏会有特定颜色,这和UI稿不一致,所以我们需要将配置下沉浸式状态栏。
在MainActivity
的onCreate
方法中的最前面(位于setContent{}
前面),添加如下代码
//DecorView不再为SystemUI(状态栏和导航栏等)预留Padding
WindowCompat.setDecorFitsSystemWindows(window, false)
val controller = WindowCompat.getInsetsController(window, window.decorView)
//状态栏设为亮色 (状态栏的文字、图标颜色为暗色)
controller?.isAppearanceLightStatusBars = true
在style.xml
中添加修改主题,并配置到AndroidManifest.xml
中
<style name="Theme.Bloom" parent="android:Theme.Material.Light.NoActionBar"><!--把状态栏设置为透明色--><item name="android:statusBarColor">#00000000</item>
</style>
AndroidManifest.xml
<activityandroid:name=".MainActivity"android:exported="true"android:label="@string/app_name"android:theme="@style/Theme.Bloom"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter>
</activity>
我们再运行项目
可以看到,状态栏已经是透明色了,而且Hello Android
这个Text
的位置已经到了最顶上,和状态栏重叠了。这样我们的目的就达到了,我们可以将图片背景之类的设置在整个页面中,状态栏和其他布局融为一体,达到沉浸式状态的效果。
至此,我们就完成了项目的配置,接下来,我们就要来开发欢迎页了,这个会在下一篇文章中进行介绍
Compose 项目实战 系列文章
Android Compose Bloom 项目实战 (一) : 项目说明与配置
Android Compose Bloom 项目实战 (二) : 欢迎页
Android Compose Bloom 项目实战 (三) : 登录页
Android Compose Bloom 项目实战 (四) : 主页
Android Compose Bloom 项目实战 (一) : 项目说明与配置相关推荐
- Android游戏开发项目实战
Android游戏开发项目实战: 手机游戏开发工程师培训教程(Android4.3.Cocos2d-x.Untity2D/3D.跨平台引擎技术) 课程讲师:厉风行 课程分类:游戏开发 适合人群:初级 ...
- 【转载】Android音频(7)——项目实战——耳麦插拔
Android音频(7)--项目实战--耳麦插拔 7.4.3 声音路由切换实例分析 · 深入理解Android:卷1 · 看云 一.驱动程序上报耳麦拔插事件 1. 在有些Android版本中并不会在状 ...
- C# Xamarin For Android移动开发项目实战篇
一.课程介绍 在前面阿笨的<C# Xamarin移动开发基础进修篇>课程中,大家已经熟悉和了解了Xamarin移动App开发的基础知识和原理.本次分享课<C# Xamarin移动开发 ...
- 连连看项目实战之三(解析配置表)
推荐阅读: 我的CSDN 我的博客园 QQ群:704621321 这是一款连连看,如果只能连连,那估计大家看看就没兴趣了.如果在里面加上一些场景式对话,那么可能就会有意思许多. 今天就带大家学习Uni ...
- android游戏开发项目实战——数独
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 一.程序 ...
- Android手机应用商城项目,Android手机助手项目实战:从0开发一款自己的应用商店...
|- 资源.rar – 13.00 kB |- 直播-课时17-直播发起-定位实现.avi – 220.60 MB |- 手机助手课时57-主题详情.avi – 558.30 MB |- 手机助手课时 ...
- 【Android入门到项目实战-- 10.1】—— jsoup的详细使用教程
目录 一.jsoup介绍 二.jsoup的使用 1.导入依赖 2.建立连接 3.获取数据 获取各节点的方法 1)获取文字 2)获取图片 一.jsoup介绍 Jsoup是一款Java的html解析工具. ...
- linux怎么配置yolo环境,【项目实战】 YOLOv5 安装配置及简单使用
目录 配置环境 Ubuntu18.04 本篇创建虚拟环境training_pytorch,并安装python3.8.5,torch1.7.1进行yolov5环境的配置. 所需依赖的安装,并没有遇到别的 ...
- android简单app实例_Android安卓小项目实战视频教程集锦
Android安卓小项目实战视频教程,点击进入视频教程: 一.安卓项目视频教程: 1蓝牙聊天APP介绍-分步骤介绍一个简单安卓蓝牙APP的开发过程 - 西瓜视频 2蓝牙聊天开发流程-分步骤介绍一个简单 ...
最新文章
- 机架搭建_【新阁教育】穷学上位机系列——搭建STEP7仿真环境
- 在一个tomcat 里面 两个相同的项目不能同时运行??
- Linux做软raid10,51CTO博客-专业IT技术博客创作平台-技术成就梦想
- jquery 验证小数点后几位_利用jquery实现验证输入的是否是数字、小数,包含保留几位小数...
- mysql表 c#实体类,创建基于MySQL表中的C#类
- GDB调试技术(二)
- i2c通信 msp430g2553_msp430g2553的IIC通信
- Python生成大量随机人员信息
- JAVA ANDROID SOCKET通信检测(SERVER)连接是否断开
- 电脑上计算机软件一直自动弹出,win7系统开机一直自动弹出计算器窗口怎么解决...
- 高等数学第七版pdf
- 鼠标键盘录制工具 脚本录制器 游戏脚本录制工具
- POE 网络变压器 Pulse 普思
- 如何将npy导入matlab,如何在Matlab中读取.npy文件(How to read .npy files in Matlab)
- 如何通过简书引流(简书引流之标题的重要性)万能的小胡
- Vue本地项目实现其他局域网电脑在线访问
- JAVA语言对接报警类语音通知接口demo示例
- 抓不住的年终奖,守不住的头发
- 继承 封装 多态 (基础)描述性理解
- 坏小子军团Stary造了一块电动滑板,想帮你用最低的代价去耍(zhuang)酷(bi)