美文网首页
ViewPager-你需要知道的使用场景封装

ViewPager-你需要知道的使用场景封装

作者: sweetying | 来源:发表于2018-04-18 00:06 被阅读95次

    前言

    你是否有遇到这样的问题,每次开发一个新的项目,在 viewpager 这一块上,总是在做重复的东西,比如app引导页,轮播图, viewpager+fragment 的 tab 指示器等等,这些虽然简单,但却是每个app都要的,而且很耗时,有没有每次在写这个,都很无语的感觉呢?
    基于上面这种情况,推荐给大家一个第三方开源框架ViewPagerHelper,ViewPagerHelper 是一个能快速帮你的完成 app引导页,轮播,和viewpager 指示器的工具, 内面内置了常用属性,满足你日常对油腻的师姐的一切幻想,解放你的双手,释放你的灵魂传送门

    在app引导页使用

    1.xml文件配置 你可以通过在xml文件中设置不同的指示器从而达到不同的效果,我这以ZoomIndicator为 例

      <com.zhengsr.viewpagerlib.view.GlideViewPager
        android:id="@+id/splase_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    
    <Button
        android:id="@+id/splase_start_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="100dp"
        android:layout_marginRight="100dp"
        android:layout_marginBottom="50dp"
        android:background="@drawable/glide_bottom_btn_bg"
        android:textColor="@color/white"
        android:text="@string/start"
        android:textSize="18sp"
        android:visibility="gone"
        />
    
     <com.zhengsr.viewpagerlib.indicator.ZoomIndicator
        android:id="@+id/splase_bottom_layout"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        zsr:zoom_selector="@drawable/bottom_circle"
        zsr:zoom_leftmargin="10dp"
        zsr:zoom_max="1.5"
        zsr:zoom_alpha_min="0.4"
        zsr:zoom_dismiss_open="true"
        android:orientation="horizontal"/>
    

    2.代码中做如下配置

        GlideViewPager viewPager = (GlideViewPager) findViewById(R.id.splase_viewpager);
        ZoomIndicator zoomIndicator = (ZoomIndicator) findViewById(R.id.splase_bottom_layout);
        Button button = (Button) findViewById(R.id.splase_start_btn);
    
    
        //先把本地的图片 id 装进 list 容器中
        List<Integer> images = new ArrayList<>();
        for (int i = 0; i < RES.length; i++) {
            images.add(RES[i]);
    
        }
        //配置pagerbean,这里主要是为了viewpager的指示器的作用,注意记得写上泛型
        PagerBean bean = new PagerBean.Builder<Integer>()
                .setDataObjects(images)
                .setIndicator(zoomIndicator)
                .setOpenView(button)
                .builder();
    
        // 把数据添加到 viewpager中,并把view提供出来,这样除了方便调试,也不会出现一个view,多个
        // parent的问题,这里在轮播图比较明显
        viewPager.setPagerListener(bean, R.layout.image_layout, new PagerHelperListener() {
            @Override
            public void getItemView(View view, Object data) {
                //通过获取到这个view,你可以随意定制你的内容
                ImageView imageView = view.findViewById(R.id.icon);
                imageView.setImageResource((Integer) data);
            }
        });
    

    实现效果:
    图片待上传...
    以上是设置了不同指示器的效果

    做轮播图使用

    1.xml文件配置,其实就是一个viewpager 加一个 linearlayout,位置你自己去摆放

      <com.zhengsr.viewpagerlib.view.BannerViewPager
                android:id="@+id/loop_viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:clipChildren="false"
                zsr:banner_isloop="true"
                zsr:banner_looptime="3000"
                zsr:banner_switchtime="600" />
    
            <com.zhengsr.viewpagerlib.indicator.ZoomIndicator
                android:id="@+id/bottom_scale_layout"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_gravity="bottom|right"
                android:layout_marginRight="20dp"
                android:gravity="center"
                zsr:zoom_alpha_min="0.5"
                zsr:zoom_leftmargin="10dp"
                zsr:zoom_max="1.5"
                zsr:zoom_selector="@drawable/bottom_circle" />
    

    2.在代码中设置

    //设置viewpager的动画(可不设),这里提供了三种,分别是MzTransformer,ZoomOutPageTransformer,        
      和DepthPageTransformer,可以体验一下,这里可有可无,这里我设置了魅族的效果,这样加上弧形的图      
      片更好看。
    mBannerCountViewPager.setPageTransformer(false,new MzTransformer());
    mBannerCountViewPager.setPagerListener(bean, R.layout.loop_layout, new PageHelperListener() {
            @Override
            public void getItemView(View view, Object data) {
                ImageView imageView = view.findViewById(R.id.loop_icon);
                LoopBean bean = (LoopBean) data;
                new GlideManager.Builder()
                        .setContext(LoopActivity.this)
                        .setImgSource(bean.url)
                        .setLoadingBitmap(R.mipmap.ic_launcher)
                        .setImageView(imageView)
                        .builder();
                TextView textView = view.findViewById(R.id.loop_text);
                textView.setText(bean.text);
    
                //如若你要设置点击事件,也可以直接通过这个view 来设置,或者图片的更新等等
            }
        });
    

    实现效果:
    图片待上传...

    做Tab配合ViewPager使用

    1.xml配置

    //你可以通过这些属性,自由配置三角形,条状,或者只使用文字颜色变化,自定义属性的名字跟它的功能一样。
    <com.zhengsr.viewpagerlib.indicator.TabIndicator
        android:id="@+id/line_indicator"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/black_ff"
        app:tab_color="@color/white"
        app:tab_width="25dp"
        app:tab_height="5dp"
        app:tab_text_default_color="@color/white_ff"
        app:tab_text_change_color="@color/white"
        app:tab_show="true"
        app:tab_text_type="normaltext"
        app:tab_textsize="16sp"
        app:visiabel_size="3"
        app:tap_type="tri"
        >
    </com.zhengsr.viewpagerlib.indicator.TabIndicator>
    
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    

    2.代码中设置

     /**
     * 把 TabIndicator 跟viewpager关联起来
     */
    TabIndicator tabIndecator = (TabIndicator) findViewById(R.id.line_indicator);
    // 设置 viewpager的切换速度,这样点击的时候比较自然
    tabIndecator.setViewPagerSwitchSpeed(viewPager,600);
    tabIndecator.setTabData(viewPager,mTitle, new TabIndicator.TabClickListener() {
        @Override
        public void onClick(int position) {
            //顶部点击的方法公布出来
            viewPager.setCurrentItem(position);
        }
    });
    

    这样,一个比较好用的viewpager 加指示器的方式就完成了。
    实现效果:
    图片待上传...

    最后,将自己写的Demo放上来

    下面可以看一下自定义的属性,方便大家在用的时候调用:

    一些自定义属性:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <!--放大缩小的 indicator-->
        <declare-styleable name="ZoomIndicator">
            <attr name="zoom_selector" format="reference"/> <!--selecotr,一般就一个圆点即可-->
            <attr name="zoom_leftmargin" format="dimension"/><!--两个圆点之间的间距-->
            <attr name="zoom_max" format="float"/> <!--小圆点放大的倍数-->
            <attr name="zoom_alpha_min" format="float"/><!--小圆点缩小的倍数-->
            <attr name="zoom_dismiss_open" format="boolean"/><!--做引导页的最后一页,是否隐藏圆点-->
        </declare-styleable>
    
        <!--与上面同理-->
        <declare-styleable name="NormalIndicator">
            <attr name="normal_selector" format="reference"/>
            <attr name="normal_leftmargin" format="dimension"/>
            <attr name="normal_dismiss_open" format="boolean"/>
        </declare-styleable>
    
        <!--移动indicator indicator-->
        <declare-styleable name="TransIndicator">
            <attr name="trans_width" format="dimension"/> <!--指示器的大小-->
            <attr name="trans_height" format="dimension"/> <!--指示器的大小-->
            <attr name="trans_defaultcolor" format="color|reference"/> <!--指示器默认的颜色-->
            <attr name="trans_leftmargin" format="dimension"/>
            <attr name="trans_movecolor" format="color|reference"/> <!--指示器移动的颜色-->
            <attr name="trans_dismiss_open" format="boolean"/>
            <attr name="trans_round_radius" format="dimension"/>
            <attr name="trans_type">
                <enum name="circle" value="0"/>
                <enum name="round" value="1"/>
            </attr>
        </declare-styleable>
    
        <!--文字indicator-->
        <declare-styleable name="TextIndicator">
            <attr name="word_show_circle" format="boolean"/> <!--是否显示外援的圆圈-->
            <attr name="word_circle_color" format="reference"/> <!--圆圈的颜色-->
            <attr name="word_text_color" format="reference"/> <!--文字颜色-->
            <attr name="word_text_size" format="dimension"/> <!--文字大小-->
        </declare-styleable>
    
        <!--轮播控件的属性-->
        <declare-styleable name="BannerViewPager">
            <attr name="banner_isloop" format="boolean"/> <!--是否自动轮播-->
            <attr name="banner_looptime" format="integer"/> <!--自动轮播的时间-->
            <attr name="banner_switchtime" format="integer"/> <!--轮播时,viewpager的切换速度-->
        </declare-styleable>
    
        <!--弧形图片-->
        <declare-styleable name="ArcImageView">
            <attr name="arc_height" format="dimension"/> <!--弧度的高度-->
        </declare-styleable>
    
        <!--顶部viewpager指示器-->
        <declare-styleable name="TabIndicator">
            <attr name="visiabel_size" format="integer"/> <!--可视化个数,比如有一排,我们就只要显示4个-->
            <attr name="tab_color" format="color|reference"/> <!--指示器的颜色-->
            <attr name="tab_width" format="dimension"/>  <!--指示器的宽度-->
            <attr name="tab_height" format="dimension"/> <!--指示器的高度-->
            <attr name="tab_textsize" format="dimension"/> <!--顶部文字的大小-->
            <attr name="tab_text_default_color" format="color|reference"/> <!--顶部文字默认的颜色-->
            <attr name="tab_text_change_color" format="color|reference"/> <!--移动时,顶部文字的颜色-->
            <attr name="tab_show" format="boolean"/>  <!--是否显示指示器-->
            <attr name="tab_text_type">               <!--顶部文字的类型,nromaltext为普通的textview,
                                                           corlortext为文件渐变-->
                <enum name="normaltext" value="0"/>
                <enum name="colortext" value="1"/>
            </attr>
            <attr name="tap_type" >           <!--指示器类型,有三角形或者圆条-->
                <enum name="tri" value="0"/>
                <enum name="rect" value="1"/>
            </attr>
        </declare-styleable>
    
        <!--文件渐变属性-->
        <declare-styleable name="ColorTextView">
            <attr name="colortext_size" format="dimension"/>
            <attr name="colortext_default_color" format="color|reference"/> <!--默认颜色-->
            <attr name="colortext_change_color" format="color|reference"/> <!--渐变颜色-->
        </declare-styleable></resources>
    

    相关文章

      网友评论

          本文标题:ViewPager-你需要知道的使用场景封装

          本文链接:https://www.haomeiwen.com/subject/uadmkftx.html