android 控件 margin,Android MarginDesign控件TabLayout导航栏使用详解

TabLayout的使用简单介绍

583a8459442065aedcb3c73d9398a326.gif

比如在平常的项目中实现这样的效果,一般都是都会使用viewPageIndicate等几个开源框架直接实现,或者使用自定义的HorizontalScroll再配合ViewPage+Fragment实现。在谷歌推出marginDesign之后,实现这种效果可以直接使用TabLayout实现。另外Tablayout可以通过自定义View自定义导航栏的效果。这样使用的时候更加灵活多变。

首先需要导入design包

在app的build.gradle下添加design的包

dependencies {

compile 'com.android.support:design:25.0.1'

}

然后就开始撸起袖子,开始如何使用

在xml文件里面写布局:

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/tabLayout"

android:layout_width="match_parent"

style="@style/MyCustomTabLayout"

android:layout_height="wrap_content" />

android:id="@+id/viewPager"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

/>

既然使用到了fragment,就免不了要添加下简单的布局:

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="默认" />

然后是fragment和FragmentPagerAdapter的代码。写过的人应该对这个很熟了,就直接粘下代码

public class FramentAdapter extends FragmentPagerAdapter {

private String[] titles;

public FramentAdapter(FragmentManager fm, String[] titles) {

super(fm);

this.titles = titles;

}

@Override

public Fragment getItem(int position) {

return PageFragment.newInstace(position,titles);

}

@Override

public int getCount() {

return titles.length;

}

@Override

public CharSequence getPageTitle(int position) {

return titles[position];

}

}

Fragment的代码:

public class PageFragment extends Fragment {

private int position;

private String[] titles;

private Context context;

public static PageFragment newInstace(int position, String[] titles) {

Bundle bundle = new Bundle();

bundle.putInt("POSITION", position);

bundle.putStringArray("ARRAY", titles);

PageFragment pageFragment = new PageFragment();

pageFragment.setArguments(bundle);

return pageFragment;

}

@Override

public void onAttach(Context context) {

super.onAttach(context);

this.context=context;

}

@Override

public void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

position = getArguments().getInt("POSITION");

titles = getArguments().getStringArray("ARRAY");

}

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

View view =inflater.inflate(R.layout.item_layout,null);

TextView textView = (TextView) view.findViewById(R.id.textView);

textView.setText(titles[position]);

return view;

}

}

写好这些之后最后在MainActivity中看下如何使用:

public class MainActivity extends FragmentActivity {

private TabLayout tabLayout;

private ViewPager viewPager;

private String[] titles = {"黄蓉", "郭靖", "杨过", "小龙女", "尹志平", "金轮法王", "收到货就收到货圣诞节"};

private TextView textView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

tabLayout = (TabLayout) findViewById(R.id.tabLayout);

viewPager = (ViewPager) findViewById(R.id.viewPager);

FramentAdapter framentAdapter = new FramentAdapter(getSupportFragmentManager(), titles);

viewPager.setAdapter(framentAdapter);

tabLayout.setupWithViewPager(viewPager);

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);}

}

viewPager.setAdapter(framentAdapter);这行代码必须在下面这行代码之前。有兴趣的可以看下源码。 tabLayout.setupWithViewPager(viewPager);

另外 tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);给tablayout设置了这种模式,mode有两种,这种模式大概的意思是,我内容很多的时候,可以使tab平铺滑动。

很多时候我们需要自己自定义样式或者要自定义我们的tab。

自定义样式:需要在Style文件下添加自己的样式,然后应用就好了,例如;

?attr/colorAccent

2dp

12dp

12dp

?attr/selectableItemBackground

@style/MyCustomTabTextAppearance

?android:textColorPrimary

14sp

?android:textColorSecondary

true

另外一种就是需要添加我们自定义的View:

首先写要定义的布局文件;

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal">

android:id="@id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

/>

android:layout_width="10dp"

android:layout_height="10dp"

android:background="@drawable/bg_text" />

然后稍微修改下FragmentPagerAdapter的代码

