170.n1-新闻详情listView展示新闻

最新推荐文章于 2019-04-11 18:08:13 发布

原创最新推荐文章于 2019-04-11 18:08:13 发布 · 467 阅读

1 ·

CC 4.0 BY-SA版权

android整理专栏收录该内容

261 篇文章

订阅专栏

本文介绍如何在Android应用中实现ListView与Banner的组合滑动效果。通过设置ListView的缓存颜色提示为白色，并利用addHeaderView方法将Banner添加到ListView顶部，实现了两者同步滑动的功能。同时介绍了设置图片边框的方法及具体的XML布局代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滑动listView背景变黑的时候使用android:cacheColorHint="#ffffff"这个设置样式为白色,ListView白和banner分别占用空间，如果需要其组合在一起可以先设置LIstView然后在使用addHearView再将banner添加到头部即可一起滑动

图片产生黑色的边框的方法

android:padding="1dp"
android:background="@android:color/darker_gray"

新闻的单个条目item_list_view.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="match_parent" >
    

    <!-- padding和background结合起来就有一个1的边框了 -->
    <ImageView
        android:id="@+id/iv_pic"
        android:layout_width="110dp"
        android:layout_height="70dp"
        android:scaleType="fitXY"
        android:padding="1dp"
        android:background="@android:color/darker_gray"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/image_demo" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@+id/iv_pic"
        android:text="新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题"
        android:textColor="#000"
        android:maxLines="2"
        android:ellipsize="end"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/tv_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/tv_title"
        android:text="2017-05-18 16:20"
        android:layout_alignBottom="@id/iv_pic"
        android:textColor="@android:color/darker_gray"
        android:textSize="16sp" />
</RelativeLayout>

主界面详情页tab_detail_pager.xml只有一个ListView，先不填充banner

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <!-- 下面的新闻条目 -->
    <ListView 
        android:id="@+id/lv_list"
        android:layout_width="match_parent"
    	android:layout_height="0dp"
    	android:cacheColorHint="#ffffff"
    	android:layout_weight="1"
        ></ListView>
</LinearLayout>

banner的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
	<!-- banner图,继承处理以后的ViewPager，防止父类拦截 -->
    <com.ldw.news.view.TopNewsViewPager
        android:id="@+id/vp_news"
        android:layout_width="match_parent"
    	android:layout_height="200dp"
        />
    <!-- 下方的页签和文本 -->
    	<RelativeLayout 
    	    android:layout_width="match_parent"
    		android:layout_height="wrap_content"
    		android:layout_alignParentBottom="true"
    		android:padding="5dp"
    		android:background="#a000"
    	    >
    	   <TextView 
    	       android:id="@+id/tv_title"
    	       android:layout_width="wrap_content"
    			android:layout_height="wrap_content"
    			android:textColor="#ffffff"
    			android:textSize="16sp"
    			android:text=""
    	       />
    	   <!-- 使用viewpagerindicator实现小圆点 -->
    	   <com.viewpagerindicator.CirclePageIndicator
		        android:id="@+id/indicator"
		        android:padding="10dip"
		        android:layout_height="wrap_content"
		        android:layout_alignParentRight="true"
		        android:layout_width="wrap_content"
		        app:radius="4dp"
		        app:fillColor="#FF0000"
		        app:pageColor="@android:color/darker_gray"
		        app:strokeWidth="2dp"
		        />
    	</RelativeLayout>
</RelativeLayout>

逻辑代码TabDetailPager.java

package com.ldw.news.base;

import java.util.ArrayList;

import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.google.gson.Gson;
import com.ldw.news.R;
import com.ldw.news.domain.NewsData.NewsTabData;
import com.ldw.news.domain.TabData;
import com.ldw.news.domain.TabData.TabNewsData;
import com.ldw.news.domain.TabData.TopNewsData;
import com.ldw.news.global.ClobalContants;
import com.lidroid.xutils.BitmapUtils;
import com.lidroid.xutils.HttpUtils;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.exception.HttpException;
import com.lidroid.xutils.http.ResponseInfo;
import com.lidroid.xutils.http.callback.RequestCallBack;
import com.lidroid.xutils.http.client.HttpRequest.HttpMethod;
import com.lidroid.xutils.view.annotation.ViewInject;
import com.viewpagerindicator.CirclePageIndicator;

/*
 * 左边菜单栏右边详情页，最上面对应的tab，页签
 */
public class TabDetailPager extends BaseMenuDetailPager implements OnPageChangeListener{

	//携带数据详情的数据
	private NewsTabData mTabData;
	private TextView text;
	private String mUrl;
	private TabData mTabDetailData;
	@ViewInject(R.id.vp_news)
	private ViewPager mViewPager;
	@ViewInject(R.id.tv_title)
	private TextView tv_title;//banner的标题
	@ViewInject(R.id.indicator)	
	private CirclePageIndicator indicator;//banner下面的小圆点
	@ViewInject(R.id.lv_list)
	private ListView lv_list;//新闻列表
	private ArrayList<TopNewsData> mTopNewsList;//banner的数据
	private ArrayList<TabNewsData> mNewsList;
	
	public TabDetailPager(Activity activity, NewsTabData newsTabData) {
		super(activity);
		mTabData = newsTabData;
		//图片的地址
		mUrl = ClobalContants.SERVER_URL + mTabData.url;
	}

