Android ViewPager+Fragment仿微信主界面（带底部图标切换动画）

1、布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".activity.SwitchViewpageImitationWeChatActivity">

    <LinearLayout
        android:id="@+id/ll_bottom"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"
        android:background="@color/white">

        <LinearLayout
            android:id="@+id/ll_message"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <RelativeLayout
                android:id="@+id/rl_message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_message_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/message_normal"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_message_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/message_press"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_message_text_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/message"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_message_text_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/message"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_contacts"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <RelativeLayout
                android:id="@+id/rl_contacts"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_contacts_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/contacts_normal"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_contacts_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/contacts_press"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_contacts_text_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/contacts"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_contacts_text_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/contacts"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_discovery"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <RelativeLayout
                android:id="@+id/rl_discovery"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_discovery_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/discovery_normal"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_discovery_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/discovery_press"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_discovery_text_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/discovery"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_discovery_text_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/discovery"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_me"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <RelativeLayout
                android:id="@+id/rl_me"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_me_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/me_normal"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_me_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@mipmap/me_press"
                    android:button="@null"
                    android:gravity="center"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tv_me_text_normal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/me"
                    android:textColor="@color/gray"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_me_text_press"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/me"
                    android:textColor="@color/Green"
                    android:textSize="12sp" />
            </RelativeLayout>
        </LinearLayout>
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/ll_bottom" />
</RelativeLayout>

 

2、activity