public class FramentAdapter extends FragmentPagerAdapter {

private String[] titles;

public FramentAdapter(FragmentManager fm, String[] titles) {

super(fm);

this.titles = titles;

}

@Override

public Fragment getItem(int position) {

return PageFragment.newInstace(position,titles);

}

@Override

public int getCount() {

return titles.length;

}

@Override

public CharSequence getPageTitle(int position) {

return null;

}

}

最后看下怎么在MainActivity中使用。

public class MainActivity extends FragmentActivity {

private TabLayout tabLayout;

private ViewPager viewPager;

private String[] titles = {"黄蓉", "郭靖", "杨过", "小龙女", "尹志平", "金轮法王", "收到货就收到货圣诞节"};

private TextView textView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

tabLayout = (TabLayout) findViewById(R.id.tabLayout);

viewPager = (ViewPager) findViewById(R.id.viewPager);

FramentAdapter framentAdapter = new FramentAdapter(getSupportFragmentManager(), titles);

viewPager.setAdapter(framentAdapter);

tabLayout.setupWithViewPager(viewPager);

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

for (int i = 0; i < tabLayout.getTabCount(); i++) {

TabLayout.Tab tab = tabLayout.getTabAt(i);

tab.setCustomView(getTabView(i));

}

}

private View getTabView(int position) {

View view = View.inflate(this, R.layout.item_tab_view, null);

textView = (TextView) view.findViewById(R.id.textView);

textView.setText(titles[position]);

return view;

}

}

到这里就结束了TabLayout的使用。放下源码:Tablayout的使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/561850.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Web前端期末大作业--响应式有氧健身休闲会所网页设计(HTML+CSS+JavaScript)

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大&#xff1f;网页要求的总数量太多&#xff1f;HTML网页作业无从下手&#xff1f;没有合适的模板&#xff1f;等等一系列问题。你想要解决的问题&#xff0c;在专栏&#x1f447;&#x1f3fb;&#x1f447;&…

android 工厂模式创建,7、Android设计模式---(创建型设计模式)抽象工厂模式

一、介绍&#xff0c;定义抽象工厂模式也是创建型模式之一&#xff0c;抽象工厂模式起源于对不同操作系统的图形化解决方案&#xff0c;如不同操作系统的按钮和文本框控件及其实现。为创建一组相关或者相互依赖的对象提供接口&#xff0c;而不需要具体指定他们的具体类。二、使…

Web前端期末大作业--响应式健身会所网页设计(HTML+CSS+JS)实现

临近期末, 你还在为HTML网页设计结课作业,HTML网页作业无从下手&#xff1f;没有合适的模板&#xff1f;等等一系列问题。你想要解决的问题&#xff0c;在专栏&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; java项目精品实战分享案例《100套…

Web前端期末大作业-响应式室内家具网页设计(HTML+CSS+JS)实现

作者主页&#xff1a;Java李杨勇 文末获取源码联系 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大&#xff1f;网页要求的总数量太多&#xff1f;HTML网页作业无从下手&#xff1f;没有合适的模板&#xff1f;等等一系列问题。你想要解决的问题&#xff0c…

Java基础项目实战--大学生求职招聘信息网站系统

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &#x1f345;文末获取源码联系&#x1f345; 临近学期结束&#xff…

html htc控件详解,*.HTC 文件的简单介绍-网页设计,HTML/CSS

今天在论坛上面看到有些兄弟不知道htc是什么东西。小生在这里稍微说一下。从5.5版本开始&#xff0c;internet explorer(ie)开始支持web 行为的概念。这些行为是由后缀名为.htc的脚本文件描述的&#xff0c;它们定义了一套方法和属性&#xff0c;程序员几乎可以把这些方法和属性…

IDEA运行VUE npm install报错:chromedriver@2.27.2 install: node install.js

报错截图&#xff1a; 解决方法&#xff1a; npm install chromedriver --chromedriver_cdnurlhttp://cdn.npm.taobao.org/dist/chromedriver

写得好的html网页,优化网站排名-使用Markdown编写更好的内容和HTML

