Android-自定义ViewPager指示器

最新推荐文章于 2024-06-21 16:42:09 发布
最新推荐文章于 2024-06-21 16:42:09 发布
阅读量2.4k 收藏
点赞数
分类专栏： Android 文章标签： indicat indcator indicator

主界面 Activity

package com.test.viewpagerindicator;

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.view.Window;

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

/**
 * viewpagerIndicator  标签指示器
 */
public class MainActivity extends FragmentActivity {

    private ViewPager mViewPager;
    private ViewpagerIndicator mIndicator;

    private List<String> titles = Arrays.asList("天龙八部", "西游记", "红楼梦", "三国演义", "水浒传", "聊斋志异", "猛回头", "梦笔溪谈", "红与黑", "封神榜");
    private List<VpSimpleFragment> mFragments = new ArrayList<>();
    private FragmentPagerAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE); //去掉 titleBar
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        initView();
        initDatas();

        mIndicator.setVisibleTabCount(5);
        mIndicator.setTabItemTitles(titles);

        mViewPager.setAdapter(mAdapter);
        mIndicator.setViewPager(mViewPager, 0);


    }

    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        mIndicator = (ViewpagerIndicator) findViewById(R.id.id_indictor);

    }

    private void initDatas() {
        for (String title : titles) {
            VpSimpleFragment fragment = VpSimpleFragment.newInstance(title);
            mFragments.add(fragment);
        }

        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }

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


}

自定义 组件 ViewpagerIndicator

package com.test.viewpagerindicator;

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.Path;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.Gravity;
import android.view.View;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.List;

/**
 * 2. 绘制三角形
 *
 */
public class ViewpagerIndicator extends LinearLayout {

    private Paint mPaint; //画笔
    private Path mPath; //path类 可以定义3条线 绘制出三角形

    private int mTriangleWidth; //三角形的宽度
    private int mTriangleHeight; //三角形的高度

    //为了适应屏幕的大小 规定三角形为tab 的1/6
    private static final float RADIO_TRIANGLE_WIDTH = 1 / 6F;

    private int mInitTranslationX; //定义初始化的x轴的偏移量值 三角形的初始偏移位置，及第一次出现的X坐标

    private int mTranslationX; //移动时的距离


    private int mTabVisibleCount; // 屏幕可见tab的个数
    private static final int COUNT_DEFAULT_TAB = 4;//默认显示4个 tab

    private List<String> mTitles; //设置标签标题

    public ViewpagerIndicator(Context context) {
        this(context, null); //使用带一个参数的构造方法 去掉用 带2个参数的构造方法
    }

    public ViewpagerIndicator(Context context, AttributeSet attrs) {

        super(context, attrs);

        //在构造方法中获取自定义属性
//        获取可见tab的数量
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ViewpagerIndicator);
        mTabVisibleCount = a.getInt(R.styleable.ViewpagerIndicator_visible_tab_count, COUNT_DEFAULT_TAB);

        if (mTabVisibleCount < 0) {
            mTabVisibleCount = COUNT_DEFAULT_TAB;
        }
        a.recycle();


        //在构造方法中初始化画笔
        mPaint = new Paint();
        mPaint.setAntiAlias(true); //抗锯齿
        mPaint.setColor(Color.RED);
      /*  //另一种设置颜色的方式
//       mPaint.setColor(Color.parseColor("#ffffffff"));*/
        mPaint.setStyle(Paint.Style.FILL);

