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、、、、