一款强大的 Android 底部导航

dqm926 8年前
   <h2><strong>:blush: JPTabBar :blush:</strong></h2>    <p>阅读中文文档请点击这里</p>    <h2><strong>ScreenShots:</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/78bef4b9da176110a47614e5d378ef18.gif"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8270cf73d420440ef343508d2fb37258.gif"> <img src="https://simg.open-open.com/show/0adeb91f3e40839dc698fb1fc21c65f9.gif"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ea36b8d1a17ea463fc6a64367178f253.gif"> <img src="https://simg.open-open.com/show/35264385534623fb0af56c09c41c501e.gif"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5ea02eb85a679dd04dc5ba6c422f6196.gif"> <img src="https://simg.open-open.com/show/5ceb152e3b6c8b2ed5031ae03542d6af.gif"></p>    <h2><strong>Main functions and features:</strong></h2>    <ul>     <li> <p>More Animation effects of multiple Tab switching</p> </li>     <li> <p>Implements the effect of the middle button of the bottom navigation</p> </li>     <li> <p>Implements the kind of WeChat sliding navigation of the bottom gradient effect, with the change of the sliding distance</p> </li>     <li> <p>Implements the red mark on the TabBar, and can drag</p> </li>     <li> <p>The powerful BadgeView function, intelligent judgment digital hiding and cross-border display, two display modes。</p> </li>     <li> <p>Provide listening to the click event, middle click and badge is dragged away the interface</p> </li>     <li> <p>Reference annotation method, construction TabBarItem</p> </li>    </ul>    <h2><strong>Usage:</strong></h2>    <p>1.Introducing Gradle dependency</p>    <pre>  <code class="language-java">repositories {          jcenter()      }        dependencies{          compile 'com.jpeng:JPTabBar:1.1.2'      }</code></pre>    <p>2.Add JPTabBar to your main interface layout</p>    <pre>  <code class="language-java"><com.jpeng.jptabbar.JPTabBar          android:id="@+id/tabbar"          android:layout_width="match_parent"          android:layout_height="wrap_content"          android:background="#fff"          jp:TabHeight="56dp"          jp:BadgeDraggable="true"          jp:TabAnimate="Jump"          jp:BadgePadding="4dp"          jp:BadgeMargin="5dp"          jp:BadgeTextSize="10dp"          /></code></pre>    <p>3.In your main interface using an array of variables to declare an array of variables, the internal reflection to generate TabItem, attention is: Titles and NorIcons are required, the length of each array should be consistent</p>    <pre>  <code class="language-java">@Titles      private static final String[] mTitles = {"页面一","页面二","页面三","页面四"};        @SeleIcons      private static final int[] mSeleIcons = {R.mipmap.tab1_selected,R.mipmap.tab2_selected,R.mipmap.tab3_selected,R.mipmap.tab4_selected};        @NorIcons      private static final int[] mNormalIcons = {R.mipmap.tab1_normal, R.mipmap.tab2_normal, R.mipmap.tab3_normal, R.mipmap.tab4_normal};</code></pre>    <p>4.After above, the layout of the TabBar basically has been built. If you want to achieve Wechat kind of gradual change as there are automatically ViewPager to change the function of the page, only in the oncreate Activity method, adding a line of code:</p>    <pre>  <code class="language-java">//The parameters must be extends ViewPager      mTabbar.setContainer(mPager);</code></pre>    <p>5.The project has provided many animation,If you want to Custom your Animation,You can setCustomAnimate,Duclipte of examples:</p>    <pre>  <code class="language-java">mTabbar.setCustomAnimate(new Animatable() {                  /**                   * When you Tab Pager,The method will be called                   * @param target IconView in the iconview                   * @param Duration your animation time                   */                  @Override                  public void playAnimate(View target, int Duration) {                      ViewHelper.setPivotX(target,target.getLayoutParams().width/2);                      ViewHelper.setPivotY(target,target.getLayoutParams().height/2);                        AnimatorSet set = new AnimatorSet();                      set.playTogether(                              ObjectAnimator.ofFloat(target,"scaleX",0.2f,1f).setDuration(Duration),                              ObjectAnimator.ofFloat(target,"scaleY",0.2f,1f).setDuration(Duration),                              ObjectAnimator.ofFloat(target,"alpha",0.3f,1f).setDuration(Duration)                      );                        set.start();                  }                    /**                   * The explain of the Method                   * When you touch in the ViewPager by User,The method will be called back                   * @param target The same in top                   * @param offset Range value 0f-1f                   */                  @Override                  public void onPageAnimate(View target, float offset) {                      ViewHelper.setScaleX(target,1+offset*0.2f);                      ViewHelper.setScaleY(target,1+offset*0.2f);                  }                    /**                   * return true can make onPageAnimate method called                   * @return                   */                  @Override                  public boolean isNeedPageAnimate() {                      return true;                  }              });</code></pre>    <h2><strong>Method and node description:</strong></h2>    <p>The Main Method Of JPTabBar:</p>    <pre>  <code class="language-java">/**       * Set custom Tab toggle animation       */      public void setCustomAnimate(Animatable customAnimate);           /**       * Show the BadgeView With Text       */      public void ShowBadge(int position,String text);        /**       * Hide the OVAL Badge       */      public void HideBadge(int position);        /**       * Switch Tab page, whether with animation       */      public void setSelectTab(int index, boolean animated);        /**       * Set the Observer of the Click Tab Event       */      public void setTabListener(OnTabSelectListener listener);        /**       * set the CallBack of the Badge Dragging Dismiss       */      public void setDismissListener(BadgeDismissListener listener);</code></pre>    <h3><strong>Attribute Explain:</strong></h3>    <table>     <thead>      <tr>       <th>Attribute Name</th>       <th>Attribute Explain</th>       <th>Parameter Type</th>       <th>Default Value</th>      </tr>     </thead>     <tbody>      <tr>       <td>TabHeight</td>       <td>TabBar height, will cover the settings of layout_height</td>       <td>dimension</td>       <td>56dp</td>      </tr>      <tr>       <td>TabNormalColor</td>       <td>Font and icon of the normal color</td>       <td>color</td>       <td>0xffAEAEAE(Gray)</td>      </tr>      <tr>       <td>TabSelectColor</td>       <td>Font and icon of the selected color</td>       <td>color</td>       <td>0xff59D9B9(Cyan)</td>      </tr>      <tr>       <td>TabTextSize</td>       <td>the textsize of the bottom text</td>       <td>dimension</td>       <td>14sp</td>      </tr>      <tr>       <td>TabIconSize</td>       <td>the icon size of the tab</td>       <td>dimension</td>       <td>24dp</td>      </tr>      <tr>       <td>TabIconFilter</td>       <td>Set the icon change by the font color</td>       <td>boolean</td>       <td>true</td>      </tr>      <tr>       <td>TabMargin</td>       <td>Set the icon distance above and below the distance from the text</td>       <td>dimension</td>       <td>8dp</td>      </tr>      <tr>       <td>TabSelectBg</td>       <td>Set the TabItem Selected bg</td>       <td>color</td>       <td>transparent</td>      </tr>      <tr>       <td>TabAnimate</td>       <td>The animate type of the Tab Switch</td>       <td>enum</td>       <td>Scale</td>      </tr>      <tr>       <td>TabMiddleIcon</td>       <td>The middle Icon of the tab</td>       <td>drawable</td>       <td>无</td>      </tr>      <tr>       <td>BadgeColor</td>       <td>The background of the badgeView</td>       <td>color</td>       <td>#f00(RED)</td>      </tr>      <tr>       <td>BadgeDraggable</td>       <td>Can drag on the badge touched by user</td>       <td>boolean</td>       <td>false</td>      </tr>      <tr>       <td>BadgePadding</td>       <td>The background expansion distance of the badge</td>       <td>dimension</td>       <td>4dp</td>      </tr>      <tr>       <td>BadgeTextSize</td>       <td>The textSize of the Badge</td>       <td>dimension</td>       <td>11dp</td>      </tr>      <tr>       <td>BadgeMargin</td>       <td>The badge right margin in the TabBar</td>       <td>dimension</td>       <td>9dp</td>      </tr>     </tbody>    </table>    <h2><em>Matters needing attention</em></h2>    <p>1.If you have given setContainer TabBar, do not setOnPageChangeListener to ViewPager</p>    <pre>  <code class="language-java">/**      *If you already have the TabBar set up the container,       *and then call this method,      *the kind of WeChat that drag the gradient effect and automatically switch the page will be invalid      *If you want to listen to the page to change the event, you can use the TabListener     */    mPager.setOnPageChangeListener(this);</code></pre>    <p>2.If you want to achieve the middle of the button, you must set the android:clipChildren= "false" to the parent node at the top of the main interface, otherwise it will be covered.</p>    <pre>  <code class="language-java"><?xml version="1.0" encoding="utf-8"?>    <LinearLayout      xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:jp="http://schemas.android.com/apk/res-auto"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:clipChildren="false"      android:gravity="bottom"      android:orientation="vertical"      ></code></pre>    <h2><strong>Update Log</strong></h2>    <h3><strong>V1.0.4</strong></h3>    <ul>     <li>Reverse the BadgePosition show error</li>     <li>Reverse the background covered by the TabItem Bg</li>     <li>Reverse the Default value error</li>    </ul>    <h3><strong>V1.0.5</strong></h3>    <ul>     <li>Reverse the BadgeView cannot move to LeftTop</li>     <li>Titles annotaion support int</li>     <li>Remove BadgeModes annotation,Enhance the flexibility of the use of badges,Update the TabBar method</li>     <li>Add the TabSelectBg attribute,used to set the selected item bg</li>    </ul>    <h3><strong>V1.1.0</strong></h3>    <ul>     <li>Reverse the Rending problem in the XML</li>     <li>Reverse the BUG of CLick Tab Event CallBack twice.</li>     <li>Add the OnPageAnimate Method in interface,Enhance the flexibility of animation</li>    </ul>    <h3><strong>V1.1.2</strong></h3>    <ul>     <li>Add the Bouncing of the Animation</li>     <li>Reverse don't click when have no Pager in the Adapter</li>    </ul>    <p> </p>    <p> </p>