Jetpack Compose之手写分享页面

已于 2023-08-09 16:46:27 修改
阅读量1.2k 收藏 5
点赞数 10
分类专栏： android jetpack 文章标签： kotlin android android jetpack
于 2022-08-08 18:16:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shop_and_sleep/article/details/126232015
版权

文章目录

阅读本文需要一定compose基础，如果没有请移步Jetpack Compose入门详解（实时更新）

前言💎💎💎

（ps：因为是给初学者学习使用的，本文尽可能的写的比较繁琐，没有采用最佳的写法以便让代码的可读性达到最佳）

本篇文章没有资源文件，自己酌情替换

学习Jetpack Compose也有一段时间了，始终都是一些简单的小案例，或者和其他Jetpack组件结合使用，没有画过复杂的页面，这次就来实战下，先上效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/de81c9f09faf442996960b3c729264b0.jpeg

一、xml实现

上图是我用xml实现的，点击按钮过后弹出二维码分享页面，下面是xml代码

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#99000000"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/bottom_layout">

            <LinearLayout
                android:id="@+id/ll_qr_code"
                android:layout_width="@dimen/dp270"
                android:layout_height="@dimen/dp370"
                android:layout_centerInParent="true"
                android:background="@mipmap/self_qr_bg"
                android:orientation="vertical">


                <ImageView
                    android:id="@+id/iv_avatar_address"
                    android:layout_width="@dimen/dp40"
                    android:layout_height="@dimen/dp40"
                    android:layout_gravity="center"
                    android:layout_marginTop="@dimen/dp13"
                    android:src="@mipmap/ic_show_qccode_head" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="@dimen/dp4"
                    android:text="邀请你加入工队"
                    android:textColor="@color/color_1C1C1C"
                    android:textSize="@dimen/sp13" />


                <TextView
                    android:id="@+id/tv_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="@dimen/dp3"
                    android:ellipsize="end"
                    android:singleLine="true"
                    android:textColor="@color/color_969696"
                    android:textSize="@dimen/sp12" />

                <ImageView
                    android:id="@+id/iv_qr_code"
                    android:layout_width="@dimen/dp148"
                    android:layout_height="@dimen/dp148"
                    android:layout_gravity="center"
                    android:layout_marginTop="@dimen/dp45"
                    android:src="@mipmap/add" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="@dimen/dp20"
                    android:text="扫码立即加入"
                    android:textColor="@color/color_666666"
                    android:textSize="@dimen/sp12" />

            </LinearLayout>

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/bottom_layout"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dp167"
            android:layout_alignParentBottom="true"
            android:background="@drawable/shape_top_round_white_14"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/dp25"
                android:orientation="horizontal"
                android:paddingStart="@dimen/dp8"
                android:paddingEnd="@dimen/dp8">

                <TextView
                    android:id="@+id/tv_dingding"
                    android:layout_width="@dimen/dp45"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:drawableTop="@mipmap/icon_details_share_dingding"
                    android:drawablePadding="@dimen/dp8"
                    android:gravity="center_horizontal"
                    android:minWidth="@dimen/dp45"
                    android:text="钉钉"
                    android:textColor="@color/color_666666"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_qq"
                    android:layout_width="@dimen/dp45"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:drawableTop="@mipmap/icon_details_share_qq"
                    android:drawablePadding="@dimen/dp8"
                    android:gravity="center_horizontal"
                    android:text="QQ"
                    android:textColor="@color/color_666666"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_wechat"
                    android:layout_width="@dimen/dp45"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:drawableTop="@mipmap/icon_details_share_wechat"
                    android:drawablePadding="@dimen/dp8"
                    android:gravity="center_horizontal"
                    android:text="微信好友"
                    android:textColor="@color/color_666666"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_wechat_moments"
                    android:layout_width="@dimen/dp45"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:drawableTop="@mipmap/icon_details_share_wechat_moments"
                    android:drawablePadding="@dimen/dp8"
                    android:gravity="center_horizontal"
                    android:text="朋友圈"
                    android:textColor="@color/color_666666"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_copy"
                    android:layout_width="@dimen/dp45"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:drawableTop="@mipmap/icon_details_share_copy"
                    android:drawablePadding="@dimen/dp8"
                    android:gravity="center_horizontal"
                    android:text="复制链接"
                    android:textColor="@color/color_666666"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_save"
                    android:layout_width="@dimen/dp45"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:drawableTop="@mipmap/icon_details_share_save"
                    android:drawablePadding="@dimen/dp8"
                    android:gravity="center_horizontal"
                    android:text="保存图片"
                    android:textColor="@color/color_666666"
                    android:textSize="12sp" />

            </LinearLayout>

            <TextView
                android:id="@+id/tv_cancel"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp48"
                android:layout_alignParentBottom="true"
                android:background="@color/white"
                android:gravity="center"
                android:text="取消"
                android:textColor="@color/color_666666"
                android:textSize="16sp" />

        </RelativeLayout>

    </RelativeLayout>

