一告材、先看效果
二、需求
上一篇我們講到了簡易的導(dǎo)航條設(shè)計(jì)古劲，有部分同學(xué)反映公司有需求需要在Tab的右上角有新消息提示斥赋，就是一個(gè)紅點(diǎn)或者數(shù)字顯示。那我們接下來就講講思路产艾。
上一篇我們的Tab就是一個(gè)個(gè)的TextView疤剑，開始我想自定義一個(gè)TextView在右上角canvas畫一個(gè)點(diǎn)或者TextView滑绒，但是實(shí)際操作起來很復(fù)雜。如果把TextView換成ViewGroup隘膘，右上角只要控制顯示就好了疑故，最合適的莫過于RelativeLayout了。
三棘幸、代碼實(shí)現(xiàn)
3.1 model修改
這里的代碼都是基于上一篇修改的焰扳，閱讀困難可以先去熟悉第一篇倦零。首先修改Tab：
public class Tab {
private String num;
private String title;
private View tabView;
private TextView textView;
private TextView tvNotice;
private int tabLeft;
private int tabWidth;
private int indicatorLeft;
private int indicatorWidth;
}
這里的TabView換成View了误续，然后里面再記錄兩個(gè)TextView，一個(gè)控制title扫茅，一個(gè)控制右上角的點(diǎn)或消息數(shù)字蹋嵌。
3.2 Tab布局修改
<?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:orientation="vertical"
>
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="新聞"
android:layout_centerInParent="true"
android:gravity="center"
/>
<TextView
android:id="@+id/tv_notice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:layout_alignParentRight="true"
android:background="@drawable/bg_notice"
android:textColor="#fff"
android:gravity="center"
android:layout_margin="2dp"
android:visibility="gone"
/>
</RelativeLayout>
很簡單，title居中葫隙，但是注意一點(diǎn)栽烂，高度一定要match_parent。
3.3 代碼修改
public enum NoticeMode{
/**
* 圓點(diǎn)提示
*/
NOTICE_DOT,
/**
* 數(shù)字提示
*/
NOTICE_NUM
}
增加右上角模式的枚舉恋脚，一個(gè)圓點(diǎn)腺办，一個(gè)數(shù)字。
/**
* 首先初始化所有的tab
*
* @param tabs
* @return
*/
private void initTabs(List<Tab> tabs) {
int size = tabs.size();
Paint paint = new Paint();
for (int i = 0; i < size; i++) {
Tab tab = tabs.get(i);
RelativeLayout rlTabLayout = (RelativeLayout) LayoutInflater.from(mContext).inflate(R.layout.layout_tab_view, null);
LinearLayout.LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, tabHeight);
rlTabLayout.setLayoutParams(params);
TextView textView = (TextView) rlTabLayout.findViewById(R.id.tv_title);
TextView tvNotice = (TextView) rlTabLayout.findViewById(R.id.tv_notice);
textView.setTextSize(txtSize);
textView.setTextColor(txtUnselectedColor);
textView.setText(tab.getTitle());
textView.setTag(i);
textView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Tab preTab = mTabs.get(selectedIndex);
TextView preTextView = preTab.getTextView();
preTextView.setTextColor(txtUnselectedColor);
selectedIndex = (Integer) v.getTag();
setSelectState();
indicatorAnim(mTabs.get(selectedIndex), preTab);
}
});
switch (indicatorMode) {
case EQUAL_TAB:
case EQUAL_CONTENT:
paint.setTextSize(textView.getTextSize());
float titleWidth = paint.measureText(textView.getText().toString());
tab.setIndicatorWidth((int) titleWidth);
break;
case EQUAL_VALUE:
tab.setIndicatorWidth(indicatorWidth);
break;
}
String num = tab.getNum();
if(!TextUtils.isEmpty(num)) {
tvNotice.setVisibility(VISIBLE);
switch (noticeMode) {
case NOTICE_NUM:
tvNotice.setText(num);
tvNotice.setTextSize(8);
tvNotice.setWidth(dp2px(mContext, 14));
tvNotice.setHeight(dp2px(mContext, 14));
break;
case NOTICE_DOT:
tvNotice.setText("");
tvNotice.setWidth(dp2px(mContext, 6));
tvNotice.setHeight(dp2px(mContext, 6));
break;
}
}
tab.setTabView(rlTabLayout);
tab.setTextView(textView);
tab.setTvNotice(tvNotice);
}
}
前面的代碼不解釋了糟描，從String num = tab.getNum();開始看怀喉，這里面記錄一個(gè)num，如果num是空的船响，我們就不管了躬拢，如果有值，說明這個(gè)Tab下有新消息见间，然后根據(jù)noticeMode聊闯，如果是NOTICE_NUM，數(shù)字顯示的區(qū)域比較大一點(diǎn)米诉，14dp菱蔬，可以按照需求定制出去，如果是NOTICE_DOT史侣，顯示點(diǎn)拴泌，那么不管數(shù)字多少，6dp顯示一個(gè)圓點(diǎn)抵窒。
接下來是點(diǎn)擊的時(shí)候弛针，修改的代碼比較少，直接用圖片展示吧：
點(diǎn)擊的時(shí)候界面上隱藏右上角李皇，數(shù)據(jù)上置空削茁。
附上GayHub地址宙枷，有興趣下載下來
定制吧。
