新闻客户端案例是AsyncHttpClient和SmartImage的综合应用,该案例将要实现获取服务器的XML文件将其解析出来捆绑显示到ListView上的功能。
一、首先创建相对应的布局文件,此界面是新闻客户端的主界面,包含提示用户数据正在加载中的ProgressBar,TextView用于展示新闻信息的ListView,在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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="cn.edu.bzu.anew.MainActivity"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/loading" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" android:visibility="invisible"> <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="正在加载信息..." /> </LinearLayout> <ListView android:id="@+id/lv_news" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout> </RelativeLayout>
二、为ListView创建一个布局news_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="65dp"> <com.loopj.android.image.SmartImageView android:id="@+id/siv_icon" android:layout_width="80dp" android:layout_height="60dp" android:scaleType="centerCrop" android:src="@mipmap/ic_launcher" android:layout_alignParentLeft="true" android:layout_alignParentStart="true"></com.loopj.android.image.SmartImageView> <TextView android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginTop="10dp" android:layout_toRightOf="@id/siv_icon" android:ellipsize="end" android:maxLength="20" android:singleLine="true" android:text="我是标题" android:textColor="#000000" android:textSize="18sp" /> <TextView android:id="@+id/tv_description" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tv_title" android:layout_marginLeft="5dp" android:layout_marginTop="5dp" android:layout_toRightOf="@id/siv_icon" android:ellipsize="end" android:maxLength="16" android:maxLines="1" android:text="我是描述" android:textColor="#99000000" android:textSize="14sp" /> <TextView android:id="@+id/tv_type" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="5dp" android:layout_marginRight="10dp" android:text="评论" android:textColor="#99000000" android:textSize="12sp" /> </RelativeLayout>
三、编写界面交互代码在MainActivity ,用于实现获取服务器的NewsInfo.xml文件解析的信息设置
到ListView显示下界面上。
四、创建NewsInfo类,定义了图片路径,新闻标题,新闻描述,新闻类型,新闻评论五种属性。package cn.edu.bzu.anew; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.LinearLayout; import android.widget.ListView; import android.widget.Toast; import com.loopj.android.http.AsyncHttpClient; import com.loopj.android.http.AsyncHttpResponseHandler; import java.io.UnsupportedEncodingException; import java.util.List; import cn.edu.bzu.anew.Tools.JsonParse; import cn.edu.bzu.anew.adapter.NewsAdapter; import cn.edu.bzu.anew.entity.NewsInfo; public class MainActivity extends AppCompatActivity { private ListView lvNews; private List<NewsInfo> newsInfos; private LinearLayout loading; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); lvNews=(ListView)findViewById(R.id.lv_news); loading=(LinearLayout)findViewById(R.id.loading); fillData(); } private void fillData(){ AsyncHttpClient client =new AsyncHttpClient(); client.get("http://10.61.5.207:8080/NewsInfo.json",new AsyncHttpResponseHandler(){ @Override public void onSuccess(int i, org.apache.http.Header[] headers, byte[] bytes) { try{ String json=new String(bytes,"utf-8"); newsInfos= JsonParse.getNewsInfo(json); if(newsInfos==null){ Toast.makeText(MainActivity.this,"解析失败", Toast.LENGTH_LONG).show(); }else{ loading .setVisibility(View.INVISIBLE); lvNews.setAdapter(new NewsAdapter(MainActivity.this,newsInfos)); } } catch (UnsupportedEncodingException e) { e.printStackTrace(); } } @Override public void onFailure(int i, org.apache.http.Header[] headers, byte[] bytes, Throwable throwable) { } } ); } }
五、创建解析文件的工具类,将解析操作的逻辑放在工具类NewsAdapter中public class NewsInfo { private String icon; private String title; private String description; private int type; private long comment; public NewsInfo(String icon, String title, String description, int type, long comment) { this.icon = icon; this.title = title; this.description = description; this.type = type; this.comment = comment; } public String getIcon() { return icon; } public void setIcon(String icon) { this.icon = icon; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public int getType() { return type; } public void setType(int type) { this.type = type; } public long getComment() { return comment; } public void setComment(long comment) { this.comment = comment; } }
package cn.edu.bzu.anew.adapter; import android.content.Context; import android.support.annotation.NonNull; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.TextView; import com.loopj.android.image.SmartImageView; import java.util.List; import cn.edu.bzu.anew.R; import cn.edu.bzu.anew.entity.NewsInfo; public class NewsAdapter extends ArrayAdapter<NewsInfo>{ public NewsAdapter(Context context, List<NewsInfo> objects) { super(context, R.layout.news_item, objects); } @NonNull @Override public View getView(int position, View convertView, ViewGroup parent) { NewsInfo newsinfo= getItem(position);//传递position,获取当前位置对应的newsinfo新闻信息 View view=null; viewHolder viewHolder; if(convertView==null){ //判断convertView中是否加载了布局,有没有缓存。为空说明没有缓存 view=LayoutInflater.from(getContext()).inflate(R.layout.news_item,null); viewHolder=new viewHolder(); viewHolder.siv= (SmartImageView) view.findViewById(R.id.siv_icon); viewHolder.tv_title= (TextView) view.findViewById(R.id.tv_title); viewHolder.tv_description= (TextView) view.findViewById(R.id.tv_description); viewHolder.tv_type= (TextView) view.findViewById(R.id.tv_type); view.setTag(viewHolder); //保存 }else{ view=convertView; viewHolder=(viewHolder) view.getTag(); } viewHolder.siv.setImageUrl(newsinfo.getIcon()); viewHolder.tv_title.setText(newsinfo.getTitle());//传递题目 viewHolder.tv_description.setText(newsinfo.getDescription()); viewHolder.tv_type.setText(newsinfo.getType()+""); return view; } class viewHolder{//添加类,封装需要查找的控件 TextView tv_title; TextView tv_description; TextView tv_type; SmartImageView siv; } }
最后需要开启Tomcat服务器,在服务器的安装目录中打开webapps文件夹中,将NewsInfo.xml文件
放置在ROOT文件夹下 文件代码如下:
[ { "icon": "http://10.61.5.207:8080/images/a.png", "title": "科技温暖世界", "content": "进入一个更有爱的领域", "type": "1", "comment": "69" }, { "icon": "http://10.61.5.207:8080/images/b.png", "title": "《神武》", "content": "新美术资源盘点,视觉新体验", "type": "2", "comment": "35" }, { "icon": "http://10.61.5.207:8080/images/c.png", "title": "南北车正式公布合并", "content": "南北车将于今日正式公布合并", "type": "3", "comment": "2" }, { "icon": "http://10.61.5.207:8080/images/d.png", "title": "萌呆了!汪星人抱玩偶酣睡", "content": "汪星人抱玩偶酣睡,萌翻网友", "type": "1", "comment": "25" }, { "icon": "http://10.61.5.207:8080/images/e.png", "title": "风力发电进校园", "content": "风力发电普进校园", "type": "2", "comment": "26" }, { "icon": "http://10.61.5.207:8080/images/f.png", "title": "地球一小时", "content": "地球熄灯一小时", "type": "1", "comment": "23" }, { "icon": "http://10.61.5.207:8080/images/g.png", "title": "最美公路", "content": "最美公路,难以想象", "type": "1", "comment": "23" } ]
因为要访问网络需要在AndroidMainfest.xml里面配置相应的权限如下:
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
运行图如下:
中间出现很多错误,最后的运行结果也不太完整,小标题没有显示出来,需要继续修改,需要再完善。