Android图文混排的实现思路

Android图文混排

---

Android提供的原生控件中要么只显示文字的TextView，要么只显示图片的ImageView，但是在一些新闻类或者阅读类的app中需要实现图文混排，这样使得阅读效果会更好。实现的这类效果的方法有：
1. WebView 其实就是加载一个网页
2. 使用ListView去实现

一 .WebView实现

其实就是加载一个网页，像今日头条，zaker里的某些页面就是用WebView去实现，这种方法最简单，但是毕竟在某些手机上面，网页体验不是很好

二.ListView实现

ListView实现的思路:这个需要和后端商量好数据的格式，比如：

这是图片一，<Image>http://i.imgur.com/DvpvklR.png</Image>，这是图片二，<Image>http://i.imgur.com/DvpvklR.png</Image>

这是要显示的文字和图片。客户端收到这段字符串之后，将其分解成四个字符串

String[] str ={
                "这是图片",
                "http://i.imgur.com/DvpvklR.png",
                "这是图片二",
                "http://i.imgur.com/DvpvklR.png"
                    };

然后在每个item里面显示对应的东西:如果是文字，就直接显示文字，如果是 图片链接，就下载显示图片。这样就能将图片显示在正确的文字下面。
代码如下：
图片下载用的是Picasso这个库，在Android studio的build.gradle中添加如下代码,

 compile 'com.squareup.picasso:picasso:2.5.0'

package com.example.cheng.imagetextdemo;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ListView;

public class ImageTextActivity extends ActionBarActivity {

    private ListView listView;
    private String[] str ={
                "这是图片",
                "http://i.imgur.com/DvpvklR.png",
                "这是图片二",
                "http://i.imgur.com/DvpvklR.png"
                        };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_text);
        listView = (ListView)findViewById(R.id.listView);
        init();
    }

    private void init()
    {

        ImageTextAdapter adapter = new ImageTextAdapter(this,str);
        listView.setAdapter(adapter);
    }

}

Adapter 的代码：

package com.example.cheng.imagetextdemo;

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

import com.squareup.picasso.Picasso;


/**
 * Created by cheng on 16/1/27.
 */
public class ImageTextAdapter extends BaseAdapter
{
    private String[] str;
    private Context context;
    public ImageTextAdapter(Context context,String[] str)
    {
        this.context = context;
        this.str = str;
    }


    @Override
    public int getCount() {
        return str.length;
    }

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if(convertView == null)
        {
           convertView = LayoutInflater.from(context).inflate(R.layout.list_item,null);
            ImageView image = (ImageView)convertView.findViewById(R.id.image);
            TextView text = (TextView)convertView.findViewById(R.id.text);
            if(str[position].indexOf("http") == 0)
            {
                //这是图片
                Log.v("TAG", "加载图片:"+str[position]);               Picasso.with(context).load(str[position]).placeholder(R.mipmap.ic_launcher).into(image);

            }else
            {
                text.setText(str[position].toString());
            }
        }
        return convertView;
    }
}

item的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/text"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:id="@+id/image"/>
</LinearLayout>

结果：