Viewpager实现今日头条顶部导航的功能
利用简单的Textview 和Viewpager实现滑动、点击换页的效果，效果图如下：
先上布局文件代码：
<?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:background="@color/white"
android:orientation="vertical" >
<LinearLayout
android:background="@color/red_base"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp">
</LinearLayout>
<!-- 选项卡 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@color/white"
android:orientation="horizontal"
android:weightSum="5" >
<FrameLayout
android:id="@+id/rim_tab1_fl"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:gravity="center" >
<TextView
android:id="@+id/rim_tab1_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="全部"
android:textColor="@color/red_base"
android:textSize="16sp" />
</FrameLayout>
<View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="@color/divider_gray_line" />
<FrameLayout
android:id="@+id/rim_tab2_fl"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:gravity="center" >
<TextView
android:id="@+id/rim_tab2_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="周边"
android:textColor="@color/text_gray_4"
android:textSize="16sp" />
</FrameLayout>
<View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="@color/divider_gray_line" />
<FrameLayout
android:id="@+id/rim_tab3_fl"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:gravity="center" >
<TextView
android:id="@+id/rim_tab3_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="应援"
android:textColor="@color/text_gray_4"
android:textSize="16sp" />
</FrameLayout>
<View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="@color/divider_gray_line" />
<FrameLayout
android:id="@+id/rim_tab4_fl"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:gravity="center" >
<TextView
android:id="@+id/rim_tab4_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="话题"
android:textColor="@color/text_gray_4"
android:textSize="16sp" />
</FrameLayout>
<View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="@color/divider_gray_line" />
<FrameLayout
android:id="@+id/rim_tab5_fl"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:gravity="center" >
<TextView
android:id="@+id/rim_tab5_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="明星"
android:textColor="@color/text_gray_4"
android:textSize="16sp" />
</FrameLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="@color/white" >
<ImageView
android:id="@+id/rim_cursor"
android:layout_width="80dp"
android:layout_height="3dp"
android:layout_marginTop="0dip"
android:background="@color/title_bar_blue" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.1dp"
android:background="@color/btn_bg_gray" />
<!-- 选项卡内容显示区域 -->
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="@color/bg_light_gray" />
<android.support.v4.view.ViewPager
android:id="@+id/rim_third_vp"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>上面红色指示器的view的初始化
private int screenWidth;//指示器
private ImageView cursorImg;
private LinearLayout.LayoutParams lp;
private void initViews(){
WindowManager wm = (WindowManager)
getSystemService(Context.WINDOW_SERVICE);
int width = wm.getDefaultDisplay().getWidth();
screenWidth=width/5;
cursorImg = (ImageView) findViewById(R.id.rim_cursor);
lp = (LinearLayout.LayoutParams) cursorImg.getLayoutParams();
lp.width = screenWidth;
cursorImg.setLayoutParams(lp);
leftMargin = lp.leftMargin;
}初始化indicater
private void initViewPager() {
viewPager = (ViewPager) findViewById(R.id.rim_third_vp);
fragmentsList = new ArrayList<Fragment>();
fragment1 = new RimFragment();
fragmentsList.add(fragment1);
fragmentsList.add(fragment2);
fragmentsList.add(fragment3);
fragmentsList.add(fragment4);
fragmentsList.add(fragment5);
viewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(),
fragmentsList));
viewPager.setCurrentItem(0);
viewPager.setOnPageChangeListener(this);
}设置上面选项卡的点击事件
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.rim_tab1_fl:
viewPager.setCurrentItem(0);
num_tab1_tv.setTextColor(getResources().getColor(R.color.red_base));
num_tab2_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
num_tab3_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
num_tab4_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
num_tab5_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
fragment1.setMsgName("1","周边");//周边的官方和会员的接口参数,官方
break;设置viewpager 滑动事件
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
offset = (screenWidth - cursorImg.getLayoutParams().width) / 5;
hidePoint(position, positionOffsetPixels);//设置红色指示器的位置
cursorImg.setLayoutParams(lp);
currentIndex = position;
}
@Override
public void onPageSelected(int position) {
switch (position){//设置点击事件
case 0:
fragment1.setMsgName("1","周边");
num_tab1_tv.setTextColor(getResources().getColor(R.color.red_base));
num_tab2_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
num_tab3_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
num_tab4_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
num_tab5_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
break;
}
if (position==0)
{
}else {
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
//设置指示器的位置
private void hidePoint(int position, int positionOffsetPixels) {
if (position == 0) {// 0<->1
lp.leftMargin = (int) (positionOffsetPixels / 5) + offset;
} else if (position == 1) {// 1<->2
lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth
+ offset;
}else if(position==2){
lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth*2
+ offset;
}
else if(position==3){
lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth*3
+ offset;
}
else if(position==4){
lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth*4
+ offset;
}
}
代码并不难，希望通过我这个例子，一是巩固自己的学习和理解，二是希望更多的人更好的学习，我会再接再厉，写更多的博文。
Viewpager实现今日头条顶部导航的功能的更多相关文章
- Android之仿今日头条顶部导航栏效果
随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...
- 自适应 Tab 宽度可以滑动文字逐渐变色的 TabLayout(仿今日头条顶部导航)
TabLayout相信大家都用过,2015年Google大会上发布了新的Android Support Design库里面包含了很多新的控件,其中就包含TabLayout,它可以配合ViewPager ...
- iOS仿今日头条滑动导航
之前写了篇博客网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问 ...
- [Android] Android 类似今日头条顶部的TabLayout 滑动标签栏 效果
APP市场中大多数新闻App都有导航菜单,导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面,今日头条, 网易新闻等. 本文主要讲的是用:T ...
- swfit - 实现类似今日头条顶部标签和底部内容的动态解决方案
TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...
- swift - 实现类似今日头条顶部标签和底部内容的动态解决方案
TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...
- Android 代码实现viewPager+fragment 模仿今日头条的顶部导航
模仿今日头条的顶部导航: 下载地址: http://download.csdn.net/detail/u014608640/9917700 效果图:
- 仿今日头条最强顶部导航指示器，支持6种模式－b
项目中经常会用到类似今日头条中顶部的导航指示器,我也经常用一个类似的库PagerSlidingTabStrip,但是有时并不能小伙伴们的所有需求,所以我在这个类的基础上就所有能用到的情况做了一个简单的 ...
- Android仿今日头条和知乎等App顶部滑动导航实现代码分析及源码下载
一.本文所涉及到的知识点 源码下载 二.目标 通过利用ViewPager+FragmentStatePagerAdapter+TabLayout 实现顶部滑动效果,如图: 三.知识点讲解 1.View ...
随机推荐
- HTTP和HTTPS的区别？
HTTP1.1(Hypertext Transfer Protocol Vertion 1.1)超文本传输协议-版本1.1它是用来在Internet上传送超文本的传送协议.它是运行在Tcp/Ip协议族 ...
- 从数据库中导出数据到.csv文件
考虑到csv文件比xls文件格式容易控制,所以在这次导出中用的是.csv格式. protected function exportInfo($arr, &$err){ $nameInfo = ...
- avalon实现日期联动
前言 上一篇我们说了下Avalon的一些概念,以及一些主要特性,至于Avalon的一些基础教程,正美老师已经做了非常全面的讲述,参见:http://www.cnblogs.com/rubylouvre ...
- 关于IQueryable和IEnumerable
园里对这两个已经有很多文章作了深入的介绍,我总结些,当成笔记用. 一.具体判断用哪个上,如果是运行在本地内存中的,用IEnumerable,枚举该对象时,会立即反应查询结果. 如果是远程数据源,比如数 ...
- OpenLayers 3 给features 添加手势
map.on('pointermove',function(e){ var pixel = map.getEventPixel(e.originalEvent); var hit = map.hasF ...
- Android学习——ViewPager的使用（三）
这一节来介绍一下在ViewPager中常用到的一个控件,标题栏. 标题栏分为PagerTabStrip和PagerTitleStrip两种,用法类似,这里介绍第一种. 具体做法 在layout文件中的 ...
- 【NLP_Stanford课堂】词形规范化
一.为什么要规范化 在做信息检索的时候,一般都是精确匹配,如果不做规范化,难以做查询,比如用U.S.A去检索文本,结果文本里实际上存的是USA,那么实际上应该能查到的结果查不到了. 所以需要对所有内容 ...
- vue cli 构建的 webpack 项目设置多页面
1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...
- mysql 统计连续天数
以下为例子数据 图1 图1 首先根据要求取出BeforeMeal要在7.0以下 并且 bingAfterMeal要在11.1以下 select AccountId,CreateTime from Di ...
- debug问题记录
debug进不去,发现断点没有带勾. 方案:去掉所有断点,重新编译,debug启动,重新打断点. source里面加入自己的java project. 关掉所有的java页面!!! dobbo服务用d ...