Android 技术的回顾第二篇《底部菜单》

Android 8.0已经正式上市，Design设计规范、AS推出、Kotlin推出，技术的发展从未止步，个人呢？

下面讲一下Design包下使用TabLayout、ViewPager创建高可复用的底部菜单栏。

   第一步我们定义继承FragmentStatePagerAdapter的子类TabVpAdapter。（关于FragmentStatePagerAdapter释义自行百度）

package import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentStatePagerAdapter;import java.util.ArrayList;/** * TabLayout 适配 适用所有的 * Created by Zaric on 2015/8/5 11:46. */public class TabVpAdapter extends FragmentStatePagerAdapter {   private ArrayList<Fragment> mList = new ArrayList<>();   private ArrayList<String> mTitleList = new ArrayList<>();   public TabVpAdapter(FragmentManager fm) {      super(fm);   }   @Override   public int getCount() {      return mList!=null&&mList.size()>0?mList.size():0;   }   @Override   public Fragment getItem(int position) {      return mList.get(position);   }   public void addFragment(Fragment fragment, String title) {      mList.add(fragment);      mTitleList.add(title);   }   @Override   public CharSequence getPageTitle(int position) {      return mTitleList.get(position);   }}

第二步创建布局文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/white">    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@+id/tabLayout"/>    <android.support.design.widget.TabLayout        android:id="@+id/tabLayout"        style="@style/TabLayout"        android:layout_width="match_parent"        android:layout_height="55dp"        android:layout_alignParentBottom="true"        /></RelativeLayout>

其中定义TabLayout的风格

<style name="TabLayout" parent="Widget.Design.TabLayout">    <item name="tabIndicatorColor">?attr/colorAccent</item>    <item name="tabIndicatorHeight">0dp</item>    <item name="android:textSize">@dimen/text_size_min</item></style>

下面就是创建我们可扩展的基础Activity了

packageimport android.support.design.widget.TabLayout;import android.support.v4.content.ContextCompat;import android.support.v4.view.ViewPager;import android.view.View;import android.widget.ImageView;import android.widget.TextView;/** * 主页 * Created by zaric on 2016/4/26 */public abstract class MainActivity extends BaseActivity {    private ViewPager mViewPager;    private TabLayout mTabLayout;    @Override    protected int getRootView() {        return R.layout.activity_main;    }    @Override    protected void initView() {        mViewPager = (ViewPager) findViewById(R.id.viewPager);        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);    }    @Override    protected void initData() {        TabVpAdapter tabVpAdapter = new TabVpAdapter(getSupportFragmentManager());        initTabVpAdapter(tabVpAdapter);        mViewPager.setAdapter(tabVpAdapter);        mTabLayout.setupWithViewPager(mViewPager,false);        mTabLayout.setTabTextColors(ContextCompat.getColor(this,getUnselectedTextColor()),ContextCompat.getColor(this,getSelectedTextColor()));        for (int i = 0,size = mTabLayout.getTabCount(); i < size; i++) {            TabLayout.Tab tab = mTabLayout.getTabAt(i);            if (tab==null){                return;            }            tab.setCustomView(R.layout.tablayout);            View view = tab.getCustomView();            if (view==null){                return;            }            ImageView iconView = (ImageView) view.findViewById(R.id.icon);            TextView textView = (TextView) view.findViewById(R.id.text1);            initTabIcon(tab,i);            iconView.setImageDrawable(tab.getIcon());            textView.setText(tab.getText());            textView.setTextColor(mTabLayout.getTabTextColors());        }        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {            @Override            public void onTabSelected(TabLayout.Tab tab) {                MainActivity.this.onTabSelected(tab);                View view = tab.getCustomView();                if (view==null){                    return;                }                ImageView iconView = (ImageView) view.findViewById(R.id.icon);                TextView textView = (TextView) view.findViewById(R.id.text1);                iconView.setImageDrawable(tab.getIcon());                textView.setText(tab.getText());            }            @Override            public void onTabUnselected(TabLayout.Tab tab) {                MainActivity.this.onTabUnselected(tab);                View view = tab.getCustomView();                if (view==null){                    return;                }                ImageView iconView = (ImageView) view.findViewById(R.id.icon);                TextView textView = (TextView) view.findViewById(R.id.text1);                iconView.setImageDrawable(tab.getIcon());                textView.setText(tab.getText());            }            @Override            public void onTabReselected(TabLayout.Tab tab) {            }        });        mTabLayout.setBackgroundColor(ContextCompat.getColor(this,getTabBackgroundColor()));        runMore();    }    /**     * 执行更多逻辑     */    protected void runMore(){}    /**     * 初始化Viewpager适配器     */    protected abstract void initTabVpAdapter(TabVpAdapter mTabVpAdapter);    /**     * 给tab添加图片     */    protected abstract void initTabIcon(TabLayout.Tab tab,int position);    /**     * 标签选中状态     * @param tab 选中的Tab项     */    protected abstract void onTabSelected(TabLayout.Tab tab);    /**     * 标签不选中状态     * @param tab 未选中的Tab项     */    protected abstract void onTabUnselected(TabLayout.Tab tab);    /**     * 得到TabLayout的背景色     */    protected int getTabBackgroundColor(){        return R.color.colorPrimary;    }    /**     * 得到TabLayout的字体未选中时的颜色     */    protected int getUnselectedTextColor(){        return R.color.white;    }    /**     * 得到TabLayout的字体选中时的颜色     */    protected int getSelectedTextColor(){        return R.color.blue_light;    }    @Override    public void onBackPressed() {        DialogTool.showExitDialog(this);    }    @Override    public void onNoDoubleClick(View v) {    }}

