TabLayout,使用小结
来源:互联网 发布:网络招商代理 编辑:程序博客网 时间:2024/05/16 09:07
一晃又一年
效果图
TabLayout详解
什么是TabLayout
TabLayout provides a horizontal layout to display tabs.[google]
TabLayout是一个用于放置水平Tab的布局
你可以设置文字,icon,甚至是自定义的View
TabLayout的继承关系
TabLayout可配置属性
TabGravity跟tabMode有着紧密的联系,具体区别如图所示:
1,TabGravity:fill & tabMode:fixed
tab较少时
tab较多时
2,TabGravity:center & tabMode:fixed
tab较少时
tab较多时
3,TabGravity:fill & tabMode:scrollable
tab较少时
tab较多时
4,TabGravity:center & tabMode:scrollable
tab较少时
tab较多时
TabGravity属性只有在TabMode为fixed情况下才有用
XML配置Tab
效果图:
自定义属性跟布局代码:
首先是我们的自定义属性:
<style name="AppTabLayout" parent="Widget.Design.TabLayout"> <item name="android:background">@color/colorPrimary</item> <item name="tabIndicatorColor">@color/tabTextSelected</item> <item name="tabTextColor">@color/tabText</item> <item name="tabSelectedTextColor">@color/tabTextSelected</item> <item name="tabGravity">fill</item> <item name="tabMode">scrollable</item><!--默认scrollable模式--> <item name="tabIndicatorHeight">2dp</item> <item name="tabPaddingStart">8dp</item> <item name="tabPaddingEnd">8dp</item> <item name="tabTextAppearance">@style/TextAppearance</item> </style> <style name="TextAppearance" parent="TextAppearance.Design.Tab"> <item name="android:textSize">16sp</item> <item name="textAllCaps">true</item> </style>
接下来是布局代码:
<android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" style="@style/AppTabLayout" > <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="热点" /> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@mipmap/ic_launcher"/> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="全球" /> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="新闻30分" /> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="网易" /> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="叮当猫" /> </android.support.design.widget.TabLayout>
代码设置Tab
效果图:
代码:
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout); mTabLayout.addTab(mTabLayout.newTab().setIcon(R.mipmap.ic_launcher));//设置为icon mTabLayout.addTab(mTabLayout.newTab().setText("实时")); mTabLayout.addTab(mTabLayout.newTab().setText("全球"),0,true);//添加tab指定tab位置并设为选中 mTabLayout.addTab(mTabLayout.newTab().setText("新闻30分")); mTabLayout.addTab(mTabLayout.newTab().setText("网易")); mTabLayout.addTab(mTabLayout.newTab().setText("叮当猫")); //这里都可以用代码设置TabLayout的属性,这里不列 }
这里将addTab方法的源码贴出,很明了:
/** * Add a tab to this layout. The tab will be inserted at <code>position</code>. * If this is the first tab to be added it will become the selected tab. * * @param tab The tab to add * @param position The new position of the tab */ public void addTab(@NonNull Tab tab, int position) { addTab(tab, position, mTabs.isEmpty());//mTabs用于存储TabLayout的所有tab } /** * Add a tab to this layout. The tab will be added at the end of the list. * * @param tab Tab to add * @param setSelected True if the added tab should become the selected tab. */ public void addTab(@NonNull Tab tab, boolean setSelected) { if (tab.mParent != this) { throw new IllegalArgumentException("Tab belongs to a different TabLayout."); } addTabView(tab, setSelected); configureTab(tab, mTabs.size()); if (setSelected) { tab.select(); } } /** * Add a tab to this layout. The tab will be inserted at <code>position</code>. * * @param tab The tab to add * @param position The new position of the tab * @param setSelected True if the added tab should become the selected tab. */ public void addTab(@NonNull Tab tab, int position, boolean setSelected) { if (tab.mParent != this) { throw new IllegalArgumentException("Tab belongs to a different TabLayout."); } addTabView(tab, position, setSelected); configureTab(tab, position); if (setSelected) { tab.select(); } }
tips
java代码设置默认选中
tablayout.getTabAt(position).select();
监听Tab的各种事件
效果图:
Java代码:
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout); mTabLayout.addTab(mTabLayout.newTab().setText("热点"),false);//不选中 mTabLayout.addTab(mTabLayout.newTab().setText("实时"),false); mTabLayout.addTab(mTabLayout.newTab().setText("全球"),1,true);//添加tab指定tab位置并设为选中 mTabLayout.addTab(mTabLayout.newTab().setText("新闻30分"),false); mTabLayout.addTab(mTabLayout.newTab().setText("网易")); mTabLayout.addTab(mTabLayout.newTab().setText("叮当猫"),false); mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { /** * 当tab第一次选择时候调用 * @param tab */ @Override public void onTabSelected(TabLayout.Tab tab) { Toast.makeText(MainActivity.this, "select tab = "+tab.getText(), Toast.LENGTH_SHORT).show(); } /** * 当tab从 选择 ->未选择 * @param tab */ @Override public void onTabUnselected(TabLayout.Tab tab) { Toast.makeText(MainActivity.this, "unselected = "+tab.getText(), Toast.LENGTH_SHORT).show(); } /** * 当tab已是选择状态时,继续点击调用此方法 * @param tab */ @Override public void onTabReselected(TabLayout.Tab tab) { Toast.makeText(MainActivity.this, "reselected = "+tab.getText(), Toast.LENGTH_SHORT).show(); } }); }
TabLayout联合ViewPager
效果图:
java代码
public class MainActivity extends AppCompatActivity { private List<String> titleList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); titleList = new ArrayList<>(); titleList.add("热点"); titleList.add("全球"); titleList.add("实时"); titleList.add("新闻30分"); titleList.add("网易"); titleList.add("叮当猫"); TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout); ViewPager mViewPager = (ViewPager) findViewById(R.id.viewPager); mViewPager.setAdapter(new CustomPagerAdapter(this)); mTabLayout.setupWithViewPager(mViewPager); } class CustomPagerAdapter extends PagerAdapter{ private Context context; public CustomPagerAdapter(Context context){ this.context = context; } @Override public Object instantiateItem(ViewGroup container, int position) { TextView mTextView = new TextView(context); mTextView.setText(titleList.get(position)); mTextView.setGravity(Gravity.CENTER); mTextView.setTextColor(Color.WHITE); mTextView.setTextSize(20); container.addView(mTextView); return mTextView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } @Override public int getCount() { return titleList.size() == 0 ? 0 : titleList.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public CharSequence getPageTitle(int position) { return titleList.get(position); } }}
XML
<?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:background="@android:color/darker_gray" android:orientation="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" style="@style/AppTabLayout" /> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /></LinearLayout>
4 0
- TabLayout,使用小结
- Tablayout使用小结
- Android-TabLayout使用小结
- Android5.0 TabLayout使用小结
- TabLayout使用
- TabLayout使用
- TabLayout使用
- TabLayout使用
- TabLayout使用
- TabLayout使用
- TabLayout使用
- tablayout使用
- 使用TabLayout
- TabLayout使用
- Tablayout使用
- TabLayout使用
- TabLayout使用
- TabLayout使用
- excel使用快捷键
- wstring wcin wcout 汉字字符串
- ajax跨域访问
- CSDN中如何转载别人的文章
- Druid validationQuery 错误记录
- TabLayout,使用小结
- sphinx在windows下的使用
- 第14周项目1-(1)验证折半查找算法
- spring mvc properties 中文乱码
- 正则表达式------正则的实例集
- 项目管理利器(Maven)——maven中的坐标和仓库
- Spark开发环境搭建
- 安卓单页面多种状态切换(使用了Fragment技术,包含正常页面,网络访问失败页面和网络访问成功页面)
- unity3D-游戏/AR/VR在线就业班 C#入门方法学习笔记