ViewPager微信滑动效果

<?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" >

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

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

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ly_main_tab_bottom"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:background="@drawable/bottom_bar" >

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

<RelativeLayout
android:id="@+id/id_tab_bottom_weixin"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:descendantFocusability="beforeDescendants"
android:gravity="center"
android:orientation="vertical" >

<ImageButton
android:id="@+id/btn_tab_bottom_weixin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab_weixin_normal"
android:background="#0000"
android:clickable="false" />
<ImageButton
android:id="@+id/btn_change"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000"
android:clickable="false"
android:src="@drawable/tab_weixin_pressed" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignRight="@+id/btn_tab_bottom_weixin"
android:text="微信" />
</RelativeLayout>

<RelativeLayout
android:id="@+id/id_tab_bottom_friend"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:descendantFocusability="beforeDescendants"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="@+id/btn_tab_bottom_friend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000"
android:clickable="false"
android:src="@drawable/tab_find_frd_normal" />
<ImageButton
android:id="@+id/btn_change1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000"
android:clickable="false"
android:src="@drawable/tab_find_frd_pressed" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignRight="@+id/btn_tab_bottom_friend"
android:text="朋友" />
</RelativeLayout>

<RelativeLayout
android:id="@+id/id_tab_bottom_contact"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:descendantFocusability="beforeDescendants"
android:gravity="center"
android:orientation="vertical" >

<ImageButton
android:id="@+id/btn_tab_bottom_contact"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:background="#0000"
android:src="@drawable/tab_address_normal" />
<ImageButton
android:id="@+id/btn_change2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000"
android:clickable="false"
android:src="@drawable/tab_address_pressed" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/btn_tab_bottom_contact"
android:layout_alignParentBottom="true"
android:text="通讯录" />

</RelativeLayout>

<RelativeLayout
android:id="@+id/id_tab_bottom_setting"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:descendantFocusability="beforeDescendants"
android:gravity="center"
android:orientation="vertical" >

<ImageButton
android:id="@+id/btn_tab_bottom_setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000"
android:clickable="false"
android:src="@drawable/tab_settings_normal" />
<ImageButton
android:id="@+id/btn_change3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000"
android:clickable="false"
android:src="@drawable/tab_settings_pressed" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignRight="@+id/btn_tab_bottom_setting"
android:text="设置" />

</RelativeLayout>
</LinearLayout>

</RelativeLayout>

package com.example.mainframework03;

import java.util.ArrayList;
import java.util.List;

import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.os.Build;
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.widget.ImageButton;
import android.widget.RelativeLayout;
import android.view.View;

