Android Material Design TabLayout入门篇<二>

最新推荐文章于 2024-06-13 17:32:45 发布
最新推荐文章于 2024-06-13 17:32:45 发布
阅读量1k 收藏
点赞数
分类专栏： 【Android MD 5.0系列】 文章标签： android viewpager
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15950325/article/details/54172293
版权

相信大家都看过很多底部导航栏，VIewPager+Fragment FragmentTableHost等
我今天讲的是Android Material Design TabLayout
不熟悉 直接进入Android Material Design 入门篇《一》

下面直接进入主题

首先还是添加依赖gradle一句话解决！然后Sync一下

 compile 'com.android.support:design:25.1.0'
 compile 'com.android.support:support-v4:25.1.0'

添加完之后看布局文件因为中间是ViewPager 底部是TabLayout随着ViewPager左右滑动切换下面的tablelayout也实现联动效果因此我们先画一张简图

如下有点简陋

这里写图片描述

再看下布局文件如下activity_tablelayout2.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:scrollbars="none"
        android:layout_height="0dp"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab2"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabGravity="fill"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#FF4081"
        app:tabTextColor="#000"/>
</LinearLayout>

然后需要一个适配器我这里直接封装了！TabFragmentAdapter这里注意的是集成FragmentPageadapter不要弄错了！

package zm.jc.com.medicalsys.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

import zm.jc.com.medicalsys.fragment.IndexFragment;
import zm.jc.com.medicalsys.fragment.MedicalFragment;
import zm.jc.com.medicalsys.fragment.MyFragment;
import zm.jc.com.medicalsys.fragment.StoreFragment;

/**
 * Created by John on 2017/1/7.
 */

public class TabFragmentAdapter extends FragmentPagerAdapter {
    private List<View> views;
    private String[] strTitle={"首页","藥店","藥材","我的"};

    public TabFragmentAdapter(FragmentManager fm) {
        super(fm);

    }

    /**根据点击不同的位置切换替换不同的Fragment
    默认选择首页
    **/

    @Override
    public Fragment getItem(int position) {
        if(position==1){
            return new StoreFragment();
        }else if(position==2){
            return  new MedicalFragment();
        }else if(position==3){
            return  new MyFragment();
        }
        return new IndexFragment();
    }

    @Override
    public int getCount() {
        return strTitle.length;
    }

    /**
     * tablelayout标题栏賦值
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return strTitle[position];
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(views.get(position));
        return views.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
       container.removeView(views.get(position));
    }
}

然后主Activity初始化就是一个ViewPager和TableLayout这里不要导错包

import android.support.design.widget.TabLayout;
 private void initViews() {
        tabLayout= (TabLayout) findViewById(R.id.tab2);
        vp= (ViewPager) findViewById(R.id.viewpager);
        tabLayout.setupWithViewPager(vp);
        index=tabLayout.getTabAt(0);
        store=tabLayout.getTabAt(1);
        medical=tabLayout.getTabAt(2);
        my=tabLayout.getTabAt(3);

        index.setIcon(getResources().getDrawable(R.drawable.android_bigger));
        store.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
        medical.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
        my.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
        adapter=new TabFragmentAdapter(getSupportFragmentManager()){

        };
        //將ViewPager與適配器綁定起來
        vp.setAdapter(adapter);

    }

设置TablLayout 监听事件setOnTabSelectedListener判断选中时与viewpager绑定切换

 private void initEvent() {
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            //在onTabSelected中设置选中tab时切换的图片，
            // onTabUnselected中设置没有被选中时的图片。
            // 别忘了mViewPager.setCurrentItem(0);这句，这是用来点击tab时切换ViewPager，
            // 如果不加这一句的话滑动ViewPager底部tab可以切换，但是点击tab而ViewPager不会切换。
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if(tab==tabLayout.getTabAt(0)){
                    index.setIcon(getResources().getDrawable(R.drawable.android_bigger));
                    vp.setCurrentItem(0);
                }else if(tab==tabLayout.getTabAt(1)){
                   store.setIcon(getResources().getDrawable(R.drawable.android_bigger_2));
                    vp.setCurrentItem(1);
                }else if(tab==tabLayout.getTabAt(2)){
                    medical.setIcon(getResources().getDrawable(R.drawable.android_bigger_4));
                    vp.setCurrentItem(2);

                }else if(tab==tabLayout.getTabAt(3)){
                    my.setIcon(getResources().getDrawable(R.drawable.android_bigger_5));
                    vp.setCurrentItem(3);
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                if(tab==tabLayout.getTabAt(0)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }else if(tab==tabLayout.getTabAt(1)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }else if(tab==tabLayout.getTabAt(2)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }else if(tab==tabLayout.getTabAt(3)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

最后贴上TableLayoutActivity完整Code

package zm.jc.com.medicalsys;

import android.os.Bundle;
import android.os.PersistableBundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

import zm.jc.com.medicalsys.adapter.TabFragmentAdapter;

/**
 * Created by John on 2017/1/7.
 */

public class TabLayoutActivity extends AppCompatActivity {
    private TabFragmentAdapter adapter;
    private ViewPager vp;
    private TabLayout tabLayout;
    private TabLayout.Tab index;
    private TabLayout.Tab store;
    private TabLayout.Tab medical;
    private TabLayout.Tab my;

