ViewPagerIndicator 指示器

已于 2022-07-02 18:09:30 修改
阅读量553 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Android 文章标签： android 布局 app 库
于 2018-05-04 13:11:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsp_android_com/article/details/80193671
本文介绍如何使用ViewPagerIndicator实现平滑切换的标签导航栏效果，并提供两个具体应用实例：订单状态管理和主题页面导航。通过自定义指示器样式及ViewPager配置，确保用户体验流畅。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

ViewPagerIndicator

图

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".order.MyOrderActivity">

<com.shizhefei.view.indicator.FixedIndicatorView
    android:id="@+id/fixedIndicatorView"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:background="@color/background" />

<View
    android:layout_width="match_parent"
    android:layout_height="@dimen/d0.5"
    android:background="@color/cutOffRule" />

<com.shizhefei.view.viewpager.SViewPager
    android:id="@+id/sViewPager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@color/background" />
</LinearLayout>

主代码

package com.self.zsp.mutualhelp.order;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.content.ContextCompat;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.self.zsp.mutualhelp.R;
import com.shizhefei.view.indicator.FixedIndicatorView;
import com.shizhefei.view.indicator.IndicatorViewPager;
import com.shizhefei.view.indicator.slidebar.TextWidthColorBar;
import com.shizhefei.view.indicator.transition.OnTransitionTextListener;
import com.shizhefei.view.viewpager.SViewPager;

import base.BaseActivity;
import fragment.order.OrderAlreadyAchieveFragment;
import fragment.order.OrderOverdueFragment;
import fragment.order.OrderUnderWayFragment;
import value.Magic;

/**
 * @decs: 我的下单
 * @date: 2018/5/4 10:42
 * @version: v 1.0
 */
public class MyOrderActivity extends BaseActivity {
    /**
     * 控件
     */
    private SViewPager sViewPager;
    private FixedIndicatorView fixedIndicatorView;
    private IndicatorViewPager indicatorViewPager;

    @Override
    protected void initContentView(Bundle savedInstanceState) {
        setContentView(R.layout.activity_my_order);
    }

    @Override
    protected void stepUI() {
        sViewPager = findViewById(R.id.sViewPager);
        fixedIndicatorView = findViewById(R.id.fixedIndicatorView);
    }

    @Override
    protected void initConfiguration() {
        setIndicator();
    }

    @Override
    protected void initData() {

    }

    @Override
    protected void startLogic() {

    }

    @Override
    protected void setListener() {
      
    }

    private void setIndicator() {
        // 指示器
        fixedIndicatorView.setOnTransitionListener(new OnTransitionTextListener().setValueFromRes(this,
                R.color.colorPrimary, R.color.fontHint,
                R.dimen.s15, R.dimen.s13));
        // 指示器下边缘
        /*fixedIndicatorView.setScrollBar(new ColorBar(this, Color.RED, 10, ScrollBar.Gravity.BOTTOM_FLOAT));*/
        // ViewPager禁滑
        sViewPager.setCanScroll(true);
        // ViewPager保留界面不重加载页数
        sViewPager.setOffscreenPageLimit(3);
        indicatorViewPager = new IndicatorViewPager(fixedIndicatorView, sViewPager);
        indicatorViewPager.setIndicatorScrollBar(new TextWidthColorBar(this,
                fixedIndicatorView, ContextCompat.getColor(this, R.color.colorPrimary), 10));
        indicatorViewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));
    }

    private class MyAdapter extends IndicatorViewPager.IndicatorFragmentPagerAdapter {
        private String[] tabTitles = {getString(R.string.underWay), getString(R.string.alreadyAchieve), getString(R.string.overdue)};
        private LayoutInflater inflater;

        /**
         * 构造方法
         *
         * @param fragmentManager
         */
        public MyAdapter(FragmentManager fragmentManager) {
            super(fragmentManager);
            inflater = LayoutInflater.from(getApplicationContext());
        }

        @Override
        public int getCount() {
            return tabTitles.length;
        }

        @Override
        public View getViewForTab(int position, View convertView, ViewGroup container) {
            if (convertView == null) {
                convertView = inflater.inflate(R.layout.tab_main, container, false);
            }
            TextView textView = (TextView) convertView;
            textView.setText(tabTitles[position]);
            return textView;
        }

        @Override
        public Fragment getFragmentForPage(int position) {
            Fragment fragment = null;
            if (position == 0) {
                fragment = new OrderUnderWayFragment();
            } else if (position == 1) {
                fragment = new OrderAlreadyAchieveFragment();
            } else if (position == Magic.INT_ER) {
                fragment = new OrderOverdueFragment();
            }
            return fragment;
        }
    }
}

图文