因为是透明弹窗，所以需要一个透明弹窗的样式，这个compose也是一样的

    <!--透明activity的style-->
    <style name="transparent_activity">
        <item name="android:windowBackground">@color/transparent</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowAnimationStyle">@android:style/Animation.Translucent</item>
    </style>

二、Compose实现

通过上面的xml布局不难看出，我们想要实现的这个分享页面，结构如下
在这里插入图片描述
接下来我们将分享页面拆分为 二维码分享组件和底部分享组件来实现，底部分享组件在下方，二维码分享组件在中间，所以我采用了约束布局

//分享页面
@Composable
fun ShareQRCode() {
    ConstraintLayout {
        val (bottomLayout, llQrcode) = createRefs()

		//二维码分享组件
        LinearLayoutQrcode(
            Modifier.constrainAs(llQrcode){
                top.linkTo(parent.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                bottom.linkTo(parent.bottom)
            }
        )

		//底部分享组件
        BottomLayout(
            modifier = Modifier.constrainAs(bottomLayout) {
                bottom.linkTo(parent.bottom)
            }
            
        )
    }
}

1.底部分享组件

让我们来分析下，底部分享组件需要哪些元素
在这里插入图片描述
所以我们需要这样一个结构来实现

Column{//背景需要半圆角

 Row{
	//这里有六个按钮
}

//取消按钮需要在底部
Button{

}

}

a.背景半圆角

   Column(
        modifier = modifier
            .height(167.dp)
            .background(
                colorResource(R.color.color_f5f5f5),
                shape = RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp)
            )
    )

shape 属性设置圆角，上述代码中RoundedCornerShape分别设置左上，右上，左下，右下的圆角
在这里插入图片描述

b.自定义分享按钮

自定义分享按钮的样式是这样的
在这里插入图片描述
上面是一个图片，下面是文字，然后都有一个局居中，代码如下

@Composable
fun ImageButton(@DrawableRes id: Int, text: String, modifier: Modifier) {
    Column(
        modifier
            .width(45.dp),
    ) {
        Image(
            painter = painterResource(id = id),
            contentDescription = "",
            Modifier
                .fillMaxWidth()
                .padding(bottom = 8.dp),
            Alignment.Center
        )
        Text(
            text = text,
            fontSize = 11.sp,
            color = colorResource(id = R.color.color_666666),
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxWidth()
        )

    }
}

Alignment.Center是一个居中属性，TextAlign.Center代表文字居中，但是在实际使用中，我发现单独使用Alignment.Center并不生效，于是我搭配了Modifier.fillMaxWidth()使其生效，painterResource是使用图片资源函数

然后再在row中使用，从xml中可以看到这个地方使用了权重，在compose中我们也可以用 Modifier.weight()属性来代替

 Row(
            Modifier
                .fillMaxWidth()
                .padding(8.dp, 25.dp, 8.dp, 0.dp)

        ) {
            ImageButton(
                id = R.mipmap.icon_details_share_dingding,
                text = "钉钉",
                Modifier.weight(1f)
            )
            ImageButton(
                id = R.mipmap.icon_details_share_qq,
                text = "QQ",
                Modifier.weight(1f)
            )
            ImageButton(
                id = R.mipmap.icon_details_share_wechat,
                text = "微信好友",
                Modifier.weight(1f)
            )
            ImageButton(
                id = R.mipmap.icon_details_share_wechat_moments,
                text = "朋友圈",
                Modifier.weight(1f)
            )
            ImageButton(
                id = R.mipmap.icon_details_share_copy,
                text = "复制链接",
                Modifier.weight(1f)
            )
            ImageButton(
                id = R.mipmap.icon_details_share_save,
                text = "保存图片",
                Modifier.weight(1f)
            )
        }

