Tab导航栏的实现方式之三 :Tab栏新消息提示

   <h2><strong>效果</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2b2abe3c21b9023ed00759d5b1962821.gif"></p>    <h2><strong>代码</strong></h2>    <h2><strong>第一步 : 准备资源文件</strong></h2>    <ul>     <li> <p>4个tab栏的资源 ( selector )</p> </li>     <li> <p>tab栏字体颜色资源 ( selector )</p> </li>    </ul>    <h2><strong>第二步 : 完成主界面布局</strong></h2>    <ul>     <li> <p>定义tab栏的style</p> </li>    </ul>    <pre>  <code class="language-java"><!--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>    <ul>     <li> <p>activity_main.xml</p> </li>    </ul>    <pre>  <code class="language-java"><?xml version="1.0" encoding="utf-8"?>  <LinearLayout      xmlns:android="http://schemas.android.com/apk/res/android"      android:orientation="vertical"      android:layout_width="match_parent"      android:layout_height="match_parent">        <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>    <h2><strong>第三步 : 完成4个Tab对应的Fragment及其布局</strong></h2>    <ul>     <li> <p>fragment_news.xml</p> <pre>  <code class="language-java"><?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="match_parent"              android:background="#cb551b"              android:orientation="vertical">    <Button        android:id="@+id/btn_show_num"        android:text="显示Tab消息数"        android:textSize="20sp"        android:textAllCaps="false"        android:layout_width="match_parent"        android:layout_height="wrap_content"/>      <Button        android:id="@+id/btn_hide_num"        android:text="隐藏Tab消息数"        android:textSize="20sp"        android:textAllCaps="false"        android:layout_width="match_parent"        android:layout_height="wrap_content"/>  </LinearLayout></code></pre> </li>     <li> <p>NewsFragment.java</p> <pre>  <code class="language-java">package com.lyp.tab3;  import android.app.Fragment;  import android.os.Bundle;  import android.support.annotation.Nullable;  import android.view.LayoutInflater;  import android.view.View;  import android.view.ViewGroup;  import android.widget.Button;  import android.widget.TextView;  /**  * Created by ${思格斯} on 2016/9/18 0018.  */  public class NewsFragment extends Fragment {    private Button btnShowNum;    private Button btnＨideNum;    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_news, container, false);        final TextView tvNum= (TextView) getActivity().findViewById(R.id.tv_new_num);        btnShowNum= (Button) view.findViewById(R.id.btn_show_num);        btnHideNum= (Button) view.findViewById(R.id.btn_hide_num);        //默认不显示消息数        tvNum.setVisibility(View.INVISIBLE);        //点击显示消息数        btnShowNum.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                tvNum.setText("26");                tvNum.setVisibility(View.VISIBLE);           }        });        //点击隐藏消息数        btnＨideNum.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                tvNum.setVisibility(View.INVISIBLE);            }        });        return view;    }  }</code></pre> </li>    </ul>    <h2><strong>第四步 : MainActivity.java</strong></h2>    <pre>  <code class="language-java">package com.lyp.tab3;    import android.app.Fragment;  import android.app.FragmentManager;  import android.app.FragmentTransaction;  import android.support.v7.app.AppCompatActivity;  import android.os.Bundle;  import android.view.View;  import android.widget.RelativeLayout;    public class MainActivity extends AppCompatActivity implements View.OnClickListener {      private RelativeLayout rlNews;      private RelativeLayout rlTweet;      private RelativeLayout rlDiscover;      private RelativeLayout rlMy;        private Fragment newsFragment,tweetFragment,discoverFragment,myFragment;      private FragmentManager fManager;        @Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);            fManager=getFragmentManager();          initView();          //模拟点击NewsFragment的Tab,默认显示          rlNews.performClick();      }        private void initView() {          rlNews= (RelativeLayout) findViewById(R.id.rl_news);          rlTweet= (RelativeLayout) findViewById(R.id.rl_tweet);          rlDiscover= (RelativeLayout) findViewById(R.id.rl_discover);          rlMy= (RelativeLayout) findViewById(R.id.rl_my);            rlNews.setOnClickListener(this);          rlTweet.setOnClickListener(this);          rlDiscover.setOnClickListener(this);          rlMy.setOnClickListener(this);      }        //重置所有文本的选中状态      private void setSelected() {          rlNews.setSelected(false);          rlTweet.setSelected(false);          rlDiscover.setSelected(false);          rlMy.setSelected(false);      }        //隐藏所有Fragment      private void hideAllFragment(FragmentTransaction fragmentTransaction){          if(newsFragment != null)fragmentTransaction.hide(newsFragment);          if(tweetFragment != null)fragmentTransaction.hide(tweetFragment);          if(discoverFragment != null)fragmentTransaction.hide(discoverFragment);          if(myFragment != null)fragmentTransaction.hide(myFragment);    }        @Override      public void onClick(View v) {          //点击后先隐藏所有Fragment          FragmentTransaction mTransaction = fManager.beginTransaction();          hideAllFragment(mTransaction);          switch (v.getId()){              case R.id.rl_news:                  //重置Tab选中状态                  setSelected();                  rlNews.setSelected(true);                  if (newsFragment==null){                      newsFragment=new NewsFragment();                      mTransaction.add(R.id.fl_content,newsFragment);                  }else {                      mTransaction.show(newsFragment);                  }                  break;              case R.id.rl_tweet:                  setSelected();                  rlTweet.setSelected(true);                  if (tweetFragment==null){                      tweetFragment=new TweetFragment();                      mTransaction.add(R.id.fl_content,tweetFragment);                  }else {                      mTransaction.show(tweetFragment);                  }                  break;              case R.id.rl_discover:                  setSelected();                  rlDiscover.setSelected(true);                  if (discoverFragment==null){                      discoverFragment=new DiscoverFragment();                      mTransaction.add(R.id.fl_content,discoverFragment);                  }else {                      mTransaction.show(discoverFragment);                  }                  break;              case R.id.rl_my:                  setSelected();                  rlMy.setSelected(true);                  if (myFragment==null){                      myFragment=new MyFragment();                      mTransaction.add(R.id.fl_content,myFragment);                  }else {                      mTransaction.show(myFragment);                  }                  break;          }          mTransaction.commit();      }    }</code></pre>    <p> </p>    <p>来自：http://www.jianshu.com/p/91fcd146e098</p>    <p> </p>