ViewPage+Frament+listView滑动效果

近期在做一个须要使用Frament+ViewPage制作一个滑动的效果，看了非常多资料，最终实现了，这与大家分享一下战果

总结一下。这里我做了一个Demo分享给大家

我的文件文件夹结构图

1。首先要有一个ViewPage组件，他是3.0以后出现的，所以要导入android.support.v4这个包

先来建立一个mian布局文件

activity_main.xml

这个布局使用RadioGroup和RadioButton组合，在上面显示第一页。和第二页。以下就是ViewPage

<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" 

    android:background="#ffffff"

    >



    <RadioGroup

        android:id="@+id/radio_group"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"    

        android:orientation="horizontal" >



        <RadioButton

            android:id="@+id/first"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1.0"

            android:background="@drawable/chat_tab_selector_2"

            android:button="@null"

            android:checked="true"

            android:gravity="center"

            android:text="第一页"

            android:textColor="#000000"

            android:textSize="18sp" />

        <RadioButton

            android:id="@+id/second"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1.0"

            android:background="@drawable/chat_tab_selector_2"

            android:button="@null"

            android:gravity="center"

            android:text="第二页"

            android:textColor="#000000"

            android:textSize="18sp" />

    </RadioGroup>

    <android.support.v4.view.ViewPager

        android:id="@+id/view_pager"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_below="@id/radio_group" >

    </android.support.v4.view.ViewPager>



</RelativeLayout>

然后在MainActivity中代码：

注意这里一定要继承FragmentActivity ，不然是Frament管理器是建立不了滴。

package com.example.activity;

import java.util.ArrayList;

import java.util.List;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentActivity;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.widget.RadioGroup;

import android.widget.RadioGroup.OnCheckedChangeListener;





import com.example.content.NumberConstant;

import com.example.frament.MyExampleFragment;

import com.example.viewpagedemo.R;



public class MainActivity extends FragmentActivity implements OnCheckedChangeListener {

private RadioGroup radioGroup;

private ViewPager viewPager;

private List<MyExampleFragment> pagerList = new ArrayList<MyExampleFragment>();



@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

radioGroup = (RadioGroup) findViewById(R.id.radio_group);

viewPager = (ViewPager) findViewById(R.id.view_pager);

radioGroup.check(R.id.first);

radioGroup.setOnCheckedChangeListener(this);// 设置监听器

pagerList.clear();

initDataFrament();//初始化Frament



}



/**

这里我用的是同一个Frament展示不同的数据，我的这个Demo里展示的数据类似，所哟不须要用两个Frament,假设你有须要能够建立多个Frament,然后我还传递了FramentType来区分，展示不同的数据

*/

public void initDataFrament() {

MyExampleFragment fragment1 = MyExampleFragment.newInstance();

Bundle bundle1 = new Bundle();

bundle1.putString("fragmentType", "fragment1");

fragment1.setArguments(bundle1);

pagerList.add(fragment1);





MyExampleFragment fragment2 = MyExampleFragment.newInstance();

Bundle bundle2 = new Bundle();

bundle2.putString("fragmentType", "fragment2");

fragment2.setArguments(bundle2);

pagerList.add(fragment2);



MyPageListAdpter pageAdapter = new                   MyPageListAdpter(this.getSupportFragmentManager(),pagerList,radioGroup);

viewPager.setAdapter(pageAdapter);//设置适配器

viewPager.setOnPageChangeListener(pageAdapter);//设置监听

}





@Override

public void onCheckedChanged(RadioGroup group, int checkedId) {

if (checkedId == R.id.first) {

viewPager.setCurrentItem(NumberConstant.ZERO, true);//这里是两个常量来区分是欢动哪一个frament

} else if (checkedId == R.id.second) {

viewPager.setCurrentItem(NumberConstant.ONE, true);

}

}



/**

* 定义一个适配器实现滑动

* @author shaozucheng

*

*/

private class MyPageListAdpter extends FragmentPagerAdapter implements OnPageChangeListener {





/**

* 保存滑动子页的list

*/

private List<MyExampleFragment> pagerList;



/**

* 标签页

*/

private RadioGroup selectTag;



public MyPageListAdpter(FragmentManager fm, List<MyExampleFragment> pagerList, RadioGroup selectTag) {

super(fm);

this.pagerList = pagerList;

this.selectTag = selectTag;

}



@Override

public Fragment getItem(int arg0) {

return pagerList.get(arg0);

}



@Override

public int getCount() {

return pagerList.size();

}



@Override

public void onPageScrollStateChanged(int arg0) {



}



@Override

public void onPageScrolled(int arg0, float arg1, int arg2) {



}



@Override

public void onPageSelected(int arg0) {

if (arg0 == 0) {

selectTag.check(R.id.first);

} else if (arg0 == 1) {

selectTag.check(R.id.second);

}

}



}



}

然后就是要先建立一个Frament布局。这个布局里就是存放展示数据的listView的了由于你是要在Frament里展示的。

文件名称为：example_widget_listview.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" >





    <ListView

        android:id="@+id/example_listview"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:background="@null"//去掉背景色

        android:divider="@null"//去掉线条

        android:scrollbars="none"//去掉滚动栏

        android:visibility="visible" >

    </ListView>

</LinearLayout>

然后就用写在Frament中初始化数据了，或者你也能够在Activity中初始化数据，然后传到Frament中。那样Frament仅仅负责展示数据，两种方式都能够

注意这里的自己定义的Frament要继承Frament

package com.example.frament;

import java.util.ArrayList;

import java.util.List;

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.ListView;

import com.example.adapter.PersonListAdapter;

import com.example.ato.Person;

import com.example.viewpagedemo.R;





/**

 * 

 * @author shaozucheng

 * 

 */



public class MyExampleFragment extends Fragment {





/**

* 列表

*/

private ListView listView;

/**

* 适配器

*/

private PersonListAdapter adapter;





public PersonListAdapter getAdapter() {

return adapter;

}





public void setAdapter(PersonListAdapter adapter) {

this.adapter = adapter;

}





public static MyExampleFragment newInstance() {

MyExampleFragment fragment = new MyExampleFragment();

return fragment;

}





public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.example_widget_listview, container, false);

listView = (ListView) view.findViewById(R.id.example_listview);

initMettingFrament();

return view;

}





/**

* 初始化数据源

*/

private void initMettingFrament() {

Person p0 = new Person();

Person p1 = new Person();

Person p2 = new Person();

p0.setName("荔枝");

p1.setName("香蕉");

p2.setName("苹果");





Person p3 = new Person();

Person p4 = new Person();

Person p5 = new Person();

p3.setName("黎明");

p4.setName("邓超");

p5.setName("董洁");





List<Person> list1 = new ArrayList<Person>();

list1.add(p1);

list1.add(p2);

list1.add(p0);





List<Person> list2 = new ArrayList<Person>();

list2.add(p3);

list2.add(p4);

list2.add(p5);





String framentType = this.getArguments().getString("fragmentType");

if (framentType.equals("fragment1")) {





adapter = new PersonListAdapter(getActivity(), list1);

} else if (framentType.equals("fragment2")) {

adapter = new PersonListAdapter(getActivity(), list2);

}

listView.setAdapter(adapter);//设置展示数据的适配器

listView.setOnItemClickListener(adapter);//设置监听。点击item每一栏的跳转事件，假设不须要的话，你能够不用设置

}





}

items_list.xml布局文件

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/forum_toipc_list"

    android:layout_width="match_parent"

    android:layout_height="50dp"

    android:background="#ffffff" >





    <RelativeLayout

        android:id="@+id/rel_conrent"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_marginLeft="5dp" >



<!--为了效果好看我在每个item里面放了一张固定大小的图片  -->

        <ImageView

            android:id="@+id/image"

            android:layout_width="50dp"

            android:layout_height="50dp"

            android:layout_centerVertical="true"

            android:layout_marginTop="5dp"

            android:contentDescription="@null"

            android:paddingTop="5dp"

            android:src="@drawable/image1"

            android:visibility="visible" />





        <TextView

            android:id="@+id/content"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:layout_marginLeft="5dp"

            android:layout_toRightOf="@id/image"

            android:gravity="center_vertical"

            android:layout_centerVertical="true"

            android:textColor="#ff0000"

            android:textSize="18sp" />

    </RelativeLayout>





    <ImageView

        android:id="@+id/item_forum_line"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@id/rel_conrent"

        android:background="@drawable/list_divide_line"

        android:contentDescription="@null"

        android:visibility="visible" />





</RelativeLayout>

然后须要一个适配器展示item

package com.example.adapter;





import java.util.List;





import android.app.Activity;

import android.content.Context;

import android.content.Intent;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.BaseAdapter;

import android.widget.TextView;





import com.example.activity.SecondActivity;

import com.example.ato.Person;

import com.example.viewpagedemo.R;





/**

 * 

 * @author shaozucheng

 * 

 */

public class PersonListAdapter extends BaseAdapter implements OnItemClickListener {





/**

* 自己定义图层

*/

private LayoutInflater inflater;





private Activity mActivity;





private List<Person> list;





public PersonListAdapter(Activity mActivity, List<Person> list) {

this.mActivity = mActivity;

this.list = list;

}





@Override

public int getCount() {

return list.size();

}





@Override

public Object getItem(int position) {

return null;

}





@Override

public long getItemId(int position) {

return position;

}





@Override

public View getView(int position, View convertView, ViewGroup parent) {

ViewHolder holder = null;

if (convertView == null) {

inflater = (LayoutInflater) mActivity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

convertView = inflater.inflate(R.layout.items_list, null);

holder = new ViewHolder();

holder.content = (TextView) convertView.findViewById(R.id.content);

convertView.setTag(holder);

} else {

holder = (ViewHolder) convertView.getTag();

}





Person dto = list.get(position);

if (dto != null) {

holder.content.setText(dto.getName());

}





return convertView;

}





/**

* 自己定义内部类

* 

* @author shaozucheng

* 

*/

class ViewHolder {

TextView content;// 内容





}

/**

实现OnItemClickListener 接口。然后在这个监听器里就能够跳转到下一个Activity了

*/

@Override

public void onItemClick(AdapterView<?

> arg0, View arg1, int arg2, long arg3) {

Intent intent = new Intent(mActivity, SecondActivity.class);

mActivity.startActivity(intent);

}





}

点击每个Activity跳转到SecondActivity，在SecondActivty 中你能够做你须要做的业务了，这里我就写下去了，依据你项目的须要

package com.example.activity;

import com.example.viewpagedemo.R;

import android.app.Activity;

import android.os.Bundle;



public class SecondActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

   setContentView(R.layout.activity_second);

}

}

SecondActivity中的布局文件 activity_second.xml 依据须要自己去扩展。

<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"

    android:background="#ffffff" >





    <Button

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="secondActivity" />





</RelativeLayout>

不要忘记了在AndroidManifest.xml注冊一下SecondActivity。

最后的效果图

这里提供一个源码下载地址：不懂的能够去下载看一下：须要3个积分哟点击打开链接