有些时候经常可以看到其他APP中有一排的图标，可以在一个界面中滑来滑去，并且图标可以进行点击事件进行页面的跳转。这里对这种方法的实现做出总结。

首先看一下图片：

下面这两种图片是在一个Fragment中进行滑动的两个不同的界面。下面来说一下具体实现，请看下面代码：

图一（下）

图二（下）

上面两张图片是两个不同的xml来实现，图一对应slide1.xml，图二对应slide2.xml：

slide1.xml

  1.  <?xml version="1.0" encoding="utf-8"?>
  2.  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.      android:layout_width="match_parent"
  4.      android:layout_height="match_parent"
  5.      android:orientation="horizontal" >
  6.  
  7.      <LinearLayout
  8.          android:id="@+id/dept_list"
  9.          android:layout_width="0dp"
  10.          android:layout_height="match_parent"
  11.          android:layout_weight="1"
  12.          android:gravity="center"
  13.          android:orientation="vertical" >
  14.  
  15.          <ImageView
  16.              android:layout_width="63dp"
  17.              android:layout_height="54dp"
  18.              android:layout_gravity="center"
  19.              android:paddingTop="10dp"
  20.              android:src="@drawable/image_group" />
  21.  
  22.          <TextView
  23.              android:layout_width="fill_parent"
  24.              android:layout_height="wrap_content"
  25.              android:gravity="center"
  26.              android:paddingTop="10dp"
  27.              android:text="@string/dept_list"
  28.              android:textColor="#000000"
  29.              android:textSize="20px" />
  30.  
  31.      </LinearLayout>
  32.  
  33.       <LinearLayout
  34.          android:id="@+id/slideclassalbum"
  35.          android:layout_width="0dp"
  36.          android:layout_height="match_parent"
  37.          android:layout_weight="1"
  38.          android:gravity="center"
  39.          android:orientation="vertical" >
  40.           <ImageView
  41.              android:id="@+id/zhuxue"
  42.              android:layout_width="63dp"
  43.              android:layout_height="54dp"
  44.              android:layout_gravity="center"
  45.              android:paddingTop="10dp"
  46.              android:src="@drawable/testmemberimg6" />
  47.  
  48.          <TextView
  49.              android:layout_width="fill_parent"
  50.              android:layout_height="wrap_content"
  51.              android:gravity="center"
  52.              android:paddingTop="10dp"
  53.              android:text="@string/dept_list"
  54.              android:textColor="#000000"
  55.              android:textSize="20px" />
  56.      </LinearLayout>
  57.       <LinearLayout
  58.          android:id="@+id/slidegrade"
  59.          android:layout_width="0dp"
  60.          android:layout_height="match_parent"
  61.          android:layout_weight="1"
  62.          android:gravity="center"
  63.          android:orientation="vertical" >
  64.          <ImageView
  65.              android:id="@+id/zhuxue"
  66.              android:layout_width="63dp"
  67.              android:layout_height="54dp"
  68.              android:layout_gravity="center"
  69.              android:paddingTop="10dp"
  70.              android:src="@drawable/testmemberimg3" />
  71.  
  72.          <TextView
  73.              android:layout_width="fill_parent"
  74.              android:layout_height="wrap_content"
  75.              android:gravity="center"
  76.              android:paddingTop="10dp"
  77.              android:text="@string/dept_list"
  78.              android:textColor="#000000"
  79.              android:textSize="20px" />
  80.      </LinearLayout>
  81.       <LinearLayout
  82.          android:id="@+id/slideloving"
  83.          android:layout_width="0dp"
  84.          android:layout_height="match_parent"
  85.          android:layout_weight="1"
  86.          android:gravity="center"
  87.          android:orientation="vertical" >
  88.          <ImageView
  89.              android:id="@+id/zhuxue"
  90.              android:layout_width="63dp"
  91.              android:layout_height="54dp"
  92.              android:layout_gravity="center"
  93.              android:paddingTop="10dp"
  94.              android:src="@drawable/testmemberimg2" />
  95.  
  96.          <TextView
  97.              android:layout_width="fill_parent"
  98.              android:layout_height="wrap_content"
  99.              android:gravity="center"
  100.              android:paddingTop="10dp"
  101.              android:text="@string/dept_list"
  102.              android:textColor="#000000"
  103.              android:textSize="20px" />
  104.      </LinearLayout>
  105.       <LinearLayout
  106.          android:id="@+id/slideabroad"
  107.          android:layout_width="0dp"
  108.          android:layout_height="match_parent"
  109.          android:layout_weight="1"
  110.          android:gravity="center"
  111.          android:orientation="vertical" >
  112.          <ImageView
  113.              android:id="@+id/zhuxue"
  114.              android:layout_width="63dp"
  115.              android:layout_height="54dp"
  116.              android:layout_gravity="center"
  117.              android:paddingTop="10dp"
  118.              android:src="@drawable/testmemberimg1" />
  119.  
  120.          <TextView
  121.              android:layout_width="fill_parent"
  122.              android:layout_height="wrap_content"
  123.              android:gravity="center"
  124.              android:paddingTop="10dp"
  125.              android:text="@string/dept_list"
  126.              android:textColor="#000000"
  127.              android:textSize="20px" />
  128.      </LinearLayout>
  129.  </LinearLayout>