c.在底部的取消按钮

为了学习嘛，就尝试了另外一种将控件放于底部的方式

 Column(
            Modifier.fillMaxHeight(),
            Arrangement.Bottom
        ){
Button（）{

	}
}

d.总体

这里为了显示点击的Toast，多传递了一个context: Activity，BottomLayout完整代码如下

@Composable
fun BottomLayout(
    modifier: Modifier,
    context: Activity
) {
    Column(
        modifier = modifier
            .height(167.dp)
            .background(
                colorResource(R.color.color_f5f5f5),
                shape = RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp)
            )
    ) {
        Row(
            Modifier
                .fillMaxWidth()
                .padding(8.dp, 25.dp, 8.dp, 0.dp)

        ) {
            ImageButton(
                id = R.mipmap.icon_details_share_dingding,
                text = "钉钉",
                Modifier.weight(1f)
            )
            ImageButton(
                id = R.mipmap.icon_details_share_qq,
                text = "QQ",
                Modifier.weight(1f)
            )
            ImageButton(
                id = R.mipmap.icon_details_share_wechat,
                text = "微信好友",
                Modifier.weight(1f)
            )
            ImageButton(
                id = R.mipmap.icon_details_share_wechat_moments,
                text = "朋友圈",
                Modifier.weight(1f)
            )
            ImageButton(
                id = R.mipmap.icon_details_share_copy,
                text = "复制链接",
                Modifier.weight(1f)
            )
            ImageButton(
                id = R.mipmap.icon_details_share_save,
                text = "保存图片",
                Modifier.weight(1f)
            )
        }

        Column(
            Modifier.fillMaxHeight(),
            Arrangement.Bottom
        ) {
            Button(
                onClick = {
                    Toast.makeText(context, "取消分享", Toast.LENGTH_SHORT).show()
                    context.finish()

                },
                Modifier.fillMaxWidth(),
                colors = ButtonDefaults.buttonColors(
                    containerColor = Color.White
                ),
                shape = RoundedCornerShape(0.dp)//圆角

            ) {
                Text(
                    text = "取消",
                    fontSize = 16.sp,
                    textAlign = TextAlign.Center,
                    modifier = Modifier
                        .fillMaxWidth()
                )
            }

        }

    }
}


@Composable
fun ImageButton(@DrawableRes id: Int, text: String, modifier: Modifier) {
    Column(
        modifier
            .width(45.dp),
    ) {
        Image(
            painter = painterResource(id = id),
            contentDescription = "",
            Modifier
                .fillMaxWidth()
                .padding(bottom = 8.dp),
            Alignment.Center
        )
        Text(
            text = text,
            fontSize = 11.sp,
            color = colorResource(id = R.color.color_666666),
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxWidth()
        )

    }
}

效果如下
在这里插入图片描述

2.二维码分享组件

一样的我们先分析一下
在这里插入图片描述
可以看出二维码分享组件还是比较简单，当然在绘制组件前还要定位

a.组件居中

首先我们让它显示出来

@Composable
fun LinearLayoutQrcode(modifier: Modifier){
    Column(
        modifier.paint(painterResource(id = R.mipmap.self_qr_bg))
            .width(270.dp)
            .height(370.dp)
    ) {

    }
}

运行出来效果如下，显而易见，这和我们理想中的效果有点偏差
在这里插入图片描述
对比了下之前的xml布局，发现我们在compose中的组件是居于父布局居中的，xml布局是上半部分布局居中的，下面我们来修改一下，将ConstraintLayout中的居中取消，并在Column中居中

//引用
        LinearLayoutQrcode(
            Modifier.constrainAs(llQrcode){
//                top.linkTo(parent.top)
//                start.linkTo(parent.start)
//                end.linkTo(parent.end)
//                bottom.linkTo(parent.bottom)
            }
        )


@Composable
fun LinearLayoutQrcode(modifier: Modifier){
    Column(
        modifier.paint(painterResource(id = R.mipmap.self_qr_bg))
            .fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally

    ) {

    }
}

