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

}