Android开发 实现图文混排功能

最新推荐文章于 2024-01-31 23:13:09 发布
最新推荐文章于 2024-01-31 23:13:09 发布
阅读量2.1k 收藏 2
点赞数
分类专栏： 安卓开发 文章标签： android 图片混排
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/own_1991/article/details/12774403
版权

第一种，运用WebView. 解析数据，拼接html代码，显示.

Json数据：

[{"detail":"据国外媒体报道，一架“喷气流”飞机首次在英国共享空域成功进行了无人驾驶飞行。这次开拓性飞行在很大程度上是由一名驾驶员在地面上控制的。飞机从兰开夏郡普雷斯顿市附近的沃顿起飞，在因费内斯市着陆。这次飞行被描述为“航空史上的新篇章”，可能为“无人机”操控人员从地面操纵客机铺平道路。"},{"detail":"http://img.cnbeta.com/newsimg/130528/1100390909721537.jpg"},{"detail":"这次开拓性飞行在很大程度上是由一名驾驶员在地面上控制的。飞机从兰开夏郡普雷斯顿市附近的沃顿起飞，然后在因费内斯市着陆。整个过程中，只有起飞和着陆是由机载驾驶员控制的。"},{"detail":"http://img.cnbeta.com/newsimg/130528/11004011483998264.jpg"},{"detail":"飞行期间，相机把活动目标影像传送给地面操控人员。"},{"detail":"http://img.cnbeta.com/newsimg/130528/11004021793061277.jpg"},{"detail":"遥控驾驶员通过相机和一个“电子眼”操纵这架飞机。这架试验机上有两名驾驶员，但他们只负责飞机起飞和着陆。"},{"detail":"http://img.cnbeta.com/newsimg/130528/1100403259238856.jpg"},{"detail":"在长达500英里(约合800公里)的航程中，这架16座飞机飞行在客运公司共享空域，但它上面没有乘客。“与航空评估有关的自主式系统技术”(ASTRAEA)项目负责人兰伯特-多宾-海彭斯塔尔表示：“这项工作有望进入ASTRAEA项目的下一阶段。随着无人驾驶飞机和相关技术的开发，它可能会在接下来5年、10年和20年内影响我们所有人，成为日常生活的一部分。简单地说，我认为我们正在书写航空史的新篇章。”英国国家空运局无人驾驶飞机专家安德鲁-查普曼表示：“国家空运局保证，这次试飞是在没有给共享空域的其他航班构成任何安全威胁的情况进行的。尽管无人驾驶客机领域还需进行更多科研工作，但从这次成功飞行的情况来看，一架无人机可以在不同空域运行。”ASTRAEA项目进行了一系列试飞计划，而从兰开夏郡普雷斯顿市起飞的这次飞行是最近进行的一次。该项目从商业公司和英国政府那里获得6200万英镑资金支持，目的是发展民用无人驾驶飞机。喷气流无人机通过驾驶舱内和飞机下的许多相机把高清晰度画面传送给地面操控人员。机载传感器还捕捉到飞机及其周围大气的关键信息，使地面操控人员准确获得数据。这些数据和他们坐在驾驶舱内得到的数据是一样的。这个无人驾驶系统现在将进行一系列严格的安全系统测试，目的是确保它避开恶劣天气，发现和避开附近飞机，在没有援助情况下进行紧急迫降。在一架遥控客机被用于运送乘客前，飞行规则将被彻底检查。英国商业与能源部部长迈克尔-法伦用“开拓性”描述最近这次飞行。他说：“ASTRAEA项目已取得显著成绩，使英国无人驾驶飞机和无人驾驶民用客机规则的发展在世界上占有重要地位。”ASTRAEA项目得到英国民用航空管理局(CAA)的支持。"}]


数据读取 AnalysisJSON.java

package com.jsk.imgtxt;

import java.util.ArrayList;
import java.util.List;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

public class AnalysisJSON {

	public static List<Content> getProvinceCities(String json){
		List<Content> list = new ArrayList<Content>();
		
		try {
			JSONArray jsonArray = new JSONArray(json);
			int count = jsonArray.length();
			for(int i=0; i < count; i++){
				JSONObject object = jsonArray.getJSONObject(i);
				String detail = object.getString("detail");
				boolean img = false;
				if(detail.indexOf(".jpg") != -1){
					img = true;
				}
				Content content = new Content(detail, img);
				
				list.add(content);
			}
			
		} catch (JSONException e) {
			e.printStackTrace();
		} catch (Exception e){
			e.printStackTrace();
		} 
		
		return list;
	}
}


实体类：Content.java

package com.jsk.imgtxt;

import java.io.Serializable;

public class Content implements Serializable {

	
	private static final long serialVersionUID = 1L;
	private String details;
	private boolean img; //用于判断是否是图片地址
	
	public Content(String details, boolean img){
		this.details = details;
		this.img = img;
	}
	
	public String getDetails() {
		return details;
	}
	
	public void setDetails(String details) {
		this.details = details;
	}
	
