[置顶] 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 transacti
9d92
on = 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;
}

}