1.内容创作的悲剧因此&#xff0c;首先您必须了解&#xff1a;内容创建的一个巨大悲剧是HTML。如果你是一位作家、制片人或类似的人&#xff0c;你在创作内容时&#xff0c;总是会遇到这样的问题&#xff1a;想要让博客文章现场直播&#xff0c;或者想要获得网页直播&#xff0…

升级vue-cli

执行命令 npm install -g

大学计算机基础知识判断题,大学计算机基础学习知识判断题.doc

,.序号题目描述您的选择1E-mail?是指利用计算机网络及时地向特定对象传送文字、声音、图像或图形的一种通讯方式。对错2在Internet?上&#xff0c;每个网络和主机的IP?地址是都可以是两个以上。对错3通过设置相应的邮件规则可以进行邮件过滤。对错4IP?地址是给每个连接在In…

VUE报错:Module build failed: Error: Cannot find module ‘node-sass‘

报错代码&#xff1a; Module build failed: Error: Cannot find module node-sassat Function.Module._resolveFilename (module.js:548:15)at Function.Module._load (module.js:475:25)at Module.require (module.js:597:17)at require (internal/module.js:11:18) 解决方…

2021计算机专业考408的学校,2021考研:计算机考研408是什么?统考学校有哪些?...

到底计算机考研408是怎么样的。第一&#xff0c;什么学校考408&#xff0c;大部分985和少部分211第二&#xff0c;难度怎么样&#xff0c;确实难度很大&#xff0c;我没考过其他工科&#xff0c;不知道是不是最难。但是我想说的是考过的大部分都说特别难&#xff0c;一般考890不…

C++ 比 C语言增加的新特性 3 之 命名空间namespace

1. 命名空间 1.1 命名空间 又称为“名字空间”&#xff0c;在内存&#xff08;全局&#xff09;中取一块区域并对其进行命名 实际例子&#xff1a; 同一个班级&#xff0c;两个同姓的人&#xff0c;例如&#xff1a;张三和张三&#xff0c;其中一个张三座位是在讲台右边&am…

Web前端期末大作业-响应式唯美婚庆公司网站网页设计(HTML+CSS+JavaScript)

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、【java奥斯卡】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 文末获取源码联系 &#x1f345; 临近期末,…

挑战记忆力-Web前端实现记忆纸牌游戏(JS+CSS)

游戏介绍&#xff1a; js实现扑克牌翻牌记忆小游戏代码、连续点击翻开两张扑克牌&#xff0c;相同去重&#xff0c;不同则合上重新翻&#xff0c;考验你的记忆力。 &#x1f345; 文末获取源码联系 &#x1f345; 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头…

html中form标签的作用style,HTML5中meta常用标签属性说明

HTML5中meta常用标签属性说明IE 兼容模式&#xff0c;Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下&#xff0c;建议将此 标签加入到你的页面中&#xff1a;content属性值 :width:可视区域的宽度&#xff0c;值可为数字或关键词device-widthhei…

IDEA 启动、编译、clean、安装maven等、报错Process terminated

报错原因&#xff1a;找不到settings.xml 解决方法&#xff1a;

html5 写json 文件,HTML5实现本地JSON文件的读写

参考&#xff1a;使用HTML5来实现本地文件读取和写入 (FileReader读取json文件&#xff0c;FileSaver.js保存json文件)JS创建、写入、读取本地文件(txt) (ActiveXObject 这玩意根本不能用&#xff0c;IE10 和 Chrome都试了)HTML 5中的文件处理之File Writer API (FileSaver…

Vue取消eslint语法限制

启动vue项目的时候经常报一大堆错误、但是不影响项目运行、 这是因为vue对语法的限制过于严格造成的 > bblee-app1.0.0 dev /Users/bianlifeng/my-project > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js95% emitting …

html5中figure怎么用,figure 和 figcaption 元素的正确使用方式

figure和figcaption是两个经常在一起使用的语义化元素。如果你还没有在规范中了解过他们&#xff0c;没有机会在项目中使用过他们&#xff0c;或者说现在对他们还是一无所知&#xff0c;这里就给大家讲一些如何正确使用他们的小技巧。figure元素经常用于图片,如下所示:figure元…