Android 自定义View结合自定义TabLayout实现顶部标签滑动效果

最近需要做一个app,需要用到tablayout实现顶部的滑动,用到了自定义item,不过没有用到tabitem,贴出来供大家学习,先看图吧,觉得满意的继续往下面看

具体代码实现:

我直接贴啦,能说的不多

主布局: fragment_message.xml

<?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"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <!--
  app:tabIndicatorHeight="1dp" 指示器高度
  app:tabIndicatorColor="@color/white" 指示器颜色
  app:tabMode 默认是fixed:固定的,标签很多时候会被挤压,不能滑动。
     scrollable 可滑动伸缩式的
 -->
 <android.support.design.widget.TabLayout
  android:id="@+id/fg_mg_tab"
  android:layout_gravity="center"
  android:layout_width="match_parent"
  android:layout_height="@dimen/toolbar_height"
  android:background="@color/colorPrimary"
  app:tabIndicatorHeight="@dimen/common_dimension_2"
  app:tabMode="fixed"
  android:fillViewport="false"
  app:tabIndicatorColor="@color/green1"
  app:tabTextAppearance="@style/core_IconTabLayout"
  app:tabTextColor="@color/white"
  />
 <android.support.v4.view.ViewPager
  android:id="@+id/fg_mg_viewpager"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
 </android.support.v4.view.ViewPager>
</LinearLayout>

item布局: item_table_msg.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:gravity="center_vertical"
android:layout_height="wrap_content">
<ImageView
 android:id="@+id/iv_msg_tab"
 android:src="@drawable/ic_msg_find"
 android:scaleType="centerInside"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />
<TextView
 android:layout_marginLeft="@dimen/common_dimension_2"
 android:id="@+id/tv_msg_tab"
 android:textColor="@color/white"
 android:text="会话"
 android:textSize="@dimen/SmallerTextSize"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />
</LinearLayout>

适配器:MessagePagerAdapter

public class MessagePagerAdapter extends FragmentPagerAdapter {
 private final List<Pair<BaseFragment,MsgTabBean>> mFragmentList = new ArrayList<>();
 private Context mContext;
 public MessagePagerAdapter(Context mContext,FragmentManager fm) {
  super(fm);
  this.mContext = mContext;
 }
 public void addFlag(Pair<BaseFragment,MsgTabBean> msgTabBeanPair){
  mFragmentList.add(msgTabBeanPair);
 }
 @Override
 public Fragment getItem(int position) {
  return mFragmentList.get(position).first;
 }
 @Override
 public int getCount() {
  return mFragmentList.size();
 }
 public View getTabView(int position, ViewGroup mGroup){
  View view;
  view = LayoutInflater.from(mContext).inflate(R.layout.view_table_msg,mGroup,false);
  ImageView img = view.findViewById(R.id.iv_msg_tab);
  TextView tv = view.findViewById(R.id.tv_msg_tab);
  img.setImageResource(mFragmentList.get(position).second.getResId());
  tv.setText(mFragmentList.get(position).second.getTitle());
  return view;
 }
}

Fragment中进行设置:

mMessagePagerAdapter = new MessagePagerAdapter(getActivity(),getActivity().getSupportFragmentManager());
  mMessagePagerAdapter.addFlag(new Pair<>(MsgFragmentFactory.getInstance().getMsgCommListFragment(),new MsgTabBean("通讯录",R.drawable.ic_msg_comm_list)));
  mMessagePagerAdapter.addFlag(new Pair<>(MsgFragmentFactory.getInstance().getMsgCrowdFragment(),new MsgTabBean("群聊",R.drawable.ic_msg_crowd)));
  mMessagePagerAdapter.addFlag(new Pair<>(MsgFragmentFactory.getInstance().getMsgConverFragment(),new MsgTabBean("消息",R.drawable.ic_msg_conver)));
  mMessagePagerAdapter.addFlag(new Pair<>(MsgFragmentFactory.getInstance().getMsgFindFragment(),new MsgTabBean("发现",R.drawable.ic_msg_find)));
  mFgMgViewpager.setAdapter(mMessagePagerAdapter);
  mFgMgTab.setupWithViewPager(mFgMgViewpager);
  for (int index =0 ;index<mMessagePagerAdapter.getCount();index++){
   mFgMgTab.getTabAt(index).setCustomView(mMessagePagerAdapter.getTabView(index,mFgMgTab));
  }
  mFgMgViewpager.setOffscreenPageLimit(mMessagePagerAdapter.getCount());
  mFgMgViewpager.setCurrentItem(3);
 }

