Android View:中间有图标的底部导航栏

作者: silencefun | 来源:发表于2017-07-12 22:51 被阅读307次

Android View:中间有图标的底部导航栏
Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标
安卓底部导航
Android底部导航栏之RadioButton
Space-Navigation-View分析
Android底部导航栏中间凸起
android仿微信底部导航栏图标颜色渐变效果
iOS Swift 界面UI相关
BottomNavigationView的属性设置
com.ashokvarma.android:bottom-na

实现效果：

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

    }
}

Android View:中间有图标的底部导航栏
实现效果：其中attrs 定义的属性值为主布局的xml 可以配合Viewpage滑动监听达到对应的效果需要注...
Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标
霸图镇楼仿闲鱼底部导航栏带有中间凸起图标需求情景: 需要实现一个类似闲鱼APP的底部导航栏的实现 Demo地...
安卓底部导航
Android底部导航栏实现（一）之BottomNavigationBarAndroid底部导航栏实现（二）之Ra...
Android底部导航栏之RadioButton
参考：五种方式实现Android底部导航栏Android底部导航栏实现（二）之RadioGroup 一. 简介 1...
Space-Navigation-View分析
一简介 Space-Navigation-View是Android底部导航栏的开源控件，可以很方便的实现Goog...
Android底部导航栏中间凸起
很多APP底部导航都有这个效果，如图这是布局： ** android:clipChildren="false"*...
android仿微信底部导航栏图标颜色渐变效果
GradualRadioBar 拿RadioGroup和RadioButton开刀，实现微信底部导航栏图标颜色渐变...
iOS Swift 界面UI相关
控制器相关导航栏导航栏跟随右滑手势返回导航栏设置中间View present时设置全屏 TabbarCont...
BottomNavigationView的属性设置
底部导航栏底部导航栏的使用比较常见，目前常用的APP几乎都是使用底部导航栏将内容分类。底部导航栏的实现也比较简单...
com.ashokvarma.android:bottom-na
实现底部导航栏只有图标和图标加文字混合情况下，图标能居中显示的功能BottomNavigationTab类中修改 ...