Android UI基础——ViewPager+Fragment

来源:互联网 发布:含有大数据的新闻 编辑:程序博客网 时间:2024/05/13 09:25

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
原创粉丝点击