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…

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

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网页设计结课作业,老师的作业要求感到头…

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元…

Web前端期末大作业-响应式艺术培训机构网页设计(bootstrap+HTML+CSS+JavaScript+)实现

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

Java毕业设计--健康推广管理系统项目实战【Springboot+mybatis+layui等实现】

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

为计算机新建一个用户,win10

怎样在安装Win10系统时不创建Microsoft账户怎样在安装Win10系统时不创建Microsoft账户 在安装Win10系统的过程中&#xff0c;最让用户困扰的估计就是安装过程的最后一个步骤&#xff1a;登陆Microsoft账户。很多用户既没有Microsoft账户&#xff0c;也不想用它登陆系统&#xf…

Web前端期末大作业--响应式美女健身教练瑜伽馆网页设计(HTML+CSS+JavaScript+)实现

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

Java经典课程设计--在线蛋糕商城销售网站项目【SpringMvc+mybatis+bootstrap等实现】

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

Web前端期末大作业--绿色自适应医疗健康医院网页设计(HTML+CSS+JavaScript+)实现

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

修复计算机的英语,Windows Repair最新版

Windows Repair是一个全能型的电脑系统修复工具&#xff0c;能将你的windows恢复到初始设置。可以帮你解决诸如注册表权限问题、ie、自动更新、防火墙等等一系列故障。【功能特点】1、系统自动修复&#xff1a;用它可以智能安全地自动修复被非法软件篡改的系统设置&#xff0c;…