ViewPage+Frament+listView滑动效果

Posted 2020-09-19 claireyuancy

近期在做一个须要使用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个积分哟点击打开链接