然而并没有变化，给我干蒙了，在仔细检查后，我觉得可能是因为LinearLayoutQrcode使用的是父布局的modifier，所以fillMaxSize属性也是父布局的，所以我用了另外一个办法，先让LinearLayoutQrcode组件设置一个和BottomLayout高度一样的外边距，然后再让它居中，就能实现我们想要的效果，可是compose没有外边距，所以我多包了一层Column，代码如下

//引用
        LinearLayoutQrcode(
            Modifier.constrainAs(llQrcode){
                top.linkTo(parent.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                bottom.linkTo(parent.bottom)
            }
        )


@Composable
fun LinearLayoutQrcode(modifier: Modifier){
    Column(
        modifier
            .padding(bottom = 167.dp)
    ) {

        Column(
            Modifier.paint(painterResource(id = R.mipmap.self_qr_bg)),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {

        }
    }
}

效果
在这里插入图片描述
可以看到，非常理想啊，我们继续下一步

b.顶部头像

 Image(
                painter = painterResource(id = R.mipmap.ic_show_qccode_head),
                contentDescription = "默认头像",
                Modifier
                    .width(53.dp)
                    .height(53.dp)
                    .padding(top = 13.dp)
            )
            Text(
                text = "邀请你加入工队",
                color = colorResource(id = R.color.color_1C1C1C),
                fontSize = 13.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .fillMaxWidth()
            )
            Text(
                text = "水电费-试一试1-施工队", color = colorResource(id = R.color.color_969696),
                fontSize = 12.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 3.dp)
            )

这就没啥好说的，比较简单，有点不习惯的就是没有了外边距，好难受好难受
在这里插入图片描述

c.二维码

最后加上二维码

 Image(
                painter = painterResource(id = R.mipmap.qrcode),
                contentDescription = "默认头像",
                Modifier
                    .width(193.dp)
                    .height(193.dp)
                    .padding(top = 45.dp),

                )

            Text(
                text = "扫码立即加入",
                color = colorResource(id = R.color.color_666666),
                fontSize = 12.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 20.dp)
            )

大功告成，让我们看看效果

![在这里插入图片描述](https://img-blog.csdnimg.cn/4b198d0eeded4f41a4c227e92f8c680d.jpeg在这里插入图片描述

非常的完美啊，和xml分毫不差，大功告成，完整代码

package com.xf.mycomepose

import android.app.Activity
import android.content.Context
import android.os.Bundle
import android.widget.ImageButton
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CornerBasedShape
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.draw.paint
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import com.xf.mycomepose.ui.theme.MyComeposeTheme


class ShareQRCodeActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyComeposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color(99000000)
                ) {
                    ShareQRCode(this@ShareQRCodeActivity)
                }
            }
        }
    }

}

@Composable
fun ShareQRCode(context: Activity) {
    ConstraintLayout {
        val (bottomLayout, llQrcode) = createRefs()



        LinearLayoutQrcode(
            Modifier.constrainAs(llQrcode) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                bottom.linkTo(parent.bottom)
            }
        )


        BottomLayout(
            modifier = Modifier.constrainAs(bottomLayout) {
                bottom.linkTo(parent.bottom)
            },
            context = context
        )
    }
}


@Composable
fun LinearLayoutQrcode(modifier: Modifier) {
    Column(
        modifier
            .padding(bottom = 167.dp)
    ) {

        Column(
            Modifier.paint(painterResource(id = R.mipmap.self_qr_bg)),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {

            Image(
                painter = painterResource(id = R.mipmap.ic_show_qccode_head),
                contentDescription = "默认头像",
                Modifier
                    .width(53.dp)
                    .height(53.dp)
                    .padding(top = 13.dp)
            )
            Text(
                text = "邀请你加入工队",
                color = colorResource(id = R.color.color_1C1C1C),
                fontSize = 13.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .fillMaxWidth()
            )
            Text(
                text = "水电费-试一试1-施工队",
                color = colorResource(id = R.color.color_969696),
                fontSize = 12.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 3.dp)
            )
            Image(
                painter = painterResource(id = R.mipmap.qrcode),
                contentDescription = "默认头像",
                Modifier
                    .width(193.dp)
                    .height(193.dp)
                    .padding(top = 45.dp),

                )

            Text(
                text = "扫码立即加入",
                color = colorResource(id = R.color.color_666666),
                fontSize = 12.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 20.dp)
            )

        }
    }
}


