zoukankan      html  css  js  c++  java
  • 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、、、、
                  
                    

     

  • 相关阅读:
    HDOJ 1846 Brave Game
    并查集模板
    HDU 2102 A计划
    POJ 1426 Find The Multiple
    POJ 3278 Catch That Cow
    POJ 1321 棋盘问题
    CF 999 C.Alphabetic Removals
    CF 999 B. Reversing Encryption
    string的基础用法
    51nod 1267 4个数和为0
  • 原文地址:https://www.cnblogs.com/mydomainlistentome/p/4746003.html
Copyright © 2011-2022 走看看