ViewPager+Fragment的结合使用，实现QQ界面的理解

最新推荐文章于 2022-10-04 18:28:10 发布
转载 最新推荐文章于 2022-10-04 18:28:10 发布 · 696 阅读 · 0
文章标签：

#android #viewpager

本文介绍了一个仿QQ风格的Tab切换效果实现方案，包括四个主要部分：引入布局文件、标题控件初始化及监听设置、ViewPager控件初始化及适配器设置、页面切换监听实现。通过示例代码展示了如何创建Fragment、设置页面切换动画以及调整选中状态。

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

效果如图：
图片说明文字图片说明文字图片说明文字图片说明文字

实现代码解析：
MainActivity.java
1.引入布局文件
2.4个标题控件的初始化以及点击事件的监听设置
3.viewpager控件的初始化，获取Fragment对象并保存在容器中，设置viewpager的适配器和监听
4.viewpager的监听OnPageChangeListener方法的实现，主要是标题栏下的指示横线的移动操作。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
 
package com.aven.qqdemo;

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

import android.content.res.Resources;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

import com.demo.R;

/**
 * 参考原作者D.Winter基础，
 * 
 * @author avenwu
 * iamavenwu@gmail.com
 * 
 */
public class MainActivity extends FragmentActivity {
    private static final String TAG = "MainActivity";
    private ViewPager mPager;
    private ArrayList<Fragment> fragmentsList;
    private ImageView ivBottomLine;
    private TextView tvTabActivity, tvTabGroups, tvTabFriends, tvTabChat;

    private int currIndex = 0;
    private int bottomLineWidth;
    private int offset = 0;
    private int position_one;
    private int position_two;
    private int position_three;
    private Resources resources;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);
        resources = getResources();
        InitWidth();
        InitTextView();
        InitViewPager();
    }

    private void InitTextView() {
        tvTabActivity = (TextView) findViewById(R.id.tv_tab_activity);
        tvTabGroups = (TextView) findViewById(R.id.tv_tab_groups);
        tvTabFriends = (TextView) findViewById(R.id.tv_tab_friends);
        tvTabChat = (TextView) findViewById(R.id.tv_tab_chat);

        tvTabActivity.setOnClickListener(new MyOnClickListener(0));
        tvTabGroups.setOnClickListener(new MyOnClickListener(1));
        tvTabFriends.setOnClickListener(new MyOnClickListener(2));
        tvTabChat.setOnClickListener(new MyOnClickListener(3));
    }

    private void InitViewPager() {
        mPager = (ViewPager) findViewById(R.id.vPager);
        fragmentsList = new ArrayList<Fragment>();

        Fragment activityfragment = TestFragment.newInstance("Hello Activity.");
        Fragment groupFragment = TestFragment.newInstance("Hello Group.");
        Fragment friendsFragment=TestFragment.newInstance("Hello Friends.");
        Fragment chatFragment=TestFragment.newInstance("Hello Chat.");

        fragmentsList.add(activityfragment);
        fragmentsList.add(groupFragment);
        fragmentsList.add(friendsFragment);
        fragmentsList.add(chatFragment);

        mPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList));
        mPager.setCurrentItem(0);
        mPager.setOnPageChangeListener(new MyOnPageChangeListener());
    }

    private void InitWidth() {
        ivBottomLine = (ImageView) findViewById(R.id.iv_bottom_line);
        bottomLineWidth = ivBottomLine.getLayoutParams().width;
        Log.d(TAG, "cursor imageview width=" + bottomLineWidth);
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        int screenW = dm.widthPixels;
        offset = (int) ((screenW / 4.0 - bottomLineWidth) / 2);
        Log.i("MainActivity", "offset=" + offset);

        position_one = (int) (screenW / 4.0);
        position_two = position_one * 2;
        position_three = position_one * 3;
    }

    public class MyOnClickListener implements View.OnClickListener {
        private int index = 0;

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

        @Override
        public void onClick(View v) {
            mPager.setCurrentItem(index);
        }
    };

    public class MyOnPageChangeListener implements OnPageChangeListener {

        @Override
        public void onPageSelected(int arg0) {
            Animation animation = null;
            switch (arg0) {
            case 0:
                if (currIndex == 1) {
                    animation = new TranslateAnimation(position_one, 0, 0, 0);
                    tvTabGroups.setTextColor(resources.getColor(R.color.lightwhite));
                } else if (currIndex == 2) {
                    animation = new TranslateAnimation(position_two, 0, 0, 0);
                    tvTabFriends.setTextColor(resources.getColor(R.color.lightwhite));
                } else if (currIndex == 3) {
                    animation = new TranslateAnimation(position_three, 0, 0, 0);
                    tvTabChat.setTextColor(resources.getColor(R.color.lightwhite));
                }
                tvTabActivity.setTextColor(resources.getColor(R.color.white));
                break;
            case 1:
                if (currIndex == 0) {
                    animation = new TranslateAnimation(0, position_one, 0, 0);
                    tvTabActivity.setTextColor(resources.getColor(R.color.lightwhite));
                } else if (currIndex == 2) {
                    animation = new TranslateAnimation(position_two, position_one, 0, 0);
                    tvTabFriends.setTextColor(resources.getColor(R.color.lightwhite));
                } else if (currIndex == 3) {
                    animation = new TranslateAnimation(position_three, position_one, 0, 0);
                    tvTabChat.setTextColor(resources.getColor(R.color.lightwhite));
                }
                tvTabGroups.setTextColor(resources.getColor(R.color.white));
                break;
            case 2:
                if (currIndex == 0) {
                    animation = new TranslateAnimation(0, position_two, 0, 0);
                    tvTabActivity.setTextColor(resources.getColor(R.color.lightwhite));
                } else if (currIndex == 1) {
                    animation = new TranslateAnimation(position_one, position_two, 0, 0);
                    tvTabGroups.setTextColor(resources.getColor(R.color.lightwhite));
                } else if (currIndex == 3) {
                    animation = new TranslateAnimation(position_three, position_two, 0, 0);
                    tvTabChat.setTextColor(resources.getColor(R.color.lightwhite));
                }
                tvTabFriends.setTextColor(resources.getColor(R.color.white));
                break;
            case 3:
                if (currIndex == 0) {
                    animation = new TranslateAnimation(0, position_three, 0, 0);
                    tvTabActivity.setTextColor(resources.getColor(R.color.lightwhite));
                } else if (currIndex == 1) {
                    animation = new TranslateAnimation(position_one, position_three, 0, 0);
                    tvTabGroups.setTextColor(resources.getColor(R.color.lightwhite));
                } else if (currIndex == 2) {
                    animation = new TranslateAnimation(position_two, position_three, 0, 0);
                    tvTabFriends.setTextColor(resources.getColor(R.color.lightwhite));
                }
                tvTabChat.setTextColor(resources.getColor(R.color.white));
                break;
            }
            currIndex = arg0;
            animation.setFillAfter(true);
            animation.setDuration(300);
            ivBottomLine.startAnimation(animation);
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    }
}

