自定义view实现ViewPager指示器

最新推荐文章于 2019-10-14 09:16:16 发布
最新推荐文章于 2019-10-14 09:16:16 发布
阅读量281 收藏 1
点赞数
分类专栏： android 文章标签： viewpager
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hellcw/article/details/52705152
版权

用到的知识:
1.ViewPager和Fragment的结合；
2.自定义view；
3.绘图。

package com.xspacing.indicator;

import java.util.ArrayList;
import java.util.List;

import com.xspacing.view.CustomIndicator;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements OnPageChangeListener, OnClickListener {

    private ViewPager mViewPager;
    private List<Fragment> mDatas;
    private CustomIndicator mCustomIndicator;
    private TextView main_tv1;
    private TextView main_tv2;
    private TextView main_tv3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
        initDatas();
    }

    private void initDatas() {
        mDatas = new ArrayList<Fragment>();
        mDatas.add(new Fragment1());
        mDatas.add(new Fragment2());
        mDatas.add(new Fragment3());
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

            @Override
            public int getCount() {
                return mDatas.size();
            }

            @Override
            public Fragment getItem(int position) {
                return mDatas.get(position);
            }
        });
        mViewPager.setCurrentItem(0);
        mViewPager.addOnPageChangeListener(this);
    }

    private void initViews() {
        mViewPager = (ViewPager) findViewById(R.id.main_view_pager);
        mCustomIndicator = (CustomIndicator) findViewById(R.id.main_custom_nav);
        main_tv1 = (TextView) findViewById(R.id.main_tv1);
        main_tv2 = (TextView) findViewById(R.id.main_tv2);
        main_tv3 = (TextView) findViewById(R.id.main_tv3);
        main_tv1.setOnClickListener(this);
        main_tv2.setOnClickListener(this);
        main_tv3.setOnClickListener(this);
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {

    }

    @Override
    public void onPageScrolled(int position, float offX, int arg2) {
        mCustomIndicator.getViewNewInstance().drawArguments(position, offX);
    }

    @Override
    public void onPageSelected(int arg0) {

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.main_tv1:
            mViewPager.setCurrentItem(0);
            break;
        case R.id.main_tv2:
            mViewPager.setCurrentItem(1);
            break;
        case R.id.main_tv3:
            mViewPager.setCurrentItem(2);
            break;

        default:
            break;
        }
    }
}

package com.xspacing.view;

import com.xspacing.indicator.R;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;
import android.widget.LinearLayout;

/**
 * 
 * @ClassName CustomIndicator.java
 * @Description TODO 自定义viewpager指示器
 * @author smile
 * @version v1.0
 * @date 2016年9月29日
 */
public class CustomIndicator extends LinearLayout {

    private static final String TAG = "CustomIndicator";
    private int mOffsetX;// 指示器偏移值
    private int mHeight; // 指示器的高度
    private MyView mView; // 指示器 view
    private int mScreenW; // 每个tab占据的屏幕宽度
    private int mTab_number; // tab的数量
    private int mColor; // 指示器的颜色
    private int mWidth; // 指示器的宽度

    public CustomIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initCustomIndicator(context, attrs);
    }

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

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

    private void initCustomIndicator(Context context, AttributeSet attrs) {
        // 获取xml配置的参数
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CustomIndicator);
        mWidth = (int) ta.getDimension(R.styleable.CustomIndicator_tab_width, 150);
        mTab_number = ta.getInt(R.styleable.CustomIndicator_tab_number, 3);
        mColor = ta.getColor(R.styleable.CustomIndicator_tab_color, 0x44ff0000);
        ta.recycle();
        mView = new MyView(getContext());
        this.addView(mView);

    }

    public MyView getViewNewInstance() {
        if (mView == null) {
            mView = new MyView(getContext());
        }
        return mView;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        mScreenW = w / mTab_number;// 每个tab所占的屏幕
        mOffsetX = (mScreenW - mWidth) / 2;// 指示器的偏移值
        mHeight = h;
        super.onSizeChanged(w, h, oldw, oldh);
    }

    public class MyView extends View {
        private Paint mPaint;

        public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            initMyView();
        }

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

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

        private void initMyView() {
            mPaint = new Paint();
        }

        @SuppressLint("DrawAllocation")
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPaint.setColor(mColor);
            // 画矩形
            Rect rect = new Rect(mOffsetX, 0, mOffsetX + mWidth, mHeight);
            canvas.drawRect(rect, mPaint);
        }

        // viewpager滑动不断调用的方法
        public void drawArguments(int position, float offX) {
            // 偏移值+滑动的值+tab的位置
            mOffsetX = (mScreenW - mWidth) / 2 + (int) (offX * mScreenW) + position * mScreenW;
            invalidate();// 重绘
        }

    }
}

