文档章节

android自定义tabbar,并带badgeview消息提示

汪兴
 汪兴
发布于 2014/10/14 15:06
字数 967
阅读 3578
收藏 8
点赞 1
评论 0

最早的时候,我用的tab都是在屏幕底端的,后来慢慢的流行在屏幕顶端了,按照用户体验来说,顶部确实比底部好,不仅可以防止按到返回键或者Home等引起误操作,而且tab标题在头顶很显眼很醒目。


一开始朋友推荐使用viewpageindicator,这个可以在github上有例子,大家如果没什么特殊需求,基本可以满足要求。根据项目要求我就使用了viewpageindicator,后来项目要求有消息提示,就像ios的badge一样,因此就对viewpageindicator进行修改,改了之后,就出现了下图的情况

就是badge是有了,但是把原本的tab给破坏了,后来我按照viewpageindicator的方式自己写了个例子,加上badge也出现了这种情况,估计tabwidget不适合这种模式(也可能是我水平有限,高手们应该有办法),而且viewpageindicator比较负责,有那么多代码和样式,还得引入library,还得把原本的android-support-v4.jar给删除等等,从而会引起别的问题,虽然都能解决,但是觉得很麻烦,就打算自己再重写一个,tabbar不用tabwidget,而是自己自定义布局tabbar.xml

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/tab_first"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/tab_bg"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dip" >

            <TextView
                android:id="@+id/text_first"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/first"
                android:textColor="@color/green"
                android:textSize="15sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/tab_second"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/tab_bg"
            android:clickable="true"
            android:gravity="center"
             android:orientation="horizontal"
            android:padding="10dip"
            android:saveEnabled="false" >

            <TextView
                android:id="@+id/text_second"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/second"
                android:textColor="@color/black"
                android:textSize="15sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/tab_third"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/tab_bg"
            android:focusable="false"
            android:gravity="center"
             android:orientation="horizontal"
            android:padding="10dip" >

            <TextView
                android:id="@+id/text_third"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/third"
                android:textColor="@color/black"
                android:textSize="15sp" />
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/tab_under_line"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="@drawable/vpi__tab_selected_pressed_holo" >
    </ImageView>

</LinearLayout>

整体布局在activity_main.xml里

<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" >

    <include layout="@layout/tabbar"/>
    
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

先上个截图看看吧,截图里有三个tab和三个tab页面,包含了badge

可能比较粗糙,大家可以自行修改,但是自我感觉就是差不多这个效果了,一般够用了吧

接着就是初始化一系列view,事件绑定,适配器初始化等等

@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		//初始化屏幕宽度
		DisplayMetrics outMetrics = new DisplayMetrics();
		getWindow().getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
		screenWidth = outMetrics.widthPixels;
		
		//初始化三个页面
		FirstTabFragment firstTabFragment = new FirstTabFragment();
		SecondTabFragment secondTabFragment = new SecondTabFragment();
		ThirdTabFragment thirdTabFragment = new ThirdTabFragment();
		fragments.add(firstTabFragment);
		fragments.add(secondTabFragment);
		fragments.add(thirdTabFragment);
		fragSize = fragments.size();
		
		//初始化顶部三个tab
		firstTab = (LinearLayout) findViewById(R.id.tab_first);
		secondTab = (LinearLayout) findViewById(R.id.tab_second);
		thirdTab = (LinearLayout) findViewById(R.id.tab_third);
		//给tab设置点击事件
		firstTab.setOnClickListener(tabClickListener);
		secondTab.setOnClickListener(tabClickListener);
		thirdTab.setOnClickListener(tabClickListener);
		//初始化tab选中后的下划线
		initTabUnderLine();
		
		firstText = (TextView) findViewById(R.id.text_first);
		secondText = (TextView) findViewById(R.id.text_second);
		thirdText = (TextView) findViewById(R.id.text_third);
		
		viewPager = (ViewPager)findViewById(R.id.viewpager);
		pagerAdapter = new MyPageAdapter(getSupportFragmentManager());
		viewPager.setAdapter(pagerAdapter);
		viewPager.setOnPageChangeListener(pageChangeListener);
		
		//example 给第一个tab加上badge
		BadgeView badge;
		badge = new BadgeView(MainActivity.this, firstTab);
		badge.setText("1");
		badge.show();
	}