	@Override
	public View initView() {
		View view = View.inflate(mActivity, R.layout.tab_detail_pager, null);
		
		//把banner添加到ListView的头部，实现二者的组合
		View headView = View.inflate(mActivity, R.layout.list_header_topnews, null);
		
		ViewUtils.inject(this, view);
		ViewUtils.inject(this, headView);
		//添加到ListView的头部
		lv_list.addHeaderView(headView);

		//监听Viewager的滑动
		//mViewPager.setOnPageChangeListener(this);
		
		// 向FrameLayout中动态添加布局
		return view;
	}
	
	@Override
	public void initData(){
		
		getDataFromServer();
		

	}
	
	/*
	 * 获取网络数据
	 */
	private void getDataFromServer() {
		//从服务器中获取数据
		HttpUtils utils = new HttpUtils();
		utils.send(HttpMethod.GET, mUrl, new RequestCallBack<String>(){

			@Override
			public void onSuccess(ResponseInfo<String> responseInfo) {
				//获取到返回的结果
				String result = (String) responseInfo.result;
				System.out.println("tab详情返回结果:" + result);

				parseData(result);
				
			}

			@Override
			public void onFailure(HttpException error, String msg) {
				Toast.makeText(mActivity, msg, Toast.LENGTH_SHORT)
				.show();
				//打印错误信息
				error.printStackTrace();
				
			}
			
		});
		
	}
	
	/*
	 * 解析网络数据
	 */
	protected void parseData(String result) {
		//使用Gson解析
		Gson gson = new Gson();
		mTabDetailData = gson.fromJson(result, TabData.class);
		System.out.println("解析结果:" + mTabDetailData);
		//新闻列表的数据ListView
		mNewsList = mTabDetailData.data.news;
		//取到banner新闻top的数据
		mTopNewsList = mTabDetailData.data.topnews;
		
		//top新闻填充
		if(mTopNewsList != null){
			//填充top新闻的pagre
			mViewPager.setAdapter(new TopNewsAdapter());
			
			//banner下面的小圆点，需要在adapter初始化以后才能显示
			indicator.setViewPager(mViewPager);
			indicator.setSnap(true);//支持快照显示
			indicator.setOnPageChangeListener(this);//添加监听，修改文本内容
			indicator.onPageSelected(0);//默认选择第一个，防止图片和远点不对应
			//解析数据的时候初始化标题
			tv_title.setText(mTopNewsList.get(0).title);
		}
		
		//填充新闻列表
		if(mNewsList != null){
			NewsAdapter mNewsAdapter = new NewsAdapter();
			lv_list.setAdapter(mNewsAdapter);
		}
	}
	
	/*
	 * 头条新闻,banner
	 */
	class TopNewsAdapter extends PagerAdapter{
		
		private BitmapUtils utils;

		//构造函数
		public TopNewsAdapter(){
			utils = new BitmapUtils(mActivity);
			//加载数据过程中，设置默认加载的图片
			utils.configDefaultLoadingImage(R.drawable.topnews_item_default);
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return mTabDetailData.data.topnews.size();
		}

		@Override
		public boolean isViewFromObject(View view, Object object) {
			// TODO Auto-generated method stub
			return view == object;
		}
		
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			//初始化banner图
			ImageView image = new ImageView(mActivity);
			//填充布局对象
			//image.setImageResource(R.drawable.topnews_item_default);
			//填充平铺布局,基于控件的大小
			image.setScaleType(ScaleType.FIT_XY);
			
			//获取到图片资源的数据的地址
			TopNewsData topNewsData = mTabDetailData.data.topnews.get(position);
			utils.display(image, topNewsData.topimage);
			//添加image数据
			container.addView(image);
			return image;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView((View) object);
		}
		
	}
	
	//新闻列表的适配器
	class NewsAdapter extends BaseAdapter{
		private BitmapUtils utils;

		//构造函数初始化图片
		public NewsAdapter(){
			utils = new BitmapUtils(mActivity);
			//加载的时候显示默认图片
			utils.configDefaultLoadingImage(R.drawable.pic_item_list_default);
		}
		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return mNewsList.size();
		}

		@Override
		public Object getItem(int position) {
			// TODO Auto-generated method stub
			return mNewsList.get(position);
		}

		@Override
		public long getItemId(int position) {
			// TODO Auto-generated method stub
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			ViewHolder holder;
			if(convertView == null){
				convertView = View.inflate(mActivity, R.layout.list_news_item, null);
				holder = new ViewHolder();
				holder.iv_pic = (ImageView) convertView.findViewById(R.id.iv_pic);
				holder.tv_date = (TextView) convertView.findViewById(R.id.tv_date);
				holder.tv_title = (TextView) convertView.findViewById(R.id.tv_title);
				
				convertView.setTag(holder);
			}else{
				holder = (ViewHolder) convertView.getTag();
			}
			TabNewsData item = (TabNewsData) getItem(position);
			holder.tv_title.setText(item.title);
			holder.tv_date.setText(item.pupdate);
			utils.display(holder.iv_pic, item.listimage);
			return convertView;
		}
		
	}
	
	static class ViewHolder{
		public TextView tv_title;
		public TextView tv_date;
		public ImageView iv_pic;
	}

	@Override
	public void onPageScrolled(int position, float positionOffset,
			int positionOffsetPixels) {
		// TODO Auto-generated method stub
		
	}

	//滑动的监听，当页面被选中的时候更新标题
	@Override
	public void onPageSelected(int position) {
		//TopNewsData topNewsData= mTabDetailData.data.topnews.get(position);
		tv_title.setText(mTopNewsList.get(position).title);
		
	}

	@Override
	public void onPageScrollStateChanged(int state) {
		// TODO Auto-generated method stub
		
	}

}