文档章节

自定义带圆点ViewPager

Reone的开发笔记
 Reone的开发笔记
发布于 2016/06/27 18:46
字数 852
阅读 538
收藏 2

源码地址 https://github.com/Reone/ViewPagerBrowser

效果图:

ViewsPagerBrowser.java
package com.reone.viewpagerbrowser.view;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.LinearLayout;

import com.reone.viewpagerbrowser.R;

import java.util.ArrayList;


/**
 * Created by wangxingsheng on 16/6/20.
 */

public class ViewsPagerBrowser extends FrameLayout {

    private Context mContext;
    private ArrayList<View> views;
    private ViewPager mViewPager;
    private BrowsePagerAdapter mAdapter;
    private LinearLayout mPointContainer;
    private boolean canBecircle;
    private OnBrowserViewPagerItemClickListner mOnBrowserViewPagerItemClickListner;
    private OnPageScrolledListener onPageScrolledListener;
    private OnPageSelectedListener onPageSelectedListener;
    private OnPageScrollStateChangedListener onPageScrollStateChangedListener;
    private ArrayList<View> mPoints = new ArrayList<>();
    private int firstIndex = 0;

    public ViewsPagerBrowser(Context context) {
        super(context);
        init();
    }

    public ViewsPagerBrowser(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ViewsPagerBrowser(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init(){
        mContext = getContext();
        LayoutInflater.from(mContext).inflate(R.layout.views_pager_browser_layout, this,true);
        mViewPager = (ViewPager) findViewById(R.id.views_pager_browser_viewpager);
        mPointContainer = (LinearLayout) findViewById(R.id.point_container);
        mAdapter = new BrowsePagerAdapter();
    }

    /**
     * 初始化数据
     * @param views
     */
    public void initOrUpdateViews(final ArrayList<View> views){
        this.views = views;
        addPoint();
        mViewPager.setAdapter(mAdapter);
        if(canBecircle){
            mViewPager.setCurrentItem(views.size()*128);
        }
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                if(onPageScrolledListener!=null){
                    onPageScrolledListener.onPageScrolled(position % views.size(),positionOffset,positionOffsetPixels);
                }
            }

            @Override
            public void onPageSelected(int position) {
                changePage(position % views.size());
                if(onPageSelectedListener!=null){
                    onPageSelectedListener.onPageSelected(position % views.size());
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                if(onPageScrollStateChangedListener != null){
                    onPageScrollStateChangedListener.onPageScrollStateChanged(state);
                }
            }
        });
    }

    public void setCurrentItem(int pos){
        mViewPager.setCurrentItem(views.size() * 128 + pos);
    }

    /**
     * 设置viewPager是否循环
     * @param bool
     */
    public void setCanBecircle(boolean bool){
        this.canBecircle = bool;
    }

    public void setItemClickListner(OnBrowserViewPagerItemClickListner onBrowserViewPagerItemClickListner){
        this.mOnBrowserViewPagerItemClickListner = onBrowserViewPagerItemClickListner;
    }

    public interface OnBrowserViewPagerItemClickListner{
        void onItemClickListner(View itemview, int pos);
    }
    public void setOnPageScrolledListener(OnPageScrolledListener listener){
        onPageScrolledListener = listener;
    }
    public interface OnPageScrolledListener{
        void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
    }
    public void setOnPageSelectedListener(OnPageSelectedListener listener){
        onPageSelectedListener = listener;
    }
    public interface OnPageSelectedListener{
        void onPageSelected(int position);
    }
    public void setOnPageScrollStateChangedListener(OnPageScrollStateChangedListener listener){
        onPageScrollStateChangedListener = listener;
    }
    public interface OnPageScrollStateChangedListener{
        void onPageScrollStateChanged(int state);
    }

    class BrowsePagerAdapter extends PagerAdapter {

        /**
         * 获得当前界面数
         */
        @Override
        public int getCount() {
            if (views != null) {
                if(canBecircle){
                    return Integer.MAX_VALUE;
                }else{
                    return views.size();
                }
            } else return 0;
        }

        /**
         * 判断是否由对象生成界面
         */
        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == (View) arg1;
        }

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

        /**
         * 初始化position位置的界面
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            final int index = position % views.size();
            if (container.getChildCount() == views.size()) {
                container.removeView(views.get(index));
            }

            container.addView(views.get(index), 0);
            if(mOnBrowserViewPagerItemClickListner!=null){
                final View itemview = views.get(index);
                if(itemview!=null){
                    itemview.setOnClickListener(new OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            mOnBrowserViewPagerItemClickListner.onItemClickListner(itemview,index);
                        }
                    });
                }
            }
            return views.get(index);
        }
    }


    /**
     * 选中页改变时,切换点组的状态
     * @param index
     */
    private void changePage(int index){
        if(mPoints!=null&&mPoints.size()>=views.size()){
            mPoints.get(index).setBackgroundResource(R.drawable.oval_choose);
            for(int i = 0;i<mPoints.size();i++){
                if(i == index)continue;
                else{
                    mPoints.get(i).setBackgroundResource(R.drawable.oval_un_choose);
                }
            }
        }
    }