主布局
<?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=".subject.MainActivity">

    <com.shizhefei.view.viewpager.SViewPager
        android:id="@+id/sViewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/d0.5"
        android:background="@color/cutOffRule" />

    <com.shizhefei.view.indicator.FixedIndicatorView
        android:id="@+id/fixedIndicatorView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/background"
        android:paddingBottom="@dimen/d3"
        android:paddingTop="@dimen/d6" />
</LinearLayout>
tab 布局

tab_main

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical"
    android:textSize="@dimen/s10" />
主代码
package com.self.zsp.mutualhelp.subject;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.self.zsp.mutualhelp.R;
import com.shizhefei.view.indicator.FixedIndicatorView;
import com.shizhefei.view.indicator.IndicatorViewPager;
import com.shizhefei.view.indicator.transition.OnTransitionTextListener;
import com.shizhefei.view.viewpager.SViewPager;

import base.BaseActivity;
import fragment.subject.SubjectActiveFragment;
import fragment.subject.SubjectHelpFragment;
import fragment.subject.SubjectHomeFragment;
import fragment.subject.SubjectNewsFragment;
import fragment.subject.SubjectPersonalFragment;
import joggle.TouchListener;
import value.Magic;

/**
 * @decs: 主页
 * @date: 2018/3/27 11:29
 * @version: v 1.0
 */
public class MainActivity extends BaseActivity {
    /**
     * 控件
     */
    private SViewPager sViewPager;
    private FixedIndicatorView fixedIndicatorView;
    private IndicatorViewPager indicatorViewPager;

    @Override
    protected void initContentView(Bundle savedInstanceState) {
        setContentView(R.layout.activity_main);
    }

    @Override
    protected void stepUI() {
        sViewPager = findViewById(R.id.sViewPager);
        fixedIndicatorView = findViewById(R.id.fixedIndicatorView);
    }

    @Override
    protected void initConfiguration() {
        setIndicator();
    }

    @Override
    protected void initData() {

    }

    @Override
    protected void startLogic() {

    }

    @Override
    protected void setListener() {

    }

