大部分项目中主界面都会看到底部有四个按钮切换内容,实现方法很多,我们公司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代码
到此自定义控件就写完了
下面是使用方法
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() {
}
}
以上就是基本使用
在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;
}
}