多种多样的App主界面Tab实现方法(四):ViewPagerIndicator实现tab功能
来源:互联网 发布:淘宝网男士羽绒服2016 编辑:程序博客网 时间:2024/05/23 18:33
ViewPagerIndicator是发布在GitHub上的一款开源ViewPager指针项目,在使用ViewPager的时候能够指示ViewPager所在的位置,实际上就是ViewPager的分页指示器,比如很多应用的指引界面,下面的小圆点,还有一些应用上面的Tab等等,ViewPageIndicator都能很好的实现。下面我们就用它来实现顶部tab功能。
先上效果图:
一、下载ViewPagerIndicator源代码。资源链接:http://download.csdn.net/detail/chunxiao123ouc/9469980
解压文件会得到下图的目录:
二、首先我们将library这个文件夹拷贝到你eclipse的工作盘中,因为我们要把它作为依赖工程,所以必须与你自己建的工程在同一个盘中。
首先我们将library这个文件夹拷贝到你eclipse的工作盘中,因为我们要把它作为依赖工程,所以必须与你自己建的工程在同一个盘中。
首先我们将library这个文件夹拷贝到你eclipse的工作盘中,因为我们要把它作为依赖工程,所以必须与你自己建的工程在同一个盘中。
重要的内容说三遍!
三、然后在eclipse中导入library;
四、再然后新建一个android工程tab04,把library配置为tab04的依赖工程,具体步骤如下:
1.新建android工程tab04,并将libs文件夹下的V4jar包删掉,因为library中已经包含这个包了,如果不一样,会有冲突,所以删掉一个。
2.右键tab04工程,选择properties-->android-->add,选择library
五、fragment的实现
先定义一个fragment的布局frag.xml,然后定义一个Fragment实例绑定frag.xml,然后定义一个fragment的适配器TabAdapter继承自FragmentPagerAdapter。
frag.xml
<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="#ffffff" android:layout_height="match_parent" > <TextView android:id="@+id/id_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textStyle="bold" android:textSize="22sp" android:text="helloworld" /></RelativeLayout></span>
TabFragment.java
<span style="font-size:14px;">package com.example.tab04;import android.annotation.SuppressLint;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;@SuppressLint("ValidFragment")public class TabFragment extends Fragment{private int pos;@SuppressLint("ValidFragment")public TabFragment(int pos){this.pos = pos;}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){View view = inflater.inflate(R.layout.frag, container, false);TextView tv = (TextView) view.findViewById(R.id.id_tv);tv.setText(TabAdapter.TITLES[pos]);return view;}}</span>
TabAdapter.java
<span style="font-size:14px;">package com.example.tab04;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;public class TabAdapter extends FragmentPagerAdapter{public static String[] TITLES = new String[]{ "课程", "问答", "求课", "学习", "计划" };public TabAdapter(FragmentManager fm){super(fm);}@Overridepublic Fragment getItem(int arg0){TabFragment fragment = new TabFragment(arg0);return fragment;}@Overridepublic int getCount(){return TITLES.length;}@Overridepublic CharSequence getPageTitle(int position){return TITLES[position];}}</span>
六、主页面的实现
activity_main.xml
<span style="font-size:14px;"><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:background="#C5DAED" android:orientation="vertical" > <include layout="@layout/top" /> <com.viewpagerindicator.TabPageIndicator android:id="@+id/id_indicator" android:layout_width="fill_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="fill_parent" android:layout_height="fill_parent" > </android.support.v4.view.ViewPager></LinearLayout></span>MainActivity.java
<span style="font-size:14px;">package com.example.tab04;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;import android.view.Window;import com.viewpagerindicator.TabPageIndicator;public class MainActivity extends FragmentActivity{private ViewPager mViewPager;private TabPageIndicator mTabPageIndicator;private TabAdapter mAdapter ;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initView();}private void initView(){mViewPager = (ViewPager) findViewById(R.id.id_viewpager);mTabPageIndicator = (TabPageIndicator) findViewById(R.id.id_indicator);mAdapter = new TabAdapter(getSupportFragmentManager());mViewPager.setAdapter(mAdapter);mTabPageIndicator.setViewPager(mViewPager, 0);}}</span>
这里只用了一个fragment页面实现了五个,实际应用中是需要都创建的,把其余四个都创建好之后,只需修改一下适配器中的getItem方法,去掉TabFragment的构造方法就可以。下面举个例子,本文中就不探讨了。
<span style="font-size:14px;">@Overridepublic Fragment getItem(int arg0){Fragment fragment = null;switch(arg0){case 0:fragment=new TabFragmentZixun();break;case 1:fragment=new TabFragmentRedian();break;case 2:fragment=new TabFragmentBoke();break;case 3:fragment=new TabFragmentTuijian();break;default:break;}return fragment;}</span>
七、主题设置
前面都完成了,还是没有达到效果,是因为没有设置主题。在styles.xml中添加如下代码:
<style name="MyTheme" 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>并且在AndroidManifest.xml中修改主题
android:theme="@style/MyTheme"
Tab04源代码下载(不包含ViewPagerIndicator的代码,请在前面的链接下载):http://download.csdn.net/detail/chunxiao123ouc/9469988
- 多种多样的App主界面Tab实现方法(四):ViewPagerIndicator实现tab功能
- 多种多样的App主界面Tab实现方法——利用ViewPagerIndicator+ViewPager实现Tab
- 多种多样的App主界面Tab实现方法
- 多种多样的App主界面TAB实现方法
- 多种多样的App主界面Tab实现方法——单独利用ViewPager实现Tab
- 多种多样的App主界面Tab实现方法——单独利用Fragment实现Tab
- 多种多样的App主界面Tab实现方法——利用ViewPager+FragmentPagerAdapter实现Tab
- 多种多样APP主界面Tab实现
- 多种多样的App主界面Tab实现方法(导航贴)
- 多种多样的App主界面Tab实现方法(一):Viewpager
- 多种多样的App主界面Tab实现方法(二):Fragment
- 多种多样的App主界面Tab实现方法(三):Fragment+ViewPager
- Android ViewPager+ViewPagerIndicator实现Tab主界面
- App主界面Tab的四种实现方法(上)
- App主界面Tab的四种实现方法(下)
- App主界面Tab实现方法
- App主界面Tab实现方法
- App主界面Tab四个实现方法
- 与LSGO一起学“第1章 初识C++(1.4学习C++之前需要先学C吗?)”
- android api 测试demo地址
- Linux命令查询网址
- 用pulse generator产生脉冲信号
- /proc/[pid]/下的maps、status、stat、statm
- 多种多样的App主界面Tab实现方法(四):ViewPagerIndicator实现tab功能
- 与LSGO一起学“第1章 初识C++(1.5 C++与其他语言的区别)”
- fusioncharts动画图表
- codeDOM及动态生成类
- Android 录音与播放
- 与LSGO一起学“第1章 初识C++(1.6Visual Studio 2010编译器)”
- GitHub上7个非常值得学习的iOS开源项目
- 编程能力提高--------ACM/OJ机试快速入门篇
- JS实现固定表头与固定列名方法