设置viewpager的当前项就行。

最后再来说说消息提醒数目badge,在这里就非常简单,只需获取tab的LinearLayout,在LinearLayout上显示badgeview,不会影响之前的布局

//example 给第一个tab加上badge
		BadgeView badge;
		badge = new BadgeView(MainActivity.this, firstTab);
		badge.setText("1");
		badge.show();

语言组织能力不是很好,还望体谅,同时本人也是网上查询了很多例子才写成,多谢各位大神。

具体内容就是下载代码进行理解,下面放出传送门到github上

源代码传送门

© 著作权归作者所有

共有 人打赏支持
汪兴
粉丝 7
博文 6
码字总数 8424
作品 0
杭州
程序员
用BadgeView在actionbar menu上显示提醒信息

有时候需要在actionbar menu上显示消息个数,所以可以用BadgeView来实现。 实现方法是获取actionbar menuitem的view,然后创建BadgeView。注意,通常只能在Optionsmenu创建完成之后去获取men...

嘻哈开发者 ⋅ 2014/11/05 ⋅ 0

Android 的 TabBar 扩展--JPTabBar

一个强大的TabBar,实现市面上APP基本上所拥有的功能,代码简单构造容易!只需不足5行代码就把基本的界面搭建出来了,附上效果图: 主要功能特色: 多种Tab切换的动画效果 实现底部导航中间按钮...

MrJpeng ⋅ 2016/11/17 ⋅ 3

安卓自定义View进阶-事件分发机制原理

安卓自定义View进阶-事件分发机制原理 之前讲解了很多与View绘图相关的知识,你可以在 安卓自定义View教程目录 中查看到这些文章,如果你理解了这些文章,那么至少2D绘图部分不是难题了,大部...

猴亮屏 ⋅ 05/22 ⋅ 0

app的好用框架

Android 屏幕直播方案 项目需求是实时同步 Android 手机屏幕画面至浏览器。这里有两个挑战,一是 Android 如何在应用内获得屏幕实时视频流,另一个是如何在浏览器上做视频直播。经过一番折腾...

掘金官方 ⋅ 01/08 ⋅ 0

android蓝牙手柄、仿QQ看房、仿慕课网、数据库二维码框架等源码