    @Override
    public void onCreate(Bundle savedInstanceState, PersistableBundle persistentState) {
        super.onCreate(savedInstanceState, persistentState);
        setContentView(R.layout.activity_tablelayout2);
        initViews();
        initEvent();
    }

    private void initEvent() {
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            //在onTabSelected中设置选中tab时切换的图片，
            // onTabUnselected中设置没有被选中时的图片。
            // 别忘了mViewPager.setCurrentItem(0);这句，这是用来点击tab时切换ViewPager，
            // 如果不加这一句的话滑动ViewPager底部tab可以切换，但是点击tab而ViewPager不会切换。
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if(tab==tabLayout.getTabAt(0)){
                    index.setIcon(getResources().getDrawable(R.drawable.android_bigger));
                    vp.setCurrentItem(0);
                }else if(tab==tabLayout.getTabAt(1)){
                   store.setIcon(getResources().getDrawable(R.drawable.android_bigger_2));
                    vp.setCurrentItem(1);
                }else if(tab==tabLayout.getTabAt(2)){
                    medical.setIcon(getResources().getDrawable(R.drawable.android_bigger_4));
                    vp.setCurrentItem(2);

                }else if(tab==tabLayout.getTabAt(3)){
                    my.setIcon(getResources().getDrawable(R.drawable.android_bigger_5));
                    vp.setCurrentItem(3);
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                if(tab==tabLayout.getTabAt(0)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }else if(tab==tabLayout.getTabAt(1)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }else if(tab==tabLayout.getTabAt(2)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }else if(tab==tabLayout.getTabAt(3)){
                    tab.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
                }

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

    private void initViews() {
        tabLayout= (TabLayout) findViewById(R.id.tab2);
        vp= (ViewPager) findViewById(R.id.viewpager);
        tabLayout.setupWithViewPager(vp);
        index=tabLayout.getTabAt(0);
        store=tabLayout.getTabAt(1);
        medical=tabLayout.getTabAt(2);
        my=tabLayout.getTabAt(3);

        index.setIcon(getResources().getDrawable(R.drawable.android_bigger));
        store.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
        medical.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
        my.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
        adapter=new TabFragmentAdapter(getSupportFragmentManager()){

        };
        //將ViewPager與適配器綁定起來
        vp.setAdapter(adapter);

    }
}

转载请注明出处！http://blog.csdn.net/qq_15950325/article/details/54172293谢谢合作！另外可以加下我的Android群！大家一起开车哈！疯狂Android进阶之旅

KdanMin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android Material Design之TabLayout + NavigationView联合使用
06-06
在Android开发中，Material Design是一种广泛采用的设计语言，旨在提供一致、美观且功能丰富的用户体验。TabLayout和NavigationView是Material Design组件库中的两个重要元素，它们分别用于实现底部标签导航和侧滑...
Android开发MaterialDesign设计风格UI示例演示集
06-01
在Android开发中，Material Design已经成为主流的UI设计风格，它通过丰富的动画效果、层次分明的布局以及鲜明的颜色搭配，使得应用界面更加美观且易用。本示例演示集就是针对Android开发者，展示如何在自己的应用中...
『Material Design入门学习笔记』TabLayout与NestedScrollView（附demo）
weixin_33966095的博客
04-24 236
不知不觉，这已经是『Material Design入门学习笔记』专题第六篇文章了，结束了这篇文章，这个专题，会暂时告一段落。但不是结束，也许仅仅是另一个开始。『Material Design入门学习笔记』前言『Material Design入门学习笔记』动画（含demo）『Material Design 入门学习笔记』主题与 AppCompatActivity（附 demo）『Material D...
记一个坑 关于com.google.android.material.tabs.TabLayout
最新发布
weixin_44431105的博客
06-13 161
在替换之后发现在打开带有com.google.android.material.tabs.TabLayout控件的页面时会发生崩溃 查看日志后发现出现了以下log。项目中原先所使用的AppTheme继承自Theme.MaterialComponents.Light.NoActionBar。其中的AppTheme.Main继承自Theme.MaterialComponents.Light.NoActionBar。由于一些原因需要替换为Theme.AppCompat.Light.NoActionBar。
Material Design 入门（一）——TextInputLayout和TextInputEditText
dianziagen的博客
05-07 784
Material Design 入门（一）——TextInputLayout和TextInputEditText 2016-08-29 17:04 2199人阅读 评论(0) 收藏 举报 本文章已收录于： 分类： Android Matarial Design（9） 作者同类文章X 版权声明：本文为博主
入门教程 Android实现一个简易的新闻列表APP（TabLayout+ViewPager+Fragment）
weixin_52424236的博客
05-13 3300
接下来是将listView与自定义的卡片xml文件结合到一起首先看看代码初始化的内容// 获取view，并且连接到主活动上面 globalView = inflater . inflate(R . layout . fragment_global_news , container , false);initUI();initData();只需要一个onCreateVIew（）是Fragment类当中的函数重载，其他的函数都是自己写出来的了。
『Material Design 入门学习笔记』前言
weixin_34183910的博客
04-09 66
写在最前面的话 最开始我在毕业的时候做Android，当时还没到Android5.0，没有Material Design，当时的设计都是以立体仿3d效果为主。后来有了扁平化设计，我却开始了SDK各种功能组件库的开发，几乎不涉及到任何界面开发，对Material Design了解真的不是很多。网上关于Material Design的学习资料很多，但也很杂，没有一个成体系的介绍，我打算做一个专题来介绍...
Materail Design 入门（六）—— TabLayout之标题中添加自定义View（2）
小欣儿的专栏
03-07 5121
上一篇我们介绍了TabLayout的简单实用方法，本节来说说如何在TabLayout的标题上添加自定义View,目前来说几乎每个App中都会有Tab样式，而且多数还都是主页直接就放置了几个Tab按钮，有的是文字的，有的还会有图标，下面我们就来说说如何给Tab按钮加上漂亮的图片。 1、自定义View布局 LinearLayout xmlns:android="http://schemas
TableLayout与ToolBar的完美结合？
郑敏
02-24 2103
最近前段时间很多人都在玩皮皮虾 ，什么闪电皮皮虾，下面讲一下皮皮虾的浪漫漫画故事，开车啦哈哈！ 到这里看下效果吧 其实像这种MD效果也比较常见 下面大家看下怎么去分析上面的切换我已经讲过了之前关于tablelayout不知道的直接看这里 Android TableLayout的优雅姿势《一》 Android Material Design TabLayout入门篇<二> 下面讲下其实这里主要
福利篇：快速入门Android编程
热门推荐
7758258博客
02-16 6万+
第一周【UI基础】 第1天： Android环境搭建及工程目录介绍 1.1 Android开发(版本：SDK21及以上版本)环境搭建 1.2 Android发展史、移动设备操作系统、四层系统架构等理论知识 1.2.1 Android发展史介绍 1.2.2 移动设备操作系统介绍 1.2.3 Android四层系统架构的介绍 1.3 HelloWorld程序 1.3.1 编写Hello...
开发一款Android App，从零开始详细讲解
QY'UniverseSpace的博客
03-04 5万+
入门篇：第一篇：开发环境篇第二篇：材料设计篇第三篇：规范开发篇第四篇：从项目开发到上架篇（篇章调整，最后更新） 进阶篇：第五篇：设计模式篇第六篇：网络请求篇（上）     网络请求篇（下）第七篇：图片处理篇第八篇：数据库篇第九篇：开源资源篇 高阶篇：第十篇：自定义控件篇第十一篇：跨进程篇 关于Demo 写这个系列的文章的同时，也在做一个小Demo。功能很简单，利用豆瓣电影Api实现一款基于Android的电影集合的App。star me on GitHub！ 该项目的数据源来自于豆瓣；
实用​Android开源项目及库​
shen_sum的博客
10-27 1202
Android及库
android-material-design
11-21
Android Material Design 是谷歌推出的一种设计语言，旨在提供一套统一、美观且富有表现力的界面设计规范，用于Android应用开发。这种设计风格强调层次感、动效和颜色的使用，为用户带来更直观、更具反馈的交互体验...
Android Material Design 中文版
05-10
原质化设计(Material Design)中文版 完整版 Google I/O 2014 发布的 Material Design 势必将会成为统一 Android Mobile、Android Table、Desktop Chrome 等全平台设计语言规范，对从业人员意义重大
Android Material Design 阴影实现示例
08-27
Android Material Design 阴影实现示例 Android Material Design 是 Google 推出的设计语言，旨在为 Android 应用程序提供统一的设计风格。Material Design 的阴影效果是其核心组件之一，通过 Z 轴的概念，让 View...
Android TableLayout的优雅姿势《一》
郑敏
01-09 7446
前几天看到群里有人在问做那种仿网易新闻的table带标题的现在用什么我毫不犹豫的说TableLayout 下面看下CSDN上面的TableLayout样式效果如下 再看看掘金的图片再看看我自己实现的效果首先介绍一下官网如何定义TableLayout继承HorizontalScrollView集成FrameLayout继承ViewGroup父类添加Gradle依赖 compile 'com
Android 关于ToolBar分分钟玩死自己？
郑敏
04-14 3634
场景一： 今天早上十点高高兴兴的跟平时早上一样买一杯粥然后一边喝着一边去上班，步行了15分钟到了公司，然后打指纹开门，然后就愉快的写代码了，我擦，好想电脑没开机，我晕好像没带眼镜，发现最近记性不是很好，是不是前两天中午没休息的原因，感觉身体被掏空，白天上班，晚上回去改论文我也是不容易啊！好了废话说了这么多，open car走起！然后被这个ToolBar玩了一天，爽歪歪！我真的很菜！ 初识 T
Android 菜单栏这样隐藏？
郑敏
03-09 1827
今天遇到一个坑，宝宝由于中午没休息，脑袋超负荷运作，然后看下解决方案：然后找到menu目录下的menu.xml文件 将当前的item设置为fasle下面再运行一下看下效果 ok完美解决！下班了，最近宝宝加班强度有点大！为了早点回去做饭！赶紧回家了！同时转载请注明出处！blog.csdn.net/qq_15950325/article/details/60965411
精通Android Material Design：打造精美界面
"Learning Material Design" 是一本关于Android Material Design开发的学习资料，旨在帮助读者掌握Material Design，并能创建美观、动态的移动和网页应用界面。 Android Material Design是Google推出的一种设计语言...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值