android desgin TabLayout 、Snackbar 、自定义TabLayout学习

最新推荐文章于 2025-05-21 20:28:58 发布

原创最新推荐文章于 2025-05-21 20:28:58 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Design #android Desgin #TabLayout #Snackbar

android Design 控件专栏收录该内容

2 篇文章

订阅专栏

本文探讨Android Design中的TabLayout和Snackbar组件。首先介绍了Snackbar作为轻量级反馈控件的使用方法，包括设置内容、颜色、动画时间及响应事件。接着详细讲解了TabLayout，分析其布局特点，并提供了XML和Fragment代码示例。最后，讨论了TabLayout的源码和常用方法，鼓励读者通过实践深入理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇文章讲了TextInputLayout，那么这一篇文章将继续学习Android Design的里面的控件TabLayout和Snackbar。此次的环境也是跟上一文章一样，导入jar这类的不懂的可以先看一下上一篇文章。

。按例先上效果图

先来看看最简单Snackbar，Snackbar是介于Toast和Dialog的轻量级的消息提醒和反馈控件。

不知道怎么做动的效果图，所以，呵呵了，这个动画效果显示不出来，下次博客吧这个动画给完善出来。Snackbar动画是从底部向上弹出的。

来看看代码实现

package com.xiaomeng.learn;

import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

/**
 * create by xiaomeng on 2015/9/2
 */
public class SnackBarActivity extends AppCompatActivity {

    Button mSnackbarBtn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_snack_bar);
        mSnackbarBtn = (Button) findViewById(R.id.a_snackbar_btn);
        mSnackbarBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                final Snackbar mSnackbar = Snackbar.make(mSnackbarBtn, "显示内容", Snackbar
                        .LENGTH_LONG);
                mSnackbar.setText("显示内容1");
                mSnackbar.setAction("取消", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        mSnackbar.dismiss();
                    }
                });
                mSnackbar.show();

            }
        });
    }


}

Snackbar实例化跟Taost一样的。Snackbar.make()方法有2个，区别是第二个参数不同，一个是直接传文字，一个传资源id。

Snackbar还可以设置显示的内容，和反馈按钮，以及按钮的操作事件。再来看看源码当中我们可以使用的常见方法setActionTextColor()设置颜色、setText()设置文字、setDuration()设置动画时间、dismiss()设置Snackbar消失。然后大家也可以看看源码，539行。不是很难，多看几遍就算没看懂全部的也会有收获的。

然后来看TabLayout。还是先上图

虽然这个效果很多控件都能实现，也有很多方法实现，但是这次Design里面谷歌把他拿出来，说明这个控件还是有一定优势的。

从上往下看，大体布局，上面是一个TabLayout下面是一个Viewpager

xml代码：

<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"
              tools:context=".MainActivity">

    <!--app:tabSelectedTextColor：Tab被选中字体的颜色
app:tabTextColor：Tab未被选中字体的颜色
app:tabIndicatorColor：Tab指示器下标的颜色-->
    <android.support.design.widget.TabLayout
        android:id="@+id/a_tab_tablayout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/material_primary_color_shimu"
        app:tabTextColor="@android:color/black"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/a_tab_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        />
</LinearLayout>

灰常简单是不是，但是这儿要提的是他有几个跟其他控件不一样的属性。代码有标注，就不详说了。既然有用到ViewPager，再根据效果看，应该会猜到Viewpager+fragment，应该会写适配器，这儿我把适配器提出来，没有放到Activity里面作为内部类，有两个原因，第一个养成好的习惯，第二个代码直观，看代码如下：

package com.xiaomeng.learn;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;


import java.util.List;


public class TabFragmentAdapter extends FragmentPagerAdapter {

    private List<Fragment> mFragments;
    private List<String> mTitles;
    private Context mContext;
    private int[] imageResId = {R.mipmap.count_timer, R.mipmap.count_down, R.mipmap.count_times};

    public TabFragmentAdapter(Context context, FragmentManager fm, List<Fragment> fragments,
                              List<String> titles) {
        super(fm);
        this.mContext = context;
        mFragments = fragments;
        mTitles = titles;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    @Override
    public int getCount() {
        return mFragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles.get(position);
    }

    public View getTabView(int position) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.layout_header, null);
        TextView tv = (TextView) view.findViewById(R.id.l_header_tv);
        ImageView iv = (ImageView) view.findViewById(R.id.l_header_iv);
        tv.setText(mTitles.get(position));
        iv.setImageResource(imageResId[position]);
        return view;
    }
}

定义一个叫TabFragmentAdapter的类继承自FragmentPagerAdapter的类，然后会实现他getItem()和getCount()方法。getPageTitle()方法是设置title的文字显示。这儿有个getTabView的方法用来干什么的呢，待会下文会解答。然后继续来看我们的Activity是怎么实现的呢

package com.xiaomeng.learn;

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

import java.util.ArrayList;
import java.util.List;


public class TabLayoutActivity extends AppCompatActivity {

    ViewPager mViewpager;
    TabLayout mTabLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        initParams();
        initView();
        initAction();
    }

    /**
     *初始化控件
     */
    private  void initParams(){
        mViewpager=(ViewPager)findViewById(R.id.a_tab_viewpager);
        mTabLayout=(TabLayout)findViewById(R.id.a_tab_tablayout);
    }

    /**
     * 初始化界面程序
     */
    private  void initView(){
        initTabLayout();
    }

    /**
     * 初始化事件
     */
    private void initAction(){

    }
    private void initTabLayout(){
        List<String> tabList = new ArrayList<>();
        tabList.add("计时器");
        tabList.add("倒计时");
        tabList.add("计数器");
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);//设置tab模式，当前为系统默认模式
        mTabLayout.addTab(mTabLayout.newTab().setText(tabList.get(0)));
        mTabLayout.addTab(mTabLayout.newTab().setText(tabList.get(1)));
        mTabLayout.addTab(mTabLayout.newTab().setText(tabList.get(2)));

        List<Fragment> fragmentList = new ArrayList<>();
        for (int i = 0; i < tabList.size(); i++) {
            Fragment f1 = new TabFragment();
            Bundle bundle = new Bundle();
            bundle.putString("param", "这是第"+(i+1)+"个界面");
            f1.setArguments(bundle);
            fragmentList.add(f1);
        }

        TabFragmentAdapter fragmentAdapter = new TabFragmentAdapter(TabLayoutActivity.this,getSupportFragmentManager(), fragmentList, tabList);
        mViewpager.setAdapter(fragmentAdapter);//给ViewPager设置适配器
        mTabLayout.setupWithViewPager(mViewpager);//将TabLayout和ViewPager关联起来。
        mTabLayout.setTabsFromPagerAdapter(fragmentAdapter);//给Tabs设置适配器
        for (int i=0;i<mTabLayout.getTabCount();i++)
        {
            TabLayout.Tab tab=mTabLayout.getTabAt(i);
            tab.setCustomView(fragmentAdapter.getTabView(i));
        }
    }

}

也是非常简单的是不是，从上往下看，首先实例化控件。然后去配置TabLayout相关内容。首先设置TabMode，这个TabMode有两种模式，TabLayout.MODE_FIXED是系统默认的，不支持滑动，当时如果tab个数过多，超过屏幕了，这时候是不是需要滑动了呢，这时候就用到第二种模式：TabLayout.MODE_SCROLLABLE。google命名还是挺给力的哈，Scrollable一看就容易想到滑动。然后addTaab()在然后呢就Viewpager和fragment的适配，最后个for循环是干什么的呢，很简单，当我们需要在tab上显示图片就需要自定义是tabview了。对不对。还记得之前适配器里面有个getView（）方法吗，就是为了自定义显示title而做的。当然为什么这个getView（）方法不放在Activity里面，其实放在那儿都是可以得，但是放在适配器里面更符合规范。适配器的作用就是拿来适配的。然后再看看title效果吧。

这儿有个问题是高度需要自己设置，用自适应高度好像就字适应文字高度。

那么在吧fragment的代码贴出来吧。

package com.xiaomeng.learn;

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;


public class TabFragment extends Fragment {
    View mView;
    String param="";
    TextView mTv;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle
            savedInstanceState) {
        mView=inflater.inflate(R.layout.fragment_tab, null);
        mTv=(TextView)mView.findViewById(R.id.f_tab_tv);
        return mView;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        if (getArguments()!=null) {
            param = getArguments().getString("param");
            mTv.setText(param);

        }
    }
}

xml代码;

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context="com.xiaomeng.learn.TabFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/f_tab_tv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment"/>

</FrameLayout>

fragment非常简单就不详解了。

最简单的基本流程这样了。项目demo就不贴了非常简单。等吧Design讲完，我会贴一个demo出来。然后我们需要看一下TabLayout源码里面提供了哪些方法给我调用。

咋一看，TabLayout源码1000多行，有点多，多我们就慢慢看,慢慢理。

TabLayout继承自HorizontalScrollView，里面有3个内部类。分别是SlidingTabStrip,TabView,Tab。常用的public的公共的方法
addTab()，newTab(),getTabCount(),getTabAt(),removeTab(),removeTabAt(),removeAllTabs(),setTabMode(),getTabMode(),setTabGravity(),getTabGravity(),setTabTextColors(),setupWithViewPager(),setTabsFromPagerAdapter(),updateAllTabs() ，这些方法基本是按照字面上的意思来理解就对了，如果理解不通的方法就调用，然后看效果，这样会印象深刻。基本就这些吧。我也是菜鸟，把学习历程记录下来。有不对的地方，欢迎指出。一起学习吧。