AndroidViewPager+Fragment超高仿微信主界面

1.原理

原理很简单，监听ViewPager滑动状态，更改两张图片的透明度。

2.效果动画

[置顶] Android ViewPager+Fragment超高仿微信主界面（带底部图标切换动画）_第1张图片

3.源码

MainActivity

package com.example.shen.test.activity;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;import android.view.View;import android.widget.TextView;import com.example.shen.test.R;import com.example.shen.test.adapter.MyFragmentPagerAdapter;import com.example.shen.test.fragment.ContactsFragment;import com.example.shen.test.fragment.DiscoveryFragment;import com.example.shen.test.fragment.MeFragment;import com.example.shen.test.fragment.MessageFragment;import java.util.ArrayList;public class MainActivity 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_main);        initView();    }    private 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设置适配器        viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList));        //ViewPager显示第一个Fragment        viewPager.setCurrentItem(0);        //ViewPager页面切换监听        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;        }    }}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <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>

4.demo下载

http://download.csdn.net/download/shenyuanqing/9219393

更多相关文章

  1. Android：如何显示网络图片
  2. Android中向服务器上传图片
  3. android 使用系统照相程序照相并存储、显示在界面上
  4. 短视频app开源源码android 给图片加文字、图片水印
  5. 模拟器无法启动，卡在android字样的界面上
  6. Android Widget 中ListView加载网络图片
  7. android 下改变默认的checkbox的 选中 和被选中 图片
  8. Android 调用相册 拍照 实现系统控件缩放 切割图片
  9. 混合开发-H5 调用Android 的相册和照相机上传图片的问题

随机推荐

  1. Android Interprocess Communication(一)
  2. Android manifest.xml 中元素含义
  3. Android Tip : think more about Android
  4. Activity 全透明属性
  5. Android Interprocess Communication(二)
  6. 透明的Activity
  7. Android 刮刮乐
  8. Android 动态Gallery
  9. android获得当前 语言环境。
  10. SlidingUpPanel