Android精选源码 可自定义图片指示器并支持自定义Tab宽度的TabLayout源码(http://www.apkbus.com/thread-599243-1-1.html) android蓝牙控制手柄操作源码(http://www.apkbus.com/thread-59928...

逆鳞龙 ⋅ 05/15 ⋅ 0

Android动画:献上一份详细 & 全面的动画知识学习攻略

前言 动画的使用 是 开发中常用的知识 可是动画的种类繁多、使用复杂,每当需要 采用自定义动画 实现 复杂的动画效果时,很多开发者就显得束手无策 本文将献上一份动画的全面介绍攻略,包括动...

Carson_Ho ⋅ 06/06 ⋅ 0

Android:手把手教你学会使用Google出品的序列化神器Protocol Buffer

前言 习惯用 数据存储格式的你们,相信大多都没听过 其实 是 出品的一种轻量 & 高效的结构化数据存储格式,性能比 真的强!太!多! 由于 出品,我相信已经具备足够的吸引力 今天,我将详细介...

Carson_Ho ⋅ 04/16 ⋅ 0

Android文档水印之PDF水印

随着移动终端办公化的普及,在Android手机中阅读文档已经是很普遍的事情了,但是有些文档可能是涉及到一些企业机密与敏感的内容,不希望随意扩散出去。为了防止重要的文档被截屏或者拍照而泄...

sunrongxin.py ⋅ 2017/03/05 ⋅ 0

Android插件化原理(一)Activity插件化

相关文章 Android深入四大组件系列 Android解析AMS系列 Android解析ClassLoader系列 前言 四大组件的插件化是插件化技术的核心知识点,而Activity插件化更是重中之重,Activity插件化主要有三...

刘望舒 ⋅ 05/29 ⋅ 0

浅入浅出 Android 安全:第五章 Android 应用层安全

第五章 Android 应用层安全 来源:Yury Zhauniarovich | Publications 译者:飞龙 协议:CC BY-NC-SA 4.0 虽然在这一节中我们描述了应用层的安全性,但是实际的安全实施通常出现在到目前为止...

apachecn_飞龙 ⋅ 2016/12/02 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring MVC基本概念

只写Controller

颖伙虫 ⋅ 12分钟前 ⋅ 0

微软重金收购GitHub的背后逻辑原来是这样的

全球最大的开发者社区GitHub网站花落谁家的问题已经敲定,微软最终以75亿美元迎娶了这位在外界看来无比“神秘”的小家碧玉。尽管此事已过去一些时日,但整个开发者世界,包括全球各地的开源社...

linux-tao ⋅ 13分钟前 ⋅ 0

磁盘管理—逻辑卷lvm

4.10-4.12 lvm 操作流程: 磁盘分区-->创建物理卷-->划分为卷组-->划分成逻辑卷-->格式化、挂载-->扩容。 磁盘分区 注: 创建分区时需要更改其文件类型为lvm(代码8e) 分区 3 已设置为 Linu...

弓正 ⋅ 33分钟前 ⋅ 0

Spring源码解析(六)——实例创建(上)

前言 经过前期所有的准备工作,Spring已经获取到需要创建实例的 beanName 和对应创建所需要信息 BeanDefinition,接下来就是实例创建的过程,由于该过程涉及到大量源码,所以将分为多个章节进...

MarvelCode ⋅ 53分钟前 ⋅ 0

js模拟栈和队列

栈和队列 栈:LIFO(先进后出)一种数据结构 队列:LILO(先进先出)一种数据结构 使用的js方法 1.push();可以接收任意数量的参数,把它们逐个推进队尾(数组末尾),并返回修改后的数组长度。 2....

LIAOJIN1 ⋅ 今天 ⋅ 0

180619-Yaml文件语法及读写小结

Yaml文件小结 Yaml文件有自己独立的语法,常用作配置文件使用,相比较于xml和json而言,减少很多不必要的标签或者括号,阅读也更加清晰简单;本篇主要介绍下YAML文件的基本语法,以及如何在J...

小灰灰Blog ⋅ 今天 ⋅ 0

IEC60870-5-104规约传送原因

1:周期循环2:背景扫描3:自发4:初始化5:请求6:激活7:激活确认8:停止激活9:停止激活确认10:激活结束11:远程命令引起的返送信息12:当地命令引起的返送信息13:文件传送20:响应总召...

始终初心 ⋅ 今天 ⋅ 0

【图文经典版】冒泡排序

1、可视化排序过程 对{ 6, 5, 3, 1, 8, 7, 2, 4 }进行冒泡排序的可视化动态过程如下 2、代码实现    public void contextLoads() {// 冒泡排序int[] a = { 6, 5, 3, 1, 8, 7, 2, ...

pocher ⋅ 今天 ⋅ 0

ORA-12537 TNS-12560 TNS-00530 ora-609解决

oracle 11g不能连接,卡住,ORA-12537 TNS-12560 TNS-00530 TNS-12502 tns-12505 ora-609 Windows Error: 54: Unknown error 解决方案。 今天折腾了一下午,为了查这个问题。。找了N多方案,...

lanybass ⋅ 今天 ⋅ 0

IDEA反向映射Mybatis

1.首先在pom文件的plugins中添加maven对mybatis-generator插件的支持 ` <!-- mybatis逆向工程 --><plugin><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-ma......

lichengyou20 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部