ViewPager和lisitView的组合使用

利用viewpager和listview实现一个简单的新闻Demo。

主页面

点击进入详情页面

以下是相关代码部分：

MainActivity.java

public class MainActivity extends FragmentActivity {

	private List<Fragment> mList;
	private PagerTabStrip mTab;
	private ViewPager mViewPager;
	private List<String> mTitleList;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mViewPager =(ViewPager) findViewById(R.id.parger);
		add();
	}

	private void add() {
		//设置view
		mList = new ArrayList<Fragment>();
		mList.add(new Fragment1());
		mList.add(new Fragment2());
		mList.add(new Fragment3());
		mList.add(new Fragment4());
		
		//设置标题
		mTitleList = new ArrayList<String>();
		mTitleList.add((String) getText(R.string.tabTitle1));
		mTitleList.add((String) getText(R.string.tabTitle2));
		mTitleList.add((String) getText(R.string.tabTitle3));
		mTitleList.add((String) getText(R.string.tabTitle4));
		
		//设置适配器
		MyFragmentPagerAdapter adapter =new MyFragmentPagerAdapter(getSupportFragmentManager(), mList, mTitleList);
		mViewPager.setAdapter(adapter);
	}
}

对应的布局文件为：

<RelativeLayout 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"
    tools:context="${relativePackage}.${activityClass}" >

    <android.support.v4.view.ViewPager
        android:id="@+id/parger"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" >

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top" >
        </android.support.v4.view.PagerTabStrip>
    </android.support.v4.view.ViewPager>

</RelativeLayout>

由于listview就像一个烟盒，所以要填满这个烟盒就需要一根根的烟，所以我们需要创建一个item来当作单个的烟：

item.xml

<?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="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/news_image"
        android:layout_width="66dp"
        android:layout_height="66dp"
        android:src="@drawable/ic_launcher" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/news_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="2dp"
            android:text="tiele" />

        <TextView
            android:id="@+id/news_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="2dp"
            android:text="2016-12-21" />

        <TextView
            android:id="@+id/news_introduce"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="2dp"
            android:text="石家庄雾霾严重" />
    </LinearLayout>

</LinearLayout>

这是详情的activity代码：

DetailsActivity.java

public class DetailsActivity extends Activity{

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.details_layout);
	}
}

对应的布局文件为：

details_layout.xml

<?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" >
    
<TextView 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="新闻详情"/>
</LinearLayout>

适配器的代码：

package com.example.demo.adapter;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter{

	private List<Fragment> mList;
	private List<String> mTitleList;
	
	/**
	 * 构造方法
	 * @param fm
	 */
	public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> mList, List<String> mTitleList) {
		super(fm);
		this.mList=mList;
		this.mTitleList=mTitleList;
	}

	@Override
	public Fragment getItem(int arg0) {
		// TODO Auto-generated method stub
		return mList.get(arg0);
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return mList.size();
	}
	
	@Override
	public CharSequence getPageTitle(int position) {
		// TODO Auto-generated method stub
		return mTitleList.get(position);
	}

}

这里是viewpager加载的页面。我是用的是Fragment，因为一共有四个Fragment每个都基本一样，所以我就列举一个，详情可以下载我的Demo

package com.example.demo.fragment;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.example.demo.DetailsActivity;
import com.example.demo.R;

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

public class Fragment1 extends Fragment{

	private ListView mListview;
	private SimpleAdapter mSAdapter;
	private int[] image;
	private String[] news_title;
	private String[] news_time;
	private String[] news_introduce;
	private List<Map<String, Object>> mList;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View view = inflater.inflate(R.layout.view1, container, false);
		return view;
	}
	
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onActivityCreated(savedInstanceState);
		mListview =(ListView) getActivity().findViewById(R.id.listview1);
		setData();
		mListview.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
				Intent intent = new Intent(getActivity(), DetailsActivity.class);
				startActivity(intent);
				
			}
		});
	}

	private void setData() {
		
		mList= new ArrayList<Map<String,Object>>();
		image = new int[]{R.drawable.new1,R.drawable.new2,R.drawable.new3,R.drawable.new4};
		news_title= new String[]{"标题1","标题2","标题3","标题4"};
		news_time= new String[]{"2016-12-21","2016-12-21","2016-12-21","2016-12-21"};
		news_introduce= new String[]{"内容1","内容2","内容","内容4"};
		mSAdapter = new SimpleAdapter(getActivity(), getdata(), R.layout.item,
				new String[] { "pic", "title", "time", "introduce" },
				new int[] { R.id.news_image, R.id.news_title, R.id.news_time, R.id.news_introduce });
		
		mListview.setAdapter(mSAdapter);

	}

	private List<? extends Map<String, Object>> getdata() {
		for(int i=0;i<image.length;i++){
			Map<String, Object> map = new HashMap<String, Object>();
			map.put("pic", image[i]);
			map.put("title", news_title[i]);
			map.put("time", news_time[i]);
			map.put("introduce", news_introduce[i]);
			mList.add(map);
		}
		return mList;
	}


}

说明：

由于该Demo没有实现联网功能来获取相关数据，所有，所有的新闻图片和新闻都需要在本地创建。还有就是大家可以根据自己的需要来修改相关的布局文件，实现更美观的样式。

Demo地址：http://download.csdn.net/detail/my_dream014/9735072