Android开发之Compose学习示例之一个简单的网络图片列表展示

老套路先看图：PicuterShow/GIF 2021-12-31 18-26-59.gif · xiayiye5/ComposeStudy - Gitee.com

这里面涉及的知识点比较多主要有：

1.AS版本建议使用最新的白狐版本,注意compose目前仅支持kotlin语言开发

2.列表控件LazyColumn

3.compose如何加载网络图片

4.布局如何编写

第一步使用最新版本AS创建一个compose项目,创建后等待库下载完成会自定配置compose环境

第二步：得先依赖网络图片库

 implementation("io.coil-kt:coil:1.4.0")implementation("io.coil-kt:coil-compose:1.4.0")

第三步：

开始编写首页布局

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {ComposeStudyTheme {// A surface container using the 'background' color from the themeSurface(color = MaterialTheme.colors.background) {Greeting()}}}}
}@Composable
fun Greeting() {
//这个就是首页布局HomeShow()
}@Preview(showBackground = true)
@Composable
fun DefaultPreview() {ComposeStudyTheme {Greeting()}
}

再看下首页布局怎么样的

package com.example.composestudy.ui.widgetimport android.widget.Toast
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.absolutePadding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import com.example.composestudy.ui.widget.MessageWidget.Companion.MessageList/*** 项目名称 : ComposeStudy* 项目路径 : com.example.composestudy.ui.widget* 当前作者 : xiayiye5* 创建时间 : 2021/12/31 17:56*/
class HomeWidget {companion object {@Composablefun HomeShow() {// 获取图片Column(verticalArrangement = Arrangement.Top,modifier = Modifier.absolutePadding(20.dp, 20.dp, 20.dp, 20.dp)) {Text(text = "风景列表展示")
//        ImageTest()val current = LocalContext.currentButton(onClick = { Toast.makeText(current, "哈哈哈哈", Toast.LENGTH_SHORT).show() }) {Text("点我")}
//下面就是列表布局的数据MessageList(listOf("Hello","Android","我超❤ JetPack Compose的！","三天打鱼","两天晒网","葫芦岛上卖葫芦","上海水来自海上","江东父老有江东","乌江自刎有霸王"))}}}}

再看下MessageList里面的东西

package com.example.composestudy.ui.widgetimport android.widget.Toast
import androidx.compose.foundation.clickable
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import com.example.composestudy.ImageTest
import com.example.composestudy.ui.widget.NetworkImgWidget.Companion.NetworkImg/*** 项目名称 : ComposeStudy* 项目路径 : com.example.composestudy.ui.widget* 当前作者 : xiayiye5* 创建时间 : 2021/12/31 18:00*/
class MessageWidget {companion object {@Composablefun MessageList(messages: List<String>) {
// 值可val current = LocalContext.current// 以是 List或者Array两种方式//LazyColum这个控件类似android中的listviewLazyColumn {
//        Modifier.clickable(onClick = {
//            Toast.makeText(current, "点击了", Toast.LENGTH_LONG).show()
//        })
//        items(messages.size) { message ->//遍历索引的方式
//            Text(text = messages[message])
//        }
//        items(items = messages) { message -> //遍历内容
//            Text(text = message)
//        }//itemsIndexed代表每个item布局,跟listview里面的item布局一个意思itemsIndexed(items = messages) { index, item -> //遍历内容和索引if (index == 0) {//交表0位置设置不一样的布局ImageTest()}//这里是每个item对应的标题(角标0除外)Text(text = "索引:$index -- 内容:$item",Modifier.clickable(enabled = true, onClick = {Toast.makeText(current, "点击了$item", Toast.LENGTH_SHORT).show()}))//这里是列表需要展示的图片NetworkImg(index)}}}}
}

再看下NetworkImg布局怎么写的

package com.example.composestudy.ui.widgetimport androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import coil.compose.rememberImagePainter/*** 项目名称 : ComposeStudy* 项目路径 : com.example.composestudy.ui.widget* 当前作者 : xiayiye5* 创建时间 : 2021/12/31 18:03*/
class NetworkImgWidget {companion object {@Composablefun NetworkImg(index: Int) {val imgList = listOf("https://img1.baidu.com/it/u=2943699027,12737242&fm=253&fmt=auto&app=120&f=JPEG?w=781&h=500","https://img-blog.csdnimg.cn/20210823085620179.jpeg","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.tuchong.com%2F7778538%2Ff%2F449478719.jpg&refer=http%3A%2F%2Fphoto.tuchong.com&app=2002&size=f9999,10000&q=a80&n=0","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.tuchong.com%2F1454835%2Ff%2F8764156.jpg&refer=http%3A%2F%2Fphoto.tuchong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F19768%2F19767286.jpg&refer=http%3A%2F%2Fimg8.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.tuchong.com%2F5063625%2Ff%2F756815784.jpg&refer=http%3A%2F%2Fphoto.tuchong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F20%2Fc0%2F29812058_1387481203947.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1404%2F29%2Fc3%2F33695617_33695617_1398756004682.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpp.qn.img-space.com%2Fg1%2FM00%2F08%2F5B%2FCg-4q1dzGseIXQSRAA4uyv-86_sAATFWQDWz-kADi7i541.jpg%3FimageView2%2F2%2Fw%2F1200%2Fq%2F100%2Fignore-error%2F1%2F&refer=http%3A%2F%2Fpp.qn.img-space.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg")Image(modifier = Modifier.size(1000.dp, 300.dp),
//        painter = rememberImagePainter("https://img-blog.csdnimg.cn/20210823085620179.jpeg"),painter = rememberImagePainter(imgList[index]),contentDescription = null)}}
}

0基础初学者看着可能比较复杂，我提供了一份源码

ComposeStudy项目源码下载：源码下载

Android开发之Compose学习示例之一个简单的网络图片列表展示相关推荐

Android开发之Compose基础学习-Divider分割线控件的基本用法
先上图再看代码 package com.xiayiye5.composefirst.components/** Copyright (c) 2022, smuyyh@gmail.com All Ri ...
android开发之ExpandableListView的使用，实现类似QQ好友列表
由于工作需要,今天简单研究了一下ExpandableListView,做了一个类似QQ列表的Demo,和大家分享一下. 效果图如下: 先来看看主布局文件: <RelativeLayout xml ...
android布局黑色字体颜色,Android开发之FloatingActionButton悬浮按钮基本使用、字体、颜色用法示例...
本文实例讲述了Android开发之FloatingActionButton悬浮按钮基本使用.字体.颜色用法.分享给大家供大家参考,具体如下: 这里主要讲: FloatingActionsMenu自定义 ...
Android监听作用,Android开发之CheckBox的简单使用与监听功能示例
本文实例讲述了Android开发之CheckBox的简单使用与监听功能.分享给大家供大家参考,具体如下: activity_main.xml android:layout_width="ma ...
android中oncreate方法,android开发之onCreate( )方法详解
这里我们只关注一句话:This is where you should do all of your normal static set up.其中我们只关注normal static, normal ...
Android开发之ViewFlipper
Android开发之ViewFlipper /* * Android开发之ViewFlipper * 北京Android俱乐部群:167839253 * Created on: 2012-7-25 ...
android之json解析优化,Android开发之json解析
目前正在尝试着写app,发现看懂代码和能写出来差距很大,最关键的是java基础比较的差,因为只会python,java基础只学习了一个礼拜就过了.感觉java写出来的代码不如python简单明了. 上 ...
Android 开发之Windows环境下Android Studio安装和使用教程(图文详细步骤)
鉴于谷歌最新推出的Android Studio备受开发者的推崇,所以也跟着体验一下. 一.介绍Android Studio Android Studio 是一个Android开发环境,基于Intel ...
Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab
今天我们要实现的这个效果呢,在Android的应用中十分地常见,我们可以看到下面两张图,无论是系统内置的联系人应用,还是AnyView的阅读器应用,我们总能找到这样的影子,当我们滑动屏幕时,Tab可以 ...

Android开发之Compose学习示例之一个简单的网络图片列表展示

Android开发之Compose学习示例之一个简单的网络图片列表展示相关推荐

最新文章

热门文章