Android ListView从网络获取图片及文字显示

最新推荐文章于 2020-07-05 10:56:43 发布
最新推荐文章于 2020-07-05 10:56:43 发布
阅读量530 收藏
点赞数
本文介绍如何在Android应用中通过ListView组件展示从网络获取的图文信息。主要涉及布局文件设计、XML数据解析及ListView的适配过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如何从网络获取图片以及文本来显示。事实上，一般是先获取Josn或sml数据，然后解释显示。我们先从网上获取xml，然后对其进行解析，最后显示在ListView上。具体步骤：
•客户端发出请求，获取xml
•客户端异步解析xml
•ListView将解析完的数据显示

一、Android客户端


(1)xml布局文件

mainxml，就是一个ListView。
Java代码 复制代码 收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:orientation="vertical">
  7. <ListView
  8. android:id="@+id/list"
  9. android:layout_width="fill_parent"
  10. android:layout_height="wrap_content"
  11. android:divider="#b5b5b5"
  12. android:dividerHeight="1dp"
  13. android:listSelector="@drawable/list_selector" />
  15. </LinearLayout> 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
	
    <ListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="#b5b5b5"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/list_selector" />

</LinearLayout>


ListView的每一行的布局，list_raw.xml，看一下结构图：


Java代码 复制代码 收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="wrap_content"
  5. android:background="@drawable/list_selector"
  6. android:orientation="horizontal"
  7. android:padding="5dip" >
  9. <!-- ListView最左边的缩略图 -->
  10. <LinearLayout android:id="@+id/thumbnail"
  11. android:layout_width="wrap_content"
  12. android:layout_height="wrap_content"
  13. android:padding="3dip"
  14. android:layout_alignParentLeft="true"
  15. android:background="@drawable/image_bg"
  16. android:layout_marginRight="5dip">
  18. <ImageView
  19. android:id="@+id/list_image"
  20. android:layout_width="50dip"
  21. android:layout_height="50dip"
  22. android:src="@drawable/rihanna"/>
  24. </LinearLayout>
  26. <!-- 歌曲名-->
  27. <TextView
  28. android:id="@+id/title"
  29. android:layout_width="wrap_content"
  30. android:layout_height="wrap_content"
  31. android:layout_alignTop="@+id/thumbnail"
  32. android:layout_toRightOf="@+id/thumbnail"
  33. android:text="Rihanna Love the way lie"
  34. android:textColor="#040404"
  35. android:typeface="sans"
  36. android:textSize="15dip"
  37. android:textStyle="bold"/>
  39. <!-- 歌手名 -->
  40. <TextView
  41. android:id="@+id/artist"
  42. android:layout_width="fill_parent"
  43. android:layout_height="wrap_content"
  44. android:layout_below="@id/title"
  45. android:textColor="#343434"
  46. android:textSize="10dip"
  47. android:layout_marginTop="1dip"
  48. android:layout_toRightOf="@+id/thumbnail"
  49. android:text="Just gona stand there and ..." />
  51. <!-- 歌曲播放时间 -->
  52. <TextView
  53. android:id="@+id/duration"
  54. android:layout_width="wrap_content"
  55. android:layout_height="wrap_content"
  56. android:layout_alignParentRight="true"
  57. android:layout_alignTop="@id/title"
  58. android:gravity="right"
  59. android:text="5:45"
  60. android:layout_marginRight="5dip"
  61. android:textSize="10dip"
  62. android:textColor="#10bcc9"
  63. android:textStyle="bold"/>
  65. <!-- 进入播放 -->
  66. <ImageView android:layout_width="wrap_content"
  67. android:layout_height="wrap_content"
  68. android:src="@drawable/arrow"
  69. android:layout_alignParentRight="true"
  70. android:layout_centerVertical="true"/>
  72. </RelativeLayout> 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/list_selector"
    android:orientation="horizontal"
    android:padding="5dip" >

	<!--  ListView最左边的缩略图 -->
	<LinearLayout android:id="@+id/thumbnail" 
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:padding="3dip"		
        android:layout_alignParentLeft="true"
        android:background="@drawable/image_bg" 
	    android:layout_marginRight="5dip">
        
		<ImageView     
	        android:id="@+id/list_image"   
	        android:layout_width="50dip"
	        android:layout_height="50dip"
	        android:src="@drawable/rihanna"/>
        
	</LinearLayout>
    
	<!-- 歌曲名-->
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/thumbnail"
        android:layout_toRightOf="@+id/thumbnail"
        android:text="Rihanna Love the way lie"
        android:textColor="#040404"
        android:typeface="sans" 
        android:textSize="15dip"
        android:textStyle="bold"/>

	<!-- 歌手名 -->
    <TextView
        android:id="@+id/artist"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/title"
        android:textColor="#343434"
        android:textSize="10dip"
        android:layout_marginTop="1dip"
        android:layout_toRightOf="@+id/thumbnail"
        android:text="Just gona stand there and ..." />

	<!-- 歌曲播放时间 -->
    <TextView
        android:id="@+id/duration"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@id/title"
        android:gravity="right"
        android:text="5:45"
        android:layout_marginRight="5dip"
        android:textSize="10dip"
        android:textColor="#10bcc9"
        android:textStyle="bold"/>
      
     <!-- 进入播放 -->    
     <ImageView android:layout_width="wrap_content"
     	android:layout_height="wrap_content"
     	android:src="@drawable/arrow"
     	android:layout_alignParentRight="true"
     	android:layout_centerVertical="true"/>