slide2.xml

  1.  <?xml version="1.0" encoding="utf-8"?>
  2.  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.      android:layout_width="match_parent"
  4.      android:layout_height="match_parent"
  5.      android:orientation="horizontal" >
  6.  
  7.      <LinearLayout
  8.          android:id="@+id/slidefile"
  9.          android:layout_width="0dp"
  10.          android:layout_height="match_parent"
  11.          android:layout_weight="1"
  12.          android:gravity="center"
  13.          android:orientation="vertical" >
  14.  
  15.          <ImageView
  16.              android:id="@+id/file"
  17.              android:layout_width="63dp"
  18.              android:layout_height="54dp"
  19.              android:layout_gravity="center"
  20.              android:paddingTop="10dp"
  21.              android:src="@drawable/image_group" />
  22.  
  23.          <TextView
  24.              android:layout_width="fill_parent"
  25.              android:layout_height="wrap_content"
  26.              android:gravity="center"
  27.              android:paddingTop="10dp"
  28.              android:text="@string/dept_list"
  29.              android:textColor="#000000"
  30.              android:textSize="20px" />
  31.  
  32.      </LinearLayout>
  33.  
  34.       <LinearLayout
  35.          android:id="@+id/slidealbum"
  36.          android:layout_width="0dp"
  37.          android:layout_height="match_parent"
  38.          android:layout_weight="1"
  39.          android:gravity="center"
  40.          android:orientation="vertical" >
  41.           <ImageView
  42.              android:id="@+id/operation"
  43.              android:layout_width="63dp"
  44.              android:layout_height="54dp"
  45.              android:layout_gravity="center"
  46.              android:paddingTop="10dp"
  47.              android:src="@drawable/testmemberimg6" />
  48.  
  49.          <TextView
  50.              android:layout_width="fill_parent"
  51.              android:layout_height="wrap_content"
  52.              android:gravity="center"
  53.              android:paddingTop="10dp"
  54.              android:text="@string/dept_list"
  55.              android:textColor="#000000"
  56.              android:textSize="20px" />
  57.      </LinearLayout>
  58.       <LinearLayout
  59.          android:id="@+id/grade"
  60.          android:layout_width="0dp"
  61.          android:layout_height="match_parent"
  62.          android:layout_weight="1"
  63.          android:gravity="center"
  64.          android:orientation="vertical" >
  65.  
  66.      </LinearLayout>
  67.       <LinearLayout
  68.          android:id="@+id/loving"
  69.          android:layout_width="0dp"
  70.          android:layout_height="match_parent"
  71.          android:layout_weight="1"
  72.          android:gravity="center"
  73.          android:orientation="vertical" >
  74.  
  75.      </LinearLayout>
  76.       <LinearLayout
  77.          android:id="@+id/abroad"
  78.          android:layout_width="0dp"
  79.          android:layout_height="match_parent"
  80.          android:layout_weight="1"
  81.          android:gravity="center"
  82.          android:orientation="vertical" >
  83.  
  84.      </LinearLayout>
  85.  </LinearLayout>

