实现效果：
Paste_Image.png
public class BottomTabMenu extends LinearLayout {
private Context mContext;
private ArrayList<LinearLayout> mLinearTab;
private ArrayList<ImageView> mImageTab;
private ArrayList<TextView> mTextWithImageTab;
private ArrayList<Integer> mImageTabNormal;
private ArrayList<Integer> mImageTabSelected;
private OnTabClickListener mOnTabClickListener;
private float mImageTabWidth;
private float mImageTabHeight;
private int currentPosition = 0;
private float mTabImageMiddleDividerWidth = 0;
private boolean hasMiddleImage = false;
private int mTextTabNormalColor = 0xff000000;
private int mTextTabSelectedColor = 0xff000000;
private int mTextTabSize = 14;
public BottomTabMenu(Context context) {
this(context, null);
}
public BottomTabMenu(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public BottomTabMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public BottomTabMenu(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
mContext = context;
if (mLinearTab == null) {
mLinearTab = new ArrayList<>();
}
mLinearTab.clear();
if (mImageTab == null) {
mImageTab = new ArrayList<>();
}
mImageTab.clear();
if (mTextWithImageTab == null) {
mTextWithImageTab = new ArrayList<>();
}
mTextWithImageTab.clear();
if (mImageTabNormal == null) {
mImageTabNormal = new ArrayList<>();
}
mImageTabNormal.clear();
if (mImageTabSelected == null) {
mImageTabSelected = new ArrayList<>();
}
mImageTabSelected.clear();
if (attrs != null) {
TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.BottomTabMenu);
mImageTabWidth = typedArray.getDimension(R.styleable.BottomTabMenu_tab_image_width, -2f);
mImageTabHeight = typedArray.getDimension(R.styleable.BottomTabMenu_tab_image_height, -2f);
mTabImageMiddleDividerWidth = typedArray.getDimension(R.styleable.BottomTabMenu_tab_image_middle_divider_width, mTabImageMiddleDividerWidth);
mTextTabNormalColor = typedArray.getColor(R.styleable.BottomTabMenu_tab_textColor_normal, 0xff000000);
mTextTabSelectedColor = typedArray.getColor(R.styleable.BottomTabMenu_tab_textColor_selected, 0xff000000);
mTextTabSize = typedArray.getDimensionPixelSize(R.styleable.BottomTabMenu_tab_textSize, mTextTabSize);
typedArray.recycle();
}
}
public void setOnTabClickListener(OnTabClickListener onTabClickListener) {
mOnTabClickListener = onTabClickListener;
}
public void setTabMiddleDividerWidth(float width) {
this.mTabImageMiddleDividerWidth = width;
}
public void setHasMiddleImage(boolean hasMiddleImage) {
this.hasMiddleImage = hasMiddleImage;
}
public void addImageTab(int srcNormal, int srcSelected) {
LinearLayout tabView = new LinearLayout(mContext);
tabView.setOrientation(VERTICAL);
tabView.setGravity(Gravity.CENTER);
tabView.setHorizontalGravity(Gravity.CENTER_HORIZONTAL);
ImageView tabImage = new ImageView(mContext);
LayoutParams imageParams = new LayoutParams((int) mImageTabWidth, (int) mImageTabHeight);
imageParams.topMargin = 6;
imageParams.bottomMargin = 6;
imageParams.gravity = Gravity.CENTER;
tabImage.setImageResource(srcNormal);
tabView.addView(tabImage, imageParams);
mLinearTab.add(tabView);
mImageTab.add(tabImage);
mImageTabNormal.add(srcNormal);
mImageTabSelected.add(srcSelected);
LayoutParams params = new LayoutParams(0, LayoutParams.MATCH_PARENT, 1);
params.gravity = Gravity.CENTER;
tabView.setTag((mImageTab.size() - 1));
tabView.setOnClickListener(mOnClickListener);
addView(tabView, params);
if (hasMiddleImage) {
judgeSpaceMiddle();
}
}
public int gettabnum() {
if(mImageTab!=null) return mImageTab.size();
else return 0;
}
public void addTextImageTab(int srcNormal, int srcSelected, String tabTitle, boolean selected) {
LinearLayout tabView = new LinearLayout(mContext);
tabView.setOrientation(VERTICAL);
tabView.setGravity(Gravity.CENTER);
tabView.setHorizontalGravity(Gravity.CENTER_HORIZONTAL);
//添加图片
ImageView tabImage = new ImageView(mContext);
LayoutParams imageParams = new LayoutParams((int) mImageTabWidth, (int) mImageTabHeight);
imageParams.topMargin = 6;
imageParams.bottomMargin = 6;
imageParams.gravity = Gravity.CENTER;
tabImage.setImageResource(srcNormal);
tabView.addView(tabImage, imageParams);
//添加文字
TextView tabText = new TextView(mContext);
LayoutParams textParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
textParams.gravity = Gravity.CENTER;
textParams.bottomMargin = 6;
tabText.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTextTabSize);
tabText.setText(tabTitle);
if (selected) {
tabText.setTextColor(mTextTabSelectedColor);
tabText.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
} else {
tabText.setTextColor(mTextTabNormalColor);
}
tabView.addView(tabText, textParams);
mLinearTab.add(tabView);
mImageTab.add(tabImage);
mImageTabNormal.add(srcNormal);
mImageTabSelected.add(srcSelected);
mTextWithImageTab.add(tabText);
LayoutParams params = new LayoutParams(0, LayoutParams.MATCH_PARENT, 1);
params.gravity = Gravity.CENTER;
tabView.setTag((mImageTab.size() - 1));
tabView.setOnClickListener(mOnClickListener);
addView(tabView, params);
if (hasMiddleImage) {
judgeSpaceMiddle();
}
}
protected int sp2px(float sp) {
final float scale = this.mContext.getResources().getDisplayMetrics().scaledDensity;
return (int) (sp * scale + 0.5f);
}
private void judgeSpaceMiddle() {
if (mTabImageMiddleDividerWidth > 0) {
if (mImageTab.size() % 4 == 0) {
View view = new View(mContext);
LayoutParams params = new LayoutParams((int) mTabImageMiddleDividerWidth, LayoutParams.MATCH_PARENT);
addView(view, mImageTab.size() / 2, params);
}
}
}
public void changeImageTab(int position) {
if (position < mImageTab.size()) {
for (int i = 0; i < mImageTab.size(); i++) {
mImageTab.get(i).setImageResource(mImageTabNormal.get(i));
if (mTextWithImageTab.size() == mImageTab.size())
mTextWithImageTab.get(i).setTextColor(mTextTabNormalColor);
}
mImageTab.get(position).setImageResource(mImageTabSelected.get(position));
if (mTextWithImageTab.size() == mImageTab.size())
mTextWithImageTab.get(position).setTextColor(mTextTabSelectedColor);
}
currentPosition = position;
}
private OnClickListener mOnClickListener = new OnClickListener() {
@Override
public void onClick(View view) {
int pos = (int) view.getTag();
if (currentPosition != pos) {
changeImageTab(pos);
if (mOnTabClickListener != null) {
mOnTabClickListener.onTabClick(view, pos);
}
}
}
};
}
其中attrs 定义的属性值为
<!--name为声明的"属性集合"名，可以随便取，但是最好是设置为跟我们的View一样的名称-->
<declare-styleable name="BottomTabMenu">
<!--声明我们的属性，名称为default_size,取值类型为尺寸类型（dp,px等）-->
<attr name="BottomTabMenu_tab_image_width" format="dimension"/>
<attr name="BottomTabMenu_tab_image_height" format="dimension"/>
<attr name="BottomTabMenu_tab_image_middle_divider_width" format="dimension"/>
<attr name="BottomTabMenu_tab_textColor_normal" format="color|reference"/>
<attr name="BottomTabMenu_tab_textColor_selected" format="color|reference"/>
<attr name="BottomTabMenu_tab_textSize" format="dimension"/>
</declare-styleable>
主布局的xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--主布局-->
<android.support.v4.view.ViewPager
android:id="@+id/mainPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<com.myapp.view.BottomTabMenu
android:id="@+id/bottomTabMenu"
android:layout_width="match_parent"
android:layout_height="54dp"
android:background="@drawable/tab_bottom"
app:tab_image_height="20dp"
app:tab_image_middle_divider_width="80dp"
app:tab_image_width="20dp"
app:tab_textColor_normal="@color/hint_color"
app:tab_textColor_selected="@color/hint_color"
app:tab_textSize="12sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/image_start_living"
android:layout_width="65dp"
android:layout_height="65dp"
android:layout_marginBottom="2dp"
android:src="@drawable/zhibo_begin"/>
</LinearLayout>
</FrameLayout>
可以配合Viewpage滑动监听达到对应的效果
@Bind(R.id.bottomTabMenu)
BottomTabMenu mBottomTabMenu;
private void findViews() {
mBottomTabMenu = (BottomTabMenu) findViewById(R.id.bottomTabMenu);
mBottomTabMenu.setHasMiddleImage(true);
mBottomTabMenu.addTextImageTab(R.drawable.icon_home_show_us, R.drawable.icon_home_show_s, "秀场", true);
mBottomTabMenu.addTextImageTab(R.drawable.icon_home_family_us, R.drawable.icon_home_family_s, "关注", false);
mBottomTabMenu.addTextImageTab(R.drawable.icon_home_find_us, R.drawable.icon_home_find_s, "发现", false);
mBottomTabMenu.addTextImageTab(R.drawable.icon_home_my_us, R.drawable.icon_home_my_s, "我的", false);
// mBottomTabMenu.changeImageTab(0);
mBottomTabMenu.setOnTabClickListener(new OnTabClickListener() {
@Override
public void onTabClick(View view, int position) {
mainViewPager.setCurrentItem(position);
}
});
image_start_living = (ImageView) findViewById(R.id.image_start_living);
image_start_living.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//to do what you want
}
});
mainViewPager = (ViewPager) findViewById(R.id.mainPager);
adapter = new MainFragmentAdapter(this.getSupportFragmentManager());
mainViewPager.setAdapter(adapter);
mainViewPager.setCurrentItem(0);
updateToolBarUi(0);
mainViewPager.setOnPageChangeListener(new MyOnPageChangeListen());
if (android.os.Build.VERSION.SDK_INT > 18)
getWindow().setFlags(
WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
}
private class MyOnPageChangeListen implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
updateToolBarUi(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
private void updateToolBarUi(int index) {
if (mBottomTabMenu.gettabnum() >= index)
mBottomTabMenu.changeImageTab(index);
}
需要注意的是 mBottomTabMenu.setHasMiddleImage(true);是有中间的图标，只是给出了中间的空白，这个图标需要在布局中添加，
底部导航按钮是偶数，并且，数量在写死，没有优化：毕竟要么是2哥哥按钮要么是4个。
private void judgeSpaceMiddle() {
if (mTabImageMiddleDividerWidth > 0) {
if (mImageTab.size() % 4 == 0) {
//此处是对4取余。
View view = new View(mContext);
LayoutParams params = new LayoutParams((int) mTabImageMiddleDividerWidth, LayoutParams.MATCH_PARENT);
addView(view, mImageTab.size() / 2, params);
}
}
}
网友评论