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