ViewPagerIndicator

最新推荐文章于 2023-10-26 13:34:39 发布
最新推荐文章于 2023-10-26 13:34:39 发布
阅读量376 收藏
点赞数
文章标签： ViewPagerIndicator 安

本文的原创是鸿洋的一篇文章地址为 http://blog.csdn.net/lmj623565791/article/details/42160391

我做了一点修改是indicator能够左右滑动，其他的效果与他的一致



主要类为

package com.trade.tradeformwork.controlUtils;

import java.util.List;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.CornerPathEffect;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.ScrollView;
import android.widget.TextView;

import com.trade.tradeformwork.R;

/**
 * http://blog.csdn.net/lmj623565791/article/details/42160391
 *
 * @author zhy
 */
public class ViewPagerIndicator extends HorizontalScrollView {
    /**
     * 绘制三角形的画笔
     */
    private Paint mPaint;
    /**
     * path构成一个三角形
     */
    private Path mPath;
    /**
     * 三角形的宽度
     */
    private int mTriangleWidth;
    /**
     * 三角形的高度
     */
    private int mTriangleHeight;
    /**
     * 三角形的宽度为单个Tab的1/6
     */
    private static final float RADIO_TRIANGEL = 1.0f / 6;
    /**
     * 三角形的最大宽度
     */
    private final int DIMENSION_TRIANGEL_WIDTH = (int) (getScreenWidth() / 3 * RADIO_TRIANGEL);
    /**
     * 初始时，三角形指示器的偏移量
     */
    private int mInitTranslationX;
    /**
     * 手指滑动时的偏移量
     */
    private float mTranslationX;
    /**
     * 默认的Tab数量
     */
    private static final int COUNT_DEFAULT_TAB = 4;
    /**
     * tab数量
     */
    private int mTabVisibleCount = COUNT_DEFAULT_TAB;
    /**
     * tab上的内容
     */
    private List<String> mTabTitles;
    /**
     * 与之绑定的ViewPager
     */
    public ViewPager mViewPager;
    /**
     * 标题正常时的颜色
     */
    private static final int COLOR_TEXT_NORMAL = 0x77FFFFFF;
    /**
     * 标题选中时的颜色
     */
    private static final int COLOR_TEXT_HIGHLIGHTCOLOR = 0xFFFFFFFF;
    /**
     * 便宜的位置数
     */
    private static final int OFFSET_COUNT = 2;
    private LinearLayout mLinearLayout;
    private Context mContext;

    public ViewPagerIndicator(Context context) {
        this(context, null);
    }

    public ViewPagerIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 获得自定义属性，tab的数量
        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.ViewPagerIndicator);
        mTabVisibleCount = a.getInt(R.styleable.ViewPagerIndicator_item_count,
                COUNT_DEFAULT_TAB);
        if (mTabVisibleCount < 0)
            mTabVisibleCount = COUNT_DEFAULT_TAB;
        a.recycle();
        // 初始化画笔
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Style.FILL);
        mPaint.setPathEffect(new CornerPathEffect(3));
        mContext = context;
    }

    /**
     * 绘制指示器
     */
    @Override
    protected void dispatchDraw(Canvas canvas) {
        canvas.save();
        // 画笔平移到正确的位置
        canvas.translate(mInitTranslationX + mTranslationX, getHeight() + 1);
        canvas.drawPath(mPath, mPaint);
        canvas.restore();
        super.dispatchDraw(canvas);
    }

    /**
     * 初始化三角形的宽度
     */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mTriangleWidth = (int) (w / mTabVisibleCount * RADIO_TRIANGEL);// 1/6 of
        // width
        mTriangleWidth = Math.min(DIMENSION_TRIANGEL_WIDTH, mTriangleWidth);
        // 初始化三角形
        initTriangle();
        // 初始时的偏移量
        mInitTranslationX = getWidth() / mTabVisibleCount / 2 - mTriangleWidth / 2;
    }

    /**
     * 设置可见的tab的数量
     *
     * @param count
     */
    public void setVisibleTabCount(int count) {
        this.mTabVisibleCount = count;
    }

    /**
     * 设置indication布局
     */
    public void setTabItemTitles(LinearLayout tabItemTitles) {
        this.mLinearLayout = tabItemTitles;
        setItemClickEvent();
    }

    /**
     * 设置tab的标题内容 可选，可以自己在布局文件中写死
     *
     * @param datas
     */
    public void setTabItemTitles(List<String> datas) {
        if (mLinearLayout == null) {
            mLinearLayout = new LinearLayout(mContext);
        }
        ScrollView.LayoutParams layoutParams = new LayoutParams(ScrollView.LayoutParams.MATCH_PARENT, ScrollView.LayoutParams.MATCH_PARENT);
        mLinearLayout.setLayoutParams(layoutParams);
        addView(mLinearLayout);
        // 如果传入的list有值，则移除布局文件中设置的view
        if (datas != null && datas.size() > 0) {
            mLinearLayout.removeAllViews();
            this.mTabTitles = datas;
            for (String title : mTabTitles) {
                // 添加view
                mLinearLayout.addView(generateTextView(title));
            }
            // 设置item的click事件
            setItemClickEvent();
        }
    }

    /**
     * 对外的ViewPager的回调接口
     *
     * @author zhy
     */
    public interface PageChangeListener {
        public void onPageScrolled(int position, float positionOffset,
                                   int positionOffsetPixels);

        public void onPageSelected(int position);

        public void onPageScrollStateChanged(int state);
    }

    // 对外的ViewPager的回调接口
    private PageChangeListener onPageChangeListener;

    // 对外的ViewPager的回调接口的设置
    public void setOnPageChangeListener(PageChangeListener pageChangeListener) {
        this.onPageChangeListener = pageChangeListener;
    }

    // 设置关联的ViewPager
    public void setViewPager(ViewPager mViewPager, int pos) {
        this.mViewPager = mViewPager;
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                // 设置字体颜色高亮
                resetTextViewColor();
                highLightTextView(position);
                if (position < mTabVisibleCount - OFFSET_COUNT) {
                    ViewPagerIndicator.this.scrollTo(0, 0);
                }
                if (onPageChangeListener != null) {
                    // 回调
                    onPageChangeListener.onPageSelected(position);
                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset,
                                       int positionOffsetPixels) {
                // 滚动
                scroll(position, positionOffset, positionOffsetPixels);
                // 回调
                if (onPageChangeListener != null) {
                    onPageChangeListener.onPageScrolled(position,
                            positionOffset, positionOffsetPixels);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                // 回调
                if (onPageChangeListener != null) {
                    onPageChangeListener.onPageScrollStateChanged(state);
                }
            }
        });
        // 设置当前页
        mViewPager.setCurrentItem(pos);
        // 高亮
        highLightTextView(pos);
    }

    /**
     * 高亮文本
     *
     * @param position
     */
    protected void highLightTextView(int position) {
        View view = mLinearLayout.getChildAt(position);
        if (view instanceof TextView) {
            ((TextView) view).setTextColor(COLOR_TEXT_HIGHLIGHTCOLOR);
        }
    }

    /**
     * 重置文本颜色
     */
    private void resetTextViewColor() {
        for (int i = 0; i < mLinearLayout.getChildCount(); i++) {
            View view = mLinearLayout.getChildAt(i);
            if (view instanceof TextView) {
                ((TextView) view).setTextColor(COLOR_TEXT_NORMAL);
            }
        }
    }

    /**
     * 设置点击事件
     */
    public void setItemClickEvent() {
        int cCount = mLinearLayout.getChildCount();
        for (int i = 0; i < cCount; i++) {
            final int j = i;
            View view = mLinearLayout.getChildAt(i);
            view.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    mViewPager.setCurrentItem(j);
                }
            });
        }
    }

    /**
     * 根据标题生成我们的TextView
     *
     * @param text
     * @return
     */
    private TextView generateTextView(String text) {
        TextView tv = new TextView(getContext());
        LayoutParams lp = new LayoutParams(
                LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        lp.width = getScreenWidth() / mTabVisibleCount;
        tv.setGravity(Gravity.CENTER);
        tv.setTextColor(COLOR_TEXT_NORMAL);
        tv.setText(text);
        tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
        tv.setLayoutParams(lp);
        return tv;
    }

    /**
     * 初始化三角形指示器
     */
    private void initTriangle() {
        mPath = new Path();
        mTriangleHeight = (int) (mTriangleWidth / 2 / Math.sqrt(2));
        mPath.moveTo(0, 0);
        mPath.lineTo(mTriangleWidth, 0);
        mPath.lineTo(mTriangleWidth / 2, -mTriangleHeight);
        mPath.close();
    }

    /**
     * 指示器跟随手指滚动，以及容器滚动
     *
     * @param position
     * @param offset
     */
    public void scroll(int position, float offset, int positionOffsetPixels) {
        int tabWidth = getScreenWidth() / mTabVisibleCount;
        // 容器滚动，当移动到倒数最后一个的时候，开始滚动
        if (offset > 0 && position >= (mTabVisibleCount - OFFSET_COUNT) && mLinearLayout.getChildCount() > mTabVisibleCount) {
            if (mTabVisibleCount != 1) {
                if (position != mTabTitles.size() - 2) {
                    this.scrollTo((position - (mTabVisibleCount - OFFSET_COUNT)) * tabWidth
                            + (int) (tabWidth * offset), 0);
                }
            } else {
                this.scrollTo(position * tabWidth + (int) (tabWidth * offset), 0);
            }
        }
        mTranslationX = getWidth() / mTabVisibleCount * (position + offset);
        invalidate();
    }

    /**
     * 设置布局中view的一些必要属性；如果设置了setTabTitles，布局中view则无效
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        int cCount = getChildCount();
        if (cCount == 0)
            return;
        for (int i = 0; i < cCount; i++) {
            View view = getChildAt(i);
            LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) view
                    .getLayoutParams();
            lp.weight = 0;
            lp.width = getScreenWidth() / mTabVisibleCount;
            view.setLayoutParams(lp);
        }
        // 设置点击事件
        setItemClickEvent();
    }

    /**
     * 获得屏幕的宽度
     *
     * @return
     */
    public int getScreenWidth() {
        WindowManager wm = (WindowManager) getContext().getSystemService(
                Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        return outMetrics.widthPixels;
    }
}

布局为 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".mainActivity.MainActivity">
    <com.trade.tradeformwork.controlUtils.ViewPagerIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:paddingBottom="5dp"
        android:background="#203030"
        android:scrollbars="none"
        android:layout_height="wrap_content"/>

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

</LinearLayout>

使用方法

//设置可见数量
indicator.setVisibleTabCount(4);
//设置数据
indicator.setTabItemTitles(mDatas);
//设置点击事件 必须在设置数据后调用
indicator.setItemClickEvent();
//设置ViewPager
indicator.setViewPager(mViewPager, 0);



younger_android
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一起Talk Android吧（第三百七十八回：给ViewPager添加indicator）
talk_8的专栏
08-26 652
本章回中主要介绍如何在ViewPager中添加指示器，并且通过具体的代码来讲解，最后通过动画演示了具体的效果。
Android开源框架ViewPagerIndicator的基本使用
热门推荐
hdhhd的博客
07-25 1万+
很多新闻资讯类的app都有一些共性，那就是有一行页签，然后点击页签的内容后，会跳转到对应的页面。有很多此类app都是用到了ViewPagerIndicator这个开源框架。此篇博客就对这个框架的使用做一个笔记。后续随着在开发中不同的额使用场景，也会增加此博客的内容。 今天就先对他的使用方式，做一个介绍，完成一个小demo 首先，写一个布局。这个布局很简单，如果使用到，直接复制再根据实际需求稍作...
鸿蒙开源第三方组件——页面滑动组件 ViewPagerIndicator_ohos
VincenZsw的博客
08-20 760
前言 基于安卓平台的页面滑动组件ViewPagerIndicator（https://github.com/LuckyJayce/ViewPagerIndicator），实现了鸿蒙化迁移和重构，代码已经开源到（https://gitee.com/isrc_ohos/view-pager-indicator），目前已经获得了很多人的Star和Fork，欢迎各位下载使用并提出宝贵意见！ 背景 ViewPagerIndicator_ohos是一个信息展示组件，适用于展示新...
Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI
modabobo
12-29 415
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/42160391，本文出自：【张鸿洋的博客】 我参加了博客之星评选，如果你喜欢我的博客，求投票~~http://vote.blog.csdn.net/blogstar2014/selection?username=lmj623565791#content 1、概述 哈，今天给大家带...
Android学习笔记--ViewPagerIndicator
holly__的专栏
06-24 1967
Download sampleApk 1. 支持自定义tab样式 2. 支持自定义滑动块样式和位置 3. 支持自定义切换tab的过渡效果 4. 支持子界面的预加载和界面缓存 5. 支持设置界面是否可滑动 6. android:minSdkVersion=”8” android:targetSdkVersion=”21”使用方法 # package com.shizhefei.indica
ViewPager Indicator 自定义标题和指示器样式
宋锦仑的博客
10-18 665
本篇文章主要讲述自定义indicator，实现样式和滑动逻辑完全解耦，样式可以随便自定义。根据不同的UI设计随意修改1.indicator的截图显示title区，可设置color size 和gravity2.指示器下划线的样式指示器区域可设置大小颜色//可自定义 } @Override protected IndicatorParameter provideIndicatorParameter() {//可自定义 } @NonNull//可自定义 } };
为ViewPager添加一个indicator
老梁的专栏
12-05 5114
天は二物を与えず ViewPager是Android提供的一个良心组件，有了它分分钟就可以实现了一个水平滑动的分页功能，其中用ViewPager来全屏展示图片是一个比较经典的使用场景，先来看一下效果图：在每个Page的底部中间位置有一排圆圈，实心的圆圈用来指示当前显示的图片，它会随着手指滑动而移动，我们可以称之为 ViewPager 的 indicator。实现这个功能也比较简单，首先定义一个水平方
android ViewPager 指示器 PageIndicator
lmjssjj的专栏
06-02 1365
一款 google写的 ViewPager 指示器 PageIndicator
开源控件ViewPagerIndicator的使用
Mr_chai的博客
08-12 437
1.如何使用开源框架 第1步：improt library项目 第2步：导入library进我们自己新建的项目 从Github上Download下来这个zip包之后，里面会有一个library文件，是库工程，还有一个sample，是作者提供的例子（将sample这个项目import，可以看到作者提供的各种样式的Indicator，作为参考）。如果要在作者例子的基础上自己开发样式，需要将lib
Android开源控件ViewPager Indicator的使用方法
android的博客
12-26 1463
 1月16日厦门 OSC 源创会火热报名中，奖品多多哦   摘要 Android开源控件ViewPager Indicator的使用介绍 ViewPagerIndicator 目录[-] 1. ViewPager Indicator的Library2. Viewpager Indicator的实现类3. Viewpager Indicator随附带的Demo
ViewPagerIndicator简单用法
xinruzhishui_11的博客
12-01 423
ViewPagerIndicator简单用法需求：一个Activity中有四个Fragment，第一个Fragment可以切换多个界面 、 先下载ViewPagerIndicatorLibrary 在清单文件中为MainActivity添加主题 <activity android:name=".MainActivity" android:la
ViewPagerIndicator 指示器
snpmyn
05-04 481
ViewPagerIndicator 图 布局 &amp;amp;amp;lt;?xml version=&amp;amp;quot;1.0&amp;amp;quot; encoding=&amp;amp;quot;utf-8&amp;amp;quot;?&amp;amp;amp;gt; &amp;amp;amp;lt;LinearLayout xmlns:android=&amp;amp;quot;http://schemas.
Android 打造万能的ViewPagerIndicator 指示器
wujainEW的博客
04-05 7704
/**稀土掘金，时光不老**/ 大家好，又是项目中用到的小功能，拿来和大家分享交流一下，如有不足之处，请多多指教哈。O(∩_∩)O哈哈~ 1. 概述。 ViewPager的指示器相信大家都做过了，有用图片，第三方的，有support.design库中TabLayout,也有大多数人都用过的TabPageIndicator等等，并且很多知名APP都使用过这个开源的指示器。,我也用过，但是感
Android自定义Indicator指示器，可搭配ViewPager2使用
最新发布
weixin_42249427的博客
10-26 899
实现Android ViewPager2的自定义Indicator
ViewPager之indicator
charming的专栏
08-27 1160
第一种情况为了更好的用户体验，许多应用中的引导在viewpager滑动的时候都做了指示当前页的indicator，下面我简单的实现一个viewpager的indicator。效果图如下： 主要代码：public class ShowActivity extends Activity { private ArrayList<View> dots; private ViewPager m
android 标签开源控件,Android开源控件ViewPager Indicator的使用方法
weixin_39690972的博客
05-26 186
Android Viewpager Indicator是Android开发中最常用的控件之一，几乎所有的新闻类APP中都有使用，下面介绍其基本使用方法。 1. ViewPager Indicator的Library查看Viewpager Indicator的Library代码，可以看到此项目的设计思想：首先定义了一个PageIndicator接口，它里面定义了最重要和基本的indicator表现出...
Viewpager指示器Indicator
wangyaqian1212的博客
07-20 627
效果：ViewPager跟随Tab动，底端绘制三角形 布局文件中：           android:layout_width="match_parent"         android:layout_height="45dp"         android:orientation="horizontal"         android:id="@+id/viewpag
viewpagerindicator
09-08
ViewPagerIndicator是一个Android库，用于在ViewPager中添加指示器，以帮助用户了解当前页面的位置。它提供了多种指示器样式和自定义选项，可以轻松地与ViewPager集成。它是由Jake Wharton开发的，是一个广泛使用的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值