android自定義tabbar，並帶badgeview消息提示

最先的時候，我用的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上

源代碼傳送門