Android 使用ListView完成新闻页面图标+标题+内容

           Android 使用ListView完成新闻页面图标+标题+内容

       最近项目开发需要实现一个带有图片+标题+内容的列表，在网上找了一些资料，最后应用到了项目里面。我这个人记性有点不好，所以写下来记录一下，方便以后查看。

     先看一下效果图：

 1、应用页面的activity，我在demo里面是使用的mainActivity

public class MainActivity extends Activity {
    //创建显示列表的listView
    private ListView listView;
    //模拟新闻的标题数据
    private List<String> listTitle;
    //模拟新闻的信息数据
    private List<String> listRemark;
    //创建适配器对象
    private MyAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化页面对象
        initUI();
        //将数据显示在页面上
        initDate();
    }
    public void initUI(){
        listView=(ListView) findViewById(R.id.lv_text_view);
        listTitle=new ArrayList<String>();
        listRemark=new ArrayList<String>();

    }
    public  void initDate(){
        //模拟创建数据
        for (int i=0;i<99;i++){
            listTitle.add("新闻标题"+i);
            listRemark.add("新闻内容"+i);
        }
        adapter=new MyAdapter(listTitle,listRemark,this);
        listView.setAdapter(adapter);
    }
}

2、MainActivity的activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.hz.loginapp.MainActivity">
    <ListView
        android:id="@+id/lv_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ListView>
</RelativeLayout>

3、实现ListView的item页面 list_view_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="3dp"
        android:layout_toRightOf="@id/iv_icon"
        android:ellipsize="end"
        android:singleLine="true"
        android:text="新闻标题"
        android:textColor="#000000"
        android:textSize="20sp" >

    </TextView>
    <TextView
        android:id="@+id/tv_message"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_title"
        android:layout_toRightOf="@id/iv_icon"
        android:ellipsize="end"
        android:singleLine="true"
        android:text="新闻内容"
        android:textColor="#999999"
        android:textSize="15sp" />

</RelativeLayout>

4、用来适配ListView的Adapter

package com.hz.loginapp;

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

import java.util.List;
import java.util.Map;

/**
 * Created by Administrator on 2018/9/6.
 */

public class MyAdapter extends BaseAdapter {
    private List<String> listTitle;
    private List<String> listRemark;
    private Context context;
    public MyAdapter(List<String> listTitle,List<String> listRemark,Context context){
        this.listTitle=listTitle;
        this.listRemark=listRemark;
        this.context=context;
    }
    @Override
    public int getCount() {
        //return返回的是int类型，也就是页面要显示的数量。
        return listRemark.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) {
        View view;
        if (convertView==null){
            //通过一个打气筒 inflate 可以把一个布局转换成一个view对象
            view=View.inflate(context,R.layout.list_view_item,null);
        }else {
            view=convertView;//复用历史缓存对象
        }
        //页面的图标
        ImageView img=(ImageView) view.findViewById(R.id.iv_icon);
        //页面文字标题
        TextView tvTitle=(TextView)view.findViewById(R.id.tv_title);
        //页面的备注
        TextView tvRemark=(TextView)view.findViewById(R.id.tv_message);
        //将标题显示页面上
        tvTitle.setText(listTitle.get(position));
        //将信息显示在页面上
        tvRemark.setText(listRemark.get(position));
        return view;
    }
}

  在这篇文章里面我只是使用循环模拟生成了一些标题和信息，图片就一直使用系统默认的。