你的位置:首页 > 操作系统

[操作系统]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.

<LinearLayout  ="http://schemas.android.com/apk/res/android"  ="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(){    // 先将    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.

<??><LinearLayout  ="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>

效果图: