Android高仿微信5.2.1主界面及消息提醒
好久沒更新博客了，最近在做公司的項目，這也算是我接觸的第一個正式項目。通過項目的檢驗，發(fā)現(xiàn)自己積累了一年的知識還是遠(yuǎn)遠(yuǎn)不夠，想要提高，好的方法是 ：項目+書+視頻+博客。最重要一點：勤動手。最近發(fā)現(xiàn)了慕課網(wǎng)的視頻，居然都是高清無碼免費的！而且滿滿的干貨！我用業(yè)余時間跟著視頻中大神的講解學(xué)習(xí)了不少知識，下面就將這些小demo與大家分享，當(dāng)然，我做了一些優(yōu)化，代碼與視頻中有些出入，但功能可以完全實現(xiàn)。
這是一個模仿5.2.1版本的顯示界面，如下圖所示：
功能及實現(xiàn)思路簡介
主要功能很簡單：
1、上面有一個自定義的標(biāo)題欄；
2、往下是聊天、發(fā)現(xiàn)、通訊錄選項卡；
3、手指滑動時，文字下方藍(lán)色的indicator可以跟隨滑動；
4、在聊天的右側(cè)，有一個未讀消息的紅色提醒圓點。
自定義的標(biāo)題欄就是一個LinearLayout，同時將系統(tǒng)自帶的TitleBar（或是ActionBar）隱藏；
由于是選項卡，自然想到了Fragment；
手指可以滑動，顯然，黑色的區(qū)域是一個ViewPager，數(shù)據(jù)源就是Fragment組成的集合，并通過FragmentPagerAdapter進(jìn)行管理；
要實現(xiàn)藍(lán)色的indicator隨選項卡的滑動而滑動，可以為ViewPager設(shè)置監(jiān)聽，并根據(jù)回調(diào)方法的回傳值控制該Indicator的marginLeft屬性值可以實現(xiàn)該效果。
最后消息提醒的小圓點是一個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="發(fā)現(xiàn)"
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還需要在代碼中動態(tài)設(shè)置其長度，故在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()方法之前調(diào)用requestWindowFeature(Window.FEATURE_NO_TITLE);隱藏標(biāo)題欄；如繼承于AppCompactActivity，可以在AndroidMainfest
中的Application標(biāo)簽中設(shè)置主題為：android:theme="@style/Theme.AppCompat.NoActionBar"，也可以實現(xiàn)隱藏標(biāo)題欄的目的。
使用FragmentPagerAdapter為ViewPager適配數(shù)據(jù)
在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的數(shù)據(jù)。最后調(diào)用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);
設(shè)置滑動時字體顏色的變化
為實現(xiàn)該功能，需要為ViewPager設(shè)置setOnPageChangeListener監(jiān)聽，并通過OnPageChangeListener接口的回調(diào)方法onPagerSelected(int position)，監(jiān)聽當(dāng)前滑動到了第幾頁：
@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);
}
設(shè)置滑動時字體顏色的變化
為實現(xiàn)該功能，需要為ViewPager設(shè)置setOnPageChangeListener監(jiān)聽，并通過OnPageChangeListener接口的回調(diào)方法onPagerSelected(int position)，監(jiān)聽當(dāng)前滑動到了第幾頁：
@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的滑動
為了實現(xiàn)該Indicator隨手指的滑動而跟隨的效果，需要在OnPageChangeListener接口中的onPageScrolled()方法中編寫邏輯，該方法的文檔如下：
，
其中，第一個參數(shù)position表示滑動到了第幾頁，比如說，若從第0頁滑動至第一頁，那么position將一直為0，直到松手以后，滑動至第一頁，position將變?yōu)?，第二個參數(shù)positionOffset表示滑動的百分比，取值范圍是0-1，最后一個參數(shù)positionOffsetPixels表示滑動的像素數(shù)。
下面是從0—>1頁面時打印的log，如下所示：
從1—->2頁面時打印的log：
從2—->1頁面時打印的log：
最后，可以根據(jù)（position+positionOffset）*1/3，來設(shè)置該Indicator的marginLeft。
首先，應(yīng)為Indicator設(shè)置寬度，其寬度應(yīng)為屏幕寬度的1/3：
WindowManager manager = getWindow().getWindowManager();
Display display = manager.getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics();
display.getMetrics(outMetrics);
mScreenOneThird = outMetrics.widthPixels / 3;
其中int型參數(shù)mScreenOneThird 的單位是像素px。
設(shè)置到Indicator上：
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) iv_tab_line.getLayoutParams();
lp.width = mScreenOneThird;
iv_tab_line.setLayoutParams(lp);
最終在onPageScrolled方法中動態(tài)改變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);
可實現(xiàn)最終效果。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android EditText搜索框?qū)崿F(xiàn)圖標(biāo)居中
本篇文章主要介紹了Android EditText搜索框?qū)崿F(xiàn)圖標(biāo)居中，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了android 控件同時監(jiān)聽單擊和雙擊實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Flutter?Widget?之package?mason實現(xiàn)詳解
這篇文章主要為大家介紹了Flutter?Widget?之package:?mason實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Android獲取本機(jī)電話號碼的簡單方法，需要的朋友可以參考一下2013-05-05
這篇文章主要介紹了詳解Android中圖片的三級緩存及實例的相關(guān)資料,通過網(wǎng)絡(luò)、本地、內(nèi)存三級緩存圖片，來減少不必要的網(wǎng)絡(luò)交互，避免浪費流量，需要的朋友可以參考下2017-08-08
Kotlin 封裝萬能SharedPreferences存取任何類型詳解
這篇文章主要介紹了Kotlin 封裝萬能SharedPreferences存取任何類型詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05
Android實現(xiàn)第三方登錄的上拉展開，下拉隱藏，下拉隱藏示例
本篇文章抽出了項目登錄界面中實現(xiàn)的第三方登錄，用戶可以上拉展開，下拉隱藏第三方登錄這么一個效果，提高用戶和軟件的交互性。有興趣的可以了解一下。2017-01-01
這篇文章主要介紹了Android程序啟動時出現(xiàn)黑屏問題的解決方法,分析了黑屏出現(xiàn)的原因及相應(yīng)的解決方法,需要的朋友可以參考下2016-08-08
Android編程之listView中checkbox用法實例分析
這篇文章主要介紹了Android編程之listView中checkbox用法,結(jié)合實例形式分析了Android中checkbox的頁面布局及功能實現(xiàn)相關(guān)技巧,需要的朋友可以參考下2016-01-01
Android studio 生成帶Kotlin文檔的實現(xiàn)方式
這篇文章主要介紹了Android studio 生成帶Kotlin文檔的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03