下面是Fragment所对应的布局文件fragment_my.xml。其中红色区域为核心代码，主要是这部分实现滑动。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:background="@drawable/timg"
  6.     android:orientation="vertical" >
  7.  
  8.     <com.example.myassembly.VerticalScrollView
  9.         android:layout_width="fill_parent"
  10.         android:layout_height="fill_parent"
  11.         android:background="@drawable/timg"
  12.         android:fillViewport="true" >
  13.  
  14.         <LinearLayout
  15.             android:id="@+id/slide"
  16.             android:layout_width="match_parent"
  17.             android:layout_height="130dp"
  18.             android:background="@drawable/timg" >
  19.  
  20.             <FrameLayout
  21.                 android:layout_width="fill_parent"
  22.                 android:layout_height="130dp"
  23.                 android:orientation="vertical" >
  24.  
  25.                 <android.support.v4.view.ViewPager
  26.                     android:id="@+id/viewPager"
  27.                     android:layout_width="fill_parent"
  28.                     android:layout_height="wrap_content" />
  29.  
  30.                 <RelativeLayout
  31.                     android:layout_width="fill_parent"
  32.                     android:layout_height="wrap_content"
  33.                     android:orientation="vertical" >
  34.  
  35.                     <LinearLayout
  36.                         android:id="@+id/viewGroup"
  37.                         android:layout_width="fill_parent"
  38.                         android:layout_height="wrap_content"
  39.                         android:layout_alignParentBottom="true"
  40.                         android:layout_marginBottom="10dp"
  41.                         android:gravity="center_horizontal"
  42.                         android:orientation="horizontal" >
  43.                     </LinearLayout>
  44.                 </RelativeLayout>
  45.             </FrameLayout>
  46.         </LinearLayout>
  47.     </com.example.myassembly.VerticalScrollView>
  48.  
  49. </LinearLayout>

