自定义滑动ViewPage

前端时间自己做了个滑动页面，现在分享一下，做得比较粗陋，一步一步来。

一.准备布局文件：

（1）activity_my_view.xml:Activity的布局，其中重点是一个包含menu_list.xml的layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="滑动页面"/>
    <include layout="@layout/menu_list"/>
    <View
        android:background="#3fc285"
        android:layout_width="match_parent"
        android:layout_height="5dp" />
</LinearLayout>

（2）menu_list.xml:包含ViewPage和一个用于小圆点的layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffc8c8"
    android:id="@+id/test_layout">
    <android.support.v4.view.ViewPager
        android:id="@+id/add_list_viewpager"
        android:layout_width="match_parent"
        android:layout_height="220dp">

    </android.support.v4.view.ViewPager>
    <!--下面放小圆点-->
    <LinearLayout
        android:background="#ffffff"
        android:orientation="horizontal"
        android:layout_below="@+id/add_list_viewpager"
        android:id="@+id/image_view_layout"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="20dp">
    </LinearLayout>
</RelativeLayout>

（3）page_container.xml:每个ViewPage页面打算用一个RecyclerView来放一些按钮,这个布局将在代码中动态添加

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">
    <FrameLayout
        android:paddingTop="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingBottom="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/list_item_oa_operation_show"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:overScrollMode="never"/>
    </FrameLayout>
</LinearLayout>

（4）list_item_opt.xml:放每个item的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/layout_item"
    android:gravity="center_horizontal">
    <TextView
        android:background="@drawable/button_shape"
        android:id="@+id/tv_plan_class"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:gravity="center"
        android:text="test"
        android:textSize="18sp"
        android:textColor="#666666"
        android:layout_margin="10dp"/>
</LinearLayout>

二、准备drawable文件

（1）button_shape.xml,button_shape2.xml,button_shape3.xml:这三个文件只是颜色设置不一样，非点击时的效果

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--渐变-->
    <gradient
    android:startColor = "#d0ffde"
    android:endColor = "#50ff84"
    android:angle = "0"
    android:type="linear"
        />
    <corners android:radius="58dp"/>
</shape>

（2）button_shape_pressed.xml,button_shape_pressed2.xml,button_shape_pressed3.xml:点击时的效果

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--渐变-->
    <gradient
        android:startColor = "#50ff84"
        android:endColor = "#d0ffde"
        android:angle = "0"
        android:type="linear"
        />
    <corners android:radius="28dp"/>
</shape>

（3）selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_shape_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/button_shape"/>
</selector>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_shape_pressed2" android:state_pressed="true"/>
    <item android:drawable="@drawable/button_shape2"/>
</selector>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_shape_pressed3" android:state_pressed="true"/>
    <item android:drawable="@drawable/button_shape3"/>
</selector>