	public boolean isImg() {
		return img;
	}
	
	public void setImg(boolean img) {
		this.img = img;
	}
	
	
	
}


MainActivity.java  主要是

public String setStr(){
    	StringBuffer con = new StringBuffer();
    	for(Content c:list){
    		if(c.isImg()){
    			String str = "<img src=\""+c.getDetails()+"\" >";
    			con.append(str);
    		} else {
    			con.append(c.getDetails());
    		}
    	}
		return con.toString();
    }


 

web_content.loadDataWithBaseURL(null, 
				"<html><font style=\"line-height:1.5em;\" >"+setStr()+"</font></html>",
			     "text/html", "utf-8", null);


 

 

 

 

package com.jsk.imgtxt;

import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;

import android.os.Bundle;
import android.view.Window;
import android.webkit.WebSettings.LayoutAlgorithm;
import android.webkit.WebView;
import android.app.Activity;
import android.content.res.AssetManager;

public class MainActivity extends Activity {

    private String path = "json/news.json";
    List<Content> list;
    WebView web_content;
    String json;
    
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);
        
        web_content = (WebView)findViewById(R.id.web_content);
        web_content.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 
        
        getAssetsData();
        
        web_content.loadDataWithBaseURL(null, 
				"<html><font style=\"line-height:1.5em;\" >"+setStr()+"</font></html>",
			     "text/html", "utf-8", null);
        
    }
    
    public List<Content> getAssetsData(){
		AssetManager am = this.getAssets();
		try {
			InputStream is = am.open(path);
			ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
			byte[] bt = new byte[1024];
			int len = 0;
			while((len = is.read(bt)) != -1){
				outputStream.write(bt, 0, len);
			}
			
			outputStream.close();
			is.close();
			json = outputStream.toString();
			list = AnalysisJSON.getProvinceCities(json);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return list;
	}
    
    /*设置字符串*/
    public String setStr(){
    	StringBuffer con = new StringBuffer();
    	for(Content c:list){
    		if(c.isImg()){
    			String str = "<img src=\""+c.getDetails()+"\" >";
    			con.append(str);
    		} else {
    			con.append(c.getDetails());
    		}
    	}
		return con.toString();
    }
    
    
}


 

第二种：运用ListView，判断是否为图片，而选择隐藏文本控件，显示图片控件

 

@Override
	public boolean isEnabled(int position) { //屏蔽listView的每个item的高亮效果
		return false;
	}


 

 

ImgTxtAdapter.java

package com.jsk.imgtxt;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;

public class ImgTxtAdapter extends BaseAdapter {

	private Context context;
	private LayoutInflater inf;
	private List<Content> list;
	
	public ImgTxtAdapter(Context context, List<Content> list){
		this.context = context;
		this.list = list;
		
		inf = LayoutInflater.from(this.context);
	}
	
	@Override
	public int getCount() {
		return list != null ? list.size() : 0;
	}

	@Override
	public Object getItem(int position) {
		return position;
	}

	@Override
	public long getItemId(int position) {
		return position;
	}

//	@Override
//	public boolean areAllItemsEnabled() {
//		return false;
//	} 

	@Override
	public boolean isEnabled(int position) { //屏蔽listView的每个item的高亮效果
		return false;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		MyView mv;
		if(null == convertView){
			mv = new MyView();
			convertView = inf.inflate(R.layout.img_txt_item, null);
			
			mv.img = (ImageButton)convertView.findViewById(R.id.img);
			mv.txt = (TextView)convertView.findViewById(R.id.txt);
			
			convertView.setTag(mv);
			
		} else {
			mv = (MyView) convertView.getTag();
		}
		
		Content content = list.get(position);
		if(content.isImg()){ //判断是否是图片地址
			mv.img.setBackgroundResource(R.drawable.note_pic_loading);
			mv.txt.setVisibility(View.GONE);
		} else {
			mv.txt.setText(content.getDetails());
			mv.img.setVisibility(View.GONE);
		}
		return convertView;
	}

	class MyView {
		ImageButton img;
		TextView txt;
	}
}


 

 

 

 

 

 