接下来，我们再看一下优化模式的

package com.syy.concise.tab;import android.content.DialogInterface;import android.os.Handler;import android.support.design.widget.TabLayout;import android.support.v4.content.ContextCompat;import android.support.v4.view.ViewPager;import android.support.v7.app.AlertDialog;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import android.widget.TextView;import com.syy.concise.R;import com.syy.concise.base.BaseActivity;import com.syy.concise.base.BaseFragment;import java.util.ArrayList;/** * 主页 Created by zaric on 2016/4/26 */public abstract class MainActivity extends BaseActivity {    private ViewPager viewPager;    private TabLayout tabLayout;    private ArrayList<BaseFragment> list;    @Override    protected int getRootView() {        return R.layout.activity_main;    }    @Override    protected void initView() {        viewPager = (ViewPager) findViewById(R.id.viewPager);        tabLayout = (TabLayout) findViewById(R.id.tabLayout);    }    @Override    protected void initData() {        list = new ArrayList<>();        addFragment(list);        TabVpAdapter tabVpAdapter = new TabVpAdapter(this,getSupportFragmentManager(),list);        viewPager.setAdapter(tabVpAdapter);        tabLayout.setupWithViewPager(viewPager, false);        for (int i = 0, size = tabLayout.getTabCount(); i < size; i++) {            TabLayout.Tab tab = tabLayout.getTabAt(i);            if (tab == null) {                return;            }            View view = LayoutInflater.from(this).inflate(R.layout.layout_tab,null);            TextView tabTv = (TextView) view.findViewById(R.id.tabTv);            ImageView tabIv = (ImageView) view.findViewById(R.id.tabIv);            int resColor = list.get(i).getPageTextColor(i==0);            if (resColor!=0){                tabTv.setTextColor(ContextCompat.getColor(this,resColor));            }            int resTitle = list.get(i).getPageTitle();            if (resTitle!=0) {                tabTv.setText(getResources().getString(resTitle));            }            int resIcon = list.get(i).getPageIcon(i==0);            if (resIcon!=0) {                tabIv.setVisibility(View.VISIBLE);                tabIv.setBackgroundResource(resIcon);            }            tab.setTag(view);            tab.setCustomView(view);        }        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {            @Override            public void onTabSelected(TabLayout.Tab tab) {                int position = tab.getPosition();                View view = tab.getCustomView();                if (view ==null){                    return;                }                TextView tabTv = (TextView) view.findViewById(R.id.tabTv);                ImageView tabIv = (ImageView) view.findViewById(R.id.tabIv);                int resColor = list.get(position).getPageTextColor(true);                if (resColor!=0){                    tabTv.setTextColor(ContextCompat.getColor(MainActivity.this,resColor));                }                tabTv.setText(list.get(position).getPageTitle());                int resIcon = list.get(position).getPageIcon(true);                if (resIcon!=0) {                    tabIv.setVisibility(View.VISIBLE);                    tabIv.setBackgroundResource(resIcon);                }            }            @Override            public void onTabUnselected(TabLayout.Tab tab) {                int position = tab.getPosition();                View view = tab.getCustomView();                if (view==null){                    return;                }                TextView tabTv = (TextView) view.findViewById(R.id.tabTv);                ImageView tabIv = (ImageView) view.findViewById(R.id.tabIv);                int resColor = list.get(position).getPageTextColor(false);                if (resColor!=0){                    tabTv.setTextColor(ContextCompat.getColor(MainActivity.this,resColor));                }                tabTv.setText(list.get(position).getPageTitle());                int resIcon = list.get(position).getPageIcon(false);                if (resIcon!=0) {                    tabIv.setVisibility(View.VISIBLE);                    tabIv.setBackgroundResource(resIcon);                }            }            @Override            public void onTabReselected(TabLayout.Tab tab) {            }        });        tabLayout.setBackgroundColor(ContextCompat.getColor(this, getTabBackgroundColor()));    }    /**     * 添加页面     * @param fragments 页面     */    protected abstract void addFragment(ArrayList<BaseFragment> fragments);    /**     * 得到TabLayout的背景色     */    protected int getTabBackgroundColor() {        return R.color.white;    }    @Override    public void onBackPressed() {        new AlertDialog.Builder(this)                .setTitle(getString(R.string.exit_app)).setPositiveButton(android.R                .string.ok, new DialogInterface.OnClickListener() {            @Override            public void onClick(DialogInterface dialog, int which) {                showLoading();                new Handler().postDelayed(new Runnable() {                    @Override                    public void run() {                        dismissLoading();                        finish();                    }                },2000);            }        }).setNegativeButton(android.R.string.cancel, null).show();    }    @Override    public void onClick(View v) {    }}