@Composable
fun BottomLayout(
    modifier: Modifier,
    context: Activity
) {
    Column(
        modifier = modifier
            .height(167.dp)
            .background(
                colorResource(R.color.color_f5f5f5),
                shape = RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp)
            )
    ) {
        Row(
            Modifier
                .fillMaxWidth()
                .padding(8.dp, 25.dp, 8.dp, 0.dp)

        ) {
            ImageButton(
                id = R.mipmap.icon_details_share_dingding,
                text = "钉钉",
                Modifier.weight(1f)
            )
            ImageButton(
                id = R.mipmap.icon_details_share_qq,
                text = "QQ",
                Modifier.weight(1f)
            )
            ImageButton(
                id = R.mipmap.icon_details_share_wechat,
                text = "微信好友",
                Modifier.weight(1f)
            )
            ImageButton(
                id = R.mipmap.icon_details_share_wechat_moments,
                text = "朋友圈",
                Modifier.weight(1f)
            )
            ImageButton(
                id = R.mipmap.icon_details_share_copy,
                text = "复制链接",
                Modifier.weight(1f)
            )
            ImageButton(
                id = R.mipmap.icon_details_share_save,
                text = "保存图片",
                Modifier.weight(1f)
            )
        }

        Column(
            Modifier.fillMaxHeight(),
            Arrangement.Bottom
        ) {
            Button(
                onClick = {
                    Toast.makeText(context, "取消分享", Toast.LENGTH_SHORT).show()
                    context.finish()

                },
                Modifier.fillMaxWidth(),
                colors = ButtonDefaults.buttonColors(
                    containerColor = Color.White
                ),
                shape = RoundedCornerShape(0.dp)//圆角

            ) {
                Text(
                    text = "取消",
                    fontSize = 16.sp,
                    textAlign = TextAlign.Center,
                    modifier = Modifier
                        .fillMaxWidth()
                )
            }

        }

    }
}


@Composable
fun ImageButton(@DrawableRes id: Int, text: String, modifier: Modifier) {
    Column(
        modifier
            .width(45.dp),
    ) {
        Image(
            painter = painterResource(id = id),
            contentDescription = "",
            Modifier
                .fillMaxWidth()
                .padding(bottom = 8.dp),
            Alignment.Center
        )
        Text(
            text = text,
            fontSize = 11.sp,
            color = colorResource(id = R.color.color_666666),
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxWidth()
        )

    }
}

在MainActivity中跳转到这个页面

val intent = Intent()
        intent.setClass(this, ShareQRCodeActivity::class.java)


Button(
            onClick = {
                startActivity(mainActivity, intent, null);
            },
            modifier = Modifier.constrainAs(button) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                bottom.linkTo(parent.bottom)
            }

        ) {
            Text(text = "Hello $name!")
        }

别忘了透明主题

总结

没有官方示例，还原一个稍微复杂一点的布局还是有很多难点，但是使用过程中还是可以看到写法比在xml中使用简单很多，如果熟练确实能提高开发效率