总结

以上所述是小编给大家介绍的Android 自定义View结合自定义TabLayout实现顶部标签滑动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android中RecyclerView 滑动时图片加载的优化

    RecyclerView 滑动时的优化处理,在滑动时停止加载图片,在滑动停止时开始加载图片,这里用了Glide.pause 和Glide.resume.这里为了避免重复设置增加开销,设置了一个标志变量来做判断. mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(RecyclerView recyclerView, in

  • android scrollview 滑动到顶端或者指定位置的实现方法

    在Android开发中很多时候会遇到一屏显示不下所有内容的现象,那大家也知道这个时候肯定会想到用scrollview来进行滚屏显示. 这个时候由于某些需求,会要求在最开始显示scrollview的时候就定位到某一处,这篇就是来讲这个的哈- 首先,scrollView.scrollTo( x, y );这个方法是能对滚动条进行定位的,这个大家都知道. But,貌似很多时候这个方法的调用没有什么效果呀-- 上面所说的调用scrollTo方法看上去好像并没有起到对滚动条进行定位的效果,其实是因为我们是

  • Android中Viewpager禁止滑动的实现

    前言 现在很多app,首页不允许滑动切换(因为页面加载吧),但是又用viewpage来管理frgament.因为方便嘛. 以前在网上找的例子: public class NoScrollViewPager extends ViewPager { public NoScrollViewPager(Context context, AttributeSet attrs) { super(context, attrs); } public NoScrollViewPager(Context conte

  • Android开发中如何解决Fragment +Viewpager滑动页面重复加载的问题

    前言 之前在做一个Viewpager上面加载多个Fragment时总会实例化已经创建好的Fragmnet对象类似 viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { switch(position){ case 0: fragments=new Fragmnet01(); break; case

  • Android实现点击WebView界面中图片滑动浏览与保存图片功能

    一.实现需求 最近在公司的项目中遇到需求如下: 1.点击 WebView 页面的图片实现开启查看图片模式,即可以显示点击的图片,然后滑动显示下一张图片. 3.长按 WebView 页面图片弹出对话框可以选择保存长按的图片到本地相册. 拿到这个需求笔者第一反应是没做过 WebView 相关的交互,甚至分不清这个需求是否需要服务端配合完成 Java 与 JavaScript 的互相调用,一脸茫然. 遇到这种情况笔者的解决思路一般分两个方向: 1.找一个比较出名的客户端有类似功能的,然后 Google

  • Android ViewPager无限循环滑动并可自动滚动完整实例

    对于ViewPager 广告页这个功能很多APP都有这个功能在网上也看过一些资料,我就在这把我自己完整的实现方法写出来吧 基础的ViewPager: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="ma

  • Android 自定义View结合自定义TabLayout实现顶部标签滑动效果

    最近需要做一个app,需要用到tablayout实现顶部的滑动,用到了自定义item,不过没有用到tabitem,贴出来供大家学习,先看图吧,觉得满意的继续往下面看 具体代码实现: 我直接贴啦,能说的不多 主布局: fragment_message.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.c

  • Android 自定义view和属性动画实现充电进度条效果

    近期项目中需要使用到一种类似手机电池充电进度的动画效果,以前没学属性动画的时候,是用图片+定时器的方式来完成的,最近一直在学习动画这一块,再加上复习一下自定义view的相关知识点,所以打算用属性动画和自定义view的方式来完成这个功能,将它开源出来,供有需要的人了解一下相关的内容. 本次实现的功能类似下面的效果: 接下来便详细解析一下如何完成这个功能,了解其中的原理,这样就能举一反三,实现其他类似的动画效果了. 详细代码请看大屏幕 https://github.com/crazyandcoder

  • Android开发之自定义view实现通讯录列表A~Z字母提示效果【附demo源码下载】

    本文实例讲述了Android开发之自定义view实现通讯录列表A~Z字母提示效果.分享给大家供大家参考,具体如下: 开发工具:eclipse 运行环境:htc G9 android2.3.3 话不多说,先看效果图 其实左右边的A~Z是一个自定义的View,它直接覆盖在ListView上. MyLetterListView: public class MyLetterListView extends View { OnTouchingLetterChangedListener onTouching

  • Android自定义View实现仿驾考宝典显示分数效果(收藏)

    小编最近发现,一些炫酷的view效果,通过需要自定义view和属性动画结合在一起,才能更容易的实现. 实现的效果图如下: 所用的知识有: (1)自定义View中的 path ,主要用来绘制指示块. (2)属性动画-ValueAnimator,并设置属性动画的监听器. (3)根据属性动画是否结束的标志,决定是否绘制分数对应的描述文本内容. 实现步骤: 继承自View,在构造函数中获取自定义属性和初始化操作(初始化画笔) private void obtainAttrs(Context contex

  • Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果(实例代码)

    自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScrollView可以想ViewPager一样,既可以绑定数据集(动态改变图片),还能做到,不管多少图片都不会OOM(ViewPager内

  • Android自定义View之自定义评价打分控件RatingBar实现自定义星星大小和间距

    在Android开发中,我们经常会用到对商家或者商品的评价,运用星星进行打分.然而在Android系统中自带的打分控件,RatingBar特别不好用,间距和大小无法改变.所以,我就自定义了一个特别好用的打分控件.在项目中可以直接使用,特别简单.下面直接上图: 效果图 实现原理 其实就是自定义View继承LinearLayout ,然后里面动态加了五个ImageView. 实现代码,有详细的注释 在attrs中声明的可以在xml中设置的变量 <declare-styleable name="

  • android自定义view仿今日头条加载文字变色效果

    本文实例为大家分享了android自定义view加载文字变色效果的具体代码,供大家参考,具体内容如下 不分析了,很简单,直接贴代码: package com.loading; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import

  • android自定义view之模拟qq消息拖拽删除效果

    这个模拟功能的实现主要依靠了PATH和二阶贝塞尔曲线.首先上一张图来简单看一下: 这个模拟功能有以下几个特点: 在开始的时候点击圆以外的区域不会触发拖动事件 点击圆的时候可以拖拽,此时会有一个拉伸效果,连接大圆和小圆 拉伸到一定距离(自己设定)以后两个圆会断开,此时即使再拖拽进距离之内的时候也不会再产生已经断开的连接 在距离之内松手的时候会回弹会原位置,并伴有一个弹跳动画 介绍了这么多,看过我前边文章的朋友应该会有一个基本思路. 暴露接口 这个模拟功能共分为三部分,一个是那个小圆,固定的位置,一

  • 漂亮的Android音乐歌词控件 仿网易云音乐滑动效果

    前言: 项目有个音乐播发器功能,实现音乐在线播放,同时需要带有歌词显示功能.网上也找过,在github找到勉强能用的控件,只是效果还是差强人意,不是特别好.于是趁有空的时间,参考了网上的部分demo,自己也写了个歌词控件. 只要demo可以拉到最底部. 一.歌词控件效果. 目前的歌词控件效果如下: 主要效果有以下: 1.实现自动滑动切换到下一句. 2.实现滑动歌词切换播放时间. 3.实现拖动歌词时仿网易云音乐显示时间线,将要选择的歌词颜色变化. 4.音乐进度跳转时,歌词跳转可以滑动切换. 二.歌

  • android 通过向viewpage中添加listview来完成滑动效果(类似于qq滑动界面)

    文件名:page.xml 复制代码 代码如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="fill_parent"    android:layout_height="fill

随机推荐