Android之ViewPager+Fragment实现页面点击切换和手势滑动

最新推荐文章于 2024-08-13 19:49:02 发布
最新推荐文章于 2024-08-13 19:49:02 发布
阅读量1.8w 收藏 30
点赞数 7
分类专栏： Android 文章标签： android viewpager fragment
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wei_zhi/article/details/50609119
版权

使用ViewPager+Fragment实现页面点击切换和手势滑动，效果图如下：
1

源码下载地址：
http://download.csdn.net/detail/wei_zhi/9422590
布局文件activity_main.xml如下：

<?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:orientation="vertical">


    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="@dimen/top_tab_height"
        android:background="@color/main_top_color" >

        <TextView
            android:id="@+id/picture_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="@string/picture"
            android:textStyle="bold"
            android:textColor="@color/main_top_tab_color"
            android:textSize="@dimen/main_top_tab_text_size" />

        <TextView
            android:id="@+id/movie_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="@string/movie"
            android:textStyle="bold"
            android:textColor="@color/main_top_tab_color"
            android:textSize="@dimen/main_top_tab_text_size" />

        <TextView
            android:id="@+id/music_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="@string/music"
            android:textStyle="bold"
            android:textColor="@color/main_top_tab_color"
            android:textSize="@dimen/main_top_tab_text_size" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/main_line_height"
        android:layout_gravity="bottom"
        android:orientation="vertical"
        android:background="@color/main_top_color"
        >

        <ImageView
            android:id="@+id/cursor"
            android:layout_width="@dimen/main_matrix_width"
            android:layout_height="@dimen/main_line_height"
            android:scaleType="matrix"
            android:src="@color/matrix_color" />
    </LinearLayout>
    <View
        android:layout_width="fill_parent"
        android:layout_height="0.5dp"
        android:background="@color/main_top_color"/>


    <android.support.v4.view.ViewPager
        android:id="@+id/vPager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1.0"
        android:background="@color/white"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" />
</LinearLayout>

其中strings.xml为：

<resources>
    <string name="app_name">VF</string>
    <string name="action_settings">Settings</string>

    <string name="picture">图片</string>
    <string name="movie">电影</string>
    <string name="music">音乐</string>

</resources>

dimens.xml为：

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="fab_margin">16dp</dimen>

    <dimen name="top_tab_height">50dp</dimen>
    <dimen name="main_top_tab_text_size">14sp</dimen> <!--48px-->
    <dimen name="main_line_height">2.7dp</dimen><!--8px-->
    <dimen name="main_matrix_width">95dp</dimen>
    <dimen name="text_size">32sp</dimen>
</resources>

colors.xml为：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="transparent">#00000000</color>
    <color name="main_top_color">#f7614d</color>
    <color name="main_top_tab_color">#fcc9c5</color>
    <color name="main_top_tab_color_2">#ffffff</color>
    <color name="matrix_color">#ffffff</color>
    <color name="white">#ffffff</color>
    <color name="red">#FFFF1826</color>

</resources>

MainActivity.java 如下：

package com.android.vf;
import android.content.Context;
import android.content.pm.ActivityInfo;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.KeyEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
/**
 * 主界面显示，包括图片、电影和音乐三个选项
 * @author weizhi
 * @version 1.0
 */
public class MainActivity extends FragmentActivity {

    //图片
    private TextView pictureTextView;
    //电影
    private TextView movieTextView;
    //音乐
    private TextView musicTextView;

    //实现Tab滑动效果
    private ViewPager mViewPager;

    //动画图片
    private ImageView cursor;

    //动画图片偏移量
    private int offset = 0;
    private int position_one;
    private int position_two;

    //动画图片宽度
    private int bmpW;

    //当前页卡编号
    private int currIndex = 0;

    //存放Fragment
    private ArrayList<Fragment> fragmentArrayList;

    //管理Fragment
    private FragmentManager fragmentManager;

    public Context context;

    public static final String TAG = "MainActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        context = this;

        //初始化TextView
        InitTextView();

        //初始化ImageView
        InitImageView();

        //初始化Fragment
        InitFragment();