public class MainActivity extends FragmentActivity {
private int screenWidth;
private ViewPager mViewPager;
private FragmentPagerAdapter mAdapter;
private List<Fragment> mFragments = new ArrayList<Fragment>();
boolean flag = true;//保证滑动时才执行方法
private RelativeLayout mTabBtnWeixin;
private RelativeLayout mTabBtnFrd;
private RelativeLayout mTabBtnAddress;
private RelativeLayout mTabBtnSettings;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
initView();
mAdapter = new FargmentAdapter(getSupportFragmentManager(), mFragments);
mViewPager.setAdapter(mAdapter);
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

private int currentIndex;

@SuppressLint("NewApi")
@Override
public void onPageSelected(int position) {
//点击改变图标，不渐变效果
if(!mflag){
switch (position) {
case 0:
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_weixin)).setBackgroundResource(R.drawable.tab_weixin_pressed);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_friend)).setBackgroundResource(R.drawable.tab_find_frd_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_contact)).setBackgroundResource(R.drawable.tab_address_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_setting)).setBackgroundResource(R.drawable.tab_settings_normal);
setAlphaColor(1.0f, 0.0f, 0.0f, 0.0f);
break;
case 1:
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_weixin)).setBackgroundResource(R.drawable.tab_weixin_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_friend)).setBackgroundResource(R.drawable.tab_find_frd_pressed);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_contact)).setBackgroundResource(R.drawable.tab_address_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_setting)).setBackgroundResource(R.drawable.tab_settings_normal);
setAlphaColor(0.0f, 1.0f, 0.0f, 0.0f);
break;
case 2:
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_weixin)).setBackgroundResource(R.drawable.tab_weixin_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_friend)).setBackgroundResource(R.drawable.tab_find_frd_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_contact)).setBackgroundResource(R.drawable.tab_address_pressed);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_setting)).setBackgroundResource(R.drawable.tab_settings_normal);
setAlphaColor(0.0f, 0.0f, 1.0f, 0.0f);
break;
case 3:
//                        ((ImageButton) MainActivity.this.findViewById(R.id.btn_tab_bottom_weixin)).setBackgroundResource(R.drawable.tab_weixin_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_friend)).setBackgroundResource(R.drawable.tab_find_frd_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_contact)).setBackgroundResource(R.drawable.tab_address_normal);
//                        ((ImageButton) MainActivity .this.findViewById(R.id.btn_tab_bottom_setting)).setBackgroundResource(R.drawable.tab_settings_pressed);
setAlphaColor(0.0f, 0.0f, 0.0f, 1.0f);
break;
}
}
}
//此方法用于底部渐变效果
@SuppressLint("NewApi")
@Override
public void onPageScrolled(int position, float offset,
int offsetPixels) {
//左右滑动渐变效果
if (flag) {
if (position == 0) {

((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_change)).setAlpha(1 - offset);
if (offset == 0) {
((ImageButton) mTabBtnFrd.findViewById(R.id.btn_change1)).setAlpha(offset);
((ImageButton) mTabBtnAddress.findViewById(R.id.btn_change2)).setAlpha(offset);
((ImageButton) mTabBtnSettings.findViewById(R.id.btn_change3)).setAlpha(offset);
} else {
((ImageButton) mTabBtnFrd.findViewById(R.id.btn_change1)).setAlpha(offset);
}
} else if (position == 1) {
((ImageButton) mTabBtnFrd.findViewById(R.id.btn_change1)).setAlpha(1 - offset);
if (offset == 0) {
} else {
((ImageButton) mTabBtnAddress.findViewById(R.id.btn_change2)).setAlpha(offset);
}
} else if (position == 2) {
if (offset == 0) {
} else {
((ImageButton) mTabBtnSettings.findViewById(R.id.btn_change3)).setAlpha(offset);
}
((ImageButton) mTabBtnAddress.findViewById(R.id.btn_change2)).setAlpha(1 - offset);
}
}
if(offset==0) {
//滑动完后重新设置true
flag=true;
}
}

@Override
public void onPageScrollStateChanged(int arg0) {

}
});
}
boolean mflag=true;//控制点击，保证点击时才执行方法
//底部图片点击事件
public class txListener implements View.OnClickListener {
private int index = 0;

public txListener(int i) {
index = i;
}

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
mflag=false;
mViewPager.setCurrentItem(index);
flag = false;//控制左右滑动

}
}

//初始化控件
private void initView() {
mTabBtnWeixin = (RelativeLayout) findViewById(R.id.id_tab_bottom_weixin);
mTabBtnFrd = (RelativeLayout) findViewById(R.id.id_tab_bottom_friend);
mTabBtnAddress = (RelativeLayout) findViewById(R.id.id_tab_bottom_contact);
mTabBtnSettings = (RelativeLayout) findViewById(R.id.id_tab_bottom_setting);
mTabBtnWeixin.setOnClickListener(new txListener(0));
mTabBtnFrd.setOnClickListener(new txListener(1));
mTabBtnAddress.setOnClickListener(new txListener(2));
mTabBtnSettings.setOnClickListener(new txListener(3));
MainTab01 tab01 = new MainTab01();
MainTab02 tab02 = new MainTab02();
MainTab03 tab03 = new MainTab03();
MainTab04 tab04 = new MainTab04();
mFragments.add(tab01);
mFragments.add(tab02);
mFragments.add(tab03);
mFragments.add(tab04);
}

//此处主要功能点击底部更换图片
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public void setAlphaColor(float a, float b, float c, float d) {

((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_change)).setAlpha(a);
((ImageButton) mTabBtnFrd.findViewById(R.id.btn_change1)).setAlpha(b);
((ImageButton) mTabBtnAddress.findViewById(R.id.btn_change2)).setAlpha(c);
((ImageButton) mTabBtnSettings.findViewById(R.id.btn_change3)).setAlpha(d);
mflag=true;//选择底部图标完后重新设置true

}
}

2>

package com.example.mainframework03;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

public class FargmentAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragments = new ArrayList<Fragment>();
FargmentAdapter fargmentAdapter;
public FargmentAdapter(FragmentManager fm,List<Fragment> listFramgent) {
super(fm);
this.mFragments=listFramgent;
// TODO Auto-generated constructor stub
}

@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return mFragments.get(arg0);
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return mFragments.size()==0? 0:mFragments.size();
}

}