TabPagerIndicator和viewpager实现tab的切换(慕课网笔记)
来源:互联网 发布:硬盘ntfs 可复制 mac 编辑:程序博客网 时间:2024/05/16 17:00
使用第三方的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
- TabPagerIndicator和viewpager实现tab的切换(慕课网笔记)
- 自定义TabPagerIndicator的实现
- Viewpager和fragment和自定义的底部Tab实现切换效果
- tab头部滑动切换,TabLayout和ViewPager实现
- Tab+ViewPager的实现
- Android TabLayout、ViewPager实现顶部和底部Tab导航 点击滑动切换Tab页面
- FragmentPagerAdapter+ViewPager实现Tab切换效果
- ViewPager实现简单Tab切换效果
- 实现滚动tab切换fragment + viewpager
- 用ViewPager实现微信tab切换
- 使用ViewPager和Fragment同时实现点击底部Tab切换和手势滑动切换Fragment
- 处女男学Android(十一)---Gallery、ViewPager和ViewPager+Fragment实现的Tab导航
- ViewPager和 Fragment 实现的页面切换
- Android ViewPager实现滑动切换页面+底部tab点击切换页面(类微信首页)
- 微信小程序实现滑动tab切换和点击tab切换并显示相应的数据(附源代码)
- android ViewPager实现App主界面Tab菜单页面切换和点击事件
- 使用 RadioGroup和viewPager实现可滑动的tab
- TableLayout和Viewpager实现切换
- Eclipse/MyEclipse中SVN代理使用及设置SVN代理方法详解
- Xcode 基础快捷键
- 自定义Navigation转场动画
- LayoutInflater的使用
- windows C++ 创建快捷方式API, 100% 能运行
- TabPagerIndicator和viewpager实现tab的切换(慕课网笔记)
- [机器学习]K近邻算法及其应用--WEKA工具
- GridView 常用属性
- Leetcode:FirstBadVersion
- windows下编译和配置boost
- 3.OC中三种线程方式总结
- svn命令(linux)
- opendir、readdir、rewinddir、closedir、telldir、seekdir、stat函数和DIR、dirent、stat结构体详解
- 时间同步