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

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;
    }
};



@Override
protected int setViewId() {
    return R.layout.activity_main;
}

@Override
protected 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);
}

@Override
protected void initEvent() {

    mBottomMenuHome.setOnClickListener(mOnClickListener);
    mBottomMenuB.setOnClickListener(mOnClickListener);
    mBottomMenuC.setOnClickListener(mOnClickListener);
    mBottomMenuD.setOnClickListener(mOnClickListener);
}

@Override
protected 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();//模拟点击事件 让首页选中
         }
     });
}

@Override
protected 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;
}

}