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下载点这里

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-10-14 02:17:13

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

Android 多个界面复用一个布局文件

1.layout_common.xml 复用的布局文件 <?xml version="1.0" encoding="utf-8"?> <!-- 复用的布局文件 --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android

Android开发之ListView添加多种布局效果演示

在这个案例中展示的新闻列表,使用到ListView控件,然后在适配器中添加多种布局效果,这里通过重写BaseAdapter类中的 getViewType()和getItemViewType()来做判断,指定ListView列表中指定位置的item加载对应的布局,在 getView中返回对应的视图,之前由于不清楚getViewTypeCount()和getItemViewType()方法,使用得比较少,一直以 为需要添加多个适配器,现在看来当时的想法说明自己见识还不够,哈哈. 第一步:创建放置Li

android界面设计之布局

一.线性布局 <LinearLayout 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" android:orie

Android ListView 多种布局--进阶二

Android ListView 多种布局–进阶一 中提及了这么一个需求,本博文就这个需求的实现做进一步探讨. 前面是单列,后面是双列的情况,使用ListView实现,一般的解决思路是处理getView和getCount方法,如下实现: 首先实现Adapter,处理getView和getCount方法 public class DoubleAdapter extends BaseAdapter implements OnClickListener{ private List<String> m

Android ListView Adapter的getItemViewType和getViewTypeCount多种布局

 <Android ListView Adapter的getItemViewType和getViewTypeCount多种布局> 在Android的ListView中,如果在一个ListView中要实现多种样式的ListView布局样式,则需要在ListView的适配器Adapter中用到:getItemViewType()和getViewTypeCount().getViewTypeCount()告诉ListView需要加载多少种类型的Item View,getItemViewType(

android 实现listview的adapter多种布局方式

这两天在实现某模块的排行榜功能,看了UI给的效果图和切图,感觉有点郁闷,因为平时使用listview时,子项都是只有一种布局方式,而这次却有两种.于是专门研究了下,发现重写adapter的getItemViewType()和getViewTypeCount()方法就可以实现多种布局方式,把自己的实现贴出来共享下. 步骤: 1. 重写 getViewTypeCount() – 返回你有多少个不同的布局: 2. 重写 getItemViewType(int) – 由position返回view ty

android多种布局的列表实现

最近有一个列表效果,需要一个列表有多种布局,最终效果如下: 这个我也问了同事以及开发群里的朋友,居然都没得到最优的实现方式的回答,看来这种复杂列表的需求还是比较少的,我自己也走了一些弯路,把我几个实现的方式整理下,希望对于还不了解的朋友有所帮助. 实现方式1:(每次getView时重新inflate itemView,convertView没有复用,性能低,运行没问题) private class MyAdapter extends BaseAdapter{ private List<Objec

[转]Android开源项目收藏分享

转自:http://blog.csdn.net/dianyueneo/article/details/40683285 Android开源项目分类汇总 如果你也对开源实现库的实现原理感兴趣,欢迎 Star 和 Fork 14884(入群理由必须填写群简介问题答案)4489 63224677(三群已满) 欢迎大家推荐好的Android开源项目,可直接Star.Fork :) 对你有帮助的话,顺手去知乎点个赞吧: 目前包括: ActionBar.ViewPager.GridView.Progress

Android平台第三方应用分享到微信开发

[转载]Android平台第三方应用分享到微信开发 一.申请APPID 微信公共平台和微博分享一样,也需要申请一个ID,来作为调起微信.分享到微信的唯一标识. 申请微信APPID可以到微信平台http://open.weixin.qq.com/app/list/?lang=zh_CN上申请.具体的申请流程网站上有很详细的介绍,我这里就仅列出一些注意事项: (1)申请APPID时的应用名字审核通过之后将不允许更改,所以申请时的应用名字一定要提前确定好.微信官方也有详细说明,如下图: (2)应用签名