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

最新推荐文章于 2025-05-16 22:13:03 发布
原创 最新推荐文章于 2025-05-16 22:13:03 发布 · 6.1k 阅读 · 20 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android #ViewPager #Fragment #微信 #切换动画

本文介绍了一种使用Android ViewPager和Fragment模仿微信主界面的方法，通过监听滑动状态更改图片透明度实现流畅的用户体验。文章提供了完整的源码，包括布局文件和活动类的实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Android ViewPager+Fragment超高仿微信主界面

1.原理

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

2.效果动画


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

Android ViewPager+Fragment超高仿微信主界面
12-22
在Android应用开发中，创建一个类似微信主界面的布局是一个常见的需求，这涉及到对ViewPager、RadioGroup以及Fragment的深入理解和灵活运用。`ViewPager`是Android官方提供的一个强大的滑动页面容器，而`Fragment`则...
Android -- FragmentTabHost实现微信底部切换
weixin_33796177的博客
05-13 181
1，在商城类的项目中我们开始一个项目的时候经常出现这样的需求，如下图所示： 下面使用户可以切换的模块，上面是对应的模块的详细内容，实现这个效果有很多方式，可以使用radiobutton+fragment来实现，也可以用LinearLayout+fragment来实现，但是如何很快速的把我们的ui框架给搭建起来呢，今天就给大家介绍使用Fragment+FragmentTabHost来实现。 ...
【Android】使用 ViewPager + Fragment 实现多页滑动界面
最新发布
m0_73057957的博客
05-16 387
在 Android 开发中，ViewPager是一个非常实用的控件，它可以实现左右滑动切换页面的效果。结合Fragment，可以实现模块化开发，提高代码复用性和维护性。
android viewpager activity切换动画,Android ViewPager+Fragment仿微信主界面（带底部图标切换动画）...
weixin_32829077的博客
05-25 240
1、布局xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".activity.SwitchViewpageImitationWeChatActivity">android:id="...
Android：viewpager+ fragment模拟微信首页
JMW1407的博客
05-11 2399
viewpager+ fragmentviewpager+ fragment模拟微信首页1、前言2、实现 viewpager+ fragment模拟微信首页 1、前言 ViewPager(视图滑动切换工具)是安卓3.0引入的一个页面容器组件，用于手势滑动切换页面，常常用于页面导航或者图片轮播。在安卓开发时将其与Android 碎片(fragment)相配合可以快速搭建出类似微信的滑动视图效果。 2、实现 MainActivity package com.example.wechatpage; impor
Android仿微信界面--使用FragmentPagerAdapter,viewpager实现(慕课网笔记)
Fly~~~的专栏
12-15 3964
来自慕课网：http://www.imooc.com/video/5904 使用FragmenPagerAdapter和viewpager实现微信界面，与http://blog.csdn.net/hnyzwtf/article/details/50296013不同的是，可以左右滑动切换聊天界面； 效果图： 总体设计：一个标题栏top.xml,一个底部导航栏bottom.xml
ViewPager+Fragment超高仿微信主界面（带底部图标切换动画）
10-28
AS写的ViewPager+Fragment超高仿微信主界面（带底部图标切换动画）demo blog:http://blog.csdn.net/shenyuanqing/article/details/49464767
ViewPager+RadioGroup+Fragment超高仿微信主界面AndroidStudio源码
06-28
ViewPager+RadioGroup+Fragment超高仿微信主界面,可通过左右滑动或点击底部RadioButton切换Fragment http://blog.csdn.net/shenyuanqing/article/details/46670761 开发环境AndroidStudio1.2
仿微信主界面开发：Android ViewPager+Fragment实现带动画效果
在分析上述文件内容之前，我们首先要明确标题...通过以上分析，我们可以得到在Android开发中利用ViewPager和Fragment组件来超高仿微信主界面的实现方法和关键点，以及涉及到的动画、事件处理、性能优化等重要技术细节。
Android ViewPager和Fragment实现仿微信导航界面及滑动效果
04-01
Android ViewPager和Fragment实现仿微信导航界面及滑动效果
viewpager+fragment仿微信底部TAG完美渐变
11-09
viewpager+fragment仿微信底部TAG完美渐变 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢。]
android fragment 底部动画菜单 导航动画
06-18
android fragment 底部动画菜单 玩爆所有菜单效果 代码超级简单 android2.0以上都通用
仿微信底部导航栏
04-21
前一段时间写了一个关于微信底部导航栏的简单介绍，因为时间问题没有对代码进行封装，现在我要对项目进行封装，可以通过一个工具类很简单的实现点击底部导航栏实现界面切换。
Android实现仿微信底部导航栏
09-16
使用ViewPager+RadioGroup实现仿微信底部导航栏,注释很全,了解更多请参考：http://www.cnblogs.com/Fill/p/7530655.html
android仿微信底部选项卡（可滑动）
06-14
android仿微信底部选项卡（可滑动），里面的例子有两个，一个是仿微信点击可以切换选项卡，一个是用viewpager实现可滑动和切换的底部选项卡。
仿微信底部切换页签
Makenna's World
03-28 274
layout:下面 主界面：activity_main.xml &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" andr...
android微信底部导航,android仿微信底部导航栏图标颜色渐变效果
weixin_39730263的博客
05-26 249
GradualRadioBar拿RadioGroup和RadioButton开刀，实现微信底部导航栏图标颜色渐变效果源码地址效果使用gradlecompile 'io.github.leibnik:gradualradiobar:1.0.2'xmlGradualRadioGroup和GradualRadioButton必须配合使用xmlns:app="http://schemas.android....
仿微信导航栏
qq_18314469的博客
11-27 354
问 题： 1. 导航栏背景： 获得微信官网的背景图片，将图片设置为背景并且只在 “X” 轴方向重复显示，“Y” 轴不重复，设置 background 属性： background: url('../pictures/3S9sFMD.jpg'); (设置背景图片) background-repeat: repeat-x; (设置"X"轴方向重复)   background 相关属性： ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值