TabPagerIndicator和viewpager实现tab的切换（慕课网笔记）

最新推荐文章于 2021-05-26 19:27:47 发布

hnyzwtf

最新推荐文章于 2021-05-26 19:27:47 发布

阅读量7.6k

点赞数 5

分类专栏： Android 文章标签： android

本文链接：https://blog.csdn.net/hnyzwtf/article/details/50324647

版权

Android 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

使用第三方的TabPageIndicator，viewpager,fragment，fragmentPagerAdapter实现顶部tab 导航栏的切换，效果图
这里写图片描述
1 顶部是一个布局文件，top.xml，中间的tab切换是一个TabPageIndicator，下面的内容区域是viewpager
准备文件：本文引用了第三方的库文件：ViewPagerIndicator。引入方法如下：
（1） github上搜索viewpagerIndicator: https://github.com/JakeWharton/ViewPagerIndicator
（2）下载zip包，解压，在eclipse中选择File->import->Existing Android Code Into Workspace->(注意只导入解压后文件夹里面的Library)。此处需要注意的是我们下载解压后的文件夹的放置路径最好和主项目路径一致，路径中尽量不要包含中文字符。
（3）导入后，右键导入的文件夹的目录选择Property->Android->勾选IsLibrary
（4）将导入的library文件夹下面的libs下的support-v4的jar包copy到主项目文件下的libs文件夹，覆盖现有的v4包，否则会报version mismatch
（6）右键主项目，property->Android->AddLibrary添加进来
（7） ctrl+shift+T试着将TabPageIndicator的class搜索出来，说明项目已经成功导入
2 布局文件
2.1 顶部布局的实现top.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="wrap_content"
    android:gravity="center_vertical"
    android:background="#58ACED"
    android:orientation="horizontal" >
    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/idx_logo"/>
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="imooc"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:textSize="20sp"
        android:layout_marginLeft="5dp"/>

</LinearLayout>

2.2 viewpager上面显示的内容用Fragment实现，其对应的布局文件为frag.xml，在这个例子中我们统一用一个简单的布局文件frag.xml来显示内容区域。实际应用中一般都是设置多个Fragment，然后添加到list中，可参考http://blog.csdn.net/hnyzwtf/article/details/50296013

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     >
    <TextView
        android:id="@+id/id_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="helloworld"
        android:textSize="20sp"
        android:layout_centerInParent="true"/>

</RelativeLayout>

2.3 主布局的实现activity_main.xml。在主布局中包含上述的top.xml和一个TabPageIndicator指示器用来显示切换不同的tab选项，一个viewpager用来显示内容区域。

<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">

   <include layout="@layout/top"/>
   <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/id_indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent">

    </com.viewpagerindicator.TabPageIndicator>
    <android.support.v4.view.ViewPager 
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>
</LinearLayout>

效果：
这里写图片描述
3 代码的实现
3.1 新建一个Fragment，即viewpager的数据源，也就是点击每个tab后显示的内容区域TabFragment.java继承自Fragment

package com.example.imooc_tab04;

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

//此类也是viewpager设置的适配器的数据源
public class TabFragment extends Fragment {
    private int position;
    public TabFragment(int position) {
        this.position = position;
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.frag, container, false);//引入对应的布局文件frag.xml
        TextView tv = (TextView) view.findViewById(R.id.id_tv);
        //设置一个位置变量，每次点击tab传入不同的tab位置以便textview上显示相应的标题
        tv.setText(TabAdapter.TITLES[position]);
        return view;
    }

}

3.2 新建一个viewpager的适配器TabAdapter.java继承自FragmentPagerAdapter

package com.example.imooc_tab04;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/*
 * viewpager的适配器
 * */
public class TabAdapter extends FragmentPagerAdapter {
    //定义显示在主界面5个tab上面的标题文字
    public static String[] TITLES = new String[]{"课程","问答","求课","学习","计划"};

    public TabAdapter(FragmentManager fm) {
        super(fm);

    }

    @Override
    public Fragment getItem(int arg0) {
        TabFragment fragment = new TabFragment(arg0);
        return fragment;
    }

    @Override
    public int getCount() {

        return TITLES.length;//返回标题,tab的个数
    }

    @Override
    public CharSequence getPageTitle(int position) {

        return TITLES[position];//返回不同的title标题
    }

}

3.3 MainActivity.java

package com.example.imooc_tab04;

import com.viewpagerindicator.TabPageIndicator;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.MenuItem;
import android.view.Window;

public class MainActivity extends FragmentActivity {
    private ViewPager mViewPager;
    private TabPageIndicator mTabPagerIndicator;//引入的第三方的library
    private TabAdapter mAdapter;//适配器

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {//初始化view
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        mTabPagerIndicator = (TabPageIndicator) findViewById(R.id.id_indicator);
        mAdapter = new TabAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mAdapter);//viewpager设置适配器
        mTabPagerIndicator.setViewPager(mViewPager, 0);//为切换tab功能的indicator设置viewpager

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

4 修改一下样式，vaules下的styles.xml中添加以下我们自定义的样式：MyAppTheme

<style name="MyAppTheme" parent="AppBaseTheme">
        <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">8dp</item>
        <item name="android:paddingBottom">8dp</item>
        <item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>
        <item name="android:textSize">16sp</item>
        <item name="android:maxLines">1</item>
    </style>

    <style name="MyTextAppearance.TabPageIndicator" parent="Widget">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@android:color/black</item>
    </style>

5 在AndroidManifest中引用MyAppTheme即可

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        **android:theme="@style/MyAppTheme"** >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

源码在这里：http://download.csdn.net/detail/hnyzwtf/9362207

hnyzwtf

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
TabPagerIndicator和viewpager实现tab的切换（慕课网笔记）

使用第三方的TabPageIndicator，viewpager,fragment，fragmentPagerAdapter实现顶部tab 导航栏的切换，效果图 1 顶部是一个布局文件，top.xml，中间的tab切换是一个TabPageIndicator，下面的内容区域是viewpager 准备文件：本文引用了第三方的库文件：ViewPagerIndicator。引入方法如下：（1）
复制链接

扫一扫