Android新闻类界面分享(多种布局的listview)

最近项目里需要一个新闻资讯的界面，就自己试着做了一下，还是非常简单的。实现是重写BaseAdapter,创建自己的adapter，以及popupwindow效果。

效果图：

下面是新闻主界面，所有的新闻条目都显示在这个页面中

Titlebar右边有一个按钮，可以选择具体门类的新闻。

点开某一条新闻直接根据url打开一个webview(这里我偷懒了，大家可以自己完善)

adapter的编写

从上面效果图可以看到，一个listview中包含了3种不同的样式。

1. 没有图片的新闻
2. 有一张大图片的新闻
3. 有一张小图片和文字的新闻

在自己写的adapter类中列举一些核心代码(余下的在demo中)。

三种布局的类

    //没有图片
    class ViewNoPic {
        private TextView tv_title;//标题
        private TextView tv_content;//内容
    }

    //小图片
    class ViewLittlePic {
        private ImageView iv_newspic;//小图片新闻
        private TextView tv_title;//标题
        private TextView tv_content;//内容
    }

    //大图片
    class ViewBigPic {
        private ImageView iv_newspic;// 大图片新闻
        private TextView tv_title;//标题
    }

适配布局的函数getview()
根据不同的布局的type填充对应内容。
自定义的HealthLayoutMessage类之后会涉及。

public View getView(int position, View convertView, ViewGroup arg2) {

        HealthLayoutMessage msg = myList.get(position);
        int type = getItemViewType(position);
        ViewNoPic holderNoPic  = null;
        ViewLittlePic holderLittlePic = null;
        ViewBigPic holderBigPic = null;

        if (convertView == null) {
            switch (type) {
            //没有图片
            case LV_NO_PIC:
                holderNoPic = new ViewNoPic();
                convertView = mInflater.inflate(R.layout.listview1,
                        null);
                holderNoPic.tv_title = (TextView) convertView
                        .findViewById(R.id.lv1_title);
                holderNoPic.tv_content = (TextView) convertView
                        .findViewById(R.id.lv1_content);
                holderNoPic.tv_title.setText(msg.getTitle());
                holderNoPic.tv_content.setText(msg.getContent());
                convertView.setTag(holderNoPic);
                break;
            //大图片 
            case LV_BIG_PIC:
                holderBigPic = new ViewBigPic();
                convertView = mInflater.inflate(R.layout.listview2,
                        null);
                holderBigPic.iv_newspic = (ImageView) convertView
                        .findViewById(R.id.lv2_newspic);
                holderBigPic.tv_title = (TextView) convertView
                        .findViewById(R.id.lv2_title);
                holderBigPic.iv_newspic.setImageResource(msg.getPic());
                holderBigPic.tv_title.setText(msg.getTitle());
                convertView.setTag(holderBigPic);
                break;

            //小图片新闻
            case LV_LITTLE_PIC:
                holderLittlePic = new ViewLittlePic();
                convertView = mInflater.inflate(R.layout.listview3,
                        null);
                holderLittlePic.iv_newspic = (ImageView) convertView
                        .findViewById(R.id.lv3_newspic);
                holderLittlePic.tv_title = (TextView) convertView
                        .findViewById(R.id.lv3_title);
                holderLittlePic.tv_content = (TextView) convertView
                        .findViewById(R.id.lv3_content);
                holderLittlePic.iv_newspic.setImageResource(msg.getPic());
                holderLittlePic.tv_title.setText(msg.getTitle());
                holderLittlePic.tv_content.setText(msg.getContent());
                convertView.setTag(holderLittlePic);
                break;
            default:
                break;
            }

        } else {
            Log.d("baseAdapter", "Adapter_:"+(convertView == null) );
            switch (type) {
            case LV_NO_PIC:
                holderNoPic=(ViewNoPic)convertView.getTag();
                holderNoPic.tv_title.setText(msg.getTitle());
                holderNoPic.tv_content.setText(msg.getContent());
                break;
            case LV_BIG_PIC:
                holderBigPic=(ViewBigPic)convertView.getTag();
                holderBigPic.iv_newspic.setImageResource(msg.getPic());
                holderBigPic.tv_title.setText(msg.getTitle());
                break;
            case LV_LITTLE_PIC:
                holderLittlePic=(ViewLittlePic)convertView.getTag();
                holderLittlePic.iv_newspic.setImageResource(msg.getPic());
                holderLittlePic.tv_title.setText(msg.getTitle());
                holderLittlePic.tv_content.setText(msg.getContent());
                break;

            default:
                break;
            }
        }
        return convertView;
    }

HealthLayoutMessage类
存储每一条新闻信息的类。

public class HealthLayoutMessage {

