android应用案例:Tablayout 的使用（仿微信底栏）

2017年6月第一篇博文。
最近做项目越来越发对于程序语言的深入理解的重要性，否则很难有较大的成长。今天主要写关于如何利用Tablayout写微信底部栏的过程。Tab在中国的的很多应用App上都有应用，比如微信，QQ，网易新闻等。基于此，写下这篇博客。首先大家看一下做的效果：

首先我们先来分析一下代码结构，简单的微信底部栏主要的代码结构如下图所示：

细节入手
我们以微信为例，大家可以从图中可以看到，底部共有四个按钮（上面是文字，下面是图片）。我们首先给出XML文件，这里我们用的是merge标签，主要是Tab view主要是放在布局里面，如果大家想要详细的了解merge标签的作用，大家可以百度一下相关的博客,这里就不详细解释了。

<?xml version="1.0" encoding="utf-8"?><merge xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_gravity="center">   <TextView       android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:id="@+id/tex_Tab"       android:textColor="@color/colorPrimary"       android:textSize="12sp"/>    <ImageView        android:layout_height="20dp"        android:layout_width="20dp"        android:id="@+id/Img_Tab"        /></merge>

大家可以发现上面的布局没有下入数据，主要是为了大家写入不同数据方便，我们还需要些一个Tabview类来写入数据。

public class Tabview extends LinearLayout implements View.OnClickListener {    private TextView txt_tab;    private ImageView Img_tab;    public Tabview(Context context) {        super(context);        initView(context);    }    public Tabview(Context context, AttributeSet attrs) {        super(context, attrs);        initView(context);    }    public Tabview(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        initView(context);    }public void initView(Context context){    setOrientation(VERTICAL);    setGravity(Gravity.CENTER);    LayoutInflater.from(context).inflate(R.layout.tabview,this,true);    txt_tab=(TextView)findViewById(R.id.tex_Tab);    Img_tab=(ImageView)findViewById(R.id.Img_Tab);}    public void initdata(TabItem tabItem){        txt_tab.setText(tabItem.lableResId);        Img_tab.setImageResource(tabItem.imageResId);    }    @Override    public void onClick(View v) {    }}

从上述代码中我们可以看出，initView（）主要是写入控件，initdata（）主要用于写入数据，下面写入数据时会调用改方法。
TabLayout
从程序结构图，我们可以看到位于Activity和TabView之间的Tablayout。我们可以从简单程序的结构示意图中可以发现，它的主要作用是向下写入数据，从上面接收数据。

public class TabLayout extends LinearLayout implements View.OnClickListener{    private ArrayList<TabItem> tabs;    private OnTabClickListener listener;    private int tabCount;    public TabLayout(Context context) {        super(context);        initView();    }    public TabLayout(Context context, AttributeSet attrs) {        super(context, attrs);        initView();    }    public TabLayout(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        initView();    }    private void initView(){        setOrientation(HORIZONTAL);    }public void initData(ArrayList<TabItem> tabs, OnTabClickListener listener){    this.listener=listener;    this.tabs=tabs;    LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.MATCH_PARENT);    params.weight=1;    if (tabs!=null&&tabs.size()>0){        tabCount=tabs.size();        Tabview mTabView=null; for(int i=0;i< tabs.size();i++){            mTabView=new Tabview(getContext());            mTabView.setTag(tabs.get(i));            mTabView.initdata(tabs.get(i));            mTabView.setOnClickListener(this);            addView(mTabView,params);        }    }else{        throw new IllegalArgumentException("tabs can not be empty");    }}    @Override    public void onClick(View v) {        listener.onTabClick((TabItem) v.getTag());    }    public interface OnTabClickListener{        void onTabClick(TabItem tabItem);    }}

在写入数据时，会用到相当于C++结构体类似的类。

public class TabItem {    public int imageResId;    public int lableResId;    public TabItem(int imageResId,int lableResId){        this.imageResId=imageResId;        this.lableResId=lableResId;    }}

这里TabLayout实际上是一个容器，底部需要几个Tab按钮，就在MainActiviy里new几个然后add到TabLayout即可。所以有一天产品经理跟你说需要增加一个按钮，只需要再new一个add进去就好，又有一天boss说把底部Tab栏顺序调整下呗，就只要调整下new出的TabView顺序即可。
下面给出该程序的主程序：
public class MainActivity extends AppCompatActivity implements TabLayout.OnTabClickListener{
private Tabview mtabview;
private ArrayList tabs;
TabItem tabItem;
private TabLayout mtablayout;

@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    initview();    initData();}public void initview(){   mtablayout=(TabLayout)findViewById(R.id.Tab_layout);}public void initData(){    tabs=new ArrayList<>();    tabs = new ArrayList<>();    tabs.add(new TabItem(R.drawable.selector_tab_msg, R.string.wechat));    tabs.add(new TabItem(R.drawable.selector_tab_contact, R.string.contacts) );    tabs.add(new TabItem(R.drawable.selector_tab_moments, R.string.discover));    tabs.add(new TabItem(R.drawable.selector_tab_profile, R.string.me));    mtablayout.initData(tabs, this);}@Overridepublic void onTabClick(TabItem tabItem) {    Toast.makeText(MainActivity.this,"你好",Toast.LENGTH_LONG).show();}

}

给出该程序的主布局文件：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context="com.example.zhongzhi.newtablayout.MainActivity">    <com.example.zhongzhi.newtablayout.TabLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:id="@+id/Tab_layout"></com.example.zhongzhi.newtablayout.TabLayout></RelativeLayout>

这样我们就可以实现上述微信底部栏的程序了。如果大家有需要可以联系我，我把源程序发给大家。是不是简单。