Android

2018-06-05-ViewPager

2018-06-05  本文已影响0人  天才蒙蒙亮

ViewPager

这是谷歌官方提供的一个兼容低版本安卓设备的软件包，里面包含了只有在安卓3.0以上可以使用的API。ViewPager就是其中之一。利用它，我们可以做很多的事情，从最简单的道行，到页面菜单等等。与ListVew类似，他需要一个适配器，就是PagerAdapter。

有四个分页，每个分页都有自己名字和布局，通过名字与布局的匹配，自定义适配器将其转化为View。

布局文件

主布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main" tools:context=".MainActivity">

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

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagertab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity = "bottom"
            />

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

</LinearLayout>

每个页面的布局文件

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/a"
        android:scaleType="centerCrop"
        android:id="@+id/imageview"
        />

</LinearLayout>

Activity

/**
 * ViewPager组建的使用
 */

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private PagerTabStrip pagerTabStrip;

    private String[] titles={"第一张图","第二张图","第三张图","第四张图"};

    private ArrayList<View> views = new ArrayList<>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        pagerTabStrip = (PagerTabStrip) findViewById(pagertab);

        initViews();

        viewPager.setAdapter(new MyPagerAdapter());

    }

    private void initViews(){
        views.add(getLayoutInflater().inflate(R.layout.layout1,null));
        views.add(getLayoutInflater().inflate(R.layout.layout2,null));
        views.add(getLayoutInflater().inflate(R.layout.layout3,null));
        views.add(getLayoutInflater().inflate(R.layout.layout4,null));
    }


    //适配器
    class MyPagerAdapter extends PagerAdapter{

        //实例化选项卡
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view =views.get(position);
            container.addView(view);
            return view;
        }

        //删除选项卡
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            super.destroyItem(container, position, object);
        }

        @Override
        public int getCount() {
            return views.size();
        }

        //判断视图是否为返回的对象
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }


        //获取标题
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
}

这里有四个注意事项：

1.这里ViewPager和PagerTabStrip(滚动条)都要把包名写全了，不然会ClassNotFound
2.API中说：在布局xml把PagerTabStrip当作ViewPager的一个自标签开用，不能拿出来，不然会报错
3.在PagerTabStrip标签中可以用属性android:layout_gravity="Top|Bottom"来指定title的位置
4.如果要显示出PagerTabStrip某一页的title，需要在ViewPager的Adapter中实现getPageTitle(int)

pagerTabStrip.setBackgroundColor(Color.BLUE);   //设置滚动条背景颜色

页面切换的事件监听

继承ViewPager.OnPageChangeListener

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{

    private ViewPager viewPager;
    private PagerTabStrip pagerTabStrip;

    private String[] titles={"第一张图","第二张图","第三张图","第四张图"};

    private ArrayList<View> views = new ArrayList<>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        pagerTabStrip = (PagerTabStrip) findViewById(pagertab);

        initViews();


        viewPager.setAdapter(new MyPagerAdapter());
        viewPager.setOnPageChangeListener(this);

    }

    private void initViews(){
        views.add(getLayoutInflater().inflate(R.layout.layout1,null));
        views.add(getLayoutInflater().inflate(R.layout.layout2,null));
        views.add(getLayoutInflater().inflate(R.layout.layout3,null));
        views.add(getLayoutInflater().inflate(R.layout.layout4,null));

    }

    //事件监听的四个方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        Toast.makeText(getApplicationContext(),"选中",Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }


    //适配器
    class MyPagerAdapter extends PagerAdapter{

        //实例化选项卡
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view =views.get(position);
            container.addView(view);
            return view;
        }

        //删除选项卡
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            super.destroyItem(container, position, object);
        }

        @Override
        public int getCount() {
            return views.size();
        }

        //判断视图是否为返回的对象
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }


        //获取标题
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
}

程序首次启动的引导