TestFragment
获取Fragment对应的布局，并且设置相应的参数。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
package com.aven.qqdemo;

import com.demo.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class TestFragment extends Fragment {
    private static final String TAG = "TestFragment";
    private String hello;// = "hello android";
    private String defaultHello = "default value";

    static TestFragment newInstance(String s) {
        TestFragment newFragment = new TestFragment();
        Bundle bundle = new Bundle();
        bundle.putString("hello", s);
        newFragment.setArguments(bundle);
        return newFragment;

    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.d(TAG, "TestFragment-----onCreate");
        Bundle args = getArguments();
        hello = args != null ? args.getString("hello") : defaultHello;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        Log.d(TAG, "TestFragment-----onCreateView");
        View view = inflater.inflate(R.layout.lay1, container, false);
        TextView viewhello = (TextView) view.findViewById(R.id.tv_hello);
        viewhello.setText(hello);
        return view;

    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        Log.d(TAG, "TestFragment-----onDestroy");
    }

}

MyFragmentPagerAdapter
对包含Fragment对象的容器进行适配。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
package com.aven.qqdemo;

import java.util.ArrayList;

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

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    private ArrayList<Fragment> fragmentsList;

    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }

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

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

    @Override
    public Fragment getItem(int arg0) {
        return fragmentsList.get(arg0);
    }

    @Override
    public int getItemPosition(Object object) {
        return super.getItemPosition(object);
    }

}

代码下载地址http://download.youkuaiyun.com/my

Android ViewPager Fragment实现QQ界面
08-22
Android ViewPager Fragment实现QQ界面
Android ViewPager+Fragment实现QQ界面
03-16
项目用Viewpager作为容器，实现换页，用Fragment作为内容展示的载体。
android Viewpager+fragment实现页面切换
08-04
使用viewpager+fragment简单实现页面切换，并切实现左右滑动切换的效果
通过ViewPager实现类似微信的页面切换（Fragment篇）
qqazl001的博客
03-26 462
此文，仅做为个人学习Android，记录成长以及方便复习！实现ViewPager实现类似微信的页面切换，此文通过Fragment适配器实现首先在布局文件activity_main.xml添加ViewPager ViewPager是页面，PagerTabStrip和 PagerTitleStrip是设置标题的&lt;?xml version="1.0" encoding="utf-8"?&gt; &...
安卓Android源码——ViewPager+Fragment实现QQ界面.zip
10-14
最后，"Android ViewPager+Fragment实现QQ界面" 应该是实际的源代码文件，包含了所有相关的类和资源文件，供开发者研究和学习。 总的来说，通过学习和实践这个项目，开发者可以深入理解 `ViewPager` 和 `Fragment` ...
【Android应用源码】Android ViewPager+Fragment实现QQ界面.zip
最新发布
07-25
在使用 ViewPager 结合 Fragment 实现 QQ 界面时，开发者通常需要考虑以下几个关键点： 1.ViewPager 的初始化和配置，包括它的适配器的创建和配置。适配器的作用是把 Fragment 和 ViewPager 关联起来，每个 ...
Android ViewPager+Fragment实现QQ界面-IT计算机-毕业设计.zip
04-01
这个"Android ViewPager+Fragment实现QQ界面"的项目涵盖了Android开发中的多个核心知识点，包括UI设计、数据存储、组件通信、性能优化等，对于学生来说，是一个很好的学习和实践平台，有助于加深对Android开发的理解...
Android ViewPager+Fragment实现QQ界面.rar
12-03
在这个"Android ViewPager+Fragment实现QQ界面"的项目中，我们将深入探讨如何利用这两个关键组件来复现QQ的界面交互。 首先，`ViewPager`是Android Support Library的一部分，它提供了一个可以水平滑动的视图容器，...
ViewPager与Fragment的结合使用
热门推荐
Update的博客
06-13 3万+
什么是ViewPagerViewPager是v4包中的一个类，继承自ViewGroup，是一个容器。ViewPager布局管理器允许翻转带数据的页面，可以通过实现PagerAdapter来显示视图。ViewPager经常用来连接Fragment，它能够方便的管理每个页面的生命周期，ViewPager通过适配器管理Fragment，常用的适配器有FragmentPagerAdapter和Fragme...
Fragment demo仿QQ主界面
08-07
Fragment demo仿QQ主界面，详见博客：http://blog.youkuaiyun.com/yanzi1225627/article/details/31462007#comments
仿QQ主界面Fragment简单应用
01-12
仿QQ主界面Fragment简单应用,一个fragment的实例
ViewPager+Fragment的结合使用
江湖论道
07-11 775
布局文件 <RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_weight="1"> <RadioButt
Android Fragment＋ViewPager 组合使用
行知致简的专栏
03-02 1万+
Android Fragment＋ViewPager 组合，一些你不可不知的注意事项 2016年12月26日 09:26:30亦枫Blog阅读数：2069 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/wenbitianxiafeng/article/details/53883587 前面两篇文章中，对 Fragment 的基本使用、...
『Android基础入门』ViewPager与Fragment结合实现多页面滑动
一个专注于客户端开发的技术er，不定期更新Android，Flutter，HormonyOS等方向的使用心得和感悟
10-04 3445
上次记录了ViewPager实现引导动画的效果，这次来实现一个类似的效果**ViewPager与Fragment结合实现多页面滑动** 主要使用到了`FragmentPagerAdapter` ：用于连接ViewPager与Fragment的桥梁 复习ViewPager实现引导页： * 数据List+适配器Adapter+ViewPager **FragmentPagerAdapter的用法**： * 1.重写getItem() 获取fragment * 2.重写getCount()
Fragment和Viewpager相结合使用.
用心去专研技术，用代码改变世界__ Mr.Wang
05-20 1057
Fragment和Viewpager相结合使用的作用： ①ViewPager有复用机制，可以把不看的fragment销毁，优化内存。 ② 如果把所有的fragment都展示在页面上，用户体验不佳，相结合体验效果更佳。 思路： ①在布局文件中添加viewpager标签，v4包。 ②创建fragment类和布局文件 ③初始化fragment数据集合，并把数据加入集合 ④创建一个类继承Fra
ViewPager和ViewPager+Fragment联合使用方法精炼详解
Chin_Style的博客
04-20 6736
一、前期基础知识储备 使用了ViewPager, PagerSlidingTabStrip, SwipeRefreshLayout模仿Douban客户端的下拉刷新以及滑动的效果。 ViewPager—视图滑动切换工具——通过手势滑动可以完成View的切换，一般是用来做APP 的引导页或者实现图片轮播——意味着ViewPager中经常放的东西有两个：①图片，实现图片轮播器；②View视图，实...
Android 安卓 fragment+viewpager 仿qq界面 实现点击菜单切换界面+滑动切换viewpager切换界面
zhangjm_123的专栏
09-12 1万+
最近写了一个fragment+viewpager仿qq的app，先上图
Android中ViewPager+Fragment结合打造QQ风格界面
本文将详细介绍如何通过ViewPager和Fragment组件，结合Android开发技术，实现类似QQ界面的滑动切换效果。 ### 知识点一：ViewPager组件 ViewPager是一个在Android中可以用来左右滑动切换页面的组件，常用于引导页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值