Android界面布局大集合(Fragment+ViewPager)

前言：对一个Android应用来说，界面布局是非常重要的，但是现在的一些资料都没有对布局的系统的整理，一些博客写的东西也太零散，所以我就整理了一下这些界面的用法。如果有不对的地方请读者们指出，我一定及时改正。

一、普通的ViewPager

效果图

1.MainActivity布局文件

<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="com.tzy.layoutdemo.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="300dp"/>

</LinearLayout>

2.MainActivity里面

2.1把布局的View加到List里面

LayoutInflater inflater = getLayoutInflater();
view1 = inflater.inflate(R.layout.view_01,null);
view2 = inflater.inflate(R.layout.view_02,null);
view3 = inflater.inflate(R.layout.view_03,null);

mViewList = new ArrayList<>();
mViewList.add(view1);
mViewList.add(view2);
mViewList.add(view3);

2.2继承PagerAdapter，把viewList作为参数传进去，也可以直接用匿名内部类的形式

这里需要重写的方法如下：

• getCount 返回当前有效视图的个数
  ①把当前页面增加到ViewPager里面
  ②并且返回一个Object，这个Object是标识当前页面的一个对象，按照官方文档的解释，ViewPager把每个视图通过键联系起来，键可以是当前页面的View,也可以是positon，或者可以代表当前页面的任意值
• instantiateItem 增加视图到ViewPager
• destroyItem 把ViewPager里面的视图移除
• isViewFromObject 参数object代表instantiateItem返回的键和页面的视图是否对应view == object (object表示的是返回的View)

选择性重写的方法：getPageTitle() 方法可以通过position设置标题

PagerAdapter pagerAdapter = new PagerAdapter() {

            //返回当前有效视图的个数
            @Override public int getCount() {
                return mViewList.size();
            }

            /*功能：该函数用来判断instantiateItem(ViewGroup, int)函数所返回来的Key 与一个页面视图是否是代表的同一个视图(即它俩是否是对应的，对应的表示同一个View)*/
            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(mViewList.get(position));
                //将当前页面本身的View作为key 也可以是代表当前页面的任意值，比如position
                return mViewList.get(position);
            }

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

        };
        mViewPager.setAdapter(pagerAdapter);

二、Fragment+ViewPager

效果图是仿原版微信的一个界面

1.布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#eee" tools:context=".ui.activity.MainActivity" android:orientation="vertical">

    <LinearLayout  android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">

        //这里可以直接用TextView来实现
        <LinearLayout  android:id="@+id/id_tab1_chat" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:gravity="center" android:padding="10dp">

            <TextView  android:id="@+id/id_chat" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="聊天" android:textColor="@color/colorPrimary" android:textSize="15sp"/>

        </LinearLayout>

        <LinearLayout  android:id="@+id/id_tab1_find" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:padding="10dp" android:gravity="center">

            <TextView  android:id="@+id/id_find" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="发现" android:textSize="15sp"/>

        </LinearLayout>

        <LinearLayout  android:id="@+id/id_tab1_contact" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:padding="10dp" android:gravity="center">

            <TextView  android:id="@+id/id_contact" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="通讯录" android:textSize="15sp"/>

        </LinearLayout>

    </LinearLayout>

    <!--这个ImageView是蓝色指示器，宽度会在代码里面重新设定为屏幕的 1/3，高度我这里设置的是2dp，你也可以自行设定高度 -->
    <ImageView  android:id="@+id/id_tab_line" android:layout_width="100dp" android:layout_height="2dp" android:background="@color/colorPrimary"/>

    <android.support.v4.view.ViewPager  android:id="@+id/id_viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/>

</LinearLayout>

2.Adapter

在Fragment个数较少的时候选用FragmentPagerAdapter 个数较多时选用FragmentStatePagerAdapter
注：导入的时候最好都是的v4包的Fragment
相关文章：Android– FragmentStatePagerAdapter分页

