安卓开发之横向滑动带有滑动下划线的tablayout（传入viewpager滑动）

最新推荐文章于 2023-07-14 17:06:47 发布
最新推荐文章于 2023-07-14 17:06:47 发布
阅读量1.9k 收藏 2
点赞数 1
分类专栏： 自定义控件 文章标签： android 

import android.content.Context;
import android.graphics.Paint;
import android.support.v4.view.ViewPager;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;


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


/**
 * 创建时间：2017年1月3日
 * 创建人：王亮
 * 思路：
 *    （1）布局方式：最外层父布局为LinearLayout布局，第一层子布局是两个水平排列的线性布局：
 *        第一个水平排列布局室友多个相同权重比的textview组成，第二个水平排列布局室友一个textview组成
 *    （2）初始化子布局：当传入viewpager以及tablist的时候不进行布局的初始化，只有在onmesuse方法中获得父容器的宽度的时候在进行初始化
 *    （3）原理：切换的效果是由第二层水平排列的布局产生，在初始化子视图的时候会计算好所有的文字的宽度并存到集合当中，
 *         当viewpager进行滑动的时候根据positionOffset以及position进行第二个水平排列布局的左侧内边距的计算，
 *         由于第一层标题是等比的，所以机选有当前的(position)乘以等比出来的宽度加上等比宽度乘以移动的百分比positionOffset的结果
 *         再加上初始的paddingleft就是所向左侧或右侧移动的距离
 *
 * 注意：传入的viewpage的页面滑动监听只能在本视图里注册，不可再调用本视图的页面注册，
 *      如果要在调用本视图的页面注册页面滑动监听则使用本页面的接口产生的页面滑动监听
 */
public class MyTabLayout extends LinearLayout {
    private String TAG;
    private int tabTextViewColor;//tab文本显示颜色
    private int tabTextViewSize;//tab文本显示大小
    private int tabSelectColor;//选中的文本以及下划线颜色
    private int lineHeight;//切换线的高度

    private Context context;
    private List<TextView> textViewList = new ArrayList<>();
    private LinearLayout lineView;
    private List<String>  tabTitleList;
    private ViewPager viewPager;

    private MyTabLayoutOnPageChangeListener myTabLayoutOnPageChangeListener;//页面的切换监听
    private int viewWidth = 0;
    private int viewHeight = 0;


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

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

    public MyTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    /**
     * 设置默认的初始属性
     * @param context
     */
    private void init(Context context){
        this.context = context;
        TAG = getClass().getName();
        setOrientation(VERTICAL);//设置布局垂直显示
        setGravity(Gravity.CENTER_VERTICAL);
        tabTextViewColor = context.getResources().getColor(R.color.actionbar_bg);
        tabTextViewSize = (int) CommonUtils.getInstance().getSpResourceValue(getContext(),R.dimen.app_text_size_5);
        tabSelectColor = context.getResources().getColor(R.color.app_text_color_4);
        lineHeight = 5;
        lineView = new LinearLayout(getContext());
        lineView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        lineView.setOrientation(HORIZONTAL);

        //获取文本宽度的画笔
        TextPaint paint = new TextPaint();
        float scaledDensity = context.getResources().getDisplayMetrics().scaledDensity;
        paint.setTextSize(scaledDensity * tabTextViewSize);
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();


    }

    private boolean isLoading = false;//是否加载过

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if(getWidth() == 0){
            if(getMeasuredWidth() == 0){
                if(viewWidth == 0){
                    viewWidth = 0;
                }
            }else {
                viewWidth = getMeasuredWidth();
            }
        }else {
            viewWidth = getWidth();
        }

        if(getHeight() == 0){
            if(getMeasuredHeight() == 0){
                if(viewHeight == 0){
                    viewHeight = 0;
                }
            }else {
                viewHeight = getMeasuredHeight();
            }
        }else {
            viewHeight = getHeight();
        }

