ViewPage和Fragment上 實現BadgeView消息提醒（仿舊微信）

先上圖：

 

這里只是使用了viewpage 和 Fragment，沒有用GitHob上viewpagerindicator，而是自己寫了個指示器,使用了badgeView顯示消息提醒。

 

首先， 是上面的titleBar  沒什么好說的  帶過。。。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="50dp" android:background="@drawable/top1_bg" >

    <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" >

        <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="3dp" android:background="@android:color/transparent" android:src="@drawable/actionbar_icon" />

        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginLeft="3dp" android:text="微信" android:textColor="#d3d3d3" />
    </LinearLayout>

    <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_alignParentRight="true"
        >
         <ImageButton android:layout_width="30dp" android:layout_height="30dp" android:layout_marginLeft="3dp" android:scaleType="fitXY" android:background="@android:color/transparent" android:src="@drawable/actionbar_search_icon" />
         <ImageButton android:layout_width="30dp" android:layout_height="30dp" android:layout_marginLeft="3dp" android:scaleType="fitXY" android:background="@android:color/transparent" android:src="@drawable/actionbar_add_icon" />
         <ImageButton android:layout_width="30dp" android:layout_height="30dp" android:layout_marginLeft="3dp" android:scaleType="fitXY" android:background="@android:color/transparent" android:src="@drawable/actionbar_more_icon" />
    </LinearLayout>

</RelativeLayout>

然后是三個Tab 和 一個 指示器  帶過。。。。

<?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="wrap_content" android:background="#eee" android:orientation="vertical" >

    <LinearLayout android:layout_width="fill_parent" android:layout_height="40dp" android:baselineAligned="true" android:gravity="center_vertical" android:orientation="horizontal" >

        <LinearLayout android:id="@+id/chatLayout" android:orientation="horizontal" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" >

            <TextView android:id="@+id/chat" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="聊天" android:textColor="#3399ff" android:textSize="17sp" />
        </LinearLayout>

        <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" >

            <TextView android:id="@+id/find" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="發現" android:textSize="17sp" />
        </LinearLayout>

        <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" >

            <TextView android:id="@+id/contact" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="通信錄" android:textSize="17sp" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout android:layout_width="fill_parent" android:layout_height="5dp" >

        <ImageView android:id="@+id/imgBar" android:layout_width="100dp" android:layout_height="wrap_content" android:scaleType="fitXY" android:src="@drawable/tabline" />
    </LinearLayout>

</LinearLayout>

主布局，帶過。。。。

<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.example.viewpage_badgeview_weixin.MainActivity" >

    <include layout="@layout/top_one" />

    <include layout="@layout/top_tow" />

    <android.support.v4.view.ViewPager android:id="@+id/viewPage" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1"
        />

    
</LinearLayout>

 三個Fragment都一樣，貼一個

package com.example.viewpage_badgeview_weixin; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class TabFragmentChat extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.chat, container, false); } }

使用badgeView  要先從GitHob上下載library

 地址：https://github.com/stefanjauker/BadgeView

 

package com.example.viewpage_badgeview_weixin; import java.util.ArrayList; import java.util.List; import com.example.viewpage_badgeview_weixin.R.id; import com.jauker.widget.BadgeView; import android.content.Context; import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.DisplayMetrics; import android.view.Display; import android.view.Menu; import android.view.MenuItem; import android.view.ViewGroup.LayoutParams; import android.view.Window; import android.view.WindowManager; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; public class MainActivity extends FragmentActivity { private ViewPager viewPage; private List<Fragment> list = new ArrayList<Fragment>(); private FragmentPagerAdapter adapter; private TextView mChat; private TextView mFind; private TextView mContact; private ImageView imgBar; private LinearLayout chatLayout; private int lineWidth; private int currentPageState; private BadgeView badge; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); initView(); initLine(); initText(); } //設置指示器的長度 private void initLine() { imgBar = (ImageView) findViewById(id.imgBar); DisplayMetrics outMetrics = new DisplayMetrics(); Display display = getWindowManager().getDefaultDisplay(); display.getMetrics(outMetrics); lineWidth = outMetrics.widthPixels / 3; LayoutParams params = imgBar.getLayoutParams(); params.width = lineWidth; imgBar.setLayoutParams(params); } private void initText() { mChat = (TextView) findViewById(id.chat); mFind = (TextView) findViewById(id.find); mContact = (TextView) findViewById(id.contact); //改變文字顏色 viewPage.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { resetColor(); switch (arg0) { case 0: if (badge != null) { chatLayout.removeView(badge); } badge = new BadgeView(MainActivity.this); badge.setBadgeCount(7); chatLayout.addView(badge); mChat.setTextColor(0xff3399ff); // imgBar.setTranslationX(0);
                    break; case 1: mFind.setTextColor(0xff3399ff); // imgBar.setTranslationX(lineWidth);

                    break; case 2: mContact.setTextColor(0xff3399ff); // imgBar.setTranslationX(lineWidth * 2);
                    break; } currentPageState = arg0; } //滾動指示器 public void onPageScrolled(int position, float offset, int pixels) { LinearLayout.LayoutParams params = (android.widget.LinearLayout.LayoutParams) imgBar .getLayoutParams(); // 1--2 2--1
                if (currentPageState == 0 && position == 0) { params.leftMargin = (int) (currentPageState * lineWidth + offset * lineWidth); } else if (currentPageState == 1 && position == 0) { params.leftMargin = (int) (currentPageState * lineWidth + (offset - 1) * lineWidth); } // 2---3 3---2
                if (currentPageState == 1 && position == 1) { params.leftMargin = (int) (currentPageState * lineWidth + offset * lineWidth); } else if (currentPageState == 2 && position == 1) { params.leftMargin = (int) (currentPageState * lineWidth + (offset - 1) * lineWidth); } imgBar.setLayoutParams(params); } public void onPageScrollStateChanged(int arg0) { } }); } //實例化視圖 private void initView() { viewPage = (ViewPager) findViewById(id.viewPage); chatLayout = (LinearLayout) findViewById(id.chatLayout); TabFragmentChat chat = new TabFragmentChat(); TabFragmentFind find = new TabFragmentFind(); TabFragmentContact contact = new TabFragmentContact(); list.add(chat); list.add(find); list.add(contact); //實例化FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) { public int getCount() { return list.size(); } public Fragment getItem(int arg0) { return list.get(arg0); } }; //添加adapter viewPage.setAdapter(adapter); } //重置文字顏色 protected void resetColor() { mChat.setTextColor(Color.BLACK); mFind.setTextColor(Color.BLACK); mContact.setTextColor(Color.BLACK); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present.
 getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } }

 上面大致實現過程：

1、先實例化view視圖，new出來三個fragment裝入list中

　　viewpage設置adapter  這里使用的是FragmentPageAdapter 

 2、viewpage使用 OnPageChangeListener 監聽器 改變 文字顏色 和 指示器的滾動

　　這里要說一下:  使用  // imgBar.setTranslationX(0); 也可以使指示器滾動，只是不能達到過度效果.

　　所以使用 onPageScrolled(int position, float offset, int pixels) 方法，它提供一個梯度值 offset

　　利用梯度值來改變margin的值，從而達到緩慢滾動的效果

3、badgeView 消息提醒  badge = new BadgeView(MainActivity.this);

　　拿別人的東西再用  沒什講的  很方便  感謝GitHob、、、、