Android学习笔记十八之TabLayout标签布局
来源:互联网 发布:淘宝一元秒杀在哪里 编辑:程序博客网 时间:2024/06/05 06:15
Android学习笔记十八之TabLayout标签布局
AbsoluteLayout绝对布局,在API13中被废弃了,采用FrameLayout, RelativeLayout or a custom layout 替代,所以就不在介绍AbsoluteLayout绝对布局,我们介绍一个Google推出的新的布局——TabLayout标签布局。
TabLayout标签布局是Google 2015年IO大会推出的Android Support Design库中的一个控件,继承于HorizontalScrollView,实现的效果跟ViewPage和ViewpageIndicator实现的效果差不多。不过这个是官方推出的,更加符合Google的MD设计理念。对于Tablayout,Google官方是这样解析的:
You should set a listener via setOnTabSelectedListener(OnTabSelectedListener) to be notified when any tab’s selection state has been changed.If you’re using a ViewPager together with this layout, you can call setupWithViewPager(ViewPager) to link the two together. This layout will be automatically populated from the PagerAdapter’s page titles.
简单翻译就是:
为选项卡的状态改变设置一个setOnTablSelectedListener(OnTabSelectedListener) ,如果在布局中使用ViewPager,你可以使用setupWithViewPager(ViewPager)来给PagerAdapter设置page title和关联viewpager和TabLayout.
TabLayout的属性:
- android.support.design:tabBackground属性:设置标签的背景
- android.support.design:tabContentStart属性:从标签应位于的起始边缘的Y轴上的位置。
- android.support.design:tabGravity属性:对齐,对应java方法是:setTabGravity(int),其中center对应是1,fill对应是0;
- android.support.design:tabIndicatorColor属性:设置当前选定的标签的指示器的颜色。对应java方法是setSelectedTabIndicatorColor(int);
- android.support.design:tabIndicatorHeight属性:设置当前被选中标签的高度,对应java方法是:setSelectedTabIndicatorHeight(int);
- android.support.design:tabMaxWidth属性:tab的最大宽度
- android.support.design:tabMinWidth属性:tab的最小宽度
- android.support.design:tabMode属性:布局中的标签的行为模式,有两个值,fixed、scrollable。对应java方法是:setTabMode(int),有两个值: MODE_FIXED,同时固定选项卡显示所有选项卡,最好使用内容受益于快速标签之间的枢纽和MODE_SCROLLABLE,常用于viewpager。
- android.support.design:tabPadding属性:底部边距
- android.support.design:tabPaddingEnd属性:右边边距
- android.support.design:tabPaddingStart属性:左边距
- android.support.design:tabPaddingTop属性:顶部边距
- android.support.design:tabSelectedTextColor属性:选中标签的颜色
- android.support.design:tabTextAppearance属性:引用TextAppearance风格适用于标签
- android.support.design:tabTextColor属性:文本颜色,对应java方法:setTabTextColors(int,int)
使用TabLayout实现一个简单例子:
需要在AS中添加:
compile 'com.android.support:design:24.0.0'
布局文件代码:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><android.support.design.widget.TabLayout android:id="@+id/tb_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabGravity="center" app:tabIndicatorColor="#3A5FCD" app:tabMode="scrollable" app:tabSelectedTextColor="#3A5FCD" app:tabTextColor="#FF000000" /><android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" /></LinearLayout>
Activity代码:
private TabLayout tb_layout;private ViewPager viewPager;private SimplePageAdapter simplePageAdapter;private String[] titles;@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tablayout); titles = getResources().getStringArray(R.array.tab_title); simplePageAdapter = new SimplePageAdapter(getSupportFragmentManager(), titles); tb_layout = (TabLayout) findViewById(R.id.tb_layout); viewPager = (ViewPager) findViewById(R.id.viewpager); viewPager.setAdapter(simplePageAdapter); tb_layout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { viewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }); tb_layout.setupWithViewPager(viewPager); tb_layout.setTabMode(TabLayout.MODE_SCROLLABLE);}
适配器代码:
package com.example.hello_layout.adapter;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import com.example.hello_layout.fragment.TabPageFragment;/** * Created by Devin on 2016/7/4. */public class SimplePageAdapter extends FragmentPagerAdapter {private String[] names;public SimplePageAdapter(FragmentManager fm, String[] names) { super(fm); this.names = names;}@Overridepublic Fragment getItem(int position) { return TabPageFragment.getInstance(position);}@Overridepublic int getCount() { return names.length;}@Overridepublic CharSequence getPageTitle(int position) { return names[position];}}
fragment代码:
package com.example.hello_layout.fragment;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;import com.example.hello_layout.R;/** * Created by Devin on 2016/7/4. */public class TabPageFragment extends Fragment {private int page;public static final String PAGE_POSITION = "page_position";private String[] names;private TextView tv_fragment;public static TabPageFragment getInstance(int position) { TabPageFragment tabPageFragment = new TabPageFragment(); Bundle bundle = new Bundle(); bundle.putInt(PAGE_POSITION, position); tabPageFragment.setArguments(bundle); return tabPageFragment;}@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_tab, container, false); tv_fragment = (TextView) view.findViewById(R.id.tv_fragment); tv_fragment.setText(names[page]); return view;}@Overridepublic void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); page = this.getArguments().getInt(PAGE_POSITION); names = getResources().getStringArray(R.array.tab_title); System.out.println(page);}}
其中,setOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)已经被废弃掉了,改用addOnTabSelectedListener(OnTabSelectedListener) and removeOnTabSelectedListener(OnTabSelectedListener).替代。setTabsFromPagerAdapter(PagerAdapter adapter)也被废弃掉了,改用setupWithViewPager(ViewPager)代替。
实现效果:
这样就可以实现一个比较简单的效果,其它样式可以自己设,比如可以设置图片和自定义view等。TabLayout就简单介绍到这里。照例附上TabLayout的国内镜像API
- Android学习笔记十八之TabLayout标签布局
- Android学习笔记十八之TabLayout标签布局
- Android开发笔记(一百四十七)标签布局TabLayout
- TabLayout标签布局+ViewPager
- Android学习笔记之布局
- Android学习笔记之布局
- android 开发零起步学习笔记(十八):Android Layout 布局属性全解
- Android入门笔记之标签布局(Tab Layout)
- android学习笔记之四TabHost布局
- android学习笔记之四TabHost布局
- Android学习笔记之布局2
- Android学习笔记之布局(1)
- Android学习笔记之布局(2)
- Android学习笔记(七)布局之RelativeLayout
- Android学习笔记之五大布局
- Android 学习笔记之五大布局
- Android 学习笔记之界面布局
- Android学习笔记十三之LinearLayout布局
- jsp里include html文件中文乱码
- Android 设计模式 笔记 - 单例模式
- 【OpenGL】GLFW配置
- 优秀程序员无他,善假于物也
- 朋友圈中,谁是最有影响力的人?是你么!!
- Android学习笔记十八之TabLayout标签布局
- 数据库NULL
- 面试时问到你对薪资的要求时 怎么去回答?
- IOS8,使用storyBoard对tableView的自适应
- mybatis如何使用延迟加载
- 解决无法创建模拟器问题的方法
- 数通畅联搬家啦
- Android App支付系列(二):支付宝SDK接入详细指南(附官方支付demo)
- window下解决 ERROR 1044 (42000): Access denied for user ''@'localhost' to database 'mysql'