        //设置不让三角形的角度很尖锐
        mPaint.setPathEffect(new CornerPathEffect(3));
    }

    @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 = (LayoutParams) view.getLayoutParams();
            LinearLayout.LayoutParams lp = (LayoutParams) view.getLayoutParams();
            lp.weight = 0;
            lp.width = getScreenWidth() / mTabVisibleCount;
            view.setLayoutParams(lp);
        }
        setItemClickEvent();

    }

    /**
     * 获得屏幕的宽度
     *
     * @return
     */
    private int getScreenWidth() {

        WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);

        return outMetrics.widthPixels;
    }

    @Override  //在该方法中进行绘制三角形
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        canvas.save();

        //平移到画笔开始位置
        canvas.translate(mInitTranslationX + mTranslationX, getHeight() + 2); //加上2 表示让三角形往下移动
        //进行绘制
        canvas.drawPath(mPath, mPaint);


        canvas.restore();


    }

    @Override //当控件的宽高发生变化时 回调
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mTriangleWidth = (int) (w / mTabVisibleCount * RADIO_TRIANGLE_WIDTH); //三角形底边宽度
        mInitTranslationX = w / mTabVisibleCount / 2 - mTriangleWidth / 2; //三角形所在位置的 初始值x轴的偏移量

        initTriangle(); //初始化三角形
    }

    private void initTriangle() {

        mTriangleHeight = mTriangleWidth / 2; //三角形的高

        mPath = new Path();
        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 tabWidth = getWidth() / mTabVisibleCount; //控件的宽度
        mTranslationX = (int) (tabWidth * offset + tabWidth * position); //三角形的偏移量


        //让盛装 tab的容器随着 指示器一起移动
        //为什么减2呢? 因为我们是从0 开始的
        if (position >= (mTabVisibleCount - 2) && offset > 0 && getChildCount() > mTabVisibleCount) {

            if (mTabVisibleCount != 1) {

                this.scrollTo((position - (mTabVisibleCount - 2)) * tabWidth + (int) (tabWidth * offset), 0);
            } else {
                this.scrollTo((int) (tabWidth * offset + tabWidth * position), 0);
            }
        }

        //三角形的位置发生改变之后进行重绘
        invalidate();
    }

    public void setTabItemTitles(List<String> titles) {
        if (titles != null && titles.size() > 0) {
            this.removeAllViews(); //清除布局文件中view

            mTitles = titles;
            for (String title : mTitles) {
                addView(generateTextView(title));
            }

            setItemClickEvent();
        }
    }

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

    /**
     * 根据title创建tab
     *
     * @param title
     * @return
     */
    private View generateTextView(String title) {

        TextView textView = new TextView(getContext());

        LinearLayout.LayoutParams lp = new LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
        lp.width = getScreenWidth() / mTabVisibleCount;
        textView.setText(title);
        textView.setGravity(Gravity.CENTER);
        textView.setTextSize(18);
        textView.setTextColor(Color.BLUE);
        textView.setLayoutParams(lp);
        return textView;
    }

    /**
     * 在这里还存在一个问题,如果开发者需要在 mainactivity 中需要调用setOnPageChangeListener() 怎么办呢?
     * 所以我们在这里自己定义一个接口 ,方便使用者调用.
     */

    public interface PageOnChangeListener {
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

        public void onPageSelected(int position);

        public void onPageScrollStateChanged(int state);
    }

    public PageOnChangeListener mListener;

    public void setOnPageChangeListener(PageOnChangeListener listener) {
        this.mListener = listener;
    }


    private ViewPager mViewPager;

    /**
     * 终极大方法
     *
     * @param viewPager
     * @param pos
     */
    public void setViewPager(ViewPager viewPager, int pos) {
        this.mViewPager = viewPager;

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

                //偏移量计算 tabWidth+positionOffset + position* tabWidth
                scroll(position, positionOffset);

                //自定义接口的回调
                if (mListener != null) {
                    mListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
                }
            }

            @Override
            public void onPageSelected(int position) {
                //自定义接口的回调
                if (mListener != null) {
                    mListener.onPageSelected(position);
                }

                highLightTextView(position); //高亮tab文本颜色
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                //自定义接口的回调
                if (mListener != null) {
                    mListener.onPageScrollStateChanged(state);
                }
            }
        });
        mViewPager.setCurrentItem(pos);
        highLightTextView(pos); //高亮tab文本颜色
    }

    /**
     * 重置tab文本颜色
     */
    public void resetTextViewColor(){
        for (int i = 0; i < getChildCount(); i++) {
            View view = getChildAt(i);
            if (view instanceof TextView){

                ((TextView) view).setTextColor(Color.BLUE);
            }
        }
    }


    /**
     * 高亮显示某个选中的 tab
     * @param pos
     */
    public void highLightTextView(int pos) {

        resetTextViewColor(); //高亮之前 调用
        View view = getChildAt(pos);
        if (view instanceof TextView){

            ((TextView) view).setTextColor(Color.BLACK);
        }
    }

    /**
     * 设置 tab的点击事件
     */
    public void setItemClickEvent(){
        for (int i = 0; i < getChildCount(); i++) {

            View view = getChildAt(i);
            final int finalI = i;
            view.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    mViewPager.setCurrentItem(finalI);
                }
            });
        }
    }
}

