Android UI基础——ViewPager+Fragment

来源：互联网发布：含有大数据的新闻编辑：程序博客网时间：2024/05/27 20:47

ViewPager

ViewPager是一个允许用户左右滑动翻页显示数据的控件，想要在界面显示数据就需要使用PagerAdapter去加载数据了，这边的数据先设置为几张图片，让其滑动显示，具体代码如下：
布局中的代码（ViewPager是Android的支持包supportv4包中的控件，必须写全称
）：

<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="#000"    tools:context="com.example.change.myviewpaper.MainActivity">    <android.support.v4.view.ViewPager        android:id="@+id/main_view_pager"        android:layout_width="wrap_content"        android:layout_height="wrap_content">    </android.support.v4.view.ViewPager></RelativeLayout>

设置适配器，将页面适配到ViewPager，使用PagerAdapter必须实现四个方法：
①instantiateItem(ViewGroup, int)：添加一个页面到ViewPager指定位置
②destroyItem(ViewGroup, int, Object)：销毁指定位置页面
③getCount()：得到页面数量
④isViewFromObject(View, Object)：判断页面是否来自一个对象，这里返回view==object

public class MyAdapter extends PagerAdapter{    private Context mContext;    private List<ImageView> list;    public MyAdapter(Context mContext, List<ImageView> list) {        this.mContext = mContext;        this.list = list;    }    @Override    public int getCount() {        return list.size();    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(list.get(position));    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        container.addView(list.get(position));        return list.get(position);    }}

在类中实现的代码：

public class MainActivity extends AppCompatActivity {    private List<ImageView> list;    private ViewPager mViewPager;    private int[] image = {R.mipmap.view,R.mipmap.view_1,R.mipmap.view_2,R.mipmap.view_3};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mViewPager = (ViewPager) findViewById(R.id.main_view_pager);        list = new ArrayList<>();        for (int i = 0; i < image.length; i++) {            ImageView imageView = new ImageView(this);            imageView.setImageResource(image[i]);            list.add(imageView);        }        //添加适配器        MyAdapter adapter = new MyAdapter(this,list);        mViewPager.setAdapter(adapter);    }}

效果图如下：
这里写图片描述

Fragment

ViewPager经常会和Fragment一起使用，这样会更方便的让我们去操作要滑动的界面。
Fragment是Android 3.0引入新的API，Fragment代表了Activity的子模块，必须“嵌入”Activity中使用，因此，虽然Fragment有自己的生命周期，但也受Activity的生命周期控制，想要在Activity中使用Fragment，可调用FragmentManager的add(),remove(),replace()方法动态的添加，删除或者替换Fragment。
接下来的例子实现的是既可以通过滑动到下一个页面，也可以使用Button跳转到下一个页面。具体代码如下：
布局中的代码（运用FrameLayout布局就可以看出Fragment的切换其实是覆盖）：

<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="#000"    tools:context="com.example.myfragmentviewpager.MainActivity">    <FrameLayout        android:id="@+id/layout_frame"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@+id/line_layout">        <android.support.v4.view.ViewPager            android:id="@+id/fragment_view_pager"            android:layout_width="wrap_content"            android:layout_height="wrap_content">        </android.support.v4.view.ViewPager>    </FrameLayout>    <LinearLayout        android:id="@+id/line_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:weightSum="3">        <Button            android:id="@+id/first_button"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="First"            android:layout_weight="1"            android:background="@drawable/change_button_color"/>        <Button            android:id="@+id/sec_button"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="Second"            android:layout_weight="1"            android:background="@drawable/change_button_color"/>        <Button            android:id="@+id/third_button"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="Third"            android:layout_weight="1"            android:background="@drawable/change_button_color"/>    </LinearLayout></RelativeLayout>

本例中要展示三个页面，所以写了三个Fragment，这里只写出其中一个的代码，因为只是简单地展示，所以在Fragment中只放置了ImageView，想要显示其他数据可以自行添加，代码如下：

public class FragmentFirst extends Fragment{    private ImageView imageView;    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_1,null);//此处布局中只放置了一个ImageView，布局代码不再展示        imageView = (ImageView) view.findViewById(R.id.first_image);        imageView.setImageResource(R.mipmap.view_1);        return view;    }}

设置适配器，这里不再是继承PagerAdapter，而是继承FragmentPagerAdapter，然后重写两个方法getItem()和getCount()以及一个构造方法，参数是FragmentManager和自己添加的一个List集合。代码如下：

public class MyFragmentAdapter extends FragmentPagerAdapter{    private List<Fragment>list;//泛型设置为Fragment    public MyFragmentAdapter(FragmentManager fm,List<Fragment> list) {        super(fm);        this.list = list;    }    @Override    public Fragment getItem(int position) {        return list.get(position);    }    @Override    public int getCount() {        return list.size();    }}

最后在类中实现ViewPager的滑动，添加适配器，Button的点击事件等，代码如下：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {    private Button mButton1,mButton2,mButton3;    private List<Fragment> list;    private ViewPager mViewPager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mViewPager = (ViewPager) findViewById(R.id.fragment_view_pager);        //ViewPager的滑动监听器，这边主要作用是实现滑动和Button的点击同步        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            //滑动时的页面选择                switch (position){                //滑动到第一个页面时，让第一个Button处于点击状态，不能再进行点击                    case 0:                        mButton1.setEnabled(false);                        mButton2.setEnabled(true);                        mButton3.setEnabled(true);                        break;                    case 1:                        mButton1.setEnabled(true);                        mButton2.setEnabled(false);                        mButton3.setEnabled(true);                        break;                    case 2:                        mButton1.setEnabled(true);                        mButton2.setEnabled(true);                        mButton3.setEnabled(false);                        break;                }            }            @Override            public void onPageSelected(int position) {}            @Override            public void onPageScrollStateChanged(int state) {}        });        list = new ArrayList<>();        list.add(new FragmentFirst());        list.add(new FragmentSec());        list.add(new FragmentThird());        //添加适配器        MyFragmentAdapter adapter = new MyFragmentAdapter(getSupportFragmentManager(),list);        mViewPager.setAdapter(adapter);        mButton1 = (Button) findViewById(R.id.first_button);        mButton2 = (Button) findViewById(R.id.sec_button);        mButton3 = (Button) findViewById(R.id.third_button);        mButton1.setOnClickListener(this);        mButton2.setOnClickListener(this);        mButton3.setOnClickListener(this);    }    @Override    public void onClick(View v) {        FragmentTransaction transaction;        switch (v.getId()){            case R.id.first_button:            //当第一个Button点击时，ViewPager分配第一个页面给第一个Button                mViewPager.setCurrentItem(0);                mButton1.setEnabled(false);                mButton2.setEnabled(true);                mButton3.setEnabled(true);                break;            case R.id.sec_button:                mViewPager.setCurrentItem(1);                mButton1.setEnabled(true);                mButton2.setEnabled(false);                mButton3.setEnabled(true);                break;            case R.id.third_button:                mViewPager.setCurrentItem(2);                mButton1.setEnabled(true);                mButton2.setEnabled(true);                mButton3.setEnabled(false);                break;        }    }}

效果如下：
这里写图片描述

2 0