Android开源框架ViewPageIndicator和ViewPager实现Tab导航-阿里云开发者社区

开发者社区> 无名公子> 正文

Android开源框架ViewPageIndicator和ViewPager实现Tab导航

简介:
+关注继续查看

前言:

    关于使用ViewPageIndicator和ViewPager实现Tab导航,在开发社区里已经有一堆的博客对其进行了介绍,如果我还在这里写如何去实现,那简直就是老生常谈,毫无新鲜感,而且,我也不认为自己对ViewPageIndicator的理解会比别人好,毕竟我也是看着大神的帖子,在学习实践着。

    那我还写这个有啥意义呢?其实么,就是想在这里记录下,在使用ViewPageIndicator和ViewPager实现Tab导航时,大家有可能会遇到的坑。这个坑,需要我们开发时尽量去避免的。

    啥?你问我为啥子知道有这些坑?

    因为我刚刚遇到过,刚刚解决了,所以来此分享经验啦!


一、推荐博客

    在介绍具体实现的代码之前,我先介绍两篇博客呗,毕竟我就是根据他们写的来学习的。第一篇《Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签》这篇博客对如何实现tab已经介绍的非常详细了,包括如何去自定义tab样式,请学习膜拜吧。。。如果你学习能力较差,那好吧,在慕课网航有个教学视频,这可是鸿翔大神录制的哦,4-1 ViewPagerIndicator与ViewPager实现Tab,如果你看了视频还不会,那我,呵呵呵。。。


二、如何在Android Studio中导入ViewPageIndicator

    看过之前我推荐博客和视频的人会问,在Eclipse中,我们直接引入ViewPageIndicator项目,再把就好了android-support-v4.jar 包进行下处理就好了。 那,如何在Android Studio中导入ViewPageIndicator项目呢?

    好,我来告诉大家,请看下图:


    看到了吧,我们仅需要在此处搜索com.inkapplications.viewpageindicator,选中,点击OK,gradle会自动帮我把改工程加载进来的。

    让我们看下子导入后,源码在哪了:


    当你需要修改资源文件的时候,可以直接在res目录下的资源文件中进行修改,是不是很方便!!!

    此刻有一点要记住,因为你改项目中已经引入了android-support-v4,所以你无需再引入其它的v4包,切记切记!!!


三、实现Tab导航

3.1 主页面布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/tab_page_indicator"
        android:layout_width="fill_parent"
        android:layout_height="60dp" />

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

</LinearLayout>
 

3.2 定义ViewPager要显示的Fragment 

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

import com.lidroid.xutils.ViewUtils;

public class FragmentStudy extends Fragment {

    private View view = null;

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

        if(view==null){
            view = inflater.inflate(R.layout.fragment_study, container, false);
        }

        ViewUtils.inject(this, view);

        return view;
    }
}
fragment_study.xml文件:

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

    <TextView
        android:id="@+id/text_name"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="无缘"
        android:textSize="25sp" />

</LinearLayout>

 

3.3 定义ViewPager的Adapter

public class ProjectPagerAdapter extends FragmentPagerAdapter {

    private static String[] titles = {"全部", "计划中", "进行中", "已完成"};

    public ProjectPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        Bundle bundle = null;
        switch (position) {
            case 0:
                fragment = new FragmentStudy();
                bundle = new Bundle();
                bundle.putInt("pos", 0);
                fragment.setArguments(bundle);
                break;
            case 1:
                fragment = new FragmentStudy();
                bundle = new Bundle();
                bundle.putInt("pos", 1);
                fragment.setArguments(bundle);
                break;
            case 2:
                fragment = new FragmentStudy();
                bundle = new Bundle();
                bundle.putInt("pos", 2);
                fragment.setArguments(bundle);
                break;
            case 3:
                fragment = new FragmentStudy();
                bundle = new Bundle();
                bundle.putInt("pos", 3);
                fragment.setArguments(bundle);
                break;
        }
        return fragment;
    }

    @Override
    public int getCount() {
        return titles.length;
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}


3.4 设置ViewPageIndicator和ViewPager

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.ViewInject;
import com.viewpagerindicator.TabPageIndicator;


public class MainActivity extends FragmentActivity {


    @ViewInject(R.id.tab_page_indicator)
    private TabPageIndicator tabPageIndicator;

    @ViewInject(R.id.study_viewpager)
    private ViewPager studyViewpager;