package com.xspacing.indicator;

import com.xspacing.indicator.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
/**
 * 
 * @ClassName Fragment1.java
 * @Description TODO 页卡1
 * @author Smile
 * @version v1.0
 * @date 2016年9月26日 下午8:07:09
 */
public class Fragment1 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_layout, container, false);
        TextView textView = (TextView) view.findViewById(R.id.fragment_tv);
        textView.setText("页卡1");
        return view;
    }
}

package com.xspacing.indicator;

import com.xspacing.indicator.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
/**
 * 
 * @ClassName Fragment1.java
 * @Description TODO 页卡2
 * @author Smile
 * @version v1.0
 * @date 2016年9月26日 下午8:07:09
 */
public class Fragment2 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_layout, container, false);
        TextView textView = (TextView) view.findViewById(R.id.fragment_tv);
        textView.setText("页卡2");
        return view;
    }
}

package com.xspacing.indicator;

import com.xspacing.indicator.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
/**
 * 
 * @ClassName Fragment1.java
 * @Description TODO 页卡3
 * @author Smile
 * @version v1.0
 * @date 2016年9月26日 下午8:07:09
 */
public class Fragment3 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_layout, container, false);
        TextView textView = (TextView) view.findViewById(R.id.fragment_tv);
        textView.setText("页卡3");
        return view;
    }
}

attrs文件

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="CustomIndicator">
        <attr name="tab_number" format="integer"></attr>
        <attr name="tab_width" format="dimension"></attr>
        <attr name="tab_color" format="color"></attr>
    </declare-styleable>

</resources>

fragment_layout.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" >

    <TextView
        android:id="@+id/fragment_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

</RelativeLayout>

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.xspacing.indicator.MainActivity" >

    <LinearLayout
        android:background="#44aaa000"
        android:id="@+id/main_linear_nav"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp" >

        <TextView
            android:id="@+id/main_tv1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="页卡1" />

        <TextView
            android:id="@+id/main_tv2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="页卡2" />
        <TextView
            android:id="@+id/main_tv3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="页卡3" /> 
    </LinearLayout>

    <com.xspacing.view.CustomIndicator
        android:layout_below="@id/main_linear_nav"
        android:id="@+id/main_custom_nav"
        android:layout_width="match_parent"
        android:layout_height="3dp" 
        app:tab_number="3"
        app:tab_width="80dp"
        app:tab_color="#44ff0000">
    </com.xspacing.view.CustomIndicator>

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

</RelativeLayout>

这里写图片描述

指示器的形状可根据需求修改

