首页 > 代码库 > ViewPage+Fragment(仿微信切换带通知)

ViewPage+Fragment(仿微信切换带通知)

第一步 : 布局文件 activity_main.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="match_parent"    android:background="#eee"    android:orientation="vertical" >    <include layout="@layout/top1" />  // 顶部的菜单    <include layout="@layout/top2" />   // 顶部的聊天  , 发现 ,通讯录    <android.support.v4.view.ViewPager        android:id="@+id/id_viewpager"        android:layout_width="fill_parent"        android:layout_height="0dp"        android:layout_weight="1" >    </android.support.v4.view.ViewPager></LinearLayout>

layout 文件下的top1

<?xml version="1.0" encoding="utf-8"?>    // top1<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical" >    <RelativeLayout     android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@drawable/abc_ab_bottom_solid_dark_holo"  //头部的黑背景        android:padding="12dip" >        <LinearLayout        android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentLeft="true"            android:gravity="center"            android:orientation="horizontal" >            <ImageView                android:layout_width="30dp"                android:layout_height="30dp"                android:src="@drawable/actionbar_icon" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginLeft="10dip"                android:text="微信"                android:textColor="@color/lightgray"                android:textSize="18dp" />        </LinearLayout>        <LinearLayout         android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentRight="true"    //居右            android:gravity="center"            android:orientation="horizontal" >               <ImageView                android:layout_width="30dp"                android:layout_height="30dp"                android:layout_marginRight="20dip"                android:src="@drawable/actionbar_search_icon" />            <ImageView                android:id="@+id/add"                android:layout_width="30dp"                android:layout_height="30dp"                android:layout_marginRight="20dip"                android:src="@drawable/actionbar_add_icon" />            <ImageView                android:id="@+id/set"                android:layout_width="30dp"                android:layout_height="30dp"                android:src="@drawable/actionbar_more_icon" />        </LinearLayout>    </RelativeLayout></LinearLayout>

ayout 文件下的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="wrap_content"    android:orientation="vertical" >    <LinearLayout     android:id="@+id/lllayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >        <LinearLayout       android:id="@+id/id_tab_liaotian_ly"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@drawable/guide_round"            android:gravity="center"            android:orientation="horizontal"            android:padding="10dip" >            <TextView                android:id="@+id/id_liaotian"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:gravity="center"                android:text="聊天"                android:textColor="@color/green"                android:textSize="15dip" />        </LinearLayout>        <LinearLayout            android:id="@+id/id_tab_faxian_ly"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@drawable/guide_round"   // 选择器             android:clickable="true"            android:gravity="center"            android:orientation="horizontal"            android:padding="10dip"            android:saveEnabled="false" >            <TextView                android:id="@+id/id_faxian"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:gravity="center"                android:text="发现"                android:textColor="@color/black"                android:textSize="15dip" />        </LinearLayout>        <LinearLayout        android:id="@+id/id_tab_tongxunlu_ly"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@drawable/guide_round"            android:focusable="false"            android:gravity="center"            android:orientation="horizontal"            android:padding="10dip" >            <TextView                android:id="@+id/id_tongxunlu"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:gravity="center"                android:text="通讯录"                android:textColor="@color/black"                android:textSize="15dip" />        </LinearLayout>    </LinearLayout>    <ImageView          android:id="@+id/id_tab_line"        android:layout_width="200dp"        android:layout_height="wrap_content"        android:background="@drawable/vpi__tab_selected_pressed_holo" >    //图片    </ImageView></LinearLayout>
选择器  guide_round.xml
<?xml version="1.0" encoding="UTF-8"?>  //guide_round.xml<selector  xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="true" android:drawable="@drawable/abc_ab_share_pack_holo_dark" />    <item android:state_enabled="false" android:drawable="@drawable/abc_cab_background_top_holo_light" /></selector>

第二步 :  主界面的实现MainActivity

