Android自定义控件实现底部导航

大部分项目中主界面都会看到底部有四个按钮切换内容，实现方法很多，我们公司3个项目都用的这种很繁琐，本文主要使用自定义控件实现以后可以直接拿来用，可以根据自己的需求扩展修改。

先上一波效果图

---

代码

首先在res -values 目录下新建attrs.xml文件，如下图

然后新建一个BottomMenu类继承LinearLayout

package com.example.administrator.myapplication;

import android.content.Context;
import android.content.res.TypedArray;
import android.support.v4.app.Fragment;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
* Created by Administrator on 2016/7/21 0021.
*/
public class BottomMenu extends LinearLayout {

private TextView tvmenu;private ImageView ivmenu;private  int imgNormal,imgSelect,tvNormal,tvSelect;private boolean isSelect=false;private Fragment fragment;public BottomMenu(Context context) {    super(context);}public BottomMenu(Context context, AttributeSet attrs) {    super(context, attrs);    init(context,attrs);}private void init(Context context,AttributeSet attrs) {        //加载布局自定义layout_bottom_menu布局    View view = View.inflate(context,R.layout.layout_bottom_menu,this);    //初始化控件    tvmenu = (TextView) view.findViewById(R.id.tv);    ivmenu = (ImageView) view.findViewById(R.id.iv);    //自定义属性    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BottomMenu);    String text = typedArray.getString(R.styleable.BottomMenu_text);    tvmenu.setText(text);        //找到attrs文件里自定义的属性    imgNormal = typedArray.getResourceId(R.styleable.BottomMenu_imag_normal,0);    imgSelect = typedArray.getResourceId(R.styleable.BottomMenu_imag_selected,0);    tvNormal = typedArray.getColor(R.styleable.BottomMenu_text_color_normal,0);    tvSelect = typedArray.getColor(R.styleable.BottomMenu_text_color_selected,0);   // tvmenu.setTextColor(Color.rgb(43,43,43));    tvmenu.setTextColor(tvNormal);//设置文字颜色    ivmenu.setImageResource(imgNormal);//设置图片}public void selectMenu() {    isSelect=true;   ivmenu.setImageResource(imgSelect);    //tvmenu.setTextColor(Color.rgb(79,167,216));   tvmenu.setTextColor(tvSelect);}public void unSelectMenu() {    isSelect=false;   ivmenu.setImageResource(imgNormal);   // tvmenu.setTextColor(Color.rgb(43,43,43));    tvmenu.setTextColor(tvNormal);}public Fragment getmFragment() {    return fragment;}public void setmFragment(Fragment mFragment) {    this.fragment = mFragment;}public boolean isSelect(){    return isSelect;}

}

layout_bottom_menu xml代码

到此自定义控件就写完了
下面是使用方法

activity_main

MainActivity

package com.example.administrator.myapplication;

import android.os.Handler;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.util.Log;
import android.view.View;

public class MainActivity extends BaseActivity {

private BottomMenu mBottomMenuHome,mBottomMenuB,mBottomMenuC,mBottomMenuD;private BottomMenu lastBottomMenu;private Fragment mFragmentHome,mFragmentB,mFragmentC,mFragmentD;private long lastClickT;    //点击事件private View.OnClickListener mOnClickListener = new View.OnClickListener() {    @Override    public void onClick(View view) {        BottomMenu bm = (BottomMenu) view;        if (bm.isSelect()){//当选中后不可以点击            return;        }        bm.selectMenu();        if (lastBottomMenu!=null){            lastBottomMenu.unSelectMenu();            FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();            transaction.hide(lastBottomMenu.getmFragment());            transaction.show(bm.getmFragment());            transaction.commit();        }            lastBottomMenu =bm;    }};@Overrideprotected int setViewId() {    return R.layout.activity_main;}@Overrideprotected void findViews() {        //初始化控件    mBottomMenuHome = (BottomMenu) findViewById(R.id.home_fragment);    mBottomMenuB = (BottomMenu) findViewById(R.id.b_fragment);    mBottomMenuC = (BottomMenu) findViewById(R.id.c_frgament);    mBottomMenuD = (BottomMenu) findViewById(R.id.d_fragment);}@Overrideprotected void initEvent() {    mBottomMenuHome.setOnClickListener(mOnClickListener);    mBottomMenuB.setOnClickListener(mOnClickListener);    mBottomMenuC.setOnClickListener(mOnClickListener);    mBottomMenuD.setOnClickListener(mOnClickListener);}@Overrideprotected void init() {        // 初始化四个fragment    mFragmentHome = new HomeFragment();    mFragmentB = new BFragment();    mFragmentC = new CFragment();    mFragmentD = new DFragment();    mBottomMenuHome.setmFragment(mFragmentHome);    mBottomMenuB.setmFragment(mFragmentB);    mBottomMenuC.setmFragment(mFragmentC);    mBottomMenuD.setmFragment(mFragmentD);    //添加四个fragment    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();    transaction.add(R.id.rl_conteainer,mFragmentHome);    transaction.add(R.id.rl_conteainer,mFragmentB);    transaction.add(R.id.rl_conteainer,mFragmentC);    transaction.add(R.id.rl_conteainer,mFragmentD);    //预约，商城，我的 三个fragment 隐藏    transaction.hide(mFragmentB);    transaction.hide(mFragmentC);    transaction.hide(mFragmentD);    transaction.commit();     new Handler().post(new Runnable() {         @Override         public void run() {        mBottomMenuHome.performClick();//模拟点击事件 让首页选中         }     });}@Overrideprotected void loadData() {}

}

baseActivity

以上就是基本使用

我们还可以加入动画比如

在BottomMenu增加

public class BottomMenu extends LinearLayout {

private TextView tvmenu;private ImageView ivmenu;private  int imgNormal,imgSelect,tvNormal,tvSelect;private float FACTOR=0.3F;private boolean isSelect=false;private Fragment fragment;public BottomMenu(Context context) {    super(context);}public BottomMenu(Context context, AttributeSet attrs) {    super(context, attrs);    init(context,attrs);}private void init(Context context,AttributeSet attrs) {        //加载布局    View view = View.inflate(context,R.layout.layout_bottom_menu,this);    //初始化控件    tvmenu = (TextView) view.findViewById(R.id.tv);    ivmenu = (ImageView) view.findViewById(R.id.iv);    //自定义属性    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BottomMenu);    String text = typedArray.getString(R.styleable.BottomMenu_text);    tvmenu.setText(text);    imgNormal = typedArray.getResourceId(R.styleable.BottomMenu_imag_normal,0);    imgSelect = typedArray.getResourceId(R.styleable.BottomMenu_imag_selected,0);    tvNormal = typedArray.getColor(R.styleable.BottomMenu_text_color_normal,0);    tvSelect = typedArray.getColor(R.styleable.BottomMenu_text_color_selected,0);   // tvmenu.setTextColor(Color.rgb(43,43,43));    tvmenu.setTextColor(tvNormal);    ivmenu.setImageResource(imgNormal);}public void selectMenu() {    isSelect=true;   ivmenu.setImageResource(imgSelect);    //tvmenu.setTextColor(Color.rgb(79,167,216));   tvmenu.setTextColor(tvSelect);   tvmenu.setVisibility(INVISIBLE);    ObjectAnimator animator = ObjectAnimator.ofFloat(this, "xxx", 0, 1).setDuration(300);    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {        @Override        public void onAnimationUpdate(ValueAnimator animation) {            float progress= (float) animation.getAnimatedValue();

// Log.i(“info”,”progress”+progress);
updateView(progress);
}
});
animator.start();
}

public void unSelectMenu() {    isSelect=false;   ivmenu.setImageResource(imgNormal);   // tvmenu.setTextColor(Color.rgb(43,43,43));    tvmenu.setTextColor(tvNormal);   tvmenu.setVisibility(VISIBLE);   ObjectAnimator animator = ObjectAnimator.ofFloat(this, "xxx", 1, 0).setDuration(300);    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {        @Override        public void onAnimationUpdate(ValueAnimator animation) {            float progress= (float) animation.getAnimatedValue();            Log.i("info","progress"+progress);            updateView(progress);        }    });    animator.start();}private void updateView(float progress) {    setPivotX(getWidth()/2);    setPivotY(0);    setScaleX(1+FACTOR*progress);    setScaleY(1+FACTOR*progress);}public Fragment getmFragment() {    return fragment;}public void setmFragment(Fragment mFragment) {    this.fragment = mFragment;}public boolean isSelect(){    return isSelect;}

}