优化模式下，我们看看怎么使用

/** *  首页 Created by Zaric on 2017-08-10 */public class HomeActivity extends MainActivity {    @Override    protected int getOptionsMenu() {        return 0;    }    @Override    protected void addFragment(ArrayList<BaseFragment> fragments) {        fragments.add(HomeFragment.newInstance());        fragments.add(FindFragment.newInstance());        fragments.add(RecordFragment.newInstance());        fragments.add(MoreFragment.newInstance());    }    @Override    public void onClick(View v) {    }}

我们再看一下Fragment怎么写的

public class HomeFragment extends BaseFragment {       public static HomeFragment newInstance() {        Bundle args = new Bundle();        HomeFragment fragment = new HomeFragment();        fragment.setArguments(args);        return fragment;    }    @Override    protected int getRootView() {        return R.layout.fragment_home;    }    @Override    protected void initView() {    }    @Override    protected void initData() {    }    @Override    public int getPageTitle() {        return R.string.home;    }    @Override    public int getPageIcon(boolean isSelect) {        if (isSelect){            return R.drawable.ic_home_pressed;        }        return R.drawable.ic_home;    }    @Override    public int getPageTextColor(boolean isSelect) {        if (isSelect){            return R.color.blue_light;        }        return R.color.ash_light;    }}

好了，至此整套代码就结束了。这次就不细讲了，至于BaseActivity与BaseFragment是定义的抽象类，很简单，自己揣摩吧！