Android新闻类界面分享(多种布局的listview)
最近项目里需要一个新闻资讯的界面，就自己试着做了一下，还是非常简单的。实现是重写BaseAdapter,创建自己的adapter，以及popupwindow效果。
效果图：
下面是新闻主界面，所有的新闻条目都显示在这个页面中
Titlebar右边有一个按钮，可以选择具体门类的新闻。
点开某一条新闻直接根据url打开一个webview(这里我偷懒了，大家可以自己完善)
adapter的编写
从上面效果图可以看到，一个listview中包含了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 getMyData(){
List msgList = new ArrayList();
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 map;
map = new HashMap();
map.put("share_key", "慢病");
moreList.add(map);
map = new HashMap();
map.put("share_key", "免疫");
moreList.add(map);
map = new HashMap();
map.put("share_key", "流行病");
moreList.add(map);
map = new HashMap();
map.put("share_key", "保健");
moreList.add(map);
map = new HashMap();
map.put("share_key", "所有资讯");
moreList.add(map);
contentlist = new ArrayList(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;iif(contentlist.get(i).getTag()!=(position+1)){
contentlist.remove(i);
i--;
}
}
}
adapter.notifyDataSetChanged();
}
}); 新闻主界面布局
三种不同的新闻布局写了三个简单的listview。记录如下：
1.无图片的布局
<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.一张大图片布局
<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.一张小图片加文字的布局
<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下载点这里