超简单的ViewPager导航栏联动实现--TabLayout
来源:互联网 发布:怎样用mysql创建数据库 编辑:程序博客网 时间:2024/06/06 07:51
效果如下:
实现这个效果非常的简单,就两个控件,一个TabLayout,一个ViewPager,主要通过TabLayout的setupWithViewPager()方法来使TabLayout和ViewPager联动
下面说说具体实现步骤。
1,TabLayout有自己的包,所以第一步是在build.gradle里面添加依赖包,具体代码是:
compile 'com.android.support:design:24.0.0'
然后同步下一就可以了
2,接下来就可以在布局文件里面使用了,布局文件代码如下:
<?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"> <android.support.design.widget.TabLayout android:id="@+id/main_tab" android:layout_width="match_parent" android:layout_height="50dp" /> <android.support.v4.view.ViewPager android:id="@+id/main_viewpager" android:layout_width="match_parent" android:layout_below="@+id/main_tab" android:layout_height="match_parent"/></RelativeLayout>
接下来就是在代码中实现具体逻辑了
关于TabLayout的代码就只有几行:
//设置标题 titleList = new ArrayList<>(); titleList.add("高圆圆"); titleList.add("江一燕"); titleList.add("佟丽娅"); mTab = (TabLayout) findViewById(R.id.main_tab); //设置tab的模式 mTab.setTabMode(TabLayout.MODE_FIXED); //添加tab选项卡 for (int i = 0; i < titleList.size(); i++) { mTab.addTab(mTab.newTab().setText(titleList.get(i))); } //把TabLayout和ViewPager关联起来 mTab.setupWithViewPager(mViewPager);
接下来就是编写ViewPager的逻辑:
我这里是在ViewPager里面放置图片,
//设置ViewPager里面也要显示的图片 mList = new ArrayList<>(); ImageView yuanYuan = new ImageView(this); ImageView yiYan = new ImageView(this); ImageView liYa = new ImageView(this); yuanYuan.setImageResource(R.mipmap.gaoyuanyuan); yiYan.setImageResource(R.mipmap.jiangyiyan); liYa.setImageResource(R.mipmap.tongliya); //设置图片显示全屏 yuanYuan.setScaleType(ImageView.ScaleType.FIT_XY); yiYan.setScaleType(ImageView.ScaleType.FIT_XY); liYa.setScaleType(ImageView.ScaleType.FIT_XY); mList.add(yuanYuan); mList.add(yiYan); mList.add(liYa);
然后就可以在实例化ViewPager的Adapter的时候通过构造方法传递过去使用了
mViewPager = (ViewPager) findViewById(R.id.main_viewpager);
//实例化adapter mAdapter = new MyViewPagerAdapter(mList,titleList); //给ViewPager绑定Adapter mViewPager.setAdapter(mAdapter);
接下来就是ViewPager的Adapter的编写:
package com.duanlian.tablayoutdemo.adapter;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import java.util.List;public class MyViewPagerAdapter extends PagerAdapter { private List<ImageView> list; private List<String> titleList; public MyViewPagerAdapter(List<ImageView> mList,List<String> titleList) { this.list = mList; this.titleList = titleList; } @Override public int getCount() { return list.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view==object; } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(list.get(position));//添加页卡 return list.get(position); } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(list.get(position));//删除页卡 } @Override public CharSequence getPageTitle(int position) { return titleList.get(position);//页卡标题 }}
顺便把MainActivity的整体代码都贴出来:
package com.duanlian.tablayoutdemo;import android.support.design.widget.TabLayout;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.Window;import android.widget.ImageView;import com.duanlian.tablayoutdemo.adapter.MyViewPagerAdapter;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity { private ViewPager mViewPager; private TabLayout mTab; private MyViewPagerAdapter mAdapter; private List<ImageView> mList; private List<String> titleList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } /** * 实例化控件 */ private void initView() { mViewPager = (ViewPager) findViewById(R.id.main_viewpager); //设置ViewPager里面也要显示的图片 mList = new ArrayList<>(); ImageView yuanYuan = new ImageView(this); ImageView yiYan = new ImageView(this); ImageView liYa = new ImageView(this); yuanYuan.setImageResource(R.mipmap.gaoyuanyuan); yiYan.setImageResource(R.mipmap.jiangyiyan); liYa.setImageResource(R.mipmap.tongliya); //设置图片显示全屏 yuanYuan.setScaleType(ImageView.ScaleType.FIT_XY); yiYan.setScaleType(ImageView.ScaleType.FIT_XY); liYa.setScaleType(ImageView.ScaleType.FIT_XY); mList.add(yuanYuan); mList.add(yiYan); mList.add(liYa); //设置标题 titleList = new ArrayList<>(); titleList.add("高圆圆"); titleList.add("江一燕"); titleList.add("佟丽娅"); mTab = (TabLayout) findViewById(R.id.main_tab); //设置tab的模式 mTab.setTabMode(TabLayout.MODE_FIXED); //添加tab选项卡 for (int i = 0; i < titleList.size(); i++) { mTab.addTab(mTab.newTab().setText(titleList.get(i))); } //把TabLayout和ViewPager关联起来 mTab.setupWithViewPager(mViewPager); //实例化adapter mAdapter = new MyViewPagerAdapter(mList,titleList); //给ViewPager绑定Adapter mViewPager.setAdapter(mAdapter); }}
我还在AndroidManifest里面把Title去掉了,去掉会显得好看一点
android:theme="@style/Theme.Design.NoActionBar"
到此结束,是不是很简单demo地址:http://download.csdn.net/detail/dl10210950/9607981
代码有不足和不对的地方,望指正,谢谢
3 0
- 超简单的ViewPager导航栏联动实现--TabLayout
- Tablayout 底部导航的实现 (TabLayout 以及ViewPager联动)
- 超简单的ViewPager导航栏联动实现后记--当标题栏条目很多时
- TabLayout和ViewPager以及Fragment实现超级简单导航栏
- TabLayout+ViewPager实现联动的小问题
- TabLayout和ViewPager的联动效果实现
- 简单优雅的使用tablayout和viewpager打造导航栏
- TabLayout顶部导航栏+ViewPage实现联动
- TabLayout+ViewPager实现滑动底部导航栏
- TabLayout、ViewPager、FragmentPagerAdapter实现新闻导航栏
- TabLayout与viewpager实现顶部导航栏
- TabLayout,ViewPager,Fragment实现联动
- TabLayout,ViewPager,Fragment,实现联动
- ViewPager+Tablayout的联动效果
- Tablayout与viewpager的联动
- TabLayout与ViewPager的联动
- 最简单地实现标签页导航-----TabLayout+ViewPager
- 实现TabLayout+ViewPager+Fragment头目的联动模式
- python linux上交互模式tab自动补全代码
- javaScript笔记(二十五) Cookie与存储
- asm (1) helloworld
- linux 批量创建用户和修改口令
- 【牛客网】合并两个排序的链表
- 超简单的ViewPager导航栏联动实现--TabLayout
- linux之文本处理工具
- hdoj5867Water problem
- 购物程序
- 科技论文摘要写作技巧
- Linux上文本处理三剑客之grep
- cogs2060 除法表达式【解法一】
- 如何更改ORACLE中schema或user的名字
- Linux上文本处理三剑客之sed