Android高仿微信5.2.1主介面及訊息提醒_Android

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

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

功能及實現思路簡介

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

自訂的標題列就是一個LinearLayout，同時將系統內建的TitleBar（或是ActionBar）隱藏；

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

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

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

最後訊息提醒的小圓點是一個BadgeView ，它是一個第三方開原始檔控制。

主布局

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

<!-- top1.xml --><?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/topone_bg" android:paddingLeft="12dp" android:paddingRight="12dp"> <LinearLayout  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_centerVertical="true"  android:gravity="center"  android:orientation="horizontal">  <ImageView   android:layout_width="30dp"   android:layout_height="30dp"   android:background="@drawable/actionbar_icon" />  <TextView   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:layout_marginLeft="12dp"   android:text="微信"   android:textColor="#D3D3D3"   android:textSize="18sp" /> </LinearLayout> <LinearLayout  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_alignParentRight="true"  android:layout_centerVertical="true"  android:orientation="horizontal">  <ImageView   android:layout_width="30dp"   android:layout_height="30dp"   android:background="@drawable/actionbar_search_icon" />  <ImageView   android:layout_width="30dp"   android:layout_height="30dp"   android:background="@drawable/actionbar_add_icon" />  <ImageView   android:layout_width="30dp"   android:layout_height="30dp"   android:background="@drawable/actionbar_more_icon" /> </LinearLayout></RelativeLayout>

效果如下所示：

接著是三個選項卡的布局：

<!-- top2.xml --><?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="40dp" android:background="#EEEEEE" android:orientation="vertical"> <LinearLayout  android:layout_width="match_parent"  android:layout_height="37dp"  android:orientation="horizontal">  <LinearLayout   android:id="@+id/ll_chat"   android:layout_width="0dp"   android:layout_height="match_parent"   android:layout_weight="1"   android:gravity="center"   android:orientation="horizontal">   <TextView    android:id="@+id/tv_tab_chat"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="center"    android:text="聊天"    android:textColor="#008000"    android:textSize="16sp" />  </LinearLayout>  <LinearLayout   android:layout_width="0dp"   android:layout_height="match_parent"   android:layout_weight="1"   android:gravity="center">   <TextView    android:id="@+id/tv_tab_discover"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="發現"    android:textColor="@android:color/black"    android:textSize="16sp" />  </LinearLayout>  <LinearLayout   android:layout_width="0dp"   android:layout_height="match_parent"   android:layout_weight="1"   android:gravity="center">   <TextView    android:id="@+id/tv_tab_contacts"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="通訊錄"    android:textColor="@android:color/black"    android:textSize="16sp" />  </LinearLayout> </LinearLayout> <ImageView  android:id="@+id/iv_tab_line"  android:layout_width="100dp"  android:layout_height="3dp"  android:background="@drawable/tabline" /></LinearLayout>

效果如下：

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

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

<!-- activity_main.xml --><?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.demo.lenovo.myapplication.MainActivity"> <include layout="@layout/top1" /> <include layout="@layout/top2" /> <android.support.v4.view.ViewPager  android:id="@+id/vp_content"  android:layout_width="match_parent"  android:layout_height="0dp"  android:layout_weight="1" /></LinearLayout>

效果如下：

註：如您的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<Fragment> 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);}

設定滑動時字型顏色的變化

為實現該功能，需要為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);

可實現最終效果。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。