From 890af8cfcdb43dc93dfc7f44255f9ee49395e8d8 Mon Sep 17 00:00:00 2001
From: pan <1029559041@qq.com>
Date: Sun, 9 May 2021 02:36:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E7=95=8C=E9=9D=A2UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
app/build.gradle.kts | 2 +
.../java/com/gyf/csams/TestPreview.kt | 156 ++++++++++++
app/src/main/java/com/gyf/csams/ui/Base.kt | 65 ++++-
.../java/com/gyf/csams/ui/MainActivity.kt | 232 ++++++++++++++++--
app/src/main/res/drawable/ic_account.xml | 9 +
app/src/main/res/drawable/ic_account_fill.xml | 9 +
app/src/main/res/drawable/ic_all.xml | 9 +
app/src/main/res/drawable/ic_all_fill.xml | 9 +
app/src/main/res/drawable/ic_comments.xml | 9 +
app/src/main/res/drawable/ic_home.xml | 9 +
app/src/main/res/drawable/ic_home_fill.xml | 9 +
app/src/main/res/drawable/ic_notification.xml | 9 +
12 files changed, 511 insertions(+), 16 deletions(-)
create mode 100644 app/src/androidTest/java/com/gyf/csams/TestPreview.kt
create mode 100644 app/src/main/res/drawable/ic_account.xml
create mode 100644 app/src/main/res/drawable/ic_account_fill.xml
create mode 100644 app/src/main/res/drawable/ic_all.xml
create mode 100644 app/src/main/res/drawable/ic_all_fill.xml
create mode 100644 app/src/main/res/drawable/ic_comments.xml
create mode 100644 app/src/main/res/drawable/ic_home.xml
create mode 100644 app/src/main/res/drawable/ic_home_fill.xml
create mode 100644 app/src/main/res/drawable/ic_notification.xml
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index 0ceb916..436d7b4 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -129,6 +129,8 @@ dependencies {
kapt("androidx.room:room-compiler:${rootProject.extra["room_version"]}")
// optional - Kotlin Extensions and Coroutines support for Room
implementation("androidx.room:room-ktx:${rootProject.extra["room_version"]}")
+ //
+ implementation("androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha03")
// optional - Test helpers
testImplementation("androidx.room:room-testing:${rootProject.extra["room_version"]}")
//测试
diff --git a/app/src/androidTest/java/com/gyf/csams/TestPreview.kt b/app/src/androidTest/java/com/gyf/csams/TestPreview.kt
new file mode 100644
index 0000000..ca25fb6
--- /dev/null
+++ b/app/src/androidTest/java/com/gyf/csams/TestPreview.kt
@@ -0,0 +1,156 @@
+package com.gyf.csams
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.rotate
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+
+@Composable
+fun BoxSetSize(degrees:Float=0F,content: @Composable BoxScope.() -> Unit){
+ Box(modifier = Modifier
+ .height(300.dp)
+ .fillMaxWidth()
+ .background(Color.Gray)
+ .rotate(degrees = degrees),contentAlignment = Alignment.Center){
+ Canvas(modifier = Modifier.size(200.dp)) {
+ rotate(45f){
+ drawRect(color = Color.Cyan)
+ }
+ }
+ content()
+ }
+}
+
+@Composable
+fun BoxFillSize(degrees:Float=0F, content: @Composable BoxScope.() -> Unit){
+ Box(modifier = Modifier
+ .fillMaxSize()
+ .background(Color.LightGray)
+ .rotate(degrees = degrees),contentAlignment = Alignment.Center){
+ Canvas(modifier = Modifier.size(100.dp)) {
+ rotate(80f){
+ drawRect(color = Color.Cyan)
+ }
+ }
+ content()
+ }
+}
+
+@Preview
+@Composable
+fun TestPreview(){
+ Column(modifier = Modifier.fillMaxSize()){
+ BoxSetSize {
+ Text(buildAnnotatedString {
+ withStyle(style = SpanStyle(fontSize = 30.sp)){
+ append("前置子布局固定尺寸")
+ }
+ })
+ }
+
+ BoxFillSize {
+ Text(buildAnnotatedString {
+ withStyle(style = SpanStyle(fontSize = 30.sp)){
+ append("后置子布局使用")
+ }
+ withStyle(style = SpanStyle(color= Color.Red,fontSize = 30.sp)){
+ append("fillMaxSize修饰符")
+ }
+ withStyle(style = SpanStyle(fontSize = 30.sp)){
+ append("填充父项允许的所有可用空间")
+ }
+ })
+ }
+ }
+}
+
+@Preview
+@Composable
+fun TestPreview2(){
+ Column(modifier = Modifier.fillMaxSize()){
+ Text(buildAnnotatedString {
+ withStyle(style = SpanStyle(fontSize = 30.sp)){
+ append("如果使用示例1方法是")
+ }
+ withStyle(style = SpanStyle(color= Color.Red,fontSize = 30.sp)){
+ append("无法实现前置子布局填充父项所有可用空间，后置子布局固定尺寸")
+ }
+ withStyle(style = SpanStyle(fontSize = 30.sp)){
+ append("因为前置布局已经填充父项允许的所有可用空间，后置子布局没有剩余空间可用")
+ }
+
+ })
+
+ BoxFillSize {
+ Text(buildAnnotatedString {
+ withStyle(style = SpanStyle(fontSize = 30.sp)){
+ append("前置子布局填充父项允许的所有可用空间")
+ }
+ })
+ }
+
+ BoxSetSize {
+ Text(buildAnnotatedString {
+ withStyle(style = SpanStyle(fontSize = 30.sp)){
+ append("后置子布局固定尺寸")
+ }
+ })
+ }
+ }
+}
+
+@Preview
+@Composable
+fun TestPreview3(){
+ Column(modifier = Modifier
+ .fillMaxSize()) {
+ Text(buildAnnotatedString {
+ withStyle(style = SpanStyle(fontSize = 30.sp)){
+ append("折衷方案是通过父项旋转180°实现，子项分别旋转180°复位可")
+ }
+ withStyle(style = SpanStyle(color= Color.Red,fontSize = 30.sp)){
+ append("实现前置子布局填充父项所有可用空间，后置子布局固定尺寸")
+ }
+ withStyle(style = SpanStyle(fontSize = 30.sp)){
+ append("，除了旋转，应该有更好的实现方式？")
+ }
+ })
+ Column(modifier = Modifier.rotate(180F)){
+ BoxSetSize(degrees = 180F) {
+ Text(buildAnnotatedString {
+ withStyle(style = SpanStyle(fontSize = 30.sp)){
+ append("前置子布局固定尺寸，通过旋转和后置子布局对调位置")
+ }
+ })
+ }
+ BoxFillSize(degrees = 180F) {
+ Text(buildAnnotatedString {
+
+ withStyle(style = SpanStyle(fontSize = 30.sp)){
+ append("后置子布局使用")
+ }
+ withStyle(style = SpanStyle(color= Color.Red,fontSize = 30.sp)){
+ append("fillMaxSize修饰符")
+ }
+ withStyle(style = SpanStyle(fontSize = 30.sp)){
+ append("填充父项允许的所有可用空间，通过旋转和前置子布局对调位置")
+ }
+ })
+ }
+ }
+ }
+
+}
diff --git a/app/src/main/java/com/gyf/csams/ui/Base.kt b/app/src/main/java/com/gyf/csams/ui/Base.kt
index 007e902..869cc18 100644
--- a/app/src/main/java/com/gyf/csams/ui/Base.kt
+++ b/app/src/main/java/com/gyf/csams/ui/Base.kt
@@ -1,13 +1,22 @@
package com.gyf.csams.ui
+import androidx.annotation.DrawableRes
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.*
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
+import androidx.navigation.NavController
+import androidx.navigation.compose.navigate
+import androidx.navigation.compose.rememberNavController
+import com.gyf.csams.R
/**
* 淡入淡出并且颜色变化文本
@@ -33,9 +42,61 @@ fun AnimationText(text:String){
)
}
+/**
+ * 主菜单
+ *
+ */
+enum class MainMenu(@DrawableRes val selectedIcon:Int,
+ @DrawableRes val unSelectedIcon:Int){
+ //主页
+ Main(R.drawable.ic_home_fill,R.drawable.ic_home),
+ //社团列表
+ List(R.drawable.ic_all_fill,R.drawable.ic_all),
+ //个人中心
+ Center(R.drawable.ic_account_fill,R.drawable.ic_account)
+}
+
+@Composable
+fun MenuIconButton(_menu: MainMenu,menu: MainMenu,modifier: Modifier,onClick: () -> Unit){
+ Row(modifier = modifier
+ ,horizontalArrangement = Arrangement.Center) {
+ IconButton(onClick = onClick) {
+ Icon(
+ painter = painterResource(id = if (_menu == menu) menu.selectedIcon else menu.unSelectedIcon),
+ contentDescription = null
+ )
+ }
+ }
+}
+
+@Composable
+fun MyBottomAppBar(menu:MainMenu,nav: NavController,modifier: Modifier=Modifier){
+ BottomAppBar(backgroundColor = Color.Transparent,modifier=modifier) {
+ //图标宽度平等分
+
+ val weight=1/(MainMenu.values().size*1.0f)
+
+ Row(Modifier.fillMaxWidth()) {
+ MenuIconButton(_menu = menu,menu = MainMenu.Main,Modifier.weight(weight),
+ onClick = { nav.navigate(MainMenu.Main.name)})
+ MenuIconButton(_menu = menu,menu = MainMenu.List,Modifier.weight(weight),
+ onClick = { nav.navigate(MainMenu.List.name)})
+ MenuIconButton(_menu = menu,menu = MainMenu.Center,Modifier.weight(weight),
+ onClick = { nav.navigate(MainMenu.Center.name)})
+ }
+ }
+
+}
@Preview
@Composable
fun AnimationTextPreview(){
AnimationText(text = "6666")
+}
+
+@Preview
+@Composable
+fun MyBottomAppBarPreview(){
+ val nav= rememberNavController()
+ MyBottomAppBar(menu = MainMenu.Main,nav=nav)
}
\ No newline at end of file
diff --git a/app/src/main/java/com/gyf/csams/ui/MainActivity.kt b/app/src/main/java/com/gyf/csams/ui/MainActivity.kt
index aed0362..72b8608 100644
--- a/app/src/main/java/com/gyf/csams/ui/MainActivity.kt
+++ b/app/src/main/java/com/gyf/csams/ui/MainActivity.kt
@@ -3,40 +3,244 @@ package com.gyf.csams.ui
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.constraintlayout.compose.ConstraintLayout
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import com.gyf.csams.R
import com.gyf.csams.ui.theme.CSAMSTheme
+/**
+ * 主界面
+ *
+ */
class MainActivity: ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
CSAMSTheme {
- // A surface container using the 'background' color from the theme
- Surface(color = MaterialTheme.colors.background) {
- Row(horizontalArrangement = Arrangement.Center,
- verticalAlignment = Alignment.CenterVertically,
- modifier = Modifier.fillMaxSize()){
- AnimationText(text = "主界面设计中。。。。")
+ Body()
+ }
+ }
+ }
+}
+
+@Composable
+fun Body(){
+ // A surface container using the 'background' color from the theme
+ Surface(color = MaterialTheme.colors.background) {
+ val navController = rememberNavController()
+ val scaffoldState = rememberScaffoldState()
+
+ Scaffold(scaffoldState=scaffoldState) {
+ NavHost(navController, startDestination = MainMenu.Main.name) {
+ composable(MainMenu.Main.name){
+ Box(modifier = Modifier.fillMaxSize()) {
+ Column {
+ Notification()
+ MessageBoard()
+ Spacer(modifier = Modifier.height(10.dp))
+ ClubActivitiesTitle()
+ Spacer(modifier = Modifier.height(10.dp))
+ Column(Modifier.rotate(180F)) {
+ MyBottomAppBar(MainMenu.Main, navController,Modifier.rotate(180F))
+ ClubActivitiesImage()
+ }
+ }
+ }
+ }
+ composable(MainMenu.List.name){
+ Box(modifier = Modifier.fillMaxSize()) {
+ Column(Modifier.rotate(180F)){
+ MyBottomAppBar(MainMenu.List, navController,Modifier.rotate(180F))
+ Row(modifier = Modifier
+ .fillMaxSize()
+ .rotate(180F),
+ horizontalArrangement = Arrangement.Center,
+ verticalAlignment = Alignment.CenterVertically) {
+ AnimationText(text = "社团列表")
+ }
+ }
+ }
+ }
+ composable(MainMenu.Center.name){
+ Box(modifier = Modifier.fillMaxSize()) {
+ Column(Modifier.rotate(180F)){
+ MyBottomAppBar(MainMenu.Center, navController,Modifier.rotate(180F))
+ Row(modifier = Modifier
+ .fillMaxSize()
+ .rotate(180F),
+ horizontalArrangement = Arrangement.Center,
+ verticalAlignment = Alignment.CenterVertically) {
+ AnimationText(text = "个人中心")
+ }
+ }
}
}
}
}
+
}
}
-@Preview(showBackground = true)
+/**
+ * 通知
+ *
+ */
+@Composable
+fun Notification(){
+ Row(horizontalArrangement = Arrangement.End,
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(10.dp)) {
+ Icon(painter = painterResource(id = R.drawable.ic_notification),
+ contentDescription = null,
+ modifier = Modifier.size(50.dp))
+ }
+}
+
+/**
+ * 圆角矩形边框
+ *
+ */
+@Composable
+fun MyBorder(content: @Composable BoxScope.() -> Unit){
+ Box(modifier = Modifier.padding(horizontal = 15.dp)) {
+ Box(
+ modifier = Modifier
+ .border(width = 1.dp, color = Color.Black, shape = RoundedCornerShape(size = 20.dp)),
+ ){
+ content()
+ }
+ }
+}
+
+/**
+ * 留言板
+ *
+ */
+@Composable
+fun MessageBoard() {
+ MyBorder {
+ Row(modifier = Modifier.rotate(180F),
+ verticalAlignment = Alignment.CenterVertically) {
+
+ Icon(
+ painter = painterResource(id = R.drawable.ic_comments),
+ contentDescription = null,
+ modifier = Modifier
+ .size(50.dp)
+ .rotate(180F)
+ )
+ Row(
+ horizontalArrangement = Arrangement.Center,
+ modifier = Modifier
+ .fillMaxWidth()
+ .rotate(180F)
+ ) {
+ Text(text = "跑马灯留言")
+ }
+
+ }
+ }
+}
+
+/**
+ * 活动标题
+ *
+ */
+@Composable
+fun ClubActivitiesTitle(){
+ MyBorder {
+ Row(
+ modifier = Modifier
+ .fillMaxWidth()
+ .height(50.dp),
+ horizontalArrangement = Arrangement.Center,
+ verticalAlignment = Alignment.CenterVertically
+ ) {
+ Text(text = "超级课程表X滴滴出行-了不起的社团",
+ style = MaterialTheme.typography.h6,
+ overflow = TextOverflow.Ellipsis,
+ maxLines = 1)
+ }
+ }
+}
+
+/**
+ * 活动海报
+ *
+ */
+@Composable
+fun ClubActivitiesImage(){
+ Column(modifier=Modifier.fillMaxSize()) {
+ Card(modifier = Modifier
+ .weight(0.4f)
+ .fillMaxWidth()) {
+ Image(painter = painterResource(id = R.drawable.hot_activity_desc_background),
+ contentDescription = null)
+ Box(modifier = Modifier
+ .padding(horizontal = 85.dp, vertical = 30.dp)
+ .rotate(180F)){
+ Text(text = "文字对任何界面都属于核心内容，而利用 Jetpack Compose 可以更轻松地显示或写入文字。Compose 可以充分利用其构建块的组合，这意味着您无需覆盖各种属性和方法，也无需扩展大型类，即可拥有特定的可组合项设计以及按您期望的方式运行的逻辑。"
+ .repeat(10),overflow = TextOverflow.Ellipsis)
+ }
+
+ }
+ Card(modifier = Modifier
+ .weight(0.6f)
+ .fillMaxWidth()) {
+ Image(painter = painterResource(id = R.drawable.hot_activity_background),
+ contentDescription = null)
+ Image(painter = painterResource(id = R.drawable.ic_launcher_foreground),
+ contentDescription = null)
+
+ }
+ }
+}
+
+//@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
CSAMSTheme {
- // A surface container using the 'background' color from the theme
- AnimationText(text = "sdfsdf")
+ Box(modifier = Modifier.fillMaxSize()) {
+ Column {
+ ClubActivitiesImage()
+ }
+ }
+ }
+}
+
+@Preview
+@Composable
+fun ConstraintLayoutContent() {
+ Box(modifier = Modifier.background(Color.Cyan)) {
+ ConstraintLayout {
+ // Create references for the composables to constrain
+ val (button, text,text2,box) = createRefs()
+
+ Box(Modifier.fillMaxSize())
+
+ Box(Modifier.size(50.dp).background(Color.Red).constrainAs(box){
+ bottom.linkTo(parent.bottom)
+
+ end.linkTo(parent.end)
+ })
+ }
}
}
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ic_account.xml b/app/src/main/res/drawable/ic_account.xml
new file mode 100644
index 0000000..c209003
--- /dev/null
+++ b/app/src/main/res/drawable/ic_account.xml
@@ -0,0 +1,9 @@
+
+
+
diff --git a/app/src/main/res/drawable/ic_account_fill.xml b/app/src/main/res/drawable/ic_account_fill.xml
new file mode 100644
index 0000000..8d3b735
--- /dev/null
+++ b/app/src/main/res/drawable/ic_account_fill.xml
@@ -0,0 +1,9 @@
+
+
+
diff --git a/app/src/main/res/drawable/ic_all.xml b/app/src/main/res/drawable/ic_all.xml
new file mode 100644
index 0000000..83b27b0
--- /dev/null
+++ b/app/src/main/res/drawable/ic_all.xml
@@ -0,0 +1,9 @@
+
+
+
diff --git a/app/src/main/res/drawable/ic_all_fill.xml b/app/src/main/res/drawable/ic_all_fill.xml
new file mode 100644
index 0000000..1c38c96
--- /dev/null
+++ b/app/src/main/res/drawable/ic_all_fill.xml
@@ -0,0 +1,9 @@
+
+
+
diff --git a/app/src/main/res/drawable/ic_comments.xml b/app/src/main/res/drawable/ic_comments.xml
new file mode 100644
index 0000000..d5ea5e2
--- /dev/null
+++ b/app/src/main/res/drawable/ic_comments.xml
@@ -0,0 +1,9 @@
+
+
+
diff --git a/app/src/main/res/drawable/ic_home.xml b/app/src/main/res/drawable/ic_home.xml
new file mode 100644
index 0000000..df3983e
--- /dev/null
+++ b/app/src/main/res/drawable/ic_home.xml
@@ -0,0 +1,9 @@
+
+
+
diff --git a/app/src/main/res/drawable/ic_home_fill.xml b/app/src/main/res/drawable/ic_home_fill.xml
new file mode 100644
index 0000000..6b19821
--- /dev/null
+++ b/app/src/main/res/drawable/ic_home_fill.xml
@@ -0,0 +1,9 @@
+
+
+
diff --git a/app/src/main/res/drawable/ic_notification.xml b/app/src/main/res/drawable/ic_notification.xml
new file mode 100644
index 0000000..15c4247
--- /dev/null
+++ b/app/src/main/res/drawable/ic_notification.xml
@@ -0,0 +1,9 @@
+
+
+