创建的 Fragment

package com.test.viewpagerindicator;


import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


/**
 * 1. 编写Fragment
 * A simple {@link Fragment} subclass.
 */
public class VpSimpleFragment extends Fragment {

    private String mTitle;
    public static final String BUNDLE_TITLE = "title";

    //这里通过newInstance 传入参数
    public static VpSimpleFragment newInstance(String title) {
        Bundle bundle = new Bundle();
        bundle.putString(BUNDLE_TITLE, title);

        VpSimpleFragment fragment = new VpSimpleFragment();
        fragment.setArguments(bundle);

        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        //在这个方法中把 标题的值取出来

        Bundle bundle = getArguments();
        if (bundle != null) {
            mTitle = bundle.getString(BUNDLE_TITLE);
        }

        //这里直接编写一个 TextView 作为 该fragment的内容进行显示 就不去编写布局文件l
        TextView textView = new TextView(getActivity());

        textView.setText(mTitle);
        textView.setGravity(Gravity.CENTER);
        textView.setTextColor(Color.RED);
        textView.setTextSize(24);

        return textView;
    }
}

布局文件 activity_main2.xml

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

    <!--使用自定义导航的 指示器-->
    <com.test.viewpagerindicator.ViewpagerIndicator
        android:id="@+id/id_indictor"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#888"
        gaao:visible_tab_count="4"
        android:orientation="horizontal">
    </com.test.viewpagerindicator.ViewpagerIndicator>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >

    </android.support.v4.view.ViewPager>
</LinearLayout>

布局文件 activity_main.xml

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

    <!--使用自定义导航的 指示器-->
    <com.test.viewpagerindicator.ViewpagerIndicator
        android:id="@+id/id_indictor"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#888"
        gaao:visible_tab_count="4"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="短信11"
            android:textColor="#ccffffff"
            android:textSize="18sp"/>


        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="收藏22"
            android:textColor="#ccffffff"
            android:textSize="18sp"/>


        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="推荐33"
            android:textColor="#ccffffff"
            android:textSize="18sp"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="短信44"
            android:textColor="#ccffffff"
            android:textSize="18sp"/>


        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="收藏55"
            android:textColor="#ccffffff"
            android:textSize="18sp"/>


        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="推荐66"
            android:textColor="#ccffffff"
            android:textSize="18sp"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="短信77"
            android:textColor="#ccffffff"
            android:textSize="18sp"/>


        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="收藏88"
            android:textColor="#ccffffff"
            android:textSize="18sp"/>


        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="推荐99"
            android:textColor="#ccffffff"
            android:textSize="18sp"/>


    </com.test.viewpagerindicator.ViewpagerIndicator>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >

    </android.support.v4.view.ViewPager>
</LinearLayout>

自定义属性

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

    <!--这是一个自定义属性-->
    <!--这是一个自定义属性-->
    <!--这是一个自定义属性-->

    <attr name="visible_tab_count" format="integer"/>
    <declare-styleable name="ViewpagerIndicator">
        <attr name="visible_tab_count"/>
    </declare-styleable>
  <!--这是一个自定义属性-->
    <!--这是一个自定义属性-->