程序首次启动引导一般好几个页面，每个页面对应下面的一个小圆点，当滑倒当前页面时，对应页面的小圆点对有反应
基于上面描述，程序需要包含以下一些内容

  • 首先得有每个页面的布局文件，还有小圆点的形式的布局文件，由于小圆点会和每个页面的布局文件重合，所以使用FragmentLayout布局，内嵌n个ImageView(包含圆点)。
  • 布局文件到View的转化对应，需要自定义的适配器
  • 切换页面的时候，对应的小圆点要有所变化，所以需要有切换页面的时间监听器
  • 布局文件和小圆点都应该有默认的样式，要初始化
  • 页面的变化应该有对应的圆点的变化，需要传递一个值，指示页面变化，传入圆点变化。

以下是示例代码：

主文件布局：一个ViewPager和四个圆点（FragmentLayout）

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main2"
    tools:context="com.example.tianmengmeng.coding12.Main2Activity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity = "top"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|bottom"
        android:id="@+id/point_layout"
        >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/start"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/start"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/start"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/start"/>
    </LinearLayout>

</FrameLayout>

每个页面的布局：四个类似只写了一个

<?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">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/a"
        android:scaleType="centerCrop"
        android:id="@+id/imageview"
        />
</LinearLayout>

Activity：文件资源的加载，事件的监听

public class Main2Activity extends AppCompatActivity implements ViewPager.OnPageChangeListener{

    //定义ViewPager和存放每个页面图片的容器
    private ViewPager viewPager;
    //每个页面是一个Layout，不能简单的用数组存放
    private ArrayList<View> views = new ArrayList<>();

    //定义存放圆点的数组，每个圆点是同类型的组件，可以直接用数组来定义
    private ImageView[] imageViews;

    //定义当前页
    private int currentIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        //初始化圆点，初始化页面
        initViews();
        initPoint();
    }
    
    //初始化页面
    private void initViews(){

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

        //获取图片资源
        views.add(getLayoutInflater().inflate(R.layout.layout1,null));
        views.add(getLayoutInflater().inflate(R.layout.layout2, null));
        views.add(getLayoutInflater().inflate(R.layout.layout3, null));
        views.add(getLayoutInflater().inflate(R.layout.layout4, null));

        //将图片资源通过适配器加入视图
        viewPager.setAdapter(new MyPagerAdapter());
        //监听页面的变化
        viewPager.setOnPageChangeListener(this);
    }


    //初始化圆点
    private void initPoint() {
        LinearLayout point_layout = (LinearLayout) findViewById(R.id.point_layout);
        imageViews = new ImageView[views.size()];
        for (int i = 0; i < imageViews.length; i++) {
            //获取linearlayout下的二级组件
            imageViews[i] = (ImageView) point_layout.getChildAt(i);
        }

        currentIndex = 0;
        imageViews[currentIndex].setImageResource(R.drawable.selected);
    }

    //当页面放生变化后，通关过传入的页面数，改变对应的圆点状态
   private void setCurentPoint(int position) {
        //注意：当前位置没有发生变化时，圆点的状态不用改变
        if(currentIndex<0 || currentIndex  == position || currentIndex > imageViews.length - 1){
            return;
        }
       
        //设置对应的图片的改变
        imageViews[currentIndex].setImageResource(R.drawable.start);
        imageViews[position].setImageResource(R.drawable.selected);

        //指向当前页面
        currentIndex = position;
    }
    @Override 
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    //监听页面的改变
    @Override
    public void onPageSelected(int position) {
        setCurentPoint(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }


    //适配器
    class MyPagerAdapter extends PagerAdapter {

        //实例化选项卡
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view =views.get(position);
            container.addView(view);
            return view;
        }

        //删除选项卡
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            super.destroyItem(container, position, object);
        }

        @Override
        public int getCount() {
            return views.size();
        }

        //判断视图是否为返回的对象
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

    }

}
上一篇下一篇

猜你喜欢

热点阅读