android viewpager标题,ViewPager顶部导航栏联动效果(标题栏条目多)
如果标题栏过多,超过屏幕的宽度,该怎么弄,下面我们就来解决一下,效果如下:
其实和之前写的也差不多,我就是在哪个demo里面添加和修改了一下,就加了几个title标题,加了几个图片,最重要的是给TableLayout添加了一个属性:
app:tabMode="scrollable"
这个属性就是设置设置TableLayout可以滚动,看我滚动上面的标题栏:
这里我还给标题栏设置了几个附加的属性,让它显得更好看:
app:tabTextColor="#f5eef5"
app:tabSelectedTextColor="#ec4213"
app:tabIndicatorColor="#aaff00"
app:tabTextColor="#f5eef5" //这个是设置标题的字体颜色
app:tabSelectedTextColor="#ec4213"
//这个是设置标题被选中时的颜色
app:tabIndicatorColor="#aaff00"
//这个是设置下面跟着联动的长方形的颜色
具体布局文件代码是:
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
android:id="@+id/main_tab"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabMode="scrollable"
app:tabTextColor="#f5eef5"
app:tabSelectedTextColor="#ec4213"
app:tabIndicatorColor="#aaff00"
/>
android:id="@+id/main_viewpager"
android:layout_width="match_parent"
android:layout_below="@+id/main_tab"
android:layout_height="match_parent"/>
Avtivity里面就是把之前写的TableLayout的mode给注释了:
// //设置tab的模式
// mTab.setTabMode(TabLayout.MODE_FIXED);不可滚动的tab
//app:tabMode="scrollable"可以滑动的tab
然后其他照常加图片和标题,全部代码是:
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 mList;
private List 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);
ImageView yixuan = new ImageView(this);
ImageView yifei = new ImageView(this);
ImageView zhuxian = new ImageView(this);
ImageView tianai = new ImageView(this);
yuanYuan.setImageResource(R.mipmap.gaoyuanyuan);
yiYan.setImageResource(R.mipmap.jiangyiyan);
liYa.setImageResource(R.mipmap.tongliya);
yixuan.setImageResource(R.mipmap.anyixuan);
yifei.setImageResource(R.mipmap.liuyifei);
zhuxian.setImageResource(R.mipmap.wangzhuxian);
tianai.setImageResource(R.mipmap.zhangtianai);
//设置图片显示全屏
yuanYuan.setScaleType(ImageView.ScaleType.FIT_XY);
yiYan.setScaleType(ImageView.ScaleType.FIT_XY);
liYa.setScaleType(ImageView.ScaleType.FIT_XY);
yixuan.setScaleType(ImageView.ScaleType.FIT_XY);
yifei.setScaleType(ImageView.ScaleType.FIT_XY);
zhuxian.setScaleType(ImageView.ScaleType.FIT_XY);
tianai.setScaleType(ImageView.ScaleType.FIT_XY);
mList.add(yuanYuan);
mList.add(yiYan);
mList.add(liYa);
mList.add(yixuan);
mList.add(yifei);
mList.add(zhuxian);
mList.add(tianai);
//设置标题
titleList = new ArrayList<>();
titleList.add("高圆圆");
titleList.add("江一燕");
titleList.add("佟丽娅");
titleList.add("安以轩");
titleList.add("刘亦菲");
titleList.add("王祖贤");
titleList.add("张天爱");
mTab = (TabLayout) findViewById(R.id.main_tab);
// //设置tab的模式
// mTab.setTabMode(TabLayout.MODE_FIXED);不可滚动的tab
//app:tabMode="scrollable"可以滑动的tab
//添加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);
}
}
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 list;
private List titleList;
public MyViewPagerAdapter(List mList,List 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);//页卡标题
}
}
以上所述是小编给大家介绍的ViewPager顶部导航栏联动效果(标题栏条目多),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
android viewpager标题,ViewPager顶部导航栏联动效果(标题栏条目多)相关推荐
- Android最新版修改顶部导航栏颜色和字
** Android最新版修改顶部导航栏颜色和字 ** 个人所用的AndroidStudio为4.1.2 修改App的名称在android工作区间下找到res➡values➡strings.xml这里 ...
- mono for android mysql_mono for android 自定义titleBar Actionbar 顶部导航栏 修改 样式 学习...
以前的我是没有做笔记的习惯的,学习了后觉得自己能记住,但是最近发现很多学的东西都忘记了,所有现在一有新的知识,就记下来吧. 最近又做一个mono for android 的项目 这次调整比较大,上次做 ...
- Android 资讯类App项目实战 第一章 滑动顶部导航栏
前言: 正在做一个资讯类app,打算一边做一边整理,供自己学习与巩固.用到的知识复杂度不高,仅适于新手.经验不多,如果写出来的代码有不好的地方欢迎讨论. 该系列的其他文章 第二章 retrofit获取 ...
- VUE写一个顶部导航栏
最近一个实验要做一个中超足球联赛的数据库设计,我打算采用springboot+vue来完成,现在是从零开始学习vue的过程,先试着写一个顶部导航栏.效果如下: 新建一个navbar的组件 首先在APP ...
- Android 应用开发----7. ViewPager+Fragment一步步打造顶部导航界面滑动效果
ViewPager+Fragment一步步打造顶部导航界面滑动效果 在许多应用中,我们常常用到这么一个效果: 可以看到,由于现在的应用数据经常需要涉及到多个模块,所以常常需要使用滑动标签在多个页面之间 ...
- Android开发笔记(二十)顶部导航栏ActionBar
标题栏ActionBar ActionBar是在Android3.0之后引入的,所以Android2.x之前的版本不能直接使用ActionBar.现在ActionBar广泛用做APP的顶部导航栏,它在 ...
- android 顶部导航栏 自定义,Android自定义NavigationController - 安卓自定义导航栏 --【WJ】...
注意: 本文主要介绍安卓自定义顶部导航栏(iOS中成为NavigationBar):写的不尽如人意的地方,请见谅~ 概述如下: 环境 :Android Studio 1.4 for Mac 语言 :如 ...
- react native 之自定义顶部导航栏,实现标题居中可控
本来一直用的都是RN自带的组件react-navigation,但是后面需求有变,需要顶部导航栏目的标题可以自己控制,同一页面的标题根据数据库查出来的内容变化.因此自定义了一个导航栏目,实现需求. 关 ...
- android开发(49) android 使用 CollapsingToolbarLayout ,可折叠的顶部导航栏
概述 在很app上都见过 可折叠的顶部导航栏效果.google support v7 提供了 CollapsingToolbarLayout 可以实现这个效果.效果图如下: 实现步骤 1. 写 ...
最新文章
- tensorflow1
- 某企业生产系统升级Linux系统及内核
- 基于空间数据库MongoDB实现全国电影票预定系统
- 多个div嵌套,获取鼠标所点击的div对象
- [HDU 1015] Safecracker
- 机房监控系统解说—开关传感器篇
- 我不是来约架,我只是请他们说几句实话——QCon上海2015编程语言专题前瞻
- 名字打架 源码 php,无聊发天蝎与各星座名字打架结果
- vue连线 插件_使用jsPlumb插件实现动态连线功能
- 3个珍藏已久的资源网站,个个都很厉害,赶快私藏起来吧
- 嵌入式文件系统固件img制作与解包
- KNN——简单手写体识别
- EOF到底是什么意思?
- 北京理工大学计算机面试题,北京理工大学自主招生面试试题综合素质答案技巧.doc...
- Apache POI
- 常见windows字体和MacOS字体分类主要有几种?
- Go:sqrt平方根计算(附完整源码)
- fpga运算服务器_当FPGA也成为一种服务,你还在顾虑什么?
- xbox sdk_因此,您只是获得了Xbox Xbox。 怎么办?
- iMAG(爱码哥)新建应用
热门文章
- android 和 js 之间交互的封装
- 基于SpringBoot和Vue实现的个人博客网站快速搭建(已开源)
- 云控系统-移动互联网时代发展的一次飞跃
- SAP中由于“己结算申请”未勾选原因导致无法查询到采购申请
- 机器学习复习:线性回归1
- 【对称加密与非对称加密】-- 概念、图示、优缺点
- HDU1116 Play on Words——欧拉路(有向图+并查集)
- Redis key前缀的设计与使用
- linux系统it固定资产管理系统包_固定资产条码管理系统特性分析
- thinkpad重装系统不引导_联想Y400电脑装WIN7无法重装系统的解决方法