文档章节

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

汪兴
 汪兴
发布于 2014/10/14 15:06
字数 967
阅读 3597
收藏 8

最早的时候,我用的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
杭州
程序员
私信 提问
android实现小圆点显示未读功能

前言 好长时间没有更新简书了,今天就讲个实现未读消息小圆点的功能。以前我们实现这个功能都是用 BadgeView.java,大体就是将这个java类复制到自己的项目中,然后在项目中使用,今天讲的也是...

奔跑的佩恩
07/10
0
0
用BadgeView在actionbar menu上显示提醒信息

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

嘻哈开发者
2014/11/05
0
0
Andriod 实现购物车右上角数字商品

1、使用开源控件Andriod-viewbager的,GitHub地址:https://github.com/jgilfelt/android-viewbadger 2.应用样例 View target = findViewById(R.id.target_view); BadgeView badge = new Ba......

逸俊
2015/08/07
0
0
android 使用 BadgeView 给listview 每一项的图标右上角添加标记数字

如何使用以下代码 给listview 每一项的图标右上角添加标记数字??? View target = findViewById(R.id.target_view); BadgeView badge = new BadgeView(this, target); badge.setText("1");......

姬鑫
2014/07/08
2.8K
0
iOS技巧之Notification,BadgeView

Tips:自定义badgeView需要此类库,不能使用ARC---badgeView封装类库下载 115网盘礼包码:5lb7f4o6 自定义效果 一、iOS提醒三种方式,自带的图标上的badge,alert,notification 在需要添加通...

芳仔小脚丫
2013/06/09
0
1

没有更多内容

加载失败,请刷新页面

加载更多

day178-2018-12-15-英语流利阅读-待学习

“真蛛奶茶”了解一下?蜘蛛也会产奶了 Lala 2018-12-15 1.今日导读 “蛋白质含量是牛奶的 4 倍,并有着更低的脂肪和含糖量”,听起来诱人又美味的并不是羊奶或豆奶,而是你可能打死都想不到...

飞鱼说编程
17分钟前
3
0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents

场景重现 npm install --verbose 安装依赖的时,出现如下警告 强迫症患者表示不能接受 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):npm WARN......

taadis
21分钟前
1
0
MySQL自增id超大问题查询

引言 小A正在balabala写代码呢,DBA小B突然发来了一条消息,“快看看你的用户特定信息表T,里面的主键,也就是自增id,都到16亿了,这才多久,在这样下去过不了多久主键就要超出范围了,插入...

dragon_tech
34分钟前
3
0
OSChina 周六乱弹 —— 你一口我一口多咬一口是小狗

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文 :分享Roy Orbison的单曲《She's a Mystery to Me》 《She's a Mystery to Me》- Roy Orbison 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
279
6
Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部