Tab導航欄的實現方式之三 :Tab欄新消息提示

Leo96J 8年前發布 | 9K 次閱讀 安卓開發 Android開發 移動開發

效果

代碼

第一步 : 準備資源文件

  • 4個tab欄的資源 ( selector )

  • tab欄字體顏色資源 ( selector )

第二步 : 完成主界面布局

  • 定義tab欄的style

<!--tab標題的style-->
<style name="tab_title">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:gravity">center</item>
    <item name="android:padding">10dp</item>
    <item name="android:drawablePadding">3dp</item>
    <item name="android:textColor">@drawable/tab_text</item>
    <item name="android:textSize">20sp</item>
</style>


<!--tab右上角消息數的style-->
<style name="tab_msg_num">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_alignParentRight">true</item>
    <item name="android:layout_marginRight">3dp</item>
    <item name="android:layout_marginTop">3dp</item>
    <item name="android:textSize">20sp</item>
    <item name="android:gravity">center</item>
    <item name="android:textColor">#f00</item>
</style></code></pre> 
  
     
   
  •  
    activity_main.xml
     
    •  
  
 
  
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="


<FrameLayout
    android:id="@+id/fl_content"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">
</FrameLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <RelativeLayout
        android:id="@+id/rl_news"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content">
        <TextView
             style="@style/tab_title"
            android:text="新聞"
            android:drawableTop="@drawable/tab_news"/>
        <TextView
            android:id="@+id/tv_new_num"
            android:visibility="invisible"
            android:text="99+"
            style="@style/tab_msg_num"/>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_tweet"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content">
        <TextView
            style="@style/tab_title"
            android:text="動彈"
            android:drawableTop="@drawable/tab_tweet"
            android:drawablePadding="0dp"/>
        <TextView
            android:id="@+id/tv_tweet_num"
            android:visibility="invisible"
            android:text="99+"
            android:layout_marginTop="8dp"
            style="@style/tab_msg_num"/>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_discover"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content">
        <TextView
            style="@style/tab_title"
            android:text="發現"
            android:drawableTop="@drawable/tab_discover"/>
        <TextView
            android:id="@+id/tv_discover_num"
            android:visibility="invisible"
            android:text="99+"
            style="@style/tab_msg_num"/>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_my"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content">
        <TextView
            style="@style/tab_title"
            android:text="我的"
            android:drawableTop="@drawable/tab_my"/>
        <TextView
            android:id="@+id/tv_my_num"
            android:visibility="invisible"
            android:text="99+"
            style="@style/tab_msg_num"/>
    </RelativeLayout>
</LinearLayout>




</LinearLayout></code></pre> 
  
第三步 : 完成4個Tab對應的Fragment及其布局
 本文由用戶 Leo96J 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！