        if(viewWidth != 0 && viewHeight != 0){
            //两个输入是否为空；是否获得了父容器的高度；是否已经加载过子视图了;标题和视图容量是否相同

            if(tabTitleList != null && viewPager != null && viewWidth != 0 && viewHeight != 0 && !isLoading ) {
                isLoading = true;

                LogUtils.logD(TAG + " viewHeight:",viewHeight + "");

                //记录所有的文字的宽度
                final List<Float> textWidthList = new ArrayList<>();

                //初始化标题栏父容器
                LinearLayout linearLayout = new LinearLayout(getContext());
                linearLayout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
                linearLayout.setOrientation(HORIZONTAL);
                linearLayout.measure(0,0);

                //获取文本宽度的画笔
                TextPaint paint = new TextPaint();
                float scaledDensity = context.getResources().getDisplayMetrics().scaledDensity;
                paint.setTextSize(scaledDensity * tabTextViewSize);
                Paint.FontMetrics fontMetrics = paint.getFontMetrics();


                //初始化tab标题栏
                int maxTextWidth = 0;
                LinearLayout.LayoutParams textParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, viewHeight - lineHeight);
                textParams.weight = 1;
                textParams.gravity = Gravity.CENTER;
                TextView textView = null;
                for(int  i = 0 ; i < tabTitleList.size() ; i++){
                    textView = new TextView(getContext());
                    textView.setLayoutParams(textParams);
                    textView.setTextColor(tabTextViewColor);
                    textView.setTextSize(tabTextViewSize);
                    textView.setText(tabTitleList.get(i));
                    textView.setGravity(Gravity.CENTER);
                    textWidthList.add(paint.measureText(tabTitleList.get(i)));
                    if(maxTextWidth < paint.measureText(tabTitleList.get(i))){
                        maxTextWidth = (int) paint.measureText(tabTitleList.get(i));
                    }
                    final int finalI = i;
                    textView.setOnClickListener(new OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            if(finalI < viewPager.getChildCount()) {
                                viewPager.setCurrentItem(finalI);
                            }
                        }
                    });
                    textViewList.add(textView);
                    linearLayout.addView(textView);
                }

                //设置tab切换的线
                RelativeLayout.LayoutParams lineParams = new RelativeLayout.LayoutParams(maxTextWidth, lineHeight);
                textView = new TextView(getContext());
                textView.setLayoutParams(lineParams);
                textView.setTextColor(tabTextViewColor);
                textView.setTextSize(tabTextViewSize);
                textView.setGravity(Gravity.CENTER);
                textView.setBackgroundColor(tabSelectColor);
                lineView.addView(textView);

                //设置初始选中
                textViewList.get(0).setTextColor(tabSelectColor);

                //添加两个视图到父容器
                addView(linearLayout);
                addView(lineView);


                final double paddingLeft = (viewWidth * 1.0 / tabTitleList.size() - maxTextWidth) / 2;
                lineView.setPadding((int) paddingLeft,0,0,0);

                //添加页面切换监听
                viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                    @Override
                    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                        LogUtils.logD(TAG + ":position ",position + "");
                        LogUtils.logD(TAG + ":positionOffset ",positionOffset + "");
                        LogUtils.logD(TAG + ":positionOffsetPixels ",positionOffsetPixels + "");

                        int addLeft = 0;//计算左侧间距
                        for(int i = 0 ; i < position + 1 ; i++){
                            if(position == i){//viewpager向左滑动时，position为当前页码-1，享有滑动时为当前页码
                                addLeft += (viewWidth * 1.0 / tabTitleList.size())* positionOffset;
                            }else {
                                addLeft += viewWidth * 1.0 / tabTitleList.size();
                            }
//                        if(position == i){//viewpager向左滑动时，position为当前页码-1，享有滑动时为当前页码
//                            if(position == tabTitleList.size() - 1){
//                                addLeft += (viewWidth * 1.0 / tabTitleList.size())* positionOffset;
//                            }else {
//                                addLeft += (viewWidth * 1.0 / tabTitleList.size()
//                                        - textWidthList.get(position + 1) / 2//本句以及下一句是为了适配不同文字宽度标题
//                                        + textWidthList.get(position) / 2)
//                                        * positionOffset;
//                            }
//                        }else {
//                            if(position == tabTitleList.size() - 1){
//                                addLeft += viewWidth * 1.0 / tabTitleList.size();
//                            }else {
//                                addLeft += viewWidth * 1.0 / tabTitleList.size()
//                                        + textWidthList.get(position + 1) / 2
//                                        - textWidthList.get(position) / 2;
//                            }
//                        }
                        }
                        lineView.setPadding((int) (addLeft + paddingLeft),0,0,0);

                        if(myTabLayoutOnPageChangeListener != null){
                            myTabLayoutOnPageChangeListener.onPageScrolled(position,positionOffset,positionOffsetPixels);
                        }

                    }

                    @Override
                    public void onPageSelected(int position) {
                        for(int i = 0 ; i < textViewList.size() ; i++){
                            if(i == position){
                                textViewList.get(i).setTextColor(tabSelectColor);
                            }else {
                                textViewList.get(i).setTextColor(tabTextViewColor);
                            }
                        }

                        if(myTabLayoutOnPageChangeListener != null){
                            myTabLayoutOnPageChangeListener.onPageSelected(position);
                        }

                    }

                    @Override
                    public void onPageScrollStateChanged(int state) {
                        LogUtils.logD(TAG + ":state ",state + "");
                        if(myTabLayoutOnPageChangeListener != null){
                            myTabLayoutOnPageChangeListener.onPageScrollStateChanged(state);
                        }

                    }
                });
            }
        }else {
            postInvalidate();
        }

        viewHeight = getMeasuredHeight();
    }

    public void setViewPagerTabTitle(final List<String> tabTitleList, ViewPager viewPager, MyTabLayoutOnPageChangeListener myTabLayoutOnPageChangeListener){
        this.tabTitleList = tabTitleList;
        this.viewPager = viewPager;
        this.myTabLayoutOnPageChangeListener = myTabLayoutOnPageChangeListener;
        isLoading = false;
        invalidate();
    }

    /**
     * 设置默认属性
     * @param tabTextViewColor
     * @param tabTextViewSize
     * @param tabSelectColor
     */
    public void setViewRules(Integer tabTextViewColor,Integer tabTextViewSize,Integer tabSelectColor,Integer lineHeight){
        this.tabTextViewColor = tabTextViewColor != null ? tabTextViewColor : this.tabSelectColor;
        this.tabTextViewSize = tabTextViewSize != null ? tabTextViewSize : this.tabTextViewSize;
        this.tabSelectColor = tabSelectColor != null ? tabSelectColor : this.tabSelectColor;
        this.lineHeight = lineHeight != null ? lineHeight : this.lineHeight;
    }

    /**
     * 本页面viewpager滑动监听
     */
    public interface MyTabLayoutOnPageChangeListener{
        void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
        void onPageSelected(int position);
        void onPageScrollStateChanged(int state);
    }


    @Override
    public void setVisibility(int visibility) {
        if(visibility == VISIBLE){
            postInvalidate();
        }
        super.setVisibility(visibility);
    }
}
Loren_Wang
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android控件-TabLayout使用介绍(1)
2301_79600088的博客
05-04 1038
在技术领域内，没有任何一门课程可以让你学完后一劳永逸，再好的课程也只能是“师傅领进门，修行靠个人”。“学无止境”这句话，在任何技术领域，都不只是良好的习惯，更是程序员和工程师们不被时代淘汰、获得更好机会和发展的必要前提。如果你觉得自己学习效率低，缺乏正确的指导，可以一起学习交流！加入我们吧！群内有许多来自一线的技术大牛，也有在小厂或外包公司奋斗的码农，我们致力打造一个平等，高质量的Android交流圈子，不一定能短期就让每个人的技术突飞猛进，但从长远来说，眼光，格局，长远发展的方向才是最重要的。
TabLayout(单独横向滑动菜单)
Lucky_7777777的博客
01-13 577
--------------------------- -TabLayout布局-------------------------- xml version="1.0" encoding="utf-8"?> RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="
TabLayout 横向滚动
xujiuba的博客
03-13 919
依赖: compile 'com.android.support:design:26.0.0-alpha1'布局: &lt;LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"&gt; ...
Android ViewPager+TabLayout下划线
weixin_58159075的博客
07-14 319
【代码】Android ViewPager+TabLayout下划线。
Android ViewPager2 实现阅读器横向翻页效果（一）--- ViewPager2的原理及堆叠效果实现
weixin_44370506的博客
10-04 3842
通过Android ViewPager2 实现阅读器横向翻页效果。ViewPager2原理详解，及堆叠效果实现的原理及代码
Android开发基于ViewPager+GridView实现仿大众点评横向滑动功能
09-01
在Android应用开发中，创建类似大众点评的横向滑动功能是一项常见的需求，这通常涉及到ViewPager和GridView组件的结合使用。本文将详细介绍如何利用这两个组件来实现这一功能。 首先，ViewPager是一个用于展示多个...
Android之禁止ViewPager滑动实现实例
08-30
Android之禁止ViewPager滑动实现实例 Android之禁止ViewPager滑动实现实例是指在Android应用程序中，禁止ViewPager控件的滑动功能，以便在某些情况下避免触摸事件冲突或实现其他特殊效果。这种实现方式可以在同一个...
Android中ViewPager带来的滑动卡顿问题解决要点解析
09-02
问题的核心在于，ViewPager在横向滑动时会调用requestDisallowInterceptTouchEvent()方法，告诉其父视图不要拦截当前的Touch事件序列，以保证自身滑动的平滑。然而，SwipeRefreshLayout的...
Android自定义ViewPager实现纵向滑动翻页效果
08-27
Android自定义ViewPager实现纵向滑动翻页效果是指在Android开发中实现ViewPager的纵向滑动翻页效果，达到类似抖音的视屏切换效果。这个效果通过自定义ViewPager实现，主要思路是交换Touch事件的x、y坐标，并实现...
Android利用ViewPager实现带小圆球的图片滑动
08-26
Android 利用 ViewPager 实现带小圆球的图片滑动 Android 中的 ViewPager 是一个非常有用的控件，它可以帮助我们实现图片滑动的效果。今天，我们将详细介绍如何利用 ViewPager 实现带小圆球的图片滑动，并且只有第...
自定义一个好看点的TabLayout
07-12
博客的项目
Android学习日记 Viewpager+TabLayout 底部选项卡
jvGibson的博客
05-17 266
Android学习日记 滑动碎片+选项卡 Viewpager+TabLayout 组合底部选项卡 文章目录Android学习日记 滑动碎片+选项卡 Viewpager+TabLayout 组合底部选项卡前言一、Viewpager使用方法使用步骤二、Viewpager+TabLayout底部选项卡实现步骤 前言 此为碎片+滑动碎片+选项卡的结合使用 实现底部选项卡功能 一、Viewpager使用方法 使用步骤 注意：注释掉的为实现碎片滑动不必要的代码，主要用于与TabLayout结合使用 Main.x
Android选项卡viewpager入门到精通
深情小建
04-26 1451
一、老规矩，不多说，先上效果图
Android页面底部三个可以横向滑动切换菜单的实现
m0_56226131的博客
05-31 816
你不得掌握的Android小技巧：实现三个底部菜单，每个菜单一个页面，可以横向滑动的示例的代码实现
Android使用ViewPager2实现页面滑动切换
Misdirection_XG的博客
07-11 2961
在很多应用中，我们经常会看到多个页面之间滑动切换的场景，ViewPager2是ViewPager的升级版，本文将简要介绍如何使用ViewPager2、FragmentStateAdapter和Fragment来实现页面之间的滑动切换。要使用ViewPager2，需要引入ViewPager2库，引入方法如下： 2.2 使用ViewPager2 在布局中使用ViewPager2，示例如下： 2.3 构建Fragment 本Fragment只为简单演示使用，其布局如下： ContentFragment类的实现如下
android横向滑动选项卡,Android Design Support Library全解：Part 4 TabLayout 实现滑动选项卡...
weixin_39581719的博客
05-26 401
智能管家Tablayout.gif如上图的滑动选项卡的效果在移动端的应用中很是常见，之前要是该效果需要利用动态加载布局技术和控制滑动技术(比如利用HorizontalScrollView)，较为繁琐。不过现在就完全不同了，Design Support Library提供了功能强大的TabLayout来帮助我们实现动态滑动选项卡。它可以和ViewPager很好地配合，让我们来看看它们如何工作的吧。T...
Android横向滑动导航TabLayout
碎片整理
09-05 3143
参考网址http://blog.csdn.net/chenguang79/article/details/48804125<android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+
Android 禁止Tablayout横向滑动
weixin_42630638的博客
08-23 1148
public class MyViewPager extends ViewPager { private boolean scroll = true; public MyViewPager(Context context) { super(context); } public MyViewPager(Context context, AttributeSet attrs) { super(context, attrs); } .
Android 使用TabLayout实现可水平滑动的标签选择布局
u010231454的专栏
09-05 6109
一说到标签布局，一般都会想到是流式布局FlowLayout，流式布局网上有太多的demo可参考了，但是今天产品上有个横向水平滑动的标签布局，有选中和未选中的状态，并且初始状态是不选中任何一个标签。折腾了一番，最终在TabLayout上修饰了一阵，解决了需求和想要的效果。具体如下： 1.先附上效果截图：（默认都是未选中的） 2.xml中使用如下所示： 因为tabLayout有个默认的点击效...
TabLayout+ViewPager撤消左右滑动切换功能
最新发布
08-06
要禁用TabLayout与ViewPager的左右滑动切换功能，您可以自定义一个ViewPager的子类，并重写它的 `onInterceptTouchEvent` 方法。 首先，创建一个名为 `NonSwipeableViewPager` 的类，并继承自 ViewPager： ```java...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值