需要重写的方法：

• 构造方法把fragmentList作为参数传进去
• getItem 返回当前Fragment

• getCount 返回Fragment的数量

  private List<Fragment> fragmentList;
  
  public FragmentAdapter(FragmentManager fm,List<Fragment> fragmentList) {
      super(fm);
      this.fragmentList = fragmentList;
  }
  
  @Override
  public Fragment getItem(int position) {
      return fragmentList.get(position);
  }
  
  @Override
  public int getCount() {
      return fragmentList.size();
  }

  3.MainActivity

  3.1初始化TabLine宽度为屏幕的1/3

  private void initTabLine() {
      DisplayMetrics outMetrics = new DisplayMetrics();
  getWindow().getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
      screenWidth = outMetrics.widthPixels;
      LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLine.getLayoutParams();
      lp.width = screenWidth/3;
      mTabLine.setLayoutParams(lp);
  }

  3.2得到Fragment的List

  List<Fragment> fragments = new ArrayList<>();
  fragments.add(new ChatFragment());
  fragments.add(new FindFragment());
  fragments.add(new ContactFragment());

  3.3滑动的时候指示器的位置跟着改变

  public class TabOnPageChangeListener implements ViewPager.OnPageChangeListener {
  
      /** * @param position 当前被展示的页面的index * @param positionOffset 相对于这个position的offset，值的范围[0, 1) * @param positionOffsetPixels positionOffset的像素值 */
      @Override
      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
          /*动态设置View的LayoutParams实现ImageView的滑动，由于positionOffset只是一个[0,1) 相当于比例，需要乘以屏幕宽度的1/3 例如： 滑到屏幕第一个位置的1/2处，假设屏幕宽度1/3为2 那么positionOffset为0.5 而且是相对于当前position的offset 得到的结果应该为(0.5+0)*2=1 刚好leftMargin为1 */
          LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLine.getLayoutParams();
          lp.leftMargin = (int) ((positionOffset + position) * screenWidth / 3);
          mTabLine.setLayoutParams(lp);
      }
  
      /*设置选择TextView的时候改变颜色，必须reset颜色一次 否则会造成颜色改变之后，无法变回原来的颜色*/
      @Override
      public void onPageSelected(int position) {
          resetTextView();
          switch (position) {
               case 0:
   chat.setTextColor(res.getColor(R.color.colorPrimary));
                  break;
              case 1:
  find.setTextColor(res.getColor(R.color.colorPrimary));
                  break;
              case 2:
  contact.setTextColor(res.getColor(R.color.colorPrimary));
                  break;
          }
  
      }
  
      private void resetTextView() {
      chat.setTextColor(res.getColor(R.color.black));
      find.setTextColor(res.getColor(R.color.black));
  contact.setTextColor(res.getColor(R.color.black));
      }
  
      @Override
      public void onPageScrollStateChanged(int state) {
  
      }
  }

  3.4设置Adapter和addOnPageChangeListener

  注：v4包的Fragment是getSupportFragmentManager()而不是getFragmentManager()

  mAdapter=newFragmentAdapter(getSupportFragmentManager(), fragments);
  mViewPager.setAdapter(mAdapter);
  mViewPager.addOnPageChangeListener(new TabOnPageChangeListener());

三、TabLayout+Fragment+ViewPager

效果实现和第二点一样的界面

1.布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eeeeee"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/course_app_bar"
        android:layout_width="match_parent"     
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.TabLayout
            android:id="@+id/tab_course_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorPrimary"
            app:tabMode="scrollable" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
         android:id="@+id/tab_course_viewpager"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />

</LinearLayout>

2.TabLayout和ViewPager双向绑定

        mAdapter = new FragmentAdapter(getSupportFragmentManager(), fragmentList);
        pager.setAdapter(mAdapter);
        //ViewPager和TabLayout绑定
        pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        //TabLayout和ViewPager绑定
        tabLayout.setupWithViewPager(pager);