        //初始化ViewPager
        InitViewPager();

    }

    @Override
    public View onCreateView(String name, Context context, AttributeSet attrs) {

        return super.onCreateView(name, context, attrs);
    }

    @Override
    protected void onResume() {
        /**
         * 设置为竖屏
         */
        if(getRequestedOrientation()!= ActivityInfo.SCREEN_ORIENTATION_PORTRAIT){
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        }

        super.onResume();
    }

    /**
     * 初始化头标
     */
    private void InitTextView(){

        //图片头标
        pictureTextView = (TextView)findViewById(R.id.picture_text);
        //电影头标
        movieTextView = (TextView) findViewById(R.id.movie_text);
        //音乐头标
        musicTextView = (TextView)findViewById(R.id.music_text);

        //添加点击事件
        pictureTextView.setOnClickListener(new MyOnClickListener(0));
        movieTextView.setOnClickListener(new MyOnClickListener(1));
        musicTextView.setOnClickListener(new MyOnClickListener(2));
    }

    /**
     * 初始化页卡内容区
     */
    private void InitViewPager() {

        mViewPager = (ViewPager) findViewById(R.id.vPager);
        mViewPager.setAdapter(new MFragmentPagerAdapter(fragmentManager, fragmentArrayList));

        //让ViewPager缓存2个页面
        mViewPager.setOffscreenPageLimit(2);

        //设置默认打开第一页
        mViewPager.setCurrentItem(0);

        //将顶部文字恢复默认值
        resetTextViewTextColor();
        pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));

        //设置viewpager页面滑动监听事件
        mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());
    }

    /**
     * 初始化动画
     */
    private void InitImageView() {
        cursor = (ImageView) findViewById(R.id.cursor);
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);

        // 获取分辨率宽度
        int screenW = dm.widthPixels;

        bmpW = (screenW/3);

        //设置动画图片宽度
        setBmpW(cursor, bmpW);
        offset = 0;

        //动画图片偏移量赋值
        position_one = (int) (screenW / 3.0);
        position_two = position_one * 2;

    }

    /**
     * 初始化Fragment，并添加到ArrayList中
     */
    private void InitFragment(){
        fragmentArrayList = new ArrayList<Fragment>();
        fragmentArrayList.add(new PictureFragment());
        fragmentArrayList.add(new MovieFragment());
        fragmentArrayList.add(new MusicFragment());

        fragmentManager = getSupportFragmentManager();

    }

    /**
     * 头标点击监听
     * @author weizhi
     * @version 1.0
     */
    public class MyOnClickListener implements View.OnClickListener{
        private int index = 0 ;
        public MyOnClickListener(int i) {
            index = i;
        }

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

    /**
     * 页卡切换监听
     * @author weizhi
     * @version 1.0
     */
    public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{

        @Override
        public void onPageSelected(int position) {
            Animation animation = null ;
            switch (position){

                //当前为页卡1
                case 0:
                    //从页卡1跳转转到页卡2
                    if(currIndex == 1){
                        animation = new TranslateAnimation(position_one, 0, 0, 0);
                        resetTextViewTextColor();
                        pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
                    }else if(currIndex == 2){//从页卡1跳转转到页卡3
                        animation = new TranslateAnimation(position_two, 0, 0, 0);
                        resetTextViewTextColor();
                        pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
                    }
                    break;

                //当前为页卡2
                case 1:
                    //从页卡1跳转转到页卡2
                    if (currIndex == 0) {
                        animation = new TranslateAnimation(offset, position_one, 0, 0);
                        resetTextViewTextColor();
                        movieTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
                    } else if (currIndex == 2) { //从页卡1跳转转到页卡2
                        animation = new TranslateAnimation(position_two, position_one, 0, 0);
                        resetTextViewTextColor();
                        movieTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
                    }
                    break;

                //当前为页卡3
                case 2:
                    //从页卡1跳转转到页卡2
                    if (currIndex == 0) {
                        animation = new TranslateAnimation(offset, position_two, 0, 0);
                        resetTextViewTextColor();
                        musicTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
                    } else if (currIndex == 1) {//从页卡1跳转转到页卡2
                        animation = new TranslateAnimation(position_one, position_two, 0, 0);
                        resetTextViewTextColor();
                        musicTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
                    }
                    break;
            }
            currIndex = position;

            animation.setFillAfter(true);// true:图片停在动画结束位置
            animation.setDuration(300);
            cursor.startAnimation(animation);

        }

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };

    /**
     * 设置动画图片宽度
     * @param mWidth
     */
    private void setBmpW(ImageView imageView,int mWidth){
        ViewGroup.LayoutParams para;
        para = imageView.getLayoutParams();
        para.width = mWidth;
        imageView.setLayoutParams(para);
    }

    /**
     * 将顶部文字恢复默认值
     */
    private void resetTextViewTextColor(){

        pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color));
        movieTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color));
        musicTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color));
    }

}

其中用到的适配器MFragmentPagerAdapter.java如下：

package com.android.vf;

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

import java.util.ArrayList;

/**
 * Fragment适配器
 * @author weizhi
 * @version 1.0
 */
public class MFragmentPagerAdapter extends FragmentPagerAdapter {

    //存放Fragment的数组
    private ArrayList<Fragment> fragmentsList;

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

    @Override
    public Fragment getItem(int position) {

        return fragmentsList.get(position);
    }

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

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        super.destroyItem(container, position, object);
    }
}

三个Fragment如下（相同，不一一赘述）：
PictureFragment.java:

package com.android.vf;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class PictureFragment extends Fragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_picture, container, false);
    }

}

用到的dotshape.xml如下：

<?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval"
        android:useLevel="false">

        <solid
            android:color="@color/white"/>
        <stroke
            android:width="1dp"
            android:color="@color/red"/>
        <size android:width="8dp"
        android:height="8dp"/>
    </shape>

三个Fragment对应的布局文件如下（相同，不一一赘述）：

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

    <TextView
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@drawable/dotshape"/>
    <TextView
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:text="@string/movie"
        android:textSize="@dimen/text_size"
        android:textColor="@color/main_top_color"/>

</FrameLayout>

沉浸式效果用到的style如下：

    <style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:colorPrimary">@color/main_top_color</item>
        <item name="android:statusBarColor">@color/main_top_color</item>
        <item name="android:colorPrimaryDark">@color/main_top_color</item>
    </style>

源码下载地址：
http://download.csdn.net/detail/wei_zhi/9422590

志见
关注
专栏目录
Android Studio使用ViewPager+Fragment实现仿微信滑动切换界面
12-27
Android Studio使用ViewPager+Fragment实现仿微信滑动切换界面
使用ViewPager+Fragment实现页面点击切换和手势滑动
03-08
本篇文章将详细讲解如何利用这两个组件实现页面的点击切换和手势滑动，以及如何添加动画效果，使得用户体验更加流畅。 **ViewPager组件** ViewPager是一个可以展示多个视图并支持用户进行左右滑动切换的容器。它...
android 中的 ViewPager+ Fragment
weixin_30596165的博客
05-15 68
android的Viewpager 的各种经常的用法，朋友问我要过，所以就稍微总结一下， ViewPager + Fragment 经常用到 代码是从 actionbarsherlock 中提取出来的，这个效果都知道是 滑动来切换的。直接上代码了 在这里简单说明一下 FragmentStatePagerAdapter 和 FragmentPagerAdapter 2个adap...
Viewpager+Fragment动态处理（添加、删除）Fragment
最新发布
iceFreedom的博客
08-13 785
在不断的看源码，查资料，调试程序中，终于是把该问题解决了，网上的资料都说得模棱两可，很多时候都得自己操刀，理解了才是自己的，特别是Fragment在FragmentManager中的mIndex值，有点坑，这里没拿出来说，以后有机会再补补。适合少量的页面显示。该类每一个生成的Fragment对象都会储存在内存中，所以适合相对静态、页面少的情况，如果是页面多，且Fragment的处理相对动态（添加、删除等）时，使用FragmentStatePagerAdapter较为适合。
Android中实现滑动翻页—使用ViewFlipper
daibalusu
01-19 351
有一些场景，我们需要向用户展示一系列的页面。比如我们正在开发一个看漫画的应用，可能就需要向用户展示一张一张的漫画图片，用户使用手指滑动屏幕，可以在前一幅漫画和后一幅漫画之间切换。这个时候ViewFlipper就是一个很好的选择。 1）View切换的控件—ViewFlipper介绍 ViewFilpper类继承于ViewAnimator类。而ViewAnimator类继承于FrameLayout...
TabHost+ViewPager+Fragment实现页面的滑动
qq_38952132的博客
06-12 443
大家都知道TabHost是标签窗口控件需要放在layout的最外层，内部控件需要FrameLayout和widget标签栏，点击不同的标签，显示不同的标签页。TabHost有个好处就是标签页不仅可以放fragment，还可以放activity。当然这次的文章讲述是通过fragment来完成的。 如果我们在做项目中，在加入ViewPager这个控件实现标签栏和ViewPager的联动，就可以实现类...
Android中ViewPager+Fragment的基本使用
xyjikl
05-28 673
这几天学习了一下ViewPager+Fragement的基本使用方法并写了个Demo。现将代码和效果图放上。 首先是布局文件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Android App中使用ViewPager+Fragment实现滑动切换效果
01-20
总结来说，要在Android应用中实现滑动切换效果，可以利用`ViewPager`结合`Fragment`，并通过自定义`PagerAdapter`来管理`Fragment`的创建和展示。`FragmentStatePagerAdapter`适合处理大量数据的场景，而`...
Android ViewPager + Fragment实现滑动页面效果
08-27
Android ViewPager + Fragment实现滑动页面效果 Android 中的 ViewPager 是一个非常常用的控件，用于实现滑动页面效果。通过结合 Fragment，这种效果可以变得更加强大。下面我们将通过实例代码详细介绍 Android ...
ViewPager+Fragment左右滑动+上下滑动不冲突
06-12
`ViewPager`是Android Support Library中的一个组件，它允许用户通过水平滑动来切换不同的页面，通常用于实现类似轮播图或者tab页的效果。`Fragment`则是Android应用中的一个可重用的UI组件，它可以独立于Activity...
ViewPager+Fragment+DrawableLayout 实现页面水平滑动与侧滑抽屉布局
10-13
`ViewPager`、`Fragment`和`DrawableLayout`的结合使用，以及`NavigationView`的加入，可以帮助开发者构建出功能丰富的水平滑动页面和侧滑抽屉布局。下面将详细讲解这些组件的工作原理和它们如何协同工作。 首先，`...
安卓Android源码——ViewPager+Fragment实现QQ界面.zip
10-14
安卓Android源码——ViewPager+Fragment实现QQ界面.zip
Android ViewPager和Fragment 实现滑动切换页面
10-27
使用ViewPager + Fragment实现滑动切换页面的简单样例
android Viewpager+fragment实现页面切换
08-04
使用viewpager+fragment简单实现页面切换，并切实现左右滑动切换的效果
viewpager+fragment
10-12
常用android开发框架viewpager结合fragment的使用，相对稳定
android viewpager+fragment实现底部导航栏
06-12
android 使用viewpager+fragment的方式实现类似qq的底部导航栏，通过简单的方式得到一个满足用户操作的底部状态栏
android中viewpager+fragment,Android ViewPager + Fragment
weixin_35986494的博客
05-27 216
市场上项目很多都是需要用到! 源码在底部哦~可以是用ViewPager + Fragment或者使用AndroidJetpack 中的Navigation.这里我们先说ViewPager + Fragment比较简单, 没用过Navigation的同学拖拽关系图都要吐血了好了 , 这就开始啦我们在MianActivity 中加入Fragment的逻辑''及观众要''1. 我们MainActivi...
Android 中的 ViewPager+ Fragment
来啊 快活啊
07-05 2497
android的Viewpager 的各种经常的用法，朋友问我要过，所以就稍微总结一下，ViewPager + Fragment 经常用到 代码是从 actionbarsherlock 中提取出来的，这个效果都知道是 滑动来切换的。直接上代码了在这里简单说明一下 FragmentStatePagerAdapter 和 FragmentPagerAdapter2个adapter 第一种 frag
Android ViewPager+Fragment
耀相惜
02-06 790
ViewPager+Fragment的实现
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值