</RelativeLayout>


另外我们打算使用几个特效，一个是当点击列表项目的时候，项目背景色改变，其实就是一个selector；另一个就是用shape美化视觉效果，具体看xml代码：

1.list_selector.xml
Java代码 复制代码 收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3. <!-- Selector style for listrow -->
  4. <item
  5. android:state_selected="false"
  6. android:state_pressed="false"
  7. android:drawable="@drawable/gradient_bg" />
  8. <item android:state_pressed="true"
  9. android:drawable="@drawable/gradient_bg_hover" />
  10. <item android:state_selected="true"
  11. android:state_pressed="false"
  12. android:drawable="@drawable/gradient_bg_hover" />
  13. </selector> 
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Selector style for listrow -->
<item 
 android:state_selected="false"
    android:state_pressed="false" 
    android:drawable="@drawable/gradient_bg" />
<item android:state_pressed="true" 
    android:drawable="@drawable/gradient_bg_hover" />
<item android:state_selected="true"
 android:state_pressed="false" 
    android:drawable="@drawable/gradient_bg_hover" />
</selector>

dahe5
关注
获取服务器数据通过Gson解析显示Listview上
Dianliang的博客
06-13 5407
之前写了一篇博文是获取服务器数据并解析显示到listview上，上次使用的解析是通过jsonarray和jsonobject完成，解析接单的数据还是可以但是发现解析复杂点的数据真的很麻烦，然后查了一下Gson的解析方式写了一个demo，发现省事了许多.上代码： 效果图：               1.json数据： [ { "title": "网络部",
listView图片与文字显示
L59_1的博客
10-15 829
activity_main xml version="1.0" encoding="utf-8"?> RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:to
Android自定义ListView图片从服务端获取
06-21
Android自定义ListView，ListView中的图片从服务端获取
android从服务器端读取图片和数据混合流并显示在listview
08-05
刚要准备读研究生，暑假期间留校，但是老师也不怎么管我们，索性我就把本科的东西整理一下。无聊中。如果各位有什么兼职啥的能不能帮我找一个啊。 这段时间自己写的一段代码，是安卓中最常见的操作：客户端向服务器发出请求，服务器根据请求信息，将数据库中的数据封装发往客户端，客户端将数据解析，显示在listview中。我的本意是仿照网易新闻客户端做成他那样的，图文并茂的形式，因此在数据库中还有一项是存储了图片的地址。 先看客户端部分：在这段代view码中主要是操作是，通过滑动到最下方使得客户端向服务器发出http请求，客户端接收服务器发回来的数据并将数据进行解析，通过Handler这个类来动态更新listview。
ListView操作步骤
03-27
ListView简易操作步骤，简单易懂，步骤清晰，按照步骤执行即可实现
安卓开发学习之ListView的绘制流程源码阅读
四国棋客
05-17 565
背景在文章安卓开发学习之ListView的布局流程源码阅读中，我记录了对ListView布局过程源码的阅读。现在，我记录一下ListView测绘过程最后一个步骤--绘制流程的源码阅读。其实ListView的绘制主要是在自己覆写的方法dispatchView()中，而且只是画一些分割线，至于如何画子view，请参考文章安卓开发学习之View的draw(canvas)方法ListView#dispat...
多种方式在List中显示图片
weixin_30732825的博客
08-18 789
主要技术点： itemRender，在list中显示图片和文字 ProgressBar，显示大图时，使用进度条 variableRowHeight，在list上显示图片，设置这个属性，才可以根据图片的高度自动调整 代码： 1<?xml version="1.0" encoding="utf-8"?>2<mx:Application xmlns:mx="htt...
使用ListView 显示数据
移动开发记录
11-25 263
1、先定义item &lt;?xmlversion="1.0"encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="f
Android ListView分页加载（服务端+android端）Demo
红日
07-02 4230
Android ListView分页加载功能 在实际开发中经常用到，是每个开发者必须掌握的内容，本Demo给出了服务端+Android端的两者的代码，并成功通过了测试。 服务端使用MyEclipse，Android端使用Eclipse。 实现效果图： 服务端一共100条数据，共分四页，每页有25条数据。 源代码： 服务端： 需要导入图中这几个jar包。 在运行Andr
python传递list给前端并在前端成功显示图片·可以显示多张后台传过来的图片
居贝比的博客
07-05 3595
python端 #传递resultant给html @app.route('/resultShapeNchange') def shapeNchange(): resultant = searchShapeNchange.return_img_stream("./static/photo/test.jpg") #searchSapeNchange返回的结果，也就是resultant存放的数据是['/static/airplanes/image_0014.jpg', '/static/air
Android之ListView实现图文信息混排(服务器端)（一）
ly_rose的专栏
12-16 1161
ListView实现图文信息混排(服务器端)（一）
获取服务器json数据并解析显示listview上
Dianliang的博客
04-20 1万+
使用okhttp获取服务器json数据并解析出来显示到listview上
获取网络数据中的数组显示成ListView的简单流程
学习
11-01 6156
定义一个线程池 ExecutorService pool = Executors.newFixedThreadPool(15); 运用线程获取网络数据  即编辑相关的访问方法以及参数  public static String sendDataByHttpClientPost(String url, List parameters) throws Exception { Ht
android ListView 使用
西涛offbye-移动全栈技术博客
12-08 1590
首先是Layout文件：LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_pa
Android-搭建简单服务端+ListView异步加载数据
热门推荐
巫山老妖
05-06 2万+
Android-搭建简单服务端+ListView异步加载数据2014年5月6日 本篇博文带给大家的是教大家如何在MyEclipse中搭建一个服务端，并通过手机端与其通信，异步加载数据。 笔者使用的是MyEclipse，各位也可以直接用Eclipse创建Java Web项目，谷歌提供的ADT Bundle是不能创建Web项目，读者可以下载Eclipse For JaveEE Developer这个I
android学习历程，自定义listview并从服务器端获取数据填充进listview
迷糊虫的博客
09-18 7133
自定义listview并从服务器端获取数据填充进listview
Android中Listview显示服务器端传送JSON格式的流程（一）
成都都成
06-03 923
话说Android客户端调用接口访问服务器端，返回一大串JSON格式的数据。如果我想用listview和Adapterl来显示该怎么办呢？ 这就是这篇博文的主要内容。        第一步：把json数据解析出来，根据要获取的字段建一个实体类。再写一个解析方法类如下，拿到内容才能显示。俗话说：手中有粮，心中不慌。 public class Parse { public s
android listview从网络获取图片及文字显示,android studio 实现listview显示简单图片文字显示...
05-20
以下是一个简单的实现步骤： 1. 在布局文件中添加ListView组件： ``` <ListView android:id="@+id/listView" android:layout_width="match_parent" android:layout_height="match_parent"/> ``` 2. 创建一个自定义的适配器（Adapter），用于将数据绑定到ListView上： ``` public class CustomAdapter extends BaseAdapter { private Context context; private ArrayList<String> titles; private ArrayList<String> imageUrls; public CustomAdapter(Context context, ArrayList<String> titles, ArrayList<String> imageUrls) { this.context = context; this.titles = titles; this.imageUrls = imageUrls; } @Override public int getCount() { return titles.size(); } @Override public Object getItem(int position) { return null; } @Override public long getItemId(int position) { return 0; } @Override public View getView(int position, View convertView, ViewGroup parent) { LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); View row = layoutInflater.inflate(R.layout.list_item, parent, false); TextView titleTextView = row.findViewById(R.id.titleTextView); ImageView imageView = row.findViewById(R.id.imageView); titleTextView.setText(titles.get(position)); // 使用Glide库加载网络图片 Glide.with(context).load(imageUrls.get(position)).into(imageView); return row; } } ``` 3. 在布局文件中创建每个ListView项的布局（list_item.xml）： ``` <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:id="@+id/imageView" android:layout_width="100dp" android:layout_height="100dp" android:layout_margin="10dp" android:background="#f0f0f0"/> <TextView android:id="@+id/titleTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:textSize="18sp"/> </LinearLayout> ``` 4. 在Activity中获取ListView组件，并将适配器绑定到ListView上： ``` public class MainActivity extends AppCompatActivity { private ListView listView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); listView = findViewById(R.id.listView); ArrayList<String> titles = new ArrayList<>(); titles.add("Title 1"); titles.add("Title 2"); titles.add("Title 3"); ArrayList<String> imageUrls = new ArrayList<>(); imageUrls.add("https://via.placeholder.com/150"); imageUrls.add("https://via.placeholder.com/150"); imageUrls.add("https://via.placeholder.com/150"); CustomAdapter adapter = new CustomAdapter(this, titles, imageUrls); listView.setAdapter(adapter); } } ``` 以上就是一个简单的实现，你可以根据自己的需求进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值