public class SwitchViewpageImitationWeChatActivity extends FragmentActivity implements View.OnClickListener {
    private TextView tvMessageNormal, tvMessagePress, tvContactsNormal, tvContactsPress;
    private TextView tvDiscoveryNormal, tvDiscoveryPress, tvMeNormal, tvMePress;
    private TextView tvMessageTextNormal, tvMessageTextPress, tvContactsTextNormal, tvContactsTextPress;
    private TextView tvDiscoveryTextNormal, tvDiscoveryTextPress, tvMeTextNormal, tvMeTextPress;
    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_switch_viewpage_imitation_we_chat);

        initView();
    }

    protected void initView() {
        tvMessageNormal = (TextView) findViewById(R.id.tv_message_normal);
        tvMessagePress = (TextView) findViewById(R.id.tv_message_press);
        tvContactsNormal = (TextView) findViewById(R.id.tv_contacts_normal);
        tvContactsPress = (TextView) findViewById(R.id.tv_contacts_press);
        tvDiscoveryNormal = (TextView) findViewById(R.id.tv_discovery_normal);
        tvDiscoveryPress = (TextView) findViewById(R.id.tv_discovery_press);
        tvMeNormal = (TextView) findViewById(R.id.tv_me_normal);
        tvMePress = (TextView) findViewById(R.id.tv_me_press);
        tvMessageTextNormal = (TextView) findViewById(R.id.tv_message_text_normal);
        tvMessageTextPress = (TextView) findViewById(R.id.tv_message_text_press);
        tvContactsTextNormal = (TextView) findViewById(R.id.tv_contacts_text_normal);
        tvContactsTextPress = (TextView) findViewById(R.id.tv_contacts_text_press);
        tvDiscoveryTextNormal = (TextView) findViewById(R.id.tv_discovery_text_normal);
        tvDiscoveryTextPress = (TextView) findViewById(R.id.tv_discovery_text_press);
        tvMeTextNormal = (TextView) findViewById(R.id.tv_me_text_normal);
        tvMeTextPress = (TextView) findViewById(R.id.tv_me_text_press);

        findViewById(R.id.ll_message).setOnClickListener(this);
        findViewById(R.id.ll_contacts).setOnClickListener(this);
        findViewById(R.id.ll_discovery).setOnClickListener(this);
        findViewById(R.id.ll_me).setOnClickListener(this);

        setTransparency();
        tvMessagePress.getBackground().setAlpha(255);
        tvMessageTextPress.setTextColor(Color.argb(255, 69, 192, 26));

        /**ViewPager**/
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        MessageFragment weChatFragment = new MessageFragment();
        ContactsFragment contactsFragment = new ContactsFragment();
        DiscoveryFragment discoveryFragment = new DiscoveryFragment();
        MeFragment meFragment = new MeFragment();
        ArrayList<Fragment> fragmentList = new ArrayList<Fragment>();
        fragmentList.add(weChatFragment);
        fragmentList.add(contactsFragment);
        fragmentList.add(discoveryFragment);
        fragmentList.add(meFragment);
        viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList));
        viewPager.setCurrentItem(0);
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //根据ViewPager滑动位置更改透明度
                int diaphaneity_one = (int) (255 * positionOffset);
                int diaphaneity_two = (int) (255 * (1 - positionOffset));
                switch (position) {
                    case 0:
                        tvMessageNormal.getBackground().setAlpha(diaphaneity_one);
                        tvMessagePress.getBackground().setAlpha(diaphaneity_two);
                        tvContactsNormal.getBackground().setAlpha(diaphaneity_two);
                        tvContactsPress.getBackground().setAlpha(diaphaneity_one);
                        tvMessageTextNormal.setTextColor(Color.argb(diaphaneity_one, 153, 153, 153));
                        tvMessageTextPress.setTextColor(Color.argb(diaphaneity_two, 69, 192, 26));
                        tvContactsTextNormal.setTextColor(Color.argb(diaphaneity_two, 153, 153, 153));
                        tvContactsTextPress.setTextColor(Color.argb(diaphaneity_one, 69, 192, 26));
                        break;
                    case 1:
                        tvContactsNormal.getBackground().setAlpha(diaphaneity_one);
                        tvContactsPress.getBackground().setAlpha(diaphaneity_two);
                        tvDiscoveryNormal.getBackground().setAlpha(diaphaneity_two);
                        tvDiscoveryPress.getBackground().setAlpha(diaphaneity_one);
                        tvContactsTextNormal.setTextColor(Color.argb(diaphaneity_one, 153, 153, 153));
                        tvContactsTextPress.setTextColor(Color.argb(diaphaneity_two, 69, 192, 26));
                        tvDiscoveryTextNormal.setTextColor(Color.argb(diaphaneity_two, 153, 153, 153));
                        tvDiscoveryTextPress.setTextColor(Color.argb(diaphaneity_one, 69, 192, 26));
                        break;
                    case 2:
                        tvDiscoveryNormal.getBackground().setAlpha(diaphaneity_one);
                        tvDiscoveryPress.getBackground().setAlpha(diaphaneity_two);
                        tvMeNormal.getBackground().setAlpha(diaphaneity_two);
                        tvMePress.getBackground().setAlpha(diaphaneity_one);
                        tvDiscoveryTextNormal.setTextColor(Color.argb(diaphaneity_one, 153, 153, 153));
                        tvDiscoveryTextPress.setTextColor(Color.argb(diaphaneity_two, 69, 192, 26));
                        tvMeTextNormal.setTextColor(Color.argb(diaphaneity_two, 153, 153, 153));
                        tvMeTextPress.setTextColor(Color.argb(diaphaneity_one, 69, 192, 26));
                        break;
                }
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }

    /**
     * 设置透明度
     * 把press图片、文字全部隐藏
     */
    private void setTransparency() {
        tvMessageNormal.getBackground().setAlpha(255);
        tvContactsNormal.getBackground().setAlpha(255);
        tvDiscoveryNormal.getBackground().setAlpha(255);
        tvMeNormal.getBackground().setAlpha(255);
        tvMessagePress.getBackground().setAlpha(1);
        tvContactsPress.getBackground().setAlpha(1);
        tvDiscoveryPress.getBackground().setAlpha(1);
        tvMePress.getBackground().setAlpha(1);
        tvMessageTextNormal.setTextColor(Color.argb(255, 153, 153, 153));
        tvContactsTextNormal.setTextColor(Color.argb(255, 153, 153, 153));
        tvDiscoveryTextNormal.setTextColor(Color.argb(255, 153, 153, 153));
        tvMeTextNormal.setTextColor(Color.argb(255, 153, 153, 153));
        tvMessageTextPress.setTextColor(Color.argb(0, 69, 192, 26));
        tvContactsTextPress.setTextColor(Color.argb(0, 69, 192, 26));
        tvDiscoveryTextPress.setTextColor(Color.argb(0, 69, 192, 26));
        tvMeTextPress.setTextColor(Color.argb(0, 69, 192, 26));
    }

    @Override
    public void onClick(View v) {
        setTransparency();
        tvDiscoveryNormal.getBackground().setAlpha(255);
        switch (v.getId()) {
            case R.id.ll_message:
                viewPager.setCurrentItem(0, false);
                tvMessagePress.getBackground().setAlpha(255);
                tvMessageTextPress.setTextColor(Color.argb(255, 69, 192, 26));
                break;
            case R.id.ll_contacts:
                viewPager.setCurrentItem(1, false);
                tvContactsPress.getBackground().setAlpha(255);
                tvContactsTextPress.setTextColor(Color.argb(255, 69, 192, 26));
                break;
            case R.id.ll_discovery:
                viewPager.setCurrentItem(2, false);
                tvDiscoveryNormal.getBackground().setAlpha(0);
                tvDiscoveryPress.getBackground().setAlpha(255);
                tvDiscoveryTextPress.setTextColor(Color.argb(255, 69, 192, 26));
                break;
            case R.id.ll_me:
                viewPager.setCurrentItem(3, false);
                tvMePress.getBackground().setAlpha(255);
                tvMeTextPress.setTextColor(Color.argb(255, 69, 192, 26));
                break;
        }
    }

    private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
        private ArrayList<Fragment> list;

        public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> list) {
            super(fm);
            this.list = list;
        }

        @Override
        public Fragment getItem(int position) {
            return list.get(position);
        }

        @Override
        public int getCount() {
            return list.size();
        }
    }

3、4个fragment随便创建新，图标和文字等

colors.xml：
<color name="white">#FFF</color>
<color name="black">#000</color>
<color name="green">#45C01A</color>
<color name="gray">#999</color>

string.xml：

<string name="message">微信</string>
<string name="contacts">通讯录</string>
<string name="discovery">发现</string>
<string name="me">我</string>