三、MyViewActivity：这里只给出主要代码，一个初始化View的方法，两个适配器方法

  //ViewPage
    private ViewPager viewPager;
    private ArrayList<View> pageViews;
    // 包裹小圆点的LinearLayout
    private ImageView imageView;
    private ImageView[] imageViews;
    private LinearLayout group;
    private void initPageView(){
        pageViews = new ArrayList<View>();
        //pageView的内容
        LayoutInflater inflater = getLayoutInflater();
        pageViews = new ArrayList<View>();
        View pageView1 = inflater.inflate(R.layout.page_container,null);
        RecyclerView recyclerView1 = (RecyclerView) pageView1.findViewById(R.id.list_item_oa_operation_show);
        View pageView2 = inflater.inflate(R.layout.page_container,null);
        RecyclerView recyclerView2 = (RecyclerView) pageView2.findViewById(R.id.list_item_oa_operation_show);
        View pageView3 = inflater.inflate(R.layout.page_container,null);
        RecyclerView recyclerView3 = (RecyclerView) pageView3.findViewById(R.id.list_item_oa_operation_show);
        //设置管理器
        recyclerView1.setLayoutManager(new GridLayoutManager(this,3));
        recyclerView2.setLayoutManager(new GridLayoutManager(this,3));
        recyclerView3.setLayoutManager(new GridLayoutManager(this,3));
        WindowManager manager = MyViewActivity.this.getWindowManager();
        DisplayMetrics outMetrics = new DisplayMetrics();
        manager.getDefaultDisplay().getMetrics(outMetrics);
        int width = outMetrics.widthPixels;
        int mSingleItemWidth = width/3;
        //初始化适配器内容
        MobileOAItemListAdapter adapter1 = new MobileOAItemListAdapter(this,new String[]{"a1","a2","a3","a4","a5","a6"},R.drawable.button_selector,mSingleItemWidth);
        recyclerView1.setAdapter(adapter1);
        MobileOAItemListAdapter adapter2 = new MobileOAItemListAdapter(this,new String[]{"b1","b2","b3","b4","b5","b6"},R.drawable.button_selector2,mSingleItemWidth);
        recyclerView2.setAdapter(adapter2);
        MobileOAItemListAdapter adapter3 = new MobileOAItemListAdapter(this,new String[]{"c1","c2","c3","c4","c5","c6"},R.drawable.button_selector3,mSingleItemWidth);
        recyclerView3.setAdapter(adapter3);
        //
        pageViews.add(pageView1);
        pageViews.add(pageView2);
        pageViews.add(pageView3);
        //小圆点数
        imageViews = new ImageView[pageViews.size()];
        //小圆点
        group = (LinearLayout)findViewById(R.id.image_view_layout) ;
        //包裹的viewPager容器
        viewPager = (ViewPager)findViewById(R.id.add_list_viewpager);
        for(int i = 0;i < imageViews.length ;i++){
            imageView = new ImageView(this);
            imageViews[i] = imageView;
            if(i == 0){
                imageViews[i].setBackgroundResource(R.drawable.my_ellipse_s);
            }else {
                imageViews[i].setBackgroundResource(R.drawable.my_ellipse_not_s);
            }
            group.addView(imageViews[i]);
            ViewGroup.MarginLayoutParams paramTest2 = (ViewGroup.MarginLayoutParams) imageViews[i].getLayoutParams();
            paramTest2.setMargins(0, 0, 12, 0);
            imageViews[i].requestLayout();

        }
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                for(int i =0;i<imageViews.length;i++){
                    if(i == position){
                        imageViews[i].setBackgroundResource(R.drawable.my_ellipse_s);
                    }else {
                        imageViews[i].setBackgroundResource(R.drawable.my_ellipse_not_s);
                    }

                    ViewGroup.MarginLayoutParams paramTest2 = (ViewGroup.MarginLayoutParams) imageViews[i].getLayoutParams();
                    paramTest2.setMargins(0, 0, 12, 0);
                    imageViews[i].requestLayout();

                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        viewPager.setAdapter(new GuidePageAdapter(pageViews));
    }

 // 指引页面数据适配器
    class GuidePageAdapter extends PagerAdapter {
        ArrayList<View> mPageViews;
        public GuidePageAdapter(ArrayList<View> pageViews){
            mPageViews = pageViews;
        }
        @Override
        public int getCount() {
            return mPageViews.size();
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }

        @Override
        public int getItemPosition(Object object) {
            // TODO Auto-generated method stub
            return super.getItemPosition(object);
        }

        @Override
        public void destroyItem(View arg0, int arg1, Object arg2) {
            // TODO Auto-generated method stub
            ((ViewPager) arg0).removeView(mPageViews.get(arg1));
        }

        @Override
        public Object instantiateItem(View arg0, int arg1) {
            // TODO Auto-generated method stub
            ((ViewPager) arg0).addView(mPageViews.get(arg1));
            return mPageViews.get(arg1);
        }

        @Override
        public void restoreState(Parcelable arg0, ClassLoader arg1) {
            // TODO Auto-generated method stub

        }

        @Override
        public Parcelable saveState() {
            // TODO Auto-generated method stub
            return null;
        }

        @Override
        public void startUpdate(View arg0) {
            // TODO Auto-generated method stub

        }

        @Override
        public void finishUpdate(View arg0) {
            // TODO Auto-generated method stub

        }
    }

//Recycler的适配器
    static class MobileOAItemListAdapter extends RecyclerView.Adapter {

        private Context mContext;
        private String[] mStrings;
        private int mSingleItemWidth;
        private int mDrawable;

        public MobileOAItemListAdapter(Context context, String[] strings,int drawable,int w) {
            mContext = context;
            mStrings = strings;
            mDrawable = drawable;
            mSingleItemWidth = w;
        }

        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            return DisplayHolder.newHolder(parent, mContext);
        }

        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
            DisplayHolder lHolder = (DisplayHolder) holder;
            //设置值
//        ViewGroup.LayoutParams layoutParams = lHolder.layout_item.getLayoutParams();
            lHolder.layout_item.setMinimumWidth(mSingleItemWidth);
            lHolder.tv_plan_class.setBackgroundResource(mDrawable);
            if (!TextUtils.isEmpty(mStrings[position])) {
                lHolder.tv_plan_class.setText(mStrings[position]);
            }
            lHolder.tv_plan_class.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(mContext,"click = "+mStrings[position],Toast.LENGTH_SHORT).show();
                }
            });
        }

        @Override
        public int getItemCount() {
            return mStrings.length;
        }

        private static class DisplayHolder extends RecyclerView.ViewHolder {
            TextView tv_plan_class;
            LinearLayout layout_item;

            public DisplayHolder(Context context, View itemView) {
                super(itemView);
                tv_plan_class = (TextView)itemView.findViewById(R.id.tv_plan_class);
                layout_item = (LinearLayout)itemView.findViewById(R.id.layout_item);
            }

            private static DisplayHolder newHolder(ViewGroup parent, Context context) {
                View view = LayoutInflater.from(context).inflate(R.layout.list_item_opr, parent, false);
                return new DisplayHolder(context, view);
            }
        }
    }

以上就是核心的代码了，后面再补截图。