hellcw
关注
专栏目录
自定义控件实现ViewPager指示器
03-20
Android自定义控件实现ViewPagerIndicator
Android 自定义View实现ViewPager指示器
小小Ad的博客
07-21 2692
在开发中ViewPager加Fragment的组合很常见，而且一般都会配合一个指示器来标识当前的显示页面
ViewPager箭头指示器实现（慕课网总结）
wode_dream的专栏
04-12 1724
最近，在看慕课网上的android课程，想学习其它达人的技巧与编程方法。ViewPager箭头指示器的效果如下： 咱们主要看代码，共分三步，步骤如下： 第一步：编写ViewPagerIndicator类，代码如下： public class ViewPagerIndicator extends LinearLayout { public static final int DE
用ViewPager实现引导页，带页面指示器
shadow066的专栏
12-27 8224
为什么今天要写一个引导页呢？ 因为今天用了一个应用，名就不提了，页面指示器是坐在图片上的 感觉很不爽，看来他们比我还要懒呢╮(╯Д╰)╭ 我们先来看一下效果               好的，那我们看看怎么来实现 1、一个布局 当然是一个布局了，因为他就是我们的界面 <RelativeLayout xmlns:android="http://schemas.andro
ViewPagerIndication指针的使用
zhanghaoqi97的博客
06-30 520
ViewPagerIndication指针头部的布局文件
Android自定义View实现ViewPager指示器
07-21
在实现ViewPager指示器时，我们通常会创建一组小圆点或者图形，代表ViewPager中的各个页面。当前选中的页面对应的指示器应该有明显的区别，比如颜色更亮或者大小更大。我们可以使用Paint对象来设置颜色、样式等属性...
自定义简单的viewpager指示器
01-11
总的来说，自定义`ViewPager`指示器虽然看起来简单，但涉及到的知识点包括`ViewPager`的使用、`Fragment`管理、自定义View的绘制以及事件监听。通过实践，你可以更好地理解Android界面组件的交互和自定义视图的设计...
自定义的viewpager指示器
08-31
而自定义的ViewPager指示器则是对ViewPager功能的一种扩展，它能直观地显示当前所处的页面以及总页面数，提升用户体验。下面我们将深入探讨这个自定义的ViewPager指示器及其相关知识点。 首先，我们要理解ViewPager...
Android自定义View Flyme6的Viewpager指示器
08-31
本文将深入探讨如何创建一个类似于Flyme6的ViewPager指示器，这是一种在Viewpager滑动时动态显示当前页面位置的小图标或线条，为用户提供清晰的导航反馈。Flyme6是魅族手机系统的一个版本，以其独特的设计和流畅的...
关于viewpager和指示器第三方常用
kururunga的博客
09-02 184
https://github.com/Devlight/InfiniteCycleViewPager这个用的很好，但是很炫酷，https://github.com/hackware1993/MagicIndicator和https://github.com/ogaclejapan/SmartTabLayout常规一点
Android——自定义ViewPager指示器
Li_peilun的博客
07-06 1395
很多ViewPager和下面的图形绑定一块来滚动，也就是指示器，指示器可以是很多，正方形，长方形，三角形，圆形等。这里举一个三角形例子：效果图：未滑动 滑动中：这里滑动只要超过倒数第二个就自动向后滑动。上代码：自定义view：public class ViewPagerIndicator extends LinearLayout { private Paint paint; pri
Android 自定义View之实现ViewPager指示器
qq_35041057的博客
07-20 401
ViewPager指示器实现代码如下，我主要是实现了圆形的指示器。 首先在attrs文件中添加: <declare-styleable name="ViewPagerIndicator"> <attr name="unSelectCirclerColor" format="color"></attr> <attr name="sele...
viewpager自添加指示器,无限轮播
那些年我们一起写的代码
10-14 2063
viewpager在开发app过程中特别常用，做引导页，做轮播图等。很多时候需要添加指示器，引导页很多时候也为了省事会将指示器做到图片上面，轮播图则会引用第三方的指示器。于是就想自己添加一个指示器。
自定义ViewPagerIndicator---炫酷的导航栏指示器+ViewPager+Fragment
热门推荐
段炼
08-20 1万+
运行效果 实现这个效果，我是看了很多大神写的博客和视频后自己敲的，欢迎指正 github地址：https://github.com/dl10210950/TabViewPagerIndicator 自定义一个ViewPagerIndicator  自定义一个Indicator继承LinearLayout，在构造方法里面设置画笔的一些属性 public ViewP
开源控件ViewPagerIndicator的使用
Mr_chai的博客
08-12 469
1.如何使用开源框架 第1步：improt library项目 第2步：导入library进我们自己新建的项目 从Github上Download下来这个zip包之后，里面会有一个library文件，是库工程，还有一个sample，是作者提供的例子（将sample这个项目import，可以看到作者提供的各种样式的Indicator，作为参考）。如果要在作者例子的基础上自己开发样式，需要将lib
ViewPager指示器
a1003434346的博客
10-14 769
指示器框架： MagicIndicator 该框架对为VIewPage指示器进行了基础的封装，可调用内置的，以及自定义的，比较灵活多变 MagicIndicator系列之一 —— 使用MagicIndicator打造千变万化的ViewPager指示器 MagicIndicator系列之二 —— MagicIndicator使用指南 MagicIndicator系列之三 —— MagicIn...
Android---自定义ViewPager指示器（一）
yeluoweiluo615的博客
10-19 353
最近学习了怎么自己画Viewpager指示器的形状。新创建一个ViewPagerIndicator类 继承自LinearLayout初始化Paint实例在它的含有两个参数的构造方法内初始化要画的图形所需要的工具，例如：我们要画一个三角形。首先我们要有一个paint类实例上代码： public ViewPagerIndicator(Context context, AttributeSet attr
【指示器】自定义ViewPager指示器，和你见过的不太一样。
延龙的博客
12-12 788
这次要说的指示器可能和大家常见的不同，这个是纯绘制出来的，即只 onDraw出来的。也许不够完善，欢迎大家提出问题。 github：https://github.com/ai2101039/YLPagerIndicator 有人说，这个github 有轮子，可是光使用轮子只是一个搬运工啊，而且github的轮子是为了适应各种情况，app 代码量可增加不少； 有人说，你这个指示器，我们可以...
自定义Android ViewPager指示器实现详解
"Android自定义ViewPager指示器的实现与解析" 在Android开发中，ViewPager是一个非常常用的组件，用于展示多个页面并允许用户通过滑动切换。然而，为了提供更好的用户体验，通常会搭配一个指示器来显示当前所处的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值