我怀里的猫
关注
  • 10
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Jetpack Compose——Scaffold（脚手架）、SnackBar（通知，类似Toast）的简单使用
lplj717的博客
12-21 3393
该博客基于：compose_version = '1.1.0-beta01' 脚手架实现了Material设计的页面基本结构。该组件通过确保其适当的布局策略从而将其他的多个组件组合在一起构成页面，包括标题栏、底部栏、SnackBar（类似Toast功能）、浮动按钮、抽屉组件、剩余内容布局等 Scaffold 首先来看看参数： Scaffold( modifier: Modifier = Modifier,//布局修饰 scaffoldState: ScaffoldState = r
Jetpack Compose实践：完成自定义手势处理
chenjingsb的博客
07-01 913
概述 Jetpack Compose 为我们提供了许多手势处理 Modifier，对于常见业务需求来说已足够我们使用了，然而如果说我们对手势有定制需求，就需要具备自定义手势处理的能力了。通过使用官方所提供的基础 API 来完成各类手势交互需求，触摸反馈基础 API 类似传统 View 系统的 onTouchEvent()。 当然 Compose 中也支持类似传统 ViewGroup 通过 onInterceptTouchEvent()定制手势事件分发流程。通过对自定义手势处理的学习将帮助大家掌握处理绝大多数
Jetpack Compose实现的一个优雅的 Toast 组件——简单易用~
jiulang9的博客
06-25 1278
优雅-简洁-动画 才是我的风格 使用Compose组件来实现一个 优雅-简洁-动画 的 Toast
Android~Compose脚手架和Toast
Hynson的学习笔记
11-27 2183
- 熟悉Compose中脚手架使用 - 自定义Toast样式
自定义重写Toast
分享+记录
12-03 2864
使用方法以及说明写在代码中的注释中/** * * @author liu * 本类调用方法new MyToast(context, "送积分:", "200", 20).showLonger(); */ public class MyToast extends Toast { public MyToast(Context context, String message,Stri
Jetpack-Compose
Stay hungry, stay foolish!!
03-08 2104
一、什么都不如官网来的直接 Jetpack Compose去年写了一些列表布局就丢下了,以前一个小兄弟说“什么都不如官网来的直接”这是他的博客打算用Compose写玩安卓大家可以去好好学习一波,接下来我们跟着官网走,原理案例基于官网,写的效果高于官网。Flutter,SwiftUI对比这些众说风云,人云亦云,我不多说,XML相对于当前流行的前段或者移动端布局组建框架都不在是优势,既然Google推出的那我们就学。 二、环境 1.AndroidSdio Beta 4.2版本或者Canary版本 版本提.
Jetpack Compose
猿猿袁
12-02 3097
Jetpack Compose：声明式UI框架 (Composition over inheritance) 组合优于继承 1. 什么是Compose，有什么优势？ Jetpack Compose 是一个现代工具包，旨在简化UI开发。它结合了反应式编程模型和Kotlin编程语言的简洁性和易用性。它是完全声明性的，Compose的口号就是消灭xml，在撸过代码之后总结总体上UI的结构和Flutte...
Jetpack Compose中的手势操作和事件处理
川峰的博客
12-22 3070
Jetpack Compose中为手势操作如点击、拖动、滑动、缩放、旋转等都提供了十分方便的Modifier修饰符满足日常开发使用，并且还提供了非常丰富的低级别的Gesture Api，通过这些API我们可以定制更加复杂的交互手势。
使用Jetpack Compose完成自定义手势处理，html5框架布局
m0_65320833的博客
02-04 2490
) 我们上面所罗列的这些拖动 API 只提供了监听 UI 组件拖动的能力，我们可以根据需求为其拓展功能，这也是这些API所存在的意义。我们从字面上就可以看出每个 API 所对应的含义，由于这些API的功能与参数相近，这里我们仅以 detectDragGestures 作为举例说明。 举例说明 接下来我们将完成一个绿色方块的手势拖动。在 Draggabel Modifier 中我们还只能监听垂直或水平中某一个方向的手势拖动，而使用 detectDragGestures 所有手势信息都是可以拿到的。如果我们还是
使用Jetpack Compose完成自定义手势处理，深度解析，值得收藏
wqwq_22的博客
01-30 638
) } } 变换类型基础 API API 介绍 | API名称 | 作用 | | — | — | | detectTransformGestures | 监听拖动、缩放与旋转手势 | 与 Transfomer Modifier 不同的是，通过这个 API 可以监听单指的拖动手势，和拖动类型基础 API所提供的功能一样，除此之外还支持监听双指缩放与旋转手势。反观Transfomer Modifier 只能监听到双指拖动手势，不知设计成这样的行为不一致是否是 Google 有意而为之。 举例说明 接下来我们为这
Jetpack Compose简易入坑，教你如何增加拿到BAT大厂offer几率
yiqicsgo的博客
03-02 158
到这里，我们可以了解到: 1 Compose是声明式UI，不是传统的命令式UI，不是拿着View去setXXX()，而是用函数去描述一种UI状态。 2 Compose采用的是属性细化和行为隔离的思想，比如demo里面，text就是Text直接的属性，而background是modifier的一个属性，因为像图片Image就没有text属性，但是却有background属性，所以Compose就将公有属性提取到Modifier中，将独有属性绑定到View自身，这就是一种属性细化的思想，而且点击事件是在
Android扫一扫和生成二维码（使用华为ScanKit）
lanrenxiaowen的博客
02-17 5806
本文主要讲如何使用华为统一扫码scan Kit进行扫一扫以及生成二维码， 有兴趣的可以看一下华为扫描和Zxing扫描的区别 使用步骤 1、在全局的build.gradle文件里添加华为maven仓库 buildscript { repositories { maven {url 'http://developer.huawei.com/repo/'} } } allprojects { repositories {
Android Compose——一个简单的Bilibili APP
FranzLiszt的博客
03-05 3839
此Demo采用Android Compose声明式UI编写而成，主体采用MVVM设计框架，Demo涉及到的主要技术包括：Flow、Coroutines、Retrofit、Okhttp、Hilt以及适配了深色模式等；主要数据来源于Bilibili API。
Android超方便 集成 Zxing实现扫一扫，闪光灯，生成二维码图片，解析二维码（条码）等功能
热门推荐
喻志强的博客
10-20 7万+
之前我写过一篇博客是关于如何将zxing集成到Android Studio中，以及简单的实现扫一扫功能。 详情请看：Android Studio集成Zxing扫一扫 但是，上面那篇博客只有有一个扫一扫功能，而且在低分辨率手机上会出现变形的问题。扫描速度也比较慢，功能不是很全，没有闪光灯，生成二维码，解析二维码图片，解析条码图片等。 这几天抽了点时间，将之前的代码完善了一下，主要是修复了一些b...
Android 二维码的集成及优化
Mr_zhang0101的博客
04-27 1793
Android 两种扫码效率高的扫码工具对比：QrCodeScanner和QrCodeScan前景介绍Android二维码扫描大多采用Zxing和Zbar扫码库，但是两个扫码库都各有缺点
使用自定义的Toast
gundumw100的专栏
04-10 288
永不关闭的Toast信息框 http://blog.csdn.net/nokiaguy/article/details/6835912 Toast  作为 信息提示工具 与 Dialog / PopUpWindow 相比 还是有其独到之处的 最明显的就是：不需要显式关闭之 其会定时消失 使得其使用起来大为方便 Toast的最简单用法： Toast.makeText(this, "This is
compose UI（八）一个仿mac的全局消息工具，跟Toast说拜拜
markren的博客
08-12 1493
效果： 本文示例代码API基于compose UI 1.0.0 Toast在compose的尴尬 Toast需要上下文，这个在Compose 方法中可以通过LocalContext拿到。在其他类中可以用hilt @ApplicationContext 注入application也可以拿到，但是总有不能注入的地方比如object等等情况。Toast最尴尬的是在主线程执行，MVVM架构下，函数在viewModel拿到执行结果，反馈用户总不能一直runOnUiThread，至于handle不用好多年了。kotl
Compose 可组合项 - 分页器 HorizontalPager、VerticalPager
最新发布
HugMua的博客
10-15 1873
类似于 ViewPager，1.4 版本之前需要借助 accompanis 库，底层基于 LazyColumn、LazyRow 实现，在使用上也基本相同。默认情况下 HorizontalPager 占据屏幕的整个宽度，VerticalPager 会占据整个高度。
用 compose自定义绘制 完成渐变水滴
zzz777qqq的博客
03-30 284
本章节是Compose自定义画一个比较复杂的，设计所谓的会呼吸的动画，那时候实现花了蛮长的时间，搬着电脑跟设计一帧一帧地对，没多久后来需求就被拿掉了。 Compose的实现，图形本身跟上一章节的LocationMarker其实差不太多，倒过来了而已，调整了P1跟P3, 基本图形的Path，这里不再做介绍，读者也可以去看代码实现。主要介绍一下动画吧。
jetpack compose
08-19
Jetpack Compose 是一款由 Google 开发的声明式 UI 工具包，用于构建 Android 应用程序的用户界面。通过 Jetpack Compose，开发者可以使用简洁、直观的方式来构建应用程序的用户界面，而无需使用传统的 XML 布局文件和繁琐的 UI 代码。Jetpack Compose 提供了一种基于函数的方式来描述应用程序界面的外观和行为，使得开发者可以更快速、更灵活地进行 UI 开发。它还提供了许多内置的 UI 组件和布局函数，使得构建复杂的用户界面变得更加容易。Jetpack Compose 是未来 Android 开发的重要趋势之一，它使开发者能够更加高效地构建现代化、可维护的应用程序界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我怀里的猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值