耿小健
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Android评论楼实现（包含上传视频图片）
C_biubiubiu的博客
06-26 1384
使用开源项目CommentView实现评论楼的效果（包含上传图片视频） 项目作者的详解地址，看一下这个基础介绍先哦 https://blog.csdn.net/qq_33794872/article/details/107163983 效果如下： 首先需要俩个布局，一个是发布者的布局，一个是评论者的布局： 发布者布局文件 custom_item_comment.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns
Android图文混排
sinat_28238111的博客
03-30 945
Android图文混排
Android自定义View-图文混排
最新发布
desertfish8080的博客
01-31 241
BitmapFactory如何以最小的内存损耗加载所需要的图片资源。因为如果将一张1000*1000像素的图片显示到100*100的View上，如果不做优化，那么将存在内存的严重浪费。梳理了一下自定义View文字排版知识，实现文字环绕图片的效果。
android开发 自定义图文混排控件
08-17
android开发 自定义图文混排控件，是基于网络上一个单点触控来写的，使用见博客地址：http://www.cnblogs.com/feijian/p/4736485.html
Android 原生实现图文混排编辑器
06-12
在Android开发中，创建一个能够实现图文混排编辑器是一项挑战性的任务，因为这涉及到复杂的布局管理和图片处理。本文将详细解析如何使用Android原生控件来构建这样一个功能丰富的编辑器，支持网络图片和本地图片的...
android textview图文混排支持GIF图
11-22
本文将深入探讨如何在Android的TextView中实现图文混排，并支持GIF图的展示，主要借助于原生方法以及第三方库Glide。 首先，让我们了解什么是图文混排。图文混排是指在一段文本中插入图片，使得文字和图片能够和谐...
Android-TextViewDemo图文混排
08-12
在Android开发中，文本输入和显示是用户界面设计的关键部分，`TextView`是Android系统提供的一个核心组件，用于展示单行或多行文本。本示例项目"Android-TextViewDemo图文混排"着重展示了如何利用`TextView`进行丰富...
Android 通过 WebView 与js 简单交互实现图文混排与查看大图功能
04-18
本文将深入探讨如何利用WebView和JavaScript进行简单交互，以实现图文混排和查看大图的功能。 1. **WebView基本使用** - WebView是Android提供的一种内嵌浏览器组件，可以加载HTML、CSS和JavaScript代码，展示网页...
XRichText：一个Android富文本类库，支持图文混排，支持编辑和预览，支持插入和删除图片
02-01
XRichText 一个Android富文本类库，支持图文混排，支持编辑和预览，支持插入和删除图片。 实现的原理： 使用ScrollView作为最外层布局包含LineaLayout，里面填充TextView和ImageView。 删除的时候，根据光标的位置，删除TextView和ImageView，文本自动合并。 生成的数据为列表集合，可自定义处理数据格式。 注意事项 V1.4版本开放了图片点击事件接口和删除图片接口，具体使用方式可以参考后面的文档说明，也可以参考演示实现。 V1.6版本升级RxJava到2.2.3版本，RxAndroid到2.1.0版本。设置字体大小时需要带着单位，如app：rt_editor_text_size =“ 16sp”。 V1.9.3及后续版本，xrichtext库中已去掉Glide依赖，开放接口可以自定义图片加载器。具体使用方式可以参考后面的文档说明，也可以参考Demo实现。 Demo中图片选择器为知乎开源库Matisse，适配Android 7.0系统使用FileProvider获取图片路径。 开发环境更新为AS 3.4.2 + Gradle 4
图文混排编辑器
12-06
可以在flex4中使用的图文混排编辑工具（完整版）
android中文字和图片混排效果的实现
04-15
今天项目中碰见一个问题就是有多行文字但是有个图标必须是在一行文字的首位或者最后展示drawableleft等方法已经不能满足需求
Android解决类似新闻文章列表图文混排，禁止图片列表点击效果
幻化万千戏红尘
05-07 1098
问题是：双重recycleview嵌套，，外层recycleview的item里面图片recycleview会获取到焦点，导致点击图片recycleview部分不会有点击效果，不能跳到文章详情页里面去。现在想到的解决办法有两种：第一种：自定义一个recycleview，重写ontouchEvent事件，返回false，没有触摸事件。再替换掉里面图片recycleview就可以了public cla...
实现图文混排ListView展示 ---- Android版
iteye_18347的博客
06-05 791
使用eclipse创建一个Android Application  创建完成之后，开始java代码的编写 声明变量//listview列表 private ListView listView; //数据适配器 private SimpleAdapter simp_adapter; //被展示数据源 private List&lt;Map&lt;String,Object&gt;&...
安卓如何实现图文混排
济沧海 x 远沧溟
12-26 1677
安卓如何实现图文混排一、安卓实现图文混排的几种方式1. EditText with Spannable2. RecyclerView3. WebViewF. 最终方案二、图片保存的几种方案1. 保留在原来位置2. 复制到应用的文件夹3. 复制到笔记的文件夹F. 最终方案三、数据结构设计1. 管理图片资源1. ImageEntry2. ImageTable2. 笔记中插入图片1. PictureEn...
文字图片混排页面框架(仿新闻图文混排页面)
Finley的博客
12-07 6059
因为项目需求，最近写了仿新闻页面文字图片混排页面的框架 只需要简单配置即可动态生成TextView和ImageView，图片可以点击进入查看放大缩小，支持网络图片和本地图片 使用方式 public class MainActivity extends AppCompatActivity { private ScrollView sv_main
Android 手机执行shell命令
程序,有自己的灵魂.
10-14 5160
前提是手机需要root package com.example.test_1; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import java.io.InputStreamReader; import java.util.List; /*
Android studio 编辑框实现图文混排
05-19
Android Studio中的EditText控件默认只能输入文字，如果需要实现图文混排，则需要使用SpannableString类。SpannableString类是一个可变的字符串，可以在其中嵌入一些富文本样式，比如字体、颜色、下划线等。 下面是...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值