一、效果如图:
二:实现
①、自定义控件
public class MineBottomTabView extends LinearLayout {
@BindView(R.id.iv_mine_bottom_tab)
ImageView ivMineBottomTab;
@BindView(R.id.tv_mine_bottom_tab_title)
TextView tvMineBottomTabTitle;
@BindView(R.id.ll_mine_bottom_tab_container)
LinearLayout llMineBottomTabContainer;
@BindView(R.id.tv_mine_bottom_tab_number)
TextView tvMineBottomTabNumber;
public MineBottomTabView(Context context) {
this(context, null);
}
public MineBottomTabView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public MineBottomTabView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initViews(context, attrs);
}
private void initViews(Context context, AttributeSet attrs) {
View view = View.inflate(context, R.layout.view_mine_bottom_tab, null);
ButterKnife.bind(this, view);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.mineBottomTab);
//设置图标
int ivTab = typedArray.getResourceId(R.styleable.mineBottomTab_mine_bottom_tab_iv, 0);
if (ivTab != 0) {
ivMineBottomTab.setBackgroundResource(ivTab);
} else {
ivMineBottomTab.setBackgroundColor(Color.WHITE);
}
//设置标题
String title = typedArray.getString(R.styleable.mineBottomTab_mine_bottom_tab_title);
if (!TextUtils.isEmpty(title)) {
tvMineBottomTabTitle.setVisibility(VISIBLE);
tvMineBottomTabTitle.setText(StringUtils.getDefaultNullString(title));
} else {
tvMineBottomTabTitle.setVisibility(GONE);
}
//设置未读消息数字
int number = typedArray.getInt(R.styleable.mineBottomTab_mine_bottom_tab_number, 0);
if (number > 0) {
tvMineBottomTabNumber.setVisibility(VISIBLE);
tvMineBottomTabNumber.setText(number + "");
} else {
tvMineBottomTabNumber.setVisibility(GONE);
}
//设置选中状态
boolean isSelected = typedArray.getBoolean(R.styleable.mineBottomTab_mine_bottom_tab_selected, false);
ivMineBottomTab.setSelected(isSelected);
tvMineBottomTabTitle.setSelected(isSelected);
this.addView(view);
}
/**
* 设置这个tab按钮是否被选中
*
* @param selected
*/
public void setSelected(boolean selected) {
if (ivMineBottomTab != null) {
ivMineBottomTab.setSelected(selected);
}
if (tvMineBottomTabTitle != null) {
tvMineBottomTabTitle.setSelected(selected);
}
}
/**
* 设置未读消息的数量
*
* @param unreadNumber
*/
public void setUnreadNumber(int unreadNumber) {
if (tvMineBottomTabNumber == null) {
return;
}
if (unreadNumber > 0 && unreadNumber < 100) {
tvMineBottomTabNumber.setVisibility(VISIBLE);
tvMineBottomTabNumber.setText(unreadNumber + "");
} else if (unreadNumber >= 100) {
tvMineBottomTabNumber.setVisibility(VISIBLE);
tvMineBottomTabNumber.setText("...");
} else {
tvMineBottomTabNumber.setVisibility(GONE);
}
}
}
②view_mine_bottom_tab.xml文件。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/ll_mine_bottom_tab_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_mine_bottom_tab"
android:layout_width="24dp"
android:layout_height="21dp"
android:background="@drawable/selector_yours" />
<TextView
android:id="@+id/tv_mine_bottom_tab_title"
style="@style/tab_bottom"
android:text="@string/anjian" />
</LinearLayout>
<TextView
android:id="@+id/tv_mine_bottom_tab_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/ll_mine_bottom_tab_container"
android:background="@drawable/shape_circle_redbg"
android:gravity="center"
android:inputType="number"
android:textColor="@color/white"
android:textSize="8sp" />
</RelativeLayout>
③styles.xml文件。颜色自定义,不粘贴了。
<style name="tab_hangyeduan_bottom">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">center</item>
<item name="android:textSize">10sp</item>
<item name="android:paddingTop">3dp</item>
<item name="android:paddingBottom">3dp</item>
<item name="android:textColor">@color/selector_text_color_</item>
</style>
④attrs.xml文件样式。自定义控件中 R.styleable.mineBottomTab
<declare-styleable name="mineBottomTab">
<attr name="mine_bottom_tab_iv" format="reference" />
<attr name="mine_bottom_tab_title" format="string" />
<attr name="mine_bottom_tab_number" format="string" />
<attr name="mine_bottom_tab_selected" format="boolean"></attr>
</declare-styleable>
⑤activity_main.xml文件。
app:mine_bottom_tab_iv:显示的图标。
mine_bottom_tab_number:显示的红色的数字。
mine_bottom_tab_title:显示的文字标题。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewpager_main_activity"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<View style="@style/divider_line_horizontal" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="horizontal"
android:paddingTop="3dp">
<cn.com.views.MineBottomTabView
android:id="@+id/mine_bottom_tab_shouye"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
app:mine_bottom_tab_iv="@drawable/selector_first"
app:mine_bottom_tab_number="0"
app:mine_bottom_tab_title="@string/ceshi" />
<View
style="@style/divider_line_vertical"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp" />
<cn.com.views.MineBottomTabView
android:id="@+id/mine_bottom_tab_anjian"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
app:mine_bottom_tab_iv="@drawable/selector_second"
app:mine_bottom_tab_number="10"
app:mine_bottom_tab_title="@string/ceshi" />
<View
style="@style/divider_line_vertical"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp" />
<cn.com.views.MineBottomTabView
android:id="@+id/mine_bottom_tab_geren_zhongxin"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
app:mine_bottom_tab_iv="@drawable/selector_second"
app:mine_bottom_tab_number="0"
app:mine_bottom_tab_title="@string/ceshi" />
</LinearLayout>
</LinearLayout>
⑥源码文件中使用:
view.setSelected(true);//设置选中
似乎就是这样了,慢慢进步吧。
原:博观而约取,厚积而薄发
译:在广博读书而简约审慎地取用,在深厚积累之后慢慢地释放出来。