public class MainActivity extends FragmentActivity {    private ViewPager mViewPager;    private FragmentPagerAdapter mAdapter;    private List<Fragment> mFragments = new ArrayList<Fragment>();    /**     * 顶部三个LinearLayout     */    private LinearLayout mTabLiaotian;    private LinearLayout mTabFaxian;    private LinearLayout mTabTongxunlun;    /**     * 顶部的三个TextView     */    private TextView mLiaotian;    private TextView mFaxian;    private TextView mTongxunlu;    /**     * 分别为每个TabIndicator创建一个BadgeView     */    private BadgeView mBadgeViewforLiaotian;    private BadgeView mBadgeViewforFaxian;    private BadgeView mBadgeViewforTongxunlu;    /**     * Tab的那个引导线     */    private ImageView mTabLine;    /**     * ViewPager的当前选中页     */    private int currentIndex;    /**     * 屏幕的宽度     */    private int screenWidth;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);        initView();        initTabLine();        setListener();        /**         * 初始化Adapter         */        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {            @Override            public int getCount() {                return mFragments.size();            }            @Override            public Fragment getItem(int arg0) {                return mFragments.get(arg0);            }        };        mViewPager.setAdapter(mAdapter);        /**         * 设置监听         */        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {            @Override            public void onPageSelected(int position) {                // 重置所有TextView的字体颜色                resetTextView();                switch (position) {                case 0: //聊天                    mTabLiaotian.removeView(mBadgeViewforLiaotian);                    mBadgeViewforLiaotian.setBadgeCount(5);                    mTabLiaotian.addView(mBadgeViewforLiaotian);                    mLiaotian.setTextColor(getResources().getColor(                            R.color.green));                    break;                case 1:   //发现                    mFaxian.setTextColor(getResources().getColor(R.color.green));                    mTabFaxian.removeView(mBadgeViewforFaxian);                    mBadgeViewforFaxian.setBadgeCount(15);                    mTabFaxian.addView(mBadgeViewforFaxian);                    break;                case 2: //通讯录                    mTongxunlu.setTextColor(getResources().getColor(                            R.color.green));                    break;                }                currentIndex = position;    //设置当前页面的值             }            @Override            public void onPageScrolled(int position, float positionOffset,                    int positionOffsetPixels) {                /**                 * 利用position和currentIndex判断用户的操作是哪一页往哪一页滑动                 * 然后改变根据positionOffset动态改变TabLine的leftMargin                 */                if (currentIndex == 0 && position == 0)// 0->1                {                    LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabLine                            .getLayoutParams();                    lp.leftMargin = (int) (positionOffset                            * (screenWidth * 1.0 / 3) + currentIndex                            * (screenWidth / 3));                    mTabLine.setLayoutParams(lp);                } else if (currentIndex == 1 && position == 0) // 1->0                {                    LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabLine                            .getLayoutParams();                    lp.leftMargin = (int) (-(1 - positionOffset)                            * (screenWidth * 1.0 / 3) + currentIndex                            * (screenWidth / 3));                    mTabLine.setLayoutParams(lp);                } else if (currentIndex == 1 && position == 1) // 1->2                {                    LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabLine                            .getLayoutParams();                    lp.leftMargin = (int) (positionOffset                            * (screenWidth * 1.0 / 3) + currentIndex                            * (screenWidth / 3));                    mTabLine.setLayoutParams(lp);                } else if (currentIndex == 2 && position == 1) // 2->1                {                    LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabLine                            .getLayoutParams();                    lp.leftMargin = (int) (-(1 - positionOffset)                            * (screenWidth * 1.0 / 3) + currentIndex                            * (screenWidth / 3));                    mTabLine.setLayoutParams(lp);                }            }            @Override            public void onPageScrollStateChanged(int state) {            }        });        mViewPager.setCurrentItem(1); // 默认选中1     }    /**     * 根据屏幕的宽度,初始化引导线的宽度     */    private void initTabLine() {        mTabLine = (ImageView) findViewById(R.id.id_tab_line);        DisplayMetrics outMetrics = new DisplayMetrics();        getWindow().getWindowManager().getDefaultDisplay()                .getMetrics(outMetrics);        screenWidth = outMetrics.widthPixels;        LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabLine                .getLayoutParams();        lp.width = screenWidth / 3;        mTabLine.setLayoutParams(lp);    }    /**     * 重置颜色     */    protected void resetTextView() {        mLiaotian.setTextColor(getResources().getColor(R.color.black));        mFaxian.setTextColor(getResources().getColor(R.color.black));        mTongxunlu.setTextColor(getResources().getColor(R.color.black));    }    /**     * 初始化控件,初始化Fragment     */    private void  initView() {        mTabLiaotian = (LinearLayout) findViewById(R.id.id_tab_liaotian_ly);        mTabFaxian = (LinearLayout) findViewById(R.id.id_tab_faxian_ly);        mTabTongxunlun = (LinearLayout) findViewById(R.id.id_tab_tongxunlu_ly);        // 聊天        mLiaotian = (TextView) findViewById(R.id.id_liaotian);        // 发现        mFaxian = (TextView) findViewById(R.id.id_faxian);        // 通讯录        mTongxunlu = (TextView) findViewById(R.id.id_tongxunlu);        MainTab01 tab01 = new MainTab01();        MainTab02 tab02 = new MainTab02();        MainTab03 tab03 = new MainTab03();        mFragments.add(tab01);   // 存 fragment 的集合        mFragments.add(tab02);         mFragments.add(tab03);        // 发现BadgeView        mBadgeViewforFaxian = new BadgeView(this);        mBadgeViewforLiaotian = new BadgeView(this); // 聊天BadgeView        mBadgeViewforTongxunlu = new BadgeView(this); // 通讯录BadgeView    }    // 监听点击 上面的条目的 ,切换页面的事件    private void setListener() {               mTabLiaotian.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View arg0) {                mViewPager.setCurrentItem(0);            }        });        mTabFaxian.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View arg0) {                mViewPager.setCurrentItem(1);            }        });        mTabTongxunlun.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View arg0) {                mViewPager.setCurrentItem(2);            }        });    }}
MainTab01.java ,  MainTab01.java  , MainTab01.java  都一样
 
public class MainTab01 extends Fragment{    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)    {        View messageLayout = inflater.inflate(R.layout.main_tab_02, container, false);        return messageLayout;    }}

最后界面效果:

 

ViewPage+Fragment(仿微信切换带通知)