Android开发短视频源码时常用的页面切换指示器

发布来源:云豹科技
发布人:云豹科技
2021-06-16 10:02:12

在项目和产品的开发过程中,难免会遇到使用viewpager+指示器的UI实现,如果是通过自己手写实现,未免太过麻烦,且各个产品不同页面的风格不同,定制起来颇为复杂,今天,向大家推荐云豹短视频源码开发中正在使用的框架——MagicIndicator。

它使用起来非常简单,并且可以自定义实现多种样式,接下来就简单介绍下用法。

第一步首先就是引用这个框架,在build.gradle中添加引用:


compile'com.github.hackware1993:MagicIndicator:1.5.0'


第二步在使用的页面布局文件中添加代码:


<net.lucode.hackware.magicindicator.MagicIndicator
    android:id="@+id/magic_indicator"
    android:layout_width="match_parent"
    android:layout_height="45dp" />
<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_weight="1"
    android:layout_width="match_parent"
    android:layout_height="0dp">
</android.support.v4.view.ViewPager>


接下来,在短视频源码使用的页面中设置标题的指示器样式:

 

CommonNavigator commonNavigator = new CommonNavigator(getActivity());
 commonNavigator.setAdapter(new CommonNavigatorAdapter() {
        @Override
        public int getCount() {
            return titles.length;
        }
        @Override
        public IPagerTitleView getTitleView(Context context, final int index) {
            SimplePagerTitleView simplePagerTitleView = new   ScaleTransitionPagerTitleView(context);
            simplePagerTitleView.setText(titles[index]);
/设置导航的文字大小
 
            simplePagerTitleView.setTextSize(20);/            
//正常状态下的标题颜色
simplePagerTitleView.setNormalColor(Color.GRAY);    
//选中的标题字体颜色        simplePagerTitleView.setSelectedColor(getResources().getColor(R.color.title_bar_bg));
            simplePagerTitleView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    viewPager.setCurrentItem(index);
                }
            });
            return simplePagerTitleView;
        }
        @Override
        public IPagerIndicator getIndicator(Context context) {
            return null;
        }
    });
 
    magicIndicator.setNavigator(commonNavigator);


 

如果标题数量少,可以设置指示器居中显示,按钮均分宽度:

 

commonNavigator.setAdjustMode(true);


      当然,可以定制风格的地方比较多,这里举一个例子,实现短视频app源码中内容包裹的指示器样式:


 protected IPagerIndicator createIPagerIndicator(Context context) {
 
        WrapPagerIndicator indicator = new WrapPagerIndicator(context);
//设置背景颜色
        indicator.setFillColor(Color.parseColor("#c9f4f3"));
//设置行间距
        indicator.setHorizontalPadding(DpUtil.dp2px( 10));
//设置圆角弧度
        indicator.setRoundRadius(DpUtil.dp2px( 25));
//设置竖直间距
        indicator.setVerticalPadding(DpUtil.dp2px(2));
        return indicator;
    }


最后需要将viewpagerMagicIndicator 绑定到一起


ViewPagerHelper.bind(magicIndicator, viewPager);


以上就是云豹短视频源码中,简单使用MagicIndicator实现切换页面跟指示器的绑定教程,如有需要,欢迎联系云豹科技。

声明:以上内容为云豹科技作者本人原创,未经作者本人同意,禁止转载,否则将追究相关法律责任www.yunbaokj.com

声明:
以上内容为云豹科技作者本人原创,未经作者本人同意,禁止转载,否则将追究相关法律责任
立即查看