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

jopen 10年前發布 | 33K 次閱讀 Android開發 移動開發 Android

最早的時候，我用的tab都是在屏幕底端的，后來慢慢的流行在屏幕頂端了，按照用戶體驗來說，頂部確實比底部好，不僅可以防止按到返回鍵或者Home等引起誤操作，而且tab標題在頭頂很顯眼很醒目。

一開始朋友推薦使用viewpageindicator，這個可以在github上有例子，大家如果沒什么特殊需求，基本可以滿足要求。根據項目要求我就使用了viewpageindicator，后來項目要求有消息提示，就像ios的badge一樣，因此就對viewpageindicator進行修改，改了之后，就出現了下圖的情況

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

就是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="

    <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></pre> 
  
整體布局在activity_main.xml里


<LinearLayout xmlns:android="

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


</LinearLayout></pre> 
  
先上個截圖看看吧，截圖里有三個tab和三個tab頁面，包含了badge



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


可能比較粗糙，大家可以自行修改，但是自我感覺就是差不多這個效果了，一般夠用了吧
接著就是初始化一系列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();
}</pre> 



設置viewpager的當前項就行。
最后再來說說消息提醒數目badge，在這里就非常簡單，只需獲取tab的LinearLayout，在LinearLayout上顯示badgeview，不會影響之前的布局
//example 給第一個tab加上badge
        BadgeView badge;
        badge = new BadgeView(MainActivity.this, firstTab);
        badge.setText("1");
        badge.show();
 
  


語言組織能力不是很好，還望體諒，同時本人也是網上查詢了很多例子才寫成，多謝各位大神。
具體內容就是下載代碼進行理解，下面放出傳送門到github上
源代碼傳送門

 

 來自：http://my.oschina.net/u/579033/blog/330482
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！