    private ProjectPagerAdapter mAdatpter;

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

        mAdatpter = new ProjectPagerAdapter(getSupportFragmentManager());// 此处,如果不是继承的FragmentActivity,而是继承的Fragment,则参数应该传入getChildFragmentManager()

        studyViewpager.setAdapter(mAdatpter);

        tabPageIndicator.setViewPager(studyViewpager);
    }
}


这样,一个基本的顶部导航Tab就出来了,接下来,我们还可以定义tab的样式,在style.xml文件中,我们添加:

<!-- 去掉tab顶部的黑边 -->
    <style name="no_title" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowContentOverlay">@null</item>

    </style>

    <style name="MyTheme" parent="no_title">
        <item name="vpiTabPageIndicatorStyle">@style/MyWidget.TabPageIndicator</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:animationDuration">5000</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="MyWidget.TabPageIndicator" parent="Widget">
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/vpi__tab_indicator</item>
        <item name="android:paddingLeft">22dip</item>
        <item name="android:paddingRight">22dip</item>
        <item name="android:paddingTop">1dp</item>
        <item name="android:paddingBottom">1dp</item>
        <item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>
        <item name="android:textSize">14sp</item>
        <item name="android:maxLines">1</item>
    </style>

    <style name="MyTextAppearance.TabPageIndicator" parent="Widget">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">#2c3e50</item>
    </style>

样式定义好之后,只需要为Activity配置该theme即可:

 <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/MyTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
</activity>
好了,快来看下效果:


            怎么样?开心了吧,你想要的tab终于出来了,你满足了么?

    请千万不要满足,因为这个Tab还不稳定,它还有漏洞,下面我们来看下。


四、Tab导航中的坑和解决方案

4.1 Fragment二次加载onCreateView方法时会报异常:java.lang.IllegalStateException

    对于之前实现的tab导航,当我们来回切换tab时,会发现,系统会崩溃:


    错误意思是,当切换tab回到已经加载过的Fragment时,系统不允许之前的Fragment在还未移除的情况下,再次加载该View,一个View只能有一个父控件。请仔细看我们FragmentStudy的代码:

if(view==null){
    view = inflater.inflate(R.layout.fragment_study, container, false);
}

    我们为了保证只有一个实例,才会只对其进行是否为null的判断,只进行了一次初始化。

    那该如何解决呢?

    有人说好办啊,把判断view==null直接去掉不就好了。。。额,确实好了,但是你有没有考虑每次都会创建新的view,浪费资源性能呢?   

    那如何是好呢?别急,有办法,让我们修改下代码:

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

import com.lidroid.xutils.ViewUtils;

public class FragmentStudy extends Fragment {

    private View view = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);

//        pos = getArguments().getInt("pos");
//        System.out.println(pos);

        LayoutInflater inflater = getActivity().getLayoutInflater();
        view = inflater.inflate(R.layout.fragment_study, (ViewGroup) getActivity().findViewById(R.id.study_viewpager), false);
    }

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

//        if(view==null){
//            view = inflater.inflate(R.layout.fragment_study, container, false);
//        }
        // 这句话必须加
        ViewGroup p = (ViewGroup) view.getParent();
        if (p != null) {
            p.removeAllViewsInLayout();
        }

        ViewUtils.inject(this, view);

        return view;
    }
}

                 有没有发现啥? 没错,我们把加载布局文件创建View的过程,放在了onCreate()方法中,即只在第一次创建该Fragment时加载布局,之后切换时,都不会再加载布局了。

    美哉啊!!!

    在运行下该项目,发现是不是不会再崩溃了?!


4.2 ViewPager预加载Fragment造成的重复请求问题

    不知道大家知不知道,ViewPager有个功能,也被称为ViewPager的一个好处,就是它可以预加载Fragment。可是如果我在每个Fragment中都有网络请求,岂不是加载一个Fragment发送了多个请求?这种体验可是不好的。有没有办法改呢?

    有人说,那不简单啊,设置ViewPager不去预加载不就好了!

    对,就这么简单,ViewPager确实提供了相应的方法,去设置预加载Fragment的数量:

    通过ViewPager的setOffscreenPageLimit(int pagenum)来设置,默认情况下参数是1,比如viewPager.setOffscreenPageLimit(2)会预加载2个页面,viewPager.setOffscreenPageLimit(0)会不预加载页面。

    可是,尼玛,操蛋的事来了,我尝试了,viewPager.setOffscreenPageLimit(0)这个方法根本没有用啊,真让我抓狂。

    该咋办?

    google了一下,还真让我找到了方法,重写Fragment的setUserVisibleHint方法:

