您的位置:首页 > 运维架构

Five-People:左右滚动的viewpager库说明

2016-05-09 16:24 218 查看


关于左右滚动的viewpager的说明笔记:
为了使用方便,我们把ViewPager写成一个库,包含四个Java文件及一个布局文件,下面我们来具体介绍这几个文件。
1、Url.java
Url文件的作用是存放图片来源,在实际开发中是后台给我们的数据,我们通过解析JSON获取图片的Url,解析的结果可能会有一些其他的信息,比如content图片的内容,跳转其他界面的index,我们要用一个对象去接收这些字段。因为如果后台不小心弄丢了一个Url,前段如果是分别去解析的话很容易报空指针。Url.java的代码如下:
public final class Url {
//URL1,URL2.....都是从从后台获取的图片来源。
    public static final String URL1="http://****/static/images/person/plate_manager.png";
    public static final String URL2="http://****/static/images/person/car.png";
    public static final String URL3="http://****/static/images/person/coupon.png";
    public static final String URL4="http://****/static/images/person/plate_manager.png";
}
2、IRollItem.java 代码如下:
/**
* 抽取接口的好处:扩展
*/
public  interface IRollItem {
    //抽取一个获取图片url的方法
    public abstract String getImageUrl();
    //抽取一个获取图片title的方法
    public abstract String getTitlel();
}
3、RollItem.java 代码如下:
/**
* 实现接口  继承IRollItem
*/
public class RollItem implements IRollItem {
    String imageUrl;
    String title;
    public RollItem(String imageUrl, String title) {
        this.imageUrl = imageUrl;
        this.title = title;
    }

    @Override
    public String getImageUrl() {
        return imageUrl;
    }

    @Override
    public String getTitlel() {
        return title;
    }
}
4、AutoRollLayout.java

AutoRollLayout主要实现自动滚动功能。步骤如下:
(1)、利用关键字inflate创建布局。初始化控件。
(2)、创建点点的方法,给点点的背景设置选择器,让点点的颜色随着图片的滚动而改变。
(3)、设置轮播图的数据,用一个实体类去接收这些数据。
(4)、将url利用Picssio转换成图片,并用集合去接收。
(5)、为ViewPager设置适配器。
(6)、设置 OnPageChangeListener 事件
(7)、设置OnTouchListener事件,用手势指示器去分析事件。
(8)、设置自动滚动事件。
具体代码如下:
public class AutoRollLayout extends FrameLayout {

    private List<? extends IRollItem> items;
    private LinearLayout dotContainer;
    private TextView titleTv;
    private ViewPager viewPager;
//Activity调用这个类时,会new一个类,会传入参数,但是参数的个数不确定,为了确保布局构建成功,每个构造方法都要有一个布局的初始化方法,为了优化代码,我们让一个参数调用两个参数的构造方法,两个参数调用三个参数的构造方法。
    public AutoRollLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();//填充布局的方法
    }

    public AutoRollLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public AutoRollLayout(Context context) {
        this(context, null);
           }
//创建布局,初始化控件
    private void init() {
        View root = View.inflate(getContext(), R.layout.arl_layout, null);
        addView(root);

        viewPager = (ViewPager) findViewById(R.id.arl_view_pager);
        titleTv = (TextView) findViewById(R.id.arl_text_view);
        dotContainer = (LinearLayout) findViewById(R.id.arl_dot_container);
        viewPager.setOnTouchListener(otl);
        gestureDetector = new GestureDetector(getContext(), ogl);

    }

//设置轮播图的数据
    public void setItems(List<? extends IRollItem> items) {
        this.items = items;
        initIvs();
        dotContainer.removeAllViews();
        viewPager.setAdapter(adapter);

        if (items == null || items.isEmpty()) {
            return;
        }
        viewPager.setOnPageChangeListener(opcl);

        addDots();
        //初始化起始界面
        viewPager.setCurrentItem(0);
        opcl.onPageSelected(0);

    }

    OnPageChangeListener opcl = new OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            titleTv.setText(items.get(position).getTitle());
            for (int i = 0; i < dotContainer.getChildCount(); i++) {
                if (i == position) {
                    dotContainer.getChildAt(i).setEnabled(false);
                } else {
                    dotContainer.getChildAt(i).setEnabled(true);
                }
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };

//创建点点的方法
    private void addDots() {
        // 动态设置点点的宽高
        int dotWidth = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 10, getResources()
                        .getDisplayMetrics());

        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(dotWidth,
                dotWidth);
        lp.setMargins(0, 0, dotWidth, 0);

    //根据图片的数量添加点点
        for (int i = 0; i < items.size(); i++) {
            View dot = new View(getContext());

            // dot.setLayoutParams(lp);

            dot.setBackgroundResource(R.drawable.arl_dot_bg_selector);
            dotContainer.addView(dot, lp);
        }
    }

    ArrayList<ImageView> ivs;

//将url转换成图片
    private void initIvs() {
        if (items == null || items.isEmpty()) {
            ivs = null;
            return;
        }
        ivs = new ArrayList<ImageView>(items.size());
        for (int i = 0; i < items.size(); i++) {
            ImageView iv = new ImageView(getContext());
            //访问后台要加网络权限,在Manifest文件中添加“  <uses-permission android:name="android.permission.INTERNET" />"这句代码。
            //imageLoader.displayImage(items.get(i).getImageUrl(), iv);
            Picasso.with(getContext()).load(items.get(i).getImageUrl()).into(iv);
            iv.setScaleType(ScaleType.FIT_XY);
            ivs.add(iv);
        }

    }

//设置适配器
    private PagerAdapter adapter = new PagerAdapter() {

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public int getCount() {
            return items == null ? 0 : items.size();
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(ivs.get(position));
            return ivs.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

    };
    private GestureDetector gestureDetector;//手势指示器
    private boolean isTouching;
    OnTouchListener otl = new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            //把所有的触摸事件告诉手势指示器 ,让它去分析
            gestureDetector.onTouchEvent(event);
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                 

                    isTouching = true;
                    break;
                case MotionEvent.ACTION_UP:
                    isTouching = false;
                    break;

                default:
                    break;
            }
            return false;
        }
    };
    private Boolean allowAutoRoll;
    protected static final long ROLL_DELAY = 2000;//自动滚动触发的时间
    private static Handler handler = new Handler();//定时器处理者

    //设置滚动的方法
    public void setAllowAutoRoll(boolean allowAutoRoll) {
        this.allowAutoRoll = allowAutoRoll;

        //设置定时器让轮播图滚动
        handler.postDelayed(rollRunnable, ROLL_DELAY);
    }

    Runnable rollRunnable = new Runnable() {
        @Override
        public void run() {
            if (!allowAutoRoll) {
                return;
            }
            if (!isTouching) {
                //去下一个界面的方法
                goNextPager();
            }

            handler.postDelayed(this, ROLL_DELAY);
        }
    };
    private boolean toRight = true;

    private void goNextPager() {
        //如果是最后一张,就从右往左移动
        if (viewPager.getCurrentItem() == adapter.getCount() - 1) {
            toRight = false;
        }
        if (viewPager.getCurrentItem() == 0) {
            toRight = true;
        }
        int pageIndex = 0;
        if (adapter.getCount() > 1) {
            if (toRight) {
                pageIndex = viewPager.getCurrentItem() + 1;
            } else {
                pageIndex = viewPager.getCurrentItem() - 1;
            }
        }
        viewPager.setCurrentItem(pageIndex);

    }

    public int getCurrentItemIndex() {
        return viewPager.getCurrentItem();
    }

    OnGestureListener ogl = new OnGestureListener() {
        @Override
        public boolean onDown(MotionEvent e) {
            return false;
        }

        @Override
        public void onShowPress(MotionEvent e) {

        }

        //监听点击
        @Override
        public boolean onSingleTapUp(MotionEvent e) {
            //接收onclicklistener的点击事件
            performClick();
            return false;
        }

        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
            return false;
        }

        @Override
        public void onLongPress(MotionEvent e) {

        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            return false;
        }
    };

}

5、arl_layout
布局如下:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

    <RelativeLayout
        android:clickable="true"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        android:background="#6000" >

        <TextView
            android:id="@+id/arl_text_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:paddingLeft="4dp"
            android:text=""
            android:textColor="#FFF"
            android:textSize="16sp" />

        <LinearLayout
            android:id="@+id/arl_dot_container"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

          

        </LinearLayout>
    </RelativeLayout>

</FrameLayout>
6、Picssico的导入
Picasso下载地址:http://square.github.io/picasso/
用法:把Picasso复制黏贴到本库下面的libs文件里面,然后右键->add as library









 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: