ViewPager+Fragment实现滑动显示，且Fragment里面又放Fragment+viewPager

思路：新建一个Activity，且这个Activity要继承FragementActivity，在Activity的布局文件中放入了一个viewPager，为了效果好看，还做了个导航，使得ViewPager和导航栏能够实现联动。代码里面有解释，我就不详细介绍了！！

在往ViewPager放Fragment的时候，用到的适配器应该是FragmentPagerAdapter

导航栏的制作我是用了一个ImageView+TextView，若这时使用Imageview（或TextView）实现点击事件的话，到你点击不到ImageView（或TextView）的话，不会产生联动效果，所以我用一个LinearLayout去把ImageView和TextView包含起来，并使用LinearLayout相应点击事件,并设置ImageView和TextView不能被点击.

MainActivity.java

package com.example.administrator.viewpagerfagmentdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

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

public class MainActivity extends FragmentActivity implements View.OnClickListener {

    private ViewPager myViewPager;  //声明ViewPager
    private FragmentPagerAdapter myFragmentPagerAdapter;   //Fragment适配器
    private List<Fragment> myContionter;  //存放的容器
    // 声明一下四个Fragment
    private FirstFragment myFirstFragment;
    private SecondFragment mySecondtFragment;
    private ThirdFragment myThirdFragment;
    private FourFragment myFourFragment;
    // 声明四个ImageView
    private ImageView down_first_image;
    private ImageView down_second_image;
    private ImageView down_third_image;
    private ImageView down_four_image;

    private LinearLayout first;
    private LinearLayout second;
    private LinearLayout third;
    private LinearLayout four;

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

        initView();  //初始化各种View

        initEvents(); //初始化监听事件

    }

    //初始化我们需要用到的View
    public void initView(){
        myViewPager = (ViewPager) findViewById(R.id.viewPager);

        down_first_image = (ImageView) findViewById(R.id.down_music);
        down_second_image = (ImageView) findViewById(R.id.down_icon);
        down_third_image = (ImageView) findViewById(R.id.down_people);
        down_four_image = (ImageView) findViewById(R.id.down_shoot);

        first = (LinearLayout) findViewById(R.id.first);
        second = (LinearLayout) findViewById(R.id.second);
        third = (LinearLayout) findViewById(R.id.third);
        four = (LinearLayout) findViewById(R.id.four);

        //初始化Fragment
        myFirstFragment = new FirstFragment();
        mySecondtFragment = new SecondFragment();
        myThirdFragment = new ThirdFragment();
        myFourFragment = new FourFragment();
        //初始化容器
        myContionter = new ArrayList<>();
        myContionter.add(myFirstFragment);
        myContionter.add(mySecondtFragment);
        myContionter.add(myThirdFragment);
        myContionter.add(myFourFragment);
        //初始化 适配器
        myFragmentPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

            @Override
            public Fragment getItem(int i) {
                return myContionter.get(i);
            }

            @Override
            public int getCount() {
                return myContionter.size();
            }
        };
        myViewPager.setAdapter(myFragmentPagerAdapter);
        //设置监听器，没什么服用价值，就直接匿名内部类了
        myViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i2) {

            }
            //当 界面 切换 的时候
            @Override
            public void onPageSelected(int position) {
                initImageViewBackGround();   //图片先置为暗色
                switch (position){
                    case 0:
                        down_first_image.setBackgroundResource(R.drawable.shake_icon_music_pressed);
                        break;
                    case 1:
                        down_second_image.setBackgroundResource(R.drawable.notification_icon);
                        break;
                    case 2:
                        down_third_image.setBackgroundResource(R.drawable.shake_icon_people_pressed);
                        break;
                    case 3:
                        down_four_image.setBackgroundResource(R.drawable.sns_shoot_location_pressed);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });

        //这俩 得对应起来
        myViewPager.setCurrentItem(0);
        down_first_image.setBackgroundResource(R.drawable.shake_icon_music_pressed);
    }
    //初始化 监听事件
    private void initEvents() {
//        down_first_image.setOnClickListener(this);
//        down_second_image.setOnClickListener(this);
//        down_third_image.setOnClickListener(this);
//        down_four_image.setOnClickListener(this);

        first.setOnClickListener(this);
        second.setOnClickListener(this);
        third.setOnClickListener(this);
        four.setOnClickListener(this);
    }

    //监听事件的方法
    @Override
    public void onClick(View v) {
        initImageViewBackGround();  //先设置图片为亮色
        switch (v.getId()){
            case R.id.first:
                myViewPager.setCurrentItem(0);
                down_first_image.setBackgroundResource(R.drawable.shake_icon_music_pressed);
                break;
            case R.id.second:
                myViewPager.setCurrentItem(1);
                down_second_image.setBackgroundResource(R.drawable.notification_icon);
                break;
            case R.id.third:
                myViewPager.setCurrentItem(2);
                down_third_image.setBackgroundResource(R.drawable.shake_icon_people_pressed);
                break;
            case R.id.four:
                myViewPager.setCurrentItem(3);
                down_four_image.setBackgroundResource(R.drawable.sns_shoot_location_pressed);
                break;

        }
    }

    //初始化图片都为暗色
    private void initImageViewBackGround(){

        down_first_image.setBackgroundResource(R.drawable.shake_icon_music_normal);
        down_second_image.setBackgroundResource(R.drawable.notification_icon_gray);
        down_third_image.setBackgroundResource(R.drawable.shake_icon_people_normal);
        down_four_image.setBackgroundResource(R.drawable.sns_shoot_location_normal);
    }
}

activity_main.xml

<LinearLayout
    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"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center"
        android:background="@color/title_background">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textColor="@color/title_text_color"
            android:text="微信"/>
    </LinearLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/abc_list_selector_disabled_holo_light"
        android:orientation="horizontal">
        <LinearLayout
            android:id="@+id/first"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center">
            <ImageView
                android:id="@+id/down_music"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="2"
                android:clickable="false"
                android:background="@drawable/shake_icon_music_normal"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:textColor="#000"
                android:layout_weight="1"
                android:clickable="false"
                android:text="音乐"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/second"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center">
            <ImageView
                android:id="@+id/down_icon"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="2"
                android:clickable="false"
                android:background="@drawable/notification_icon_gray"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:textColor="#000"
                android:layout_weight="1"
                android:clickable="false"
                android:text="哈哈"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/third"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center">
            <ImageView
                android:id="@+id/down_people"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="2"
                android:clickable="false"
                android:background="@drawable/shake_icon_people_normal"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:textColor="#000"
                android:layout_weight="1"
                android:clickable="false"
                android:text="好友"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/four"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center">
            <ImageView
                android:id="@+id/down_shoot"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="2"
                android:clickable="false"
                android:background="@drawable/sns_shoot_location_normal"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:textColor="#000"
                android:layout_weight="1"
                android:clickable="false"
                android:text="啦啦"/>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

建立四个Fragment，这四个Fragment都是一样，在这里我就贴出一个代码,并且我还在这个Frament中又放了ViewPager，在这个viewPager中我又放了Fragment，那么这是你在设置Fragment里面viewPager的适配器的时候，需要用到FragmentPagerAdapter，那么这里穿进去的参数应该是getChildFragmentManager（），否则会报错。

Fragment.java

package com.example.administrator.viewpagerfagmentdemo;

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

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

/**
 * Created by Administrator on 2015/9/2.
 */
public class FirstFragment extends Fragment {

    private ViewPager myViewPager;
    private List<View> myContiontar ;   //viewPager的数据源
    private PagerAdapter myPagerAdapter;   //有了数据源，必然要有适配器
    private FragmentPagerAdapter fragmentPagerAdapter;
    private List<Fragment> list;
    private View view;  //Fragment的布局

    private Lunboa lunboa;
    private Lunbob lunbob;
    private Lunboc lunboc;
    private Lunbod lunbod;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        view = inflater.inflate(R.layout.first_fragment,null);
        initViews();  //初始化各种View
        return view;
    }

    //初始化各种View
    private void initViews(){
        // 先将xml文件 换成 view
        myViewPager = (ViewPager) view.findViewById(R.id.first_fragment_viewpager);
        //建立五个view 去获得四个ImageView
        View view1 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.lunbo_image1,null);
        View view2 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.lunbo_image2,null);
        View view3 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.lunbo_image3,null);
        View view4 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.lunbo_image4,null);
        View view5 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.lunbo_image5,null);
        //加入到容器里面
        myContiontar = new ArrayList<>();
        myContiontar.add(view1);
        myContiontar.add(view2);
        myContiontar.add(view3);
        myContiontar.add(view4);
        myContiontar.add(view5);

        lunboa = new Lunboa();
        lunbob = new Lunbob();
        lunboc = new Lunboc();
        lunbod = new Lunbod();

        list = new ArrayList<>();
        list.add(lunboa);
        list.add(lunbob);
        list.add(lunboc);
        list.add(lunbod);
        //fragmentPagerAdapter
        fragmentPagerAdapter = new FragmentPagerAdapter(getFragmentManager()) {
            @Override
            public Fragment getItem(int i) {
                return list.get(i);
            }
            @Override
            public int getCount() {
                return list.size();
            }
        };

        //初始化 适配器
        myPagerAdapter = new PagerAdapter() {
            //返回显示多少项
            @Override
            public int getCount() {
                return myContiontar.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object o) {
                return view == o;
            }
            //滑动切换时，移除当前组件
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(myContiontar.get(position));
            }
            //每次滑动时生成的组件
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(myContiontar.get(position));
                return myContiontar.get(position);
            }
        };
        //设置适配器
        myViewPager.setAdapter(myPagerAdapter);
        //设置fragment适配器
//        myViewPager.setAdapter(fragmentPagerAdapter);
    }
}

布局文件fragment.xml也很简单,不多说了，我就直接上代码了。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center|bottom">
        <android.support.v4.view.ViewPager
            android:id="@+id/first_fragment_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </android.support.v4.view.ViewPager>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center|bottom">
            <ImageView
                android:id="@+id/first_fragment_down_image1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/wallet_coin_purse_guide_purse_dot_normal"/>
            <ImageView
                android:id="@+id/first_fragment_down_image2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/wallet_coin_purse_guide_purse_dot_normal"/>
            <ImageView
                android:id="@+id/first_fragment_down_image3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/wallet_coin_purse_guide_purse_dot_normal"/>
            <ImageView
                android:id="@+id/first_fragment_down_image4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/wallet_coin_purse_guide_purse_dot_normal"/>
            <ImageView
                android:id="@+id/first_fragment_down_image5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/wallet_coin_purse_guide_purse_dot_normal"/>
            </LinearLayout>

    </FrameLayout>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2.5"
        android:background="@color/fitst_fragment_image_color"/>
</LinearLayout>

效果图:

时间： 2024-11-05 19:40:55

ViewPager+Fragment实现滑动显示，且Fragment里面又放Fragment+viewPager的相关文章

Android Viewpager+Fragment实现滑动标签页

ViewPager 结合Fragment实现一个Activity里包含多个可滑动的标签页,每个标签页可以有独立的布局及响应. 主页布局 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="mat

fragment嵌套，viewpager嵌套 不能正确显示

转帖:http://blog.csdn.net/mybook1122/article/details/24003343 通常为 viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList)); 替换为 mPager.setAdapter(new MyFragmentPagerAdapter(getChildFragmentManager(), fragmentsList));

viewpager+fragment实现滑动页面

1.适配器 package com.example.adapter; import java.util.List; import android.content.Intent; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; import android.ut

fragment中嵌套viewpager，vierpager中有多个fragment，不显示 .

fragment中嵌套viewpager,vierpager中有多个fragment,不显示 ... 现在好多应用流行一种布局.底部几个工具栏选项,上面也有类似tab的选项. 底部用RadioGroup控制fragment的切换.以上有五个fragment. 第一个fragment,代表着首页.首页又是一个类似tab的fragment,使用viewpager切换着两个fragment. private void InitViewPager(View parentView) {        mP

Android Fragment 隐藏或显示时调用的生命周期方法

Fragment使用方式大体分两种: 大家要注意不同的Fragment使用方法,Fragment隐藏和显示调用的生命周期方法是不同的,以下是Fragment显示隐藏调用的方法: //判断是否展示—与ViewPager连用,进行左右切换@Overridepublic void setUserVisibleHint(boolean isVisibleToUser) {super.setUserVisibleHint(isVisibleToUser);if (isVisibleToUser)//展示}

Android之自定义（上方标题随ViewPager手势慢慢滑动）

最近很蛋疼,项目要模仿网易新闻的样式去做.上次把仿网易新闻客户端的下拉刷新写出来了,这次是ViewPager的滑动,同时ViewPager的上面标题下划线跟随者移动,本来通过ViewPager的OnPagerChangeListener的监听事件就可以完成,但是做出来之后,因为需要一直的刷新,所以很卡,一气之下,呵呵,自己完全的画了.整个点击事件,滑动事件都自己处理了. 效果图如下: 下标的长宽是随之改变的. 使用方式: 我的布局文件: <LinearLayout xmlns:android=&qu

Android之自己定义（上方标题随ViewPager手势慢慢滑动）

近期非常蛋疼,项目要模仿网易新闻的样式去做.上次把仿网易新闻client的下拉刷新写出来了.这次是ViewPager的滑动,同一时候ViewPager的上面标题下划线尾随者移动.本来通过ViewPager的OnPagerChangeListener的监听事件就能够完毕,可是做出来之后,由于须要一直的刷新,所以非常卡.一气之下.呵呵.自己全然的画了.整个点击事件,滑动事件都自己处理了. 效果图例如以下: 下标的长宽是随之改变的. 使用方式: 我的布局文件: <LinearLayout xmlns:

实现ViewPager多页面滑动效果

 viewPager实现引导页 ViewPager多页面滑动效果 1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右 切换tab页. 2.自android 3.0之后的SDK中提供了android-support-V4包用以实现 版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一 个可以实现左右滑动的类ViewPager 今天我们就用ViewPager类来实现引导页的实战案例 实现功能: 1.实现ViewPager多页面滑动效果. 2.下方的显示当前焦点页

android UI之ViewPager多页面滑动效果

  viewPager实现引导页 ViewPager多页面滑动效果 1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右 切换tab页. 2.自android 3.0之后的SDK中提供了android-support-V4包用以实现 版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一 个可以实现左右滑动的类ViewPager 今天我们就用ViewPager类来实现引导页的实战案例 实现功能: 1.实现ViewPager多页面滑动效果. 2.下方的显示当前