    private int type;//指定是哪种类型
    private String title;//新闻标题
    private String content;//新闻内容
    private int pic;//新闻图片
    private int tag;
    private Bitmap pic_net;
    private String url;
    public int getType() {
        return type;
    }
    public void setType(int type) {
        this.type = type;
    }
    public int getTag() {
        return tag;
    }
    public void setTag(int tag) {
        this.tag = tag;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getContent() {
        return content;
    }
    public void setContent(String content) {
        this.content = content;
    }
    public int getPic() {
        return pic;
    }
    public void setPic(int pic) {
        this.pic = pic;
    }
    public Bitmap getPicNet() {
        return pic_net;
    }
    public void setPicNet(Bitmap pic_net) {
        this.pic_net = pic_net;
    }
    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
}

主界面

就是MainActivity中的内容(没写出来的参见demo)。
获取之前自定义adapter的信息

    private BaseAdapter getAdapter(){
        return new MyAdapter(this, contentlist);
    }

将主界面中listview的适配器设置为自己写的。

        lv = (ListView)findViewById(R.id.health_news_lv);
        lv.setAdapter(adapter);

修改日期信息，月份的名字写在string.xml中了。

        /*
         *修改日期信息 
         * */
        Calendar c = Calendar.getInstance();
        int month_index = c.get(Calendar.MONTH); 
        String date = String.valueOf(c.get(Calendar.DATE));
        if(date.length()<2) date = "0"+date;
        tv_date.setText(date);
        tv_month.setText(monthname[month_index]);

设置一些新闻信息(demo都是写死在string.xml中了，实际做的时候我是从服务器端获取这些信息的,可以自行修改)

private List<HealthLayoutMessage> getMyData(){
        List<HealthLayoutMessage> msgList = new ArrayList<HealthLayoutMessage>();
        HealthLayoutMessage msg;
        title = getResources().getStringArray(R.array.lv_title);
        content = getResources().getStringArray(R.array.lv_content);
        /*
         * Tag标签:新闻的种类
         * 1:慢病
         * 2:免疫
         * 3:流行病
         * 4:保健
         * */
        msg = new HealthLayoutMessage();
        msg.setTag(1);
        msg.setType(MyAdapter.LV_NO_PIC);
        msg.setTitle(title[0]);
        msg.setContent(content[0]);
        msg.setUrl("http://news.fh21.com.cn/jksd/480509.html");
        msgList.add(msg);

        msg = new HealthLayoutMessage();
        msg.setTag(2);
        msg.setType(MyAdapter.LV_BIG_PIC);
        msg.setTitle(title[8]);
        msg.setPic(R.drawable.newspic1);
        msg.setUrl("http://news.fh21.com.cn/jksd/480509.html");
        msgList.add(msg);

        msg = new HealthLayoutMessage();
        msg.setTag(1);
        msg.setType(MyAdapter.LV_NO_PIC);
        msg.setTitle(title[1]);
        msg.setContent(content[1]);
        msg.setUrl("http://news.fh21.com.cn/jksd/480509.html");
        msgList.add(msg);

        msg = new HealthLayoutMessage();
        msg.setTag(3);
        msg.setType(MyAdapter.LV_LITTLE_PIC);
        msg.setTitle(title[2]);
        msg.setContent(content[2]);
        msg.setPic(R.drawable.newssquarepic1);
        msg.setUrl("http://news.fh21.com.cn/jksd/480509.html");
        msgList.add(msg);

        msg = new HealthLayoutMessage();
        msg.setTag(4);
        msg.setType(MyAdapter.LV_NO_PIC);
        msg.setTitle(title[3]);
        msg.setContent(content[3]);
        msg.setUrl("http://news.fh21.com.cn/jksd/480509.html");
        msgList.add(msg);

        msg = new HealthLayoutMessage();
        msg.setTag(4);
        msg.setType(MyAdapter.LV_NO_PIC);
        msg.setTitle(title[4]);
        msg.setContent(content[4]);
        msg.setUrl("http://news.fh21.com.cn/jksd/480509.html");
        msgList.add(msg);

        msg = new HealthLayoutMessage();
        msg.setTag(2);
        msg.setType(MyAdapter.LV_LITTLE_PIC);
        msg.setTitle(title[5]);
        msg.setContent(content[5]);
        msg.setPic(R.drawable.newssquarepic2);
        msg.setUrl("http://news.fh21.com.cn/jksd/480509.html");
        msgList.add(msg);

        msg = new HealthLayoutMessage();
        msg.setTag(1);
        msg.setType(MyAdapter.LV_BIG_PIC);
        msg.setTitle(title[9]);
        msg.setPic(R.drawable.newspic2);
        msg.setUrl("http://news.fh21.com.cn/jksd/480509.html");
        msgList.add(msg);

        msg = new HealthLayoutMessage();
        msg.setTag(3);
        msg.setType(MyAdapter.LV_NO_PIC);
        msg.setTitle(title[6]);
        msg.setContent(content[6]);
        msg.setUrl("http://news.fh21.com.cn/jksd/480509.html");
        msgList.add(msg);

        msg = new HealthLayoutMessage();
        msg.setTag(3);
        msg.setType(MyAdapter.LV_NO_PIC);
        msg.setTitle(title[7]);
        msg.setContent(content[7]);
        msg.setUrl("http://news.fh21.com.cn/jksd/480509.html");
        msgList.add(msg);
        return msgList;

    }
    //标题栏右侧的项目显示
    private void initData() {
        moreList = new ArrayList<Map<String, String>>();
        Map<String, String> map;
        map = new HashMap<String, String>();
        map.put("share_key", "慢病");
        moreList.add(map);
        map = new HashMap<String, String>();
        map.put("share_key", "免疫");
        moreList.add(map);
        map = new HashMap<String, String>();
        map.put("share_key", "流行病");
        moreList.add(map);
        map = new HashMap<String, String>();
        map.put("share_key", "保健");
        moreList.add(map);
        map = new HashMap<String, String>();
        map.put("share_key", "所有资讯");
        moreList.add(map);
        contentlist = new ArrayList<HealthLayoutMessage>(getMyData());
        adapter = getAdapter();
    }

popupwindow的初始化有一个initPopupWindow函数。其中比较重要的就是设置点击popupwindow不同栏目时的处理函数。
根据以及定好的新闻不同tag的值来确定显示哪一些新闻。(从服务器端获取内容的话这个函数要小小修改一下)

