文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android TabLayout(选项卡布局)简单用法实例分析

2022-06-06 11:51

关注

本文实例讲述了Android TabLayout(选项卡布局)简单用法。分享给大家供大家参考,具体如下:

我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的,而且比较老了,当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求,在2015年的google大会上,google发布了新的Android Support Design库,里面包含了几个新的控件,其中就有一个TabLayout,它就可以完成TabPageIndicator的效果,而且还是官方的,最好的是它可以兼容到2.2以上版本,包括2.2。下面我就举一个简单的例子来使用它。

这里使用的 android studio进行开发的,所以引用TabLayout很简单,只要在build.gradle中加入compile 'com.android.support:design:22.2.0'即可。

这个使用是我在仿 知乎 的时候使用。所以页面就和知乎很像了

fragment_find.xml


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:orientation="vertical">
  <android.support.design.widget.TabLayout
    android:id="@+id/tab_FindFragment_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/titleBlue"
    app:tabIndicatorColor="@color/white"
    app:tabSelectedTextColor="@color/gray"
    app:tabTextColor="@color/white"
    />
  <android.support.v4.view.ViewPager
    android:id="@+id/vp_FindFragment_pager"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    />
</LinearLayout>

这里面没有什么特别的,就是添加了一个TabLayout和Viewpager作为上下的布局。其中


app:tabIndicatorColor="@color/white" // 下方滚动的下划线颜色
app:tabSelectedTextColor="@color/gray" // tab被选中后,文字的颜色
app:tabTextColor="@color/white" // tab默认的文字颜色

Find_tab_Adapter.java  它是viewpager的Adapter,因为这里面我每个栏目下,都会有一些列表,所以采用list<View>的方式,在里面切换layout不太适合,所以我采用了List<Fragment>来直接加载多个fragment


package com.example.cg.myzhihu.Adapters;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;

public class Find_tab_Adapter extends FragmentPagerAdapter {
  private List<Fragment> list_fragment; //fragment列表
  private List<String> list_Title; //tab名的列表
  public Find_tab_Adapter(FragmentManager fm,List<Fragment> list_fragment,List<String> list_Title) {
    super(fm);
    this.list_fragment = list_fragment;
    this.list_Title = list_Title;
  }
  @Override
  public Fragment getItem(int position) {
    return list_fragment.get(position);
  }
  @Override
  public int getCount() {
    return list_Title.size();
  }
  //此方法用来显示tab上的名字
  @Override
  public CharSequence getPageTitle(int position) {
    return list_Title.get(position % list_Title.size());
  }
}

FindFragment.java这个的说法,全在标注里面了


package com.example.cg.myzhihu;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.cg.myzhihu.Adapters.Find_tab_Adapter;
import java.util.ArrayList;
import java.util.List;

public class FindFragment extends Fragment {
  private TabLayout tab_FindFragment_title; //定义TabLayout
  private ViewPager vp_FindFragment_pager; //定义viewPager
  private FragmentPagerAdapter fAdapter; //定义adapter
  private List<Fragment> list_fragment; //定义要装fragment的列表
  private List<String> list_title; //tab名称列表
  private Find_hotRecommendFragment hotRecommendFragment; //热门推荐fragment
  private Find_hotCollectionFragment hotCollectionFragment; //热门收藏fragment
  private Find_hotMonthFragment hotMonthFragment; //本月热榜fragment
  private Find_hotToday hotToday; //今日热榜fragment
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
               Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_find, container, false);
    initControls(view);
    return view;
  }
  
  private void initControls(View view) {
    tab_FindFragment_title = (TabLayout)view.findViewById(R.id.tab_FindFragment_title);
    vp_FindFragment_pager = (ViewPager)view.findViewById(R.id.vp_FindFragment_pager);
    //初始化各fragment
    hotRecommendFragment = new Find_hotRecommendFragment();
    hotCollectionFragment = new Find_hotCollectionFragment();
    hotMonthFragment = new Find_hotMonthFragment();
    hotToday = new Find_hotToday();
    //将fragment装进列表中
    list_fragment = new ArrayList<>();
    list_fragment.add(hotRecommendFragment);
    list_fragment.add(hotCollectionFragment);
    list_fragment.add(hotMonthFragment);
    list_fragment.add(hotToday);
    //将名称加载tab名字列表,正常情况下,我们应该在values/arrays.xml中进行定义然后调用
    list_title = new ArrayList<>();
    list_title.add("热门推荐");
    list_title.add("热门收藏");
    list_title.add("本月热榜");
    list_title.add("今日热榜");
    //设置TabLayout的模式
    tab_FindFragment_title.setTabMode(TabLayout.MODE_FIXED);
    //为TabLayout添加tab名称
    tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(0)));
    tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(1)));
    tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(2)));
    tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(3)));
    fAdapter = new Find_tab_Adapter(getActivity().getSupportFragmentManager(),list_fragment,list_title);
    //viewpager加载adapter
    vp_FindFragment_pager.setAdapter(fAdapter);
    //tab_FindFragment_title.setViewPager(vp_FindFragment_pager);
    //TabLayout加载viewpager
    tab_FindFragment_title.setupWithViewPager(vp_FindFragment_pager);
    //tab_FindFragment_title.set
  }
}

效果图,不太会做成动态的:

希望本文所述对大家Android程序设计有所帮助。

您可能感兴趣的文章:Android TabHost选项卡标签图标始终不出现的解决方法Android组件TabHost实现页面中多个选项卡切换效果android TabHost(选项卡)的使用方法android 选项卡(TabHost)如何放置在屏幕的底部android中TabHost的图标(48×48)和文字叠加解决方法Android控件之TabHost用法实例分析Android实现底部导航栏功能(选项卡)Android多个TAB选项卡切换效果Android仿微信底部实现Tab选项卡切换效果Android开发之TabHost选项卡及相关疑难解决方法


阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