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 ...
随机推荐
- C#学习笔记5
1.接口的显式实现:显式实现需要在实现接口的类型中,在实现接口的成员中添加接口名称的前缀.且没有必要添加public.virtual这些修饰符,因为显式实现只能通过接口调用,不能用实现类进行调用.为此 ...
- select, poll, epoll笔记
看网络通信框架,netty, thrift,java nio等,最后都会通过select, poll, epoll或者socket等进行通信.查了些网页,总结一下.做个笔记 1. Socket单线程阻 ...
- 一般处理程序、ASP.NET和MVC的区别
这个问题说起来,我有点惭愧 想当初在大学里学的就是ASP.NET WebForms 在实习期间也是用的WebForms来开发网站,然后就觉得.NET开发网站就是用这个开发模式 现在想想都想笑...实在 ...
- 我的书单mybooklist
首先自我介绍一下,我是一名程序员. 计算机的世界太浩瀚,而我太过渺小. 比计算机的世界更为广大的是,书籍的海洋.学海无涯. 无论是计算机的世界,还是其他类书的世界,人一辈子要看的书看也看不完. 于是我 ...
- 开通cnblogs博客
开通博客,准备记录学习和开发过程
- QBC(Query By Criteria) QBE (Query By Example)
QBC 参考:(Hibernate的QBC查询) //is empty and is not empty @Test public void testQBC(){ Session session = ...
- liunx增强命令
查找命令 grep 格式:grep [option] pattern [file] 实例: ps -ef | grep sshd 查找指定 ssh 服务进程 ps -ef | grep sshd | ...
- C# 任务并行库使用小计 z
1.简单创建使用 using System; using System.Diagnostics; using System.Threading; using System.Threading.Task ...
- Appium的DesiredCapabilities参数设置
Appium的DesiredCapabilities参数设置 DesiredCapabilities 负责启动服务端时的参数设置.实际使用时根据自己的需要,可自行修改一些参数. 比如,应用程序在查找某 ...
- 3元购买微信小程序解决方案一个月
一.登录微信公众平台https://mp.weixin.qq.com/ 二.点击立即注册.注意:这里不要用微信公众号登录,小程序账号和微信公众号是不同的. 三.在注册页面点击小程序板块. 四.进入小程 ...