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

来源：互联网发布：淘宝精品橱窗怎么设置编辑：程序博客网时间：2024/05/17 08:18

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

一、普通的ViewPager

效果图
普通的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;}@Overridepublic Fragment getItem(int position) {    return fragmentList.get(position);}@Overridepublic 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);

2 0