好久沒更新博客了，最近在做公司的項目，這也算是我接觸的第一個正式項目。通過項目的檢驗，發現自己積累了一年的知識還是遠遠不夠，想要提高，好的方法是 ：項目+書+視頻+博客。最重要一點：勤動手。最近發現了慕課網的視頻，居然都是高清無碼免費的！而且滿滿的干貨！我用業余時間跟著視頻中大神的講解學習了不少知識，下面就將這些小demo與大家分享，當然，我做了一些優化，代碼與視頻中有些出入，但功能可以完全實現。

---

這是一個模仿5.2.1版本的顯示界面，如下圖所示：

功能及實現思路簡介

---

主要功能很簡單：
1、上面有一個自定義的標題欄；
2、往下是聊天、發現、通訊錄選項卡；
3、手指滑動時，文字下方藍色的indicator可以跟隨滑動；
4、在聊天的右側，有一個未讀消息的紅色提醒圓點。

---

自定義的標題欄就是一個LinearLayout，同時將系統自帶的TitleBar（或是ActionBar）隱藏；

由於是選項卡，自然想到了Fragment；

手指可以滑動，顯然，黑色的區域是一個ViewPager，數據源就是Fragment組成的集合，並通過FragmentPagerAdapter進行管理；

要實現藍色的indicator隨選項卡的滑動而滑動，可以為ViewPager設置監聽，並根據回調方法的回傳值控制該Indicator的marginLeft屬性值可以實現該效果。

最後消息提醒的小圓點是一個BadgeView ，它是一個第三方開源控件。

---

主布局

MainActivity布局如下，首先是自定義的TitleBar：

效果如下所示：

---

接著是三個選項卡的布局：<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;">

效果如下：

由於Indicator還需要在代碼中動態設置其長度，故在xml中可以附一個任意值。

---

最後將top1.xml、top2.xml加入至主布局中，並在主布局中引入ViewPager：

效果如下：

---

注：如您的Activity繼承於ActionBarActivity，可以在setContentView()方法之前調用requestWindowFeature(Window.FEATURE_NO_TITLE);隱藏標題欄；如繼承於AppCompactActivity，可以在AndroidMainfest
中的Application標簽中設置主題為：android:theme="@style/Theme.AppCompat.NoActionBar"，也可以實現隱藏標題欄的目的。

---

使用FragmentPagerAdapter為ViewPager適配數據

在MainActivity.java 中，加入FragmentPagerAdapter邏輯：（在此略去三個Fragment的布局及代碼）

 private FragmentPagerAdapter adapter;
 private List mData;

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();

在initView()中，初始化Fragment，並將Fragment實例一次裝入List中，接著，在初始化FragmentPagerAdapter時管理List的數據。最後調用ViewPager的setAdapter方法將FragmentPagerAdapter實例傳入。

  mData = new ArrayList<>();
        mData.add(new ChatFragment());
        mData.add(new DiscoverFragment());
        mData.add(new ContactsFragment());
        adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mData.get(position);
            }

            @Override
            public int getCount() {
                return mData.size();
            }
        };
        vp_content.setAdapter(adapter);

設置滑動時字體顏色的變化

為實現該功能，需要為ViewPager設置setOnPageChangeListener監聽，並通過OnPageChangeListener接口的回調方法onPagerSelected(int position)，監聽當前滑動到了第幾頁：

@Override
            public void onPageSelected(int position) {
                Log.e(TAG, "onPageSelected: " + position);
                resetTextViewColor();
                switch (position) {
                    case 0:             
                    addBadgeView();   tv_tab_chat.setTextColor(Color.parseColor("#008000"));
                        break;

                    case 1:
                        tv_tab_discover.setTextColor(Color.parseColor("#008000"));
                        break;

                    case 2:
                        tv_tab_contacts.setTextColor(Color.parseColor("#008000"));
                        break;
                }

            }

//首先將每個選項卡的文字顏色置為黑色
 private void resetTextViewColor() {
        tv_tab_contacts.setTextColor(Color.BLACK);
        tv_tab_chat.setTextColor(Color.BLACK);
        tv_tab_discover.setTextColor(Color.BLACK);

添加BadgeView

在addBadgeView();方法中首先判斷BadgeView是否為空，若不為空，首先將其移除，再添加新的BadgeView，代碼如下：

 private void addBadgeView()
 {
  if (mBadgeView != null) {
                            ll_chat.removeView(mBadgeView);
                        }
                        mBadgeView = new BadgeView(MainActivity.this);
                        ll_chat.addView(mBadgeView);
                        mBadgeView.setBadgeCount(9);



}

---

indicator的滑動

為了實現該Indicator隨手指的滑動而跟隨的效果，需要在OnPageChangeListener接口中的onPageScrolled()方法中編寫邏輯，該方法的文檔如下：
，

---

其中，第一個參數position表示滑動到了第幾頁，比如說，若從第0頁滑動至第一頁，那麼position將一直為0，直到松手以後，滑動至第一頁，position將變為1，第二個參數positionOffset表示滑動的百分比，取值范圍是0-1，最後一個參數positionOffsetPixels表示滑動的像素數。

下面是從0—>1頁面時打印的log，如下所示：


---

從1—->2頁面時打印的log：


---

從2—->1頁面時打印的log：


---

最後，可以根據（position+positionOffset）*1/3，來設置該Indicator的marginLeft。

---

首先，應為Indicator設置寬度，其寬度應為屏幕寬度的1/3：

 WindowManager manager = getWindow().getWindowManager();
        Display display = manager.getDefaultDisplay();
        DisplayMetrics outMetrics = new DisplayMetrics();
        display.getMetrics(outMetrics);
        mScreenOneThird = outMetrics.widthPixels / 3;

其中int型參數mScreenOneThird 的單位是像素px。

---

設置到Indicator上：

LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) iv_tab_line.getLayoutParams();
        lp.width = mScreenOneThird;
        iv_tab_line.setLayoutParams(lp);

---

最終在onPageScrolled方法中動態改變Indicator的marginLeft屬性：

@Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) iv_tab_line.getLayoutParams();
                lp.leftMargin = (int) ((positionOffset * mScreenOneThird) + (mScreenOneThird * position));
                iv_tab_line.setLayoutParams(lp);

可實現最終效果。