当前位置：首页 > news >正文

android 位于底部的tab,GitHub - DevinFu/BottomTabBar: Android应用中位于底部的tab栏

news 来源：原创 2024/5/19 16:50:56

BottomTabBar

说明：此控件是在Jack Tony: 的BottomTabBar项目基础上进行的改造，原项目地址：https://github.com/tianzhijiexian/BottomTabBar。在此表示感谢。

主要是由于原项目中，tab采用drawable top 和 radio button形式，无法灵活控制drawable的大小及drawable与文字之间的间距，现采用自定义的RadioImageView实现tab上的drawable，RadioTextView实现tab的标题。

效果图

底部tab切换栏。完全模仿了RadioGroup的机制，提供了可以扩展的接口

BottomTabGroup完全模仿了RadioGroup的机制，你可以理解为它是RadioGroup的增强版本，它内部的view不再仅限于RadioButton了，而是实现了BottomTabImpl这个接口的的任何view。这样我们可以很容易的用自定义控件来做类似RadioButton的效果了，自然而然就能有更多的扩展性。

如何使用

引入library

```

dependencies {

compile 'com.frozy:bottombar:1.0'

}

```

1.首先在布局中像放RadioGroup时放一个BottomTabGroup:

android:id="@+id/bottom_bar_root"

android:layout_width="match_parent"

android:layout_height="54dp"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:background="@drawable/list_vertical_root_bg"

android:orientation="horizontal"

android:paddingTop="5dp"

android:id="@+id/tab_01"

style="@style/bottomTab"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

app:drawableTop="@drawable/main_bottombar_icon_home_selector"

app:tabText="tab01"/>

android:id="@+id/tab_02"

style="@style/bottomTab"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

app:hintEnable="false"

app:drawableTop="@drawable/main_bottombar_icon_home_selector"

app:tabText="tab02"/>

android:id="@+id/tab_03"

style="@style/bottomTab"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

app:drawableTop="@drawable/main_bottombar_icon_home_selector"

app:tabText="tab03"/>

android:id="@+id/tab_04"

style="@style/bottomTab"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

app:drawableTop="@drawable/main_bottombar_icon_home_selector"

app:tabText="tab04"/>

2.style/bottomTab定义

@color/main_bottombar_text_selector

12sp

@android:color/white

3sp

@drawable/red_hint

true

6dp

设置属性

如果你用的是包中提供的BottomTab的话，那么参考以上使用示例, 有下面这几个属性可以设置:

app:tabText：设置按钮下方的文字

app:tabTextColor：设置按钮的颜色

app:drawableTop：设置按钮中的图片

app:tabTextSize: 设置按钮文字大小

app:hintText:设置角标文字

app:hintTextColor:设置角标文字颜色

app:hintTextSize:设置角标文字大小

app:hintTextBackground:设置角标背景

app:hintEnable:设置是否显示角标

app:verticalSpace:设置按钮文字与图片的垂直间距, 图片会自适应大小

扩展

前面说到了BottomTab就是一个具体的实现类，我们完全可以用自定义View的方式来做出自己的按钮和红点来，下面推荐两种实现方式，可以按需求来做。

1.继承BottomTab**(简单)**

继承BottomTab这个类，然后复写getLayoutRes()这个方法，传入你自定义的一个layout的id:

public class TestView extends BottomTab{

public TestView(Context context, AttributeSet attrs) {

super(context, attrs);

}

public TestView(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

}

@Override

public int getLayoutRes() {

return R.layout.test_main;

}

在这个layout中你必须要放入一个id为：tab_btn和tab_hint的两个View，其中一个是RadioButton，一个是TextView。这样id为tab_hint的TextView就可以做红点提示，而id为tab_btn的RadioButton就可以做实体的按钮了。需要注意的是BottomTab这个view是继承自RelativeLayout的，所以在做布局的时候需要注意下控件摆放的位置。为了减少布局的层次，你还可以用merge标签。就像下面的写法：

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

android:id="@id/tab_icon"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_centerInParent="true"

android:id="@id/tab_hint"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_marginLeft="-5dp"