    /**
     * 添加点组
     */
    private void addPoint(){
        //dip 转换成px
        float scale = getResources().getDisplayMetrics().density;
        int size = (int) (5 * scale + 0.5f);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(size,size);
        params.rightMargin = size;
        for (int i=0;i<views.size();i++){
            View point = new View(getContext());
            point.setBackgroundResource(R.drawable.oval_un_choose);
            mPoints.add(point);
            mPointContainer.addView(point,params);
        }
        //设置初始位置
        if(firstIndex!=-1){
            mPoints.get(firstIndex).setBackgroundResource(R.drawable.oval_choose);
        }
    }

}
BrowserViewPagerActivity.java  即MainActivity
package com.reone.viewpagerbrowser;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

import com.reone.viewpagerbrowser.view.ViewsPagerBrowser;

import java.util.ArrayList;


public class BrowserViewPagerActivity extends ActionBarActivity {

    private ViewsPagerBrowser mViewPagerBrowser;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_browser_view_pager);
        mViewPagerBrowser = (ViewsPagerBrowser) findViewById(R.id.views_pager_browser);
        mViewPagerBrowser.setCanBecircle(true);
        ArrayList<View> views = getViews();
        mViewPagerBrowser.initOrUpdateViews(views);
        mViewPagerBrowser.setItemClickListner(new ViewsPagerBrowser.OnBrowserViewPagerItemClickListner(){

            @Override
            public void onItemClickListner(View itemview, int pos) {
                Toast.makeText(BrowserViewPagerActivity.this,"pos = " + pos, Toast.LENGTH_SHORT).show();
            }
        });
    }


    private ArrayList<View> getViews(){
        ArrayList<View> views = new ArrayList<>();
        ImageView iv1 = new ImageView(getApplicationContext());
        iv1.setImageResource(R.drawable.user_background_1);
        ImageView iv2 = new ImageView(getApplicationContext());
        iv2.setImageResource(R.drawable.user_background_2);
        ImageView iv3 = new ImageView(getApplicationContext());
        iv3.setImageResource(R.drawable.user_background_3);
        views.add(iv1);
        views.add(iv2);
        views.add(iv3);
        return views;
    }
}

activity  main布局 activity_browser_view_pager.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:background="@android:color/darker_gray"
    >

    <com.reone.viewpagerbrowser.view.ViewsPagerBrowser
        android:id="@+id/views_pager_browser"
        android:background="@android:color/holo_purple"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

自定义view中的布局

views_pager_browser_layout.xml

<?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/views_pager_browser_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <LinearLayout
        android:id="@+id/point_container"
        android:layout_gravity="bottom|center_horizontal"
        android:orientation="horizontal"
        android:layout_marginBottom="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</FrameLayout>

圆点资源

oval_choose.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/white" />
</shape>

oval_un_choose

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/darker_gray" />
</shape>

本博客原地址:http://my.oschina.net/reone/blog/701543

© 著作权归作者所有

Reone的开发笔记
粉丝 6
博文 70
码字总数 29350
作品 0
松江
程序员
私信 提问
Android ViewPager 实现多个页面切换滑动

使用ViewPager这个类可以轻松实现多个页面的滑动功能,而且相对viewgroup来讲要简单容易一些,在此之前我们需要导入 android-support-v4.jar这个jar包,是google提供的扩展包,位置路径为 an...

长平狐
2013/04/25
1K
0
android 手势滑动翻页且有每页选中提示

各位大神: 本人最近在做一个android 项目,想实现如下的效果: 如上图中绿色框中有页面提示,我现在知道一种方面是用ViewPager可大概实现如上功能,代码如下: package com.cogent.viewpag...

meable_lee
2013/02/26
5.3K
3
借助Handler,实现ViewPager中页面的自动切换

在很多电商网页及app上都有自动切换的商品的推广快,感觉体验挺不错的,正好今天学习使用ViewPager,因此也实现了一个功能类似的demo。 下面是其中的两个截图: 实现一个自动播放功能的ViewP...

风荷举
2013/11/22
5.1K
0
android 三种实现水平向滑动方式(ViewPager、ViewFilpper、ViewF...

ViewPager ViewPager类提供了多界面切换的新效果。新效果有如下特征: [1] 当前显示一组界面中的其中一个界面。 [2] 当用户通过左右滑动界面时,当前的屏幕显示当前界面和下一个界面的一部分...

带梦想一7飞
2013/08/01
1K
1
Android开源控件ViewPager Indicator的使用方法

Android Viewpager Indicator是Android开发中最常用的控件之一,几乎所有的新闻类APP中都有使用,下面介绍其基本使用方法。 1. ViewPager Indicator的Library 查看Viewpager Indicator的Lib...

linsea
2014/03/14
54.6K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 年迈渔夫遭黑帮袭抢

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享Elvis Presley的单曲《White Christmas》: 《White Christmas》- Elvis Presley 手机党少年们想听歌,请使劲...

小小编辑
今天
2.2K
20
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
13
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
14
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
19
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部