        lvPopupList.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                contentlist.clear();
                if(position == 4){
                    contentlist.addAll(getMyData());
                }
                else{
                    contentlist.addAll(getMyData());
                    for(int i=0;i<contentlist.size();i++){
                        if(contentlist.get(i).getTag()!=(position+1)){
                            contentlist.remove(i);
                            i--;
                        }
                    }
                }
                adapter.notifyDataSetChanged();
            }
        });

新闻主界面布局

三种不同的新闻布局写了三个简单的listview。记录如下：
1.无图片的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <View
        android:layout_width="wrap_content"
        android:layout_height="0.7dip"
        android:background="@drawable/ic_shelf_category_divider" />
    <TextView
        android:id="@+id/ic_tag"
        android:layout_width="60dp"
        android:layout_height="17dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="0dip"
        android:gravity="center"
        android:background="#727272"
        android:text="健康资讯"
        android:textColor="#FFFFFF"
        android:textStyle="bold"
        android:textSize="10sp"
         />

    <TextView
        android:id="@+id/lv1_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:text="TextView"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/lv1_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="7dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:text="TextView"
        android:textColor="#9E9E9E"
        android:textSize="14sp" />
   <View
        android:layout_width="wrap_content"
        android:layout_height="2.0dip"
        android:layout_marginTop="10dp"
        />


</LinearLayout>

2.一张大图片布局

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

    <View
        android:layout_width="wrap_content"
        android:layout_height="0.7dip"
        android:background="@drawable/ic_shelf_category_divider" />

    <TextView
        android:id="@+id/ic_tag"
        android:layout_width="60dp"
        android:layout_height="17dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="0dip"
        android:background="#727272"
        android:gravity="center"
        android:text="图片新闻"
        android:textColor="#FFFFFF"
        android:textSize="10sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/lv2_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="10dp"
        android:text="TextView"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/lv2_newspic"
        android:layout_width="match_parent"
        android:layout_height="166dp"
        android:layout_gravity="center"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="10dp"
        android:src="@drawable/newspic1" />
       <View
        android:layout_width="wrap_content"
        android:layout_height="2.0dip"
        android:layout_marginTop="10dp"
        />

</LinearLayout>

3.一张小图片加文字的布局

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

    <View
        android:layout_width="wrap_content"
        android:layout_height="0.7dip"
        android:background="@drawable/ic_shelf_category_divider" />

    <TextView
        android:id="@+id/ic_tag"
        android:layout_width="60dp"
        android:layout_height="17dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="0dip"
        android:background="#727272"
        android:gravity="center"
        android:text="图文并茂"
        android:textColor="#FFFFFF"
        android:textSize="10sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/lv3_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="10dp"
        android:text="TextView"
        android:textSize="20sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="7dp"
        android:orientation="horizontal" >
"

        <TextView
            android:id="@+id/lv3_content"
            android:layout_width="match_parent"
            android:layout_weight="5"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textColor="#9E9E9E"
            android:textSize="14sp" />

        <ImageView
            android:id="@+id/lv3_newspic"
            android:layout_width="match_parent"
            android:layout_weight="6"
            android:layout_height="150dp"
            android:layout_gravity="center"
            android:src="@drawable/newssquarepic2" />
    </LinearLayout>

       <View
        android:layout_width="wrap_content"
        android:layout_height="2.0dip"
        android:layout_marginTop="10dp"
        />

</LinearLayout>

最后

结束了，就是这么简单。
作者还非常弱，欢迎批评指正。
demo下载点这里