    private void setIndicator() {
        // 指示器
        fixedIndicatorView.setOnTransitionListener(new OnTransitionTextListener().setColorId(MainActivity.this, R.color.colorPrimary, R.color.fontHint));
        // ViewPager滑
        sViewPager.setCanScroll(false);
        // ViewPager保留界面不重加载页面数
        sViewPager.setOffscreenPageLimit(5);
        indicatorViewPager = new IndicatorViewPager(fixedIndicatorView, sViewPager);
        indicatorViewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));
    }

    private class MyAdapter extends IndicatorViewPager.IndicatorFragmentPagerAdapter {
        private String[] tabTitles = {getString(R.string.home),
                getString(R.string.active),
                getString(R.string.news),
                getString(R.string.help),
                getString(R.string.personal)};
        private int[] tabIcons = {R.drawable.home_tab_selector,
                R.drawable.active_tab_selector,
                R.drawable.news_tab_selector,
                R.drawable.help_tab_selector,
                R.drawable.personal_tab_selector};
        private LayoutInflater inflater;

        /**
         * 构造方法
         *
         * @param fragmentManager
         */
        public MyAdapter(FragmentManager fragmentManager) {
            super(fragmentManager);
            inflater = LayoutInflater.from(getApplicationContext());
        }

        @Override
        public int getCount() {
            return tabTitles.length;
        }

        @Override
        public View getViewForTab(int position, View convertView, ViewGroup container) {
            if (convertView == null) {
                convertView = inflater.inflate(R.layout.tab_main, container, false);
            }
            TextView textView = (TextView) convertView;
            textView.setText(tabTitles[position]);
            // 布局 / 代码均可设文本大小
            // 固宽可避 TextView 大小或 Tab 宽变致 Tab 抖动
            /*textView.setTextSize(13);*/
            textView.setCompoundDrawablesWithIntrinsicBounds(0, tabIcons[position], 0, 0);
            return textView;
        }

        @Override
        public Fragment getFragmentForPage(int position) {
            Fragment fragment = null;
            if (position == 0) {
                fragment = new SubjectHomeFragment();
            } else if (position == 1) {
                fragment = new SubjectActiveFragment();
            } else if (position == Magic.INT_ER) {
                fragment = new SubjectNewsFragment();
            } else if (position == Magic.INT_S) {
                fragment = new SubjectHelpFragment();
            } else if (position == Magic.INT_SI) {
                fragment = new SubjectPersonalFragment();
            }
            return fragment;
        }
    }
}
ViewPager配合使用Indicator
永远的VC的专栏
02-10 1806
ViewPager Indicator可以很好的实现Android的Tab页面功能，这里介绍一款开源控件ViewPagerIndicator，很好的实现了ViewPager和Indicator的结合。ViewPagerIndicator中主要有以下几种Indicator
ViewPager指示器
12-02
一个简单的ViewPager指示器，三句代码调的飞起。
开源控件ViewPagerIndicator的使用
Mr_chai的博客
08-12 520
1.如何使用开源框架 第1步：improt library项目 第2步：导入library进我们自己新建的项目 从Github上Download下来这个zip包之后，里面会有一个library文件，是库工程，还有一个sample，是作者提供的例子（将sample这个项目import，可以看到作者提供的各种样式的Indicator，作为参考）。如果要在作者例子的基础上自己开发样式，需要将lib
ViewPager 指示器
lxfeng1098751554的专栏
11-28 1174
项目需要一个ViewPager的指示器，发现Android联系人中有该控件，于是抽取出来分享给大家：ViewPagerTabs .java:public class ViewPagerTabs extends HorizontalScrollView implements ViewPager.OnPageChangeListener { ViewPager mPager; privat
Viewpager指示器Indicator
wangyaqian1212的博客
07-20 689
效果：ViewPager跟随Tab动，底端绘制三角形 布局文件中：           android:layout_width="match_parent"         android:layout_height="45dp"         android:orientation="horizontal"         android:id="@+id/viewpag
ViewPagerIndicator: 为你的 Android 应用导航
最新发布
Unity打怪升级
09-07 1094
在 Android 应用开发中，`ViewPager` 是一种非常流行的用于展示滑动视图的组件。然而，`ViewPager` 默认并不提供页面指示器（如小圆点或小方块），这就需要开发者自己实现。`ViewPagerIndicator` 是一个开源库，它为 `ViewPager` 提供了丰富的页面指示器效果，使得用户能够直观地看到当前页面的位置。本文将带你深入了解 `ViewPagerIndicator` 的核心特性、使用方法以及如何在 Android 应用中实现页面导航。
一个封装的android ViewPagerIndicator指示器附源码.rar
07-10
一个封装的android ViewPagerIndicator指示器附源码，可以对ViewPagerIndicator进行二次修改，比如修改下划线在initRectangle()方法里面，可以修改下划线的高度及长度也可以修改为三角形等等……
万能的ViewPagerIndicator 指示器
04-06
这个名为“万能的ViewPagerIndicator 指示器”的话题，正是关于如何利用自定义的画笔（Paint）绘制矩形指示器，并优化性能，同时实现滑动效果。 首先，我们要理解ViewPagerIndicator的核心功能。它不仅仅是一个简单...
android 封装好的ViewPagerIndicator指示器，内附源码及apk
06-08
总的来说，这个“android 封装好的ViewPagerIndicator指示器”资源为Android开发者提供了一个强大的工具，帮助他们创建具有专业导航体验的应用程序。通过源码、apk演示和示例项目，开发者可以快速掌握使用方法，提升...
ViewPagerIndicator:viewPager指示器
05-25
ViewPagerIndicator 是一个专门为 Android 应用程序设计的库，它为 ViewPager 提供了各种样式的指示器。ViewPager 是 Android SDK 中的一个组件，用于展示多个页面并允许用户通过滑动来切换这些页面。...
ViewPagerIndicator.zip
07-10
ViewPagerIndicator介绍： 实现各种样式的滑动视图（ScrollView）和PagerIndicator。PagerIndicator可以是圆圈、图标、tab、横线、标题等等。   测试环境： Eclipse 4.2, Android 3.0 以上。 注意：测试环境并不代表适用环境。  
ViewPagerIndicator
05-28
1、来自Android-ViewPagerIndicator-master（https://github.com/JakeWharton/Android-ViewPagerIndicator）； 2、作为布局同样方便、好用、美观
简单实用的ViewPagerIndicator
07-18
简单实用的ViewPagerIndicator，高度自定义一定能满足你的各种需求 博客地址 http://blog.csdn.net/u014702653/article/details/51944706
Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI
modabobo
12-29 493
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/42160391，本文出自：【张鸿洋的博客】 我参加了博客之星评选，如果你喜欢我的博客，求投票~~http://vote.blog.csdn.net/blogstar2014/selection?username=lmj623565791#content 1、概述 哈，今天给大家带...
Viewpager指示器
TheWindRisesla的博客
03-10 787
效果 public class IndicatorView extends LinearLayout implements ViewPager.OnPageChangeListener { /** * 需要创建的指示器个数 */ private int childViewCount = 0; /** * 设置圆点间margin */ private int mInterval; /** * 当前选中的位置
自定义高度的ViewPagerIndicator tab指示器
3. 不同类型的指示器实现，例如圆点指示器、带图标指示器、文本指示器等。 4. 兼容不同Android版本的代码，以及优化过的布局资源文件。 总的来说，ViewPageIndicator作为增强用户界面体验的重要组件，不仅提升了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

snpmyn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值