// 使用fragment+viewpage时会发现设置setOffscreenPageLimit(0)不预加载页面不管用,
// 可以用下边的方法代替,下边的方法是在子页面(也就是fragment中)复写下边的方法,根据fragment是否可见来判断是否是当前页面,然后执行网络加载数据
    @Override
    public void setUserVisibleHint(boolean isVisibleToUser) {
        super.setUserVisibleHint(isVisibleToUser);
        if (isVisibleToUser) {
            //fragment可见时执行加载数据或者进度条等
            qryDataFromServer();
        } else {
            //不可见时不执行操作
        }
    }

    private void qryDataFromServer() {
        System.out.println("第"+pos + "个Fragment is qryDataFromServer");
    }

来,我们运行下项目,切换Tab,看下输出:

I/System.out﹕ 第0个Fragment is qryDataFromServer
I/System.out﹕ 第1个Fragment is qryDataFromServer
I/System.out﹕ 第2个Fragment is qryDataFromServer
I/System.out﹕ 第3个Fragment is qryDataFromServer
I/System.out﹕ 第2个Fragment is qryDataFromServer
I/System.out﹕ 第1个Fragment is qryDataFromServer
I/System.out﹕ 第0个Fragment is qryDataFromServer

这就对了,切换到哪个Fragment,才去进行网络请求,而不是一次预加载多个网络请求。

总结:

    相信看到这里,大家已经能够掌握如何使用TabPageIndicator和ViewPager开发一个比较完美的顶部导航栏了,其实,TabPageIndicator使用并不难,最重要的还是去避免上文中提到的几个坑,这样才会有较快的开发效率!


源码下载地址(免费): http://download.csdn.net/detail/zuiwuyuan/9039533

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
数据同步框架MS Sync Framework - IDE快速开发支持Local Database Cache
数据同步框架MS Sync Framework [术语、例子、参考资料、Tips] http://www.cnblogs.com/2018/archive/2011/02/22/1961654.html  数据同步框架MS Sync Framework-不同场景使用例子和简要分析 http://www.cnblogs.com/2018/archive/2011/02/23/1961657.html 以上两篇文章对框架的基础有了描述,通过IDE的提供Local Database Cache可以快速的实现一个常用的同步应用。
732 0
android orm持久层框架
<div class="dp-highlighter" id="" style="font-family:Monaco,'DejaVu Sans Mono','Bitstream Vera Sans Mono',Consolas,'Courier New',monospace; width:679px; overflow:auto; margin-left:9px; padding:1px
1436 0
Android Java 框架基础[知识点汇总]
学习android的过程中,把整个框架的基础结构牢记很重要,特此摘录了一些这个框架的一些基础知识,在使用的过程中按照这个框架学习,事半功倍。 开发过程中参考JDK的文档和android的sdk文档可以清楚遇到的很多问题,遇到问题是现在这两个文档中一般都能找到原因(安装sdk的文档参考http://www.
757 0
开源最佳实践:Android平台页面路由框架ARouter
为了更好地让开发者们更加深入了解阿里开源,阿里云云栖社区在3月1号了举办“阿里开源项目最佳实践”在线技术峰会,直播讲述了当前阿里新兴和经典开源项目实战经验以及背后的开发思路,在本次在线技术峰会上,阿里云资深开发工程师刘志龙分享了Android平台页面路由框架ARouter的技术方案、解决的问题以及在实际场景中的最佳实践。
43325 0
intellij idea搭建ssh开发框架之绑定数据源
原文: intellij idea搭建ssh开发框架之绑定数据源 在intellij idea中绑定数据源并生成hibernate实体对象。
1232 0
Apache再次接受阿里开源产品捐赠:移动开发框架Weex进入孵化
12月15日,阿里巴巴宣布将移动开源项目Weex捐赠给Apache基金会开始孵化,Weex有望成为中国移动领域的首个Apache顶级项目,这意味着中国移动技术开始反哺世界。据悉,这也是继JStorm、RocketMQ之后,阿里向Apache捐赠的第三个项目。
9709 0
+关注
122
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载