</resources>
高锦湖
关注
专栏目录
Android 自定义ViewPager圆点指示器
安卓兼职framework和app工程师的博客
10-12 1124
在app开发中，ViewPaper分页的圆点指示器可以用图片，也可以自定义,今天就尝试自定义圆点指示器来 作为分页的标志 效果图如下: 自定义圆点指示器 package com.pne.view; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphi
ViewPager自定义指示器
修行的乞丐
03-28 414
效果图如下：1.先在attrs文件中定义指示器的四个属性 <attr name="indicatorIcon" format="reference"/> <attr name="indicatorMargin" format="dimension"/> <attr name="indicatorSmooth" format="boolean"/> <attr name=
Android_自定义ViewPager指示器
04-12
博客链接：http://blog.csdn.net/u012835548/article/details/51132857
使用Jetpack Compose为Android App创建自定义页面指示器
最新发布
虎哥LoveDroid
06-21 984
下面的代码示例展示了如何创建一个水平分页器，并为其添加一个页面指示器。页面指示器提供视觉提示，显示总页数以及当前页的位置。
自定义ViewPager指示器
Zane
04-13 1719
ViewPager有所了解，并且对Fragment有所了解。之后，我也会出一些关于ViewPager、Fragment这类基础文章。ViewPager、Fragment是在android-support-v4.jar这个附加包里面的。ViewPager主要的作用就是能实现手势滑动的简单导航，通过滑动，能实现翻页的效果。而ViewPager指示器就是一个导航条，大家可以这样理解。回到主题，今天我给大
Android——自定义ViewPager指示器
Li_peilun的博客
07-06 1394
很多ViewPager和下面的图形绑定一块来滚动，也就是指示器，指示器可以是很多，正方形，长方形，三角形，圆形等。这里举一个三角形例子：效果图：未滑动 滑动中：这里滑动只要超过倒数第二个就自动向后滑动。上代码：自定义view：public class ViewPagerIndicator extends LinearLayout { private Paint paint; pri
Android ViewPager指示器
2301_82242326的博客
04-28 919
邮箱：1085220040@qq.com日期：2020/1/6 10:41*///指示器样式一 选中未选中都是圆点//指示器样式二 选中未选中都是方形//指示器样式三 选中方形，未选中圆点//横向排列//纵向排列//指示器之间的间距//指示器排列方向//选中与为选中的颜色//指示器样式，默认都是圆点//样式一 圆点半径大小//样式二 方形大小及圆角//样式三 选中的方形大小及圆角//样式三 未选中的圆点半径//画笔//指示器item的区域。
Android自定义ViewPager指示器
09-01
【Android自定义ViewPager指示器详解】 在Android应用开发中，ViewPager是一种常见的滑动视图组件，用于展示多个页面，常用于实现类似轮播图或标签页的效果。然而，原生的ViewPager并不自带指示器，而指示器对于...
Android自定义View——滑动变色指示器
06-29
博客地址：http://blog.csdn.net/jsonnan/article/details/73849505
Android开发之自定义ViewPager三角形指示器
07-26
简单的ViewPager指示器，代码量少，功能健全
Android自定义View实现ViewPager指示器
07-21
Android自定义View实现ViewPager指示器
自定义控件实现ViewPager指示器
03-20
Android自定义控件实现ViewPagerIndicator
Android自定义指示器时间轴
weixin_30825581的博客
12-04 116
指示器时间轴在外卖、购物类的APP里会经常用到，效果大概就像下面这样，看了网上很多文章，大都是自己绘制，太麻烦，其实通过ListView就可以实现。 在Activity关联的布局文件activity_main.xml中放置一个ListView，代码如下。由于这个列表只是用于展示信息，并不需要用户去点击，所以将其clickable属性置为false；为了消除ListView点击产生的...
一行代码调用Android自定义ViewPager指示器
发条杨的博客
08-04 412
PagerSlidingTabStrip基于HorizontalScrollView实现ViewPager的tab指示栏?效果,闲话不多说，直接看效果。 AndroidCodeTools (持续更新…)GitHub：https://github.com/Pgrammerybj/AndroidCodeTools * 支持自定义Tab栏的颜色、高度、点击以及条目个数 * 支持条目文字的大小、颜色设
android 自定义viewpager指示器,自定义viewpager可变指示器
weixin_35867508的博客
05-25 727
效果图如下：1.gif实现方式:整体是水平的LinearLayout，大小可变的圆点是自定义控件。用属性动画控制圆点宽度的变化，实现大小动态改变的效果。具体实现步骤：1.可变大小的指示器实现/*** 可缩小成圆放大成圆角矩形的view*/public class BannerItemView extends View {private static final String TAG = Banne...
自定义ViewPager的Tab指示器
tianyaluqingchen的博客
11-02 420
    先看示例效果图：     自定义View的核心为上半部分的指示器，该需求为的是实现等级列表的展示：每个ViewPager指向一个等级，当滑动到一个ViewPager时其指示的圆点变大，用户所达到的等级用黄色的线画圆点，未达到的等级则用白色来表示。     下面考虑具体实现：指示器布局包含在一个宽度很长的线性布局中，然后就是画所有的线和圆点（注意线长度最好根据屏幕宽度和布局左边的ma...
自定义Android ViewPager指示器实现详解
"Android自定义ViewPager指示器的实现与解析" 在Android开发中，ViewPager是一个非常常用的组件，用于展示多个页面并允许用户通过滑动切换。然而，为了提供更好的用户体验，通常会搭配一个指示器来显示当前所处的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值