接下来是Fragment中的代码，关于一些具体的情况，还有使用的细节里面有着具体的代码注释。

  1.  import java.util.ArrayList;
  2.  import com.example.activity.DeptActivity;
  3.  import com.example.myproject.R;
  4.  import android.content.Intent;
  5.  import android.os.Bundle;
  6.  import android.support.v4.app.Fragment;
  7.  import android.support.v4.view.PagerAdapter;
  8.  import android.support.v4.view.ViewPager;
  9.  import android.support.v4.view.ViewPager.OnPageChangeListener;
  10.  import android.view.LayoutInflater;
  11.  import android.view.View;
  12.  import android.view.View.OnClickListener;
  13.  import android.view.ViewGroup;
  14.  import android.widget.ImageView;
  15.  import android.widget.LinearLayout;
  16.  /**
  17.   * 我的Fragment
  18.   * @author admin
  19.   *
  20.   */
  21.  public class MyFragment extends Fragment implements OnPageChangeListener {
  22.      private View rootView;
  23.      /****************************************** 滑动界面代码 声明下 *********************************************/
  24.      // 用于存放滑动viewpager底部导航栏(点点)
  25.      private ImageView[] tips;
  26.      private ViewPager viewPager;// 声明viewPager
  27.      // 装View数组
  28.      private ArrayList<View> viewContainter = new ArrayList<View>();
  29.      // 资源id
  30.      private int[] imgIdArray;
  31.      // 声明ViewPager变量
  32.      private View slide1;
  33.      private View slide2;
  34.      // 声明slide1中的变量
  35.      private LinearLayout dept_list;
  36.  
  37.      /****************************************** 滑动界面代码声明 上 *********************************************/
  38.      @Override
  39.      public View onCreateView(LayoutInflater inflater, ViewGroup container,
  40.              Bundle savedInstanceState) {
  41.          //Fragment中引入fragment的布局文件
  42.          if (null == rootView) {
  43.              rootView = inflater.inflate(R.layout.fragment_my, container, false);
  44.              initView(rootView);
  45.          }
  46.          return rootView;
  47.      }
  48.  
  49.      @Override
  50.      public void onStart() {
  51.          // 无论是activity中还是在Fragment中，对于另外一个布局文件中的子控件进行操作不能在onceate中进行操作。
  52.          InitSetPage();
  53.          // super.onStart();不能去掉，否则会出现错误
  54.          super.onStart();
  55.      }
  56.  
  57.      /**
  58.       * 获取子view中的控件，并绑定对应操作监听器
  59.       */
  60.      private void InitSetPage() {
  61.          // 获取slide1中的子控件
  62.          dept_list = (LinearLayout) slide1.findViewById(R.id.dept_list);
  63.          // 对slide1中的子控件slidezhuxue绑定监听器
  64.          dept_list.setOnClickListener(new OnClickListener() {
  65.  
  66.              @Override
  67.              public void onClick(View v) {
  68.                  // TODO Auto-generated method stub
  69.                  Intent intent = new Intent(getActivity(), DeptActivity.class);
  70.                  startActivity(intent);
  71.              }
  72.          });
  73.      }
  74.  
  75.      private void initView(View rootView) {
  76.          // 布局文件中的group用来放置viewPager的底部导航栏。
  77.          ViewGroup group = (ViewGroup) rootView.findViewById(R.id.viewGroup);
  78.          viewPager = (ViewPager) rootView.findViewById(R.id.viewPager);
  79.          // 载入资源
  80.          imgIdArray = new int[] { R.layout.slide1, R.layout.slide2 };
  81.          // 创建底部指示导航栏
  82.          tips = new ImageView[imgIdArray.length];
  83.          for (int i = 0; i < tips.length; i++) {
  84.              ImageView imageView = new ImageView(getActivity()
  85.                      .getApplicationContext());
  86.              LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
  87.                      10, 10);
  88.              params.setMargins(5, 0, 5, 0);
  89.              imageView.setLayoutParams(params);
  90.              if (i == 0) {
  91.                  imageView.setBackgroundResource(R.drawable.dot);
  92.              } else {
  93.                  imageView.setBackgroundResource(R.drawable.dot_focus);
  94.              }
  95.              tips[i] = imageView;
  96.              group.addView(imageView);
  97.          }
  98.          // 获取要引入的布局文件。在Fragment用getActivity().getApplicationContext()来代替Activity中的this或getApplication。
  99.          slide1 = LayoutInflater.from(getActivity().getApplicationContext())
  100.                  .inflate(R.layout.slide1, null);
  101.          slide2 = LayoutInflater.from(getActivity().getApplicationContext())
  102.                  .inflate(R.layout.slide2, null);
  103.          // 将布局文件装载到集合中
  104.          viewContainter.add(slide1);
  105.          viewContainter.add(slide2);
  106.          // 设置adapter
  107.          viewPager.setAdapter(new MyAdapter());
  108.          // 为viewPager设置监听
  109.          viewPager.setOnPageChangeListener(this);
  110.          // 设置viewpager显示的默认图片，进去之后直接是第一张图片
  111.          viewPager.setCurrentItem(0);
  112.      }
  113.  
  114.      /*
  115.       * 滑动界面PagerView的适配器
  116.       */
  117.      public class MyAdapter extends PagerAdapter {
  118.  
  119.          @Override
  120.          public int getCount() {
  121.              // TODO Auto-generated method stub
  122.              return viewContainter.size();
  123.          }
  124.  
  125.          @Override
  126.          public boolean isViewFromObject(View arg0, Object arg1) {
  127.              // TODO Auto-generated method stub
  128.              return arg0 == arg1;
  129.          }
  130.  
  131.          @Override
  132.          public int getItemPosition(Object object) {
  133.              // TODO Auto-generated method stub
  134.              return super.getItemPosition(object);
  135.          }
  136.  
  137.          @Override
  138.          public void destroyItem(ViewGroup container, int position, Object object) {
  139.              ((ViewPager) container).removeView(viewContainter.get(position));
  140.          }
  141.  
  142.          /**
  143.           * 载入图片进去，用当前的position 除以 图片数组长度取余数是关键
  144.           */
  145.          @Override
  146.          public Object instantiateItem(View container, int position) {
  147.              ((ViewPager) container).addView(viewContainter.get(position));
  148.              return viewContainter.get(position);
  149.          }
  150.  
  151.      }
  152.  
  153.      @Override
  154.      public void onPageScrollStateChanged(int arg0) {
  155.          // TODO Auto-generated method stub
  156.  
  157.      }
  158.  
  159.      @Override
  160.      public void onPageScrolled(int arg0, float arg1, int arg2) {
  161.          // TODO Auto-generated method stub
  162.  
  163.      }
  164.  
  165.      @Override
  166.      public void onPageSelected(int arg0) {
  167.          // TODO Auto-generated method stub
  168.          setImageBackground(arg0 % viewContainter.size());
  169.      }
  170.  
  171.      /**
  172.       * 设置选中的tip的背景
  173.       *
  174.       * @param selectItems
  175.       */
  176.      private void setImageBackground(int selectItems) {
  177.          for (int i = 0; i < tips.length; i++) {
  178.              if (i == selectItems) {
  179.                  tips[i].setBackgroundResource(R.drawable.dot);
  180.              } else {
  181.                  tips[i].setBackgroundResource(R.drawable.dot_focus);
  182.              }
  183.          }
  184.      }
  185.  }

通过上面的代码即可实现界面的滑动，有一点必须要注意：在对子菜单中的控件进行点击操作时一定要在onstart()方法中进行同时super.onStart()；不可省略，否则程序将会崩溃。这一点要特别注意，关于这部分源码稍后会上传CSDN，源码地址稍后补充，不过如果上面的代码看懂了无需源码即可实现。

Android开发之利用ViewPager实现在Activity或Fragment中引入别的布局文件实现滑动并进行页面跳转的更多相关文章

  1. Android开发之利用ViewPager实现页面的切换(仿微信、QQ)

    这里利用ViewPager实现页面的滑动,下面直接上代码: 1.首先写一个Activity,然后将要滑动的Fragment镶嵌到写好的Activity中. Activity的布局文件:activity ...

  2. Android开发之利用SQLite进行数据存储

    Android开发之利用SQLite进行数据存储 Android开发之利用SQLite进行数据存储 SQLite数据库简单介绍 Android中怎样使用SQLite 1 创建SQLiteOpenHel ...

  3. Android开发艺术探索——第二章：IPC机制（中）

    Android开发艺术探索--第二章:IPC机制(中) 好的,我们继续来了解IPC机制,在上篇我们可能就是把理论的知识写完了,然后现在基本上是可以实战了. 一.Android中的IPC方式 本节我们开 ...

  4. Android技巧分享——如何用电脑下载在Google play中应用的apk文件

    [Android技巧分享系列] 1.Android技巧分享——让官方模拟器和genymotion虚拟机飞起来 2.Android技巧分享——如何用电脑下载在Google play中应用的apk文件 G ...

  5. Android开发艺术探索读书笔记——01 Activity的生命周期

    http://www.cnblogs.com/csonezp/p/5121142.html 新买了一本书,<Android开发艺术探索>.这本书算是一本进阶书籍,适合有一定安卓开发基础,做 ...

  6. Android开发实战之ViewPager的轮播

    在安卓开发的许多控件中,如果你没有使用过ViewPager,就不能算是一个安卓开发工程师,在本篇博文中,我会总结ViewPager的使用方法, 以及一些开发中的拓展.希望本篇博文对你的学习和工作有所帮 ...

  7. Android开发 如何最优的在Activity里释放资源

    前言 当前你已经入门Android开发,开始关注深入的问题,你就会碰到一个Android开发阶段经常碰到的问题,那就是内存泄漏. 其实大多数Android的内存泄漏都是因为activity里的资源释放 ...

  8. Android开发UI之ViewPager及PagerAdapter

    ViewPager,官网链接--http://developer.android.com/reference/android/support/v4/view/ViewPager.html ViewPa ...

  9. Android开发艺术探索（一）——Activity的生命周期和启动模式

    Activity的生命周期和启动模式 生命周期有? 1.典型情况下的生命周期—>指有用户参与的情况下,Activity所经过的生命周期改变 2.异常情况下的生命周期—>指Activity被 ...

随机推荐

  1. jQuery中的end()方法

    定义和用法 end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态. 以上是官方说法,比较难理解. 还是用一个例子来说明 <!DOCTYPE html> <h ...

  2. 推荐一款好用并且免费的markdown软件 Typora

    Typora 的linux 安装步骤 sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys BA300B7755AFCFAE su ...

  3. java的Timer和TimerTask

    java中Timer类使用的方法是如下的: Timer timer = new Timer(); timer.schedule(new TimerTask() { public void run() ...

  4. python中的全局变量和局部变量（转）

    python中,对于变量作用域的规定有些不一样. 在诸如C/C++.java等编程语言中,默认在函数的内部是能够直接訪问在函数外定义的全局变量的,可是这一点在python中就会有问题.以下是一个样例. ...

  5. go module 命令

    项目目录下,执行以下命令初始化 go mod init 执行以下命令会自动分析项目里的依赖关系同步到go.mod文件中,同时创建go.sum文件 go mod tidy 以上的管理依赖管理操作,所以依 ...

  6. docker run option

    Usage: docker run [OPTIONS] IMAGE [COMMAND] [ARG...] Run a command in a new container Options: --add ...

  7. SVM参数解析

    一.Opencv中的核函数定义(4种): 1.CvSVM::LINEAR : 线性内核,没有任何向映射至高维空间,线性区分(或回归)在原始特点空间中被完成,这是最快的选择. 2.CvSVM::POLY ...

  8. mongo的csv文件参考

    https://blog.csdn.net/u012318074/article/details/77713228

  9. android通过命令行安装sdk

    在linux下没有界面化的安装sdk方式,所以需要通过下载zip包或命令行安装   一.通过tools下的android安装 1.进入到android工具 cd $ANDROID_HOME/tools ...

  10. ss源码学习--从协议建立到完成一次代理请求

    上一次介绍了ss源码中各个事件处理函数完成的工作,这次具体分析一下协议的建立以及请求数据的传输过程. 因为ss的local和server共用一个类以及一系列的事件处理函数,所以看起来稍显复杂.下面来将 ...