圆角Tablayout以及仿微信QQ小红点,数字通知
2016-04-25 20:43
549 查看
最近在项目中遇到类似微信或者QQ那样的通知小红点,还要有数字通知,当数字大于99时显示99+。看到网上很多朋友提到用BadgeView(github上有),自己也用了下,发现虽然不错但是还是有点不足。后来又有个功能用到如图所示的Tablayout,
在github上找到了FlycoTabLayout这个开源的项目,不仅满足了市面上大多数Tablayout的UI,还封装了小红点和数字通知的功能,于是把其中具有代表性的几个功能实现在自己的Demo上,最后实现的效果是这个样子的,
废话好像有点多了下面开始进入主题。
FlycoTabLayout这个库里关于Tablayout的设计形式有很多,这里我仅使用了其中的一种SegmentTablayout。SegmentTablayout和Google官方提供的Tablayout不一样,没有定义与ViewPager关联起来的方法。所以我在使用的时候需要给它设置选中监听。
这部分的布局文件很简单:
下面开始说小红点,在FlycoTabLayout中定义了一个小红点的封装类——MsgView。当要添加小红点的时候,我们只需要在布局文件中把它加上就好了,下面先说我在顶部Toolbar上的99+小红点,布局文件代码如下:
我们在Toolbar上的99+,实际上就一行代码的事儿。
当然,还没有结束,我底部红点就和这些不一样了,底部我采用的是RadioGroup和RadioButton的方式,如果直接在需要显示红点的地方加上MsgView,会不显示,那怎么办呢?这时候就需要我们自己定义一个RadioGroup,让它继承LinearLayout,这样就可以了。
这时候我们再调用UnreadMsgUtils.show(msgView,0);就可以了。但是会发现,这个红点有点小啊,怎么把它变大呢? 虽然UnreadMsgUtils有提供setSize方法,但是用起来好像没卵用,为什么呢?看看源码就知道了。所以要改变红点的大小需要我们自己写show方法,其实也很简单,只需要把show方法中控制红点宽高的属性调整下就好。我是这样调整的:
就这样了,感谢FlycoTabLayout开源项目(github地址:https://github.com/H07000223/FlycoTabLayout)和农民伯伯的支持内部嵌套布局的RadioGroup。(农民伯伯: http://over140.cnblogs.com)
第一次写博客,如果有好的见解的话多多交流,欢迎提建议,O(∩_∩)O谢谢!
在github上找到了FlycoTabLayout这个开源的项目,不仅满足了市面上大多数Tablayout的UI,还封装了小红点和数字通知的功能,于是把其中具有代表性的几个功能实现在自己的Demo上,最后实现的效果是这个样子的,
废话好像有点多了下面开始进入主题。
FlycoTabLayout这个库里关于Tablayout的设计形式有很多,这里我仅使用了其中的一种SegmentTablayout。SegmentTablayout和Google官方提供的Tablayout不一样,没有定义与ViewPager关联起来的方法。所以我在使用的时候需要给它设置选中监听。
这部分的布局文件很简单:
<com.flyco.tablayout.SegmentTabLayout android:id="@+id/mtablayout" android:layout_width="match_parent" android:layout_height="32dp" android:layout_gravity="center_horizontal" android:layout_margin="10dp" tl:tl_bar_color="#ffffff" tl:tl_indicator_color="#2C97DE" tl:tl_indicator_corner_radius="8dp" tl:tl_tab_padding="20dp" /> <android.support.v4.view.ViewPager android:id="@+id/mviewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/>
程序部分代码: private String[] mTitles = {"警告","通知","推荐"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tabLayout = (SegmentTabLayout) findViewById(R.id.mtablayout); viewPager = (ViewPager) findViewById(R.id.mviewpager); fragments.add(new PagerOne()); fragments.add(new PagerTwo()); fragments.add(new PagerThree()); tabLayout.setTabData(mTitles);//给Tablayout设置标题 viewPager.setAdapter(new MyPagerAdpater(getSupportFragmentManager())); //为tablayout设置选中监听 tabLayout.setOnTabSelectListener(new OnTabSelectListener() { @Override public void onTabSelect(int position) { viewPager.setCurrentItem(position); } @Override public void onTabReselect(int position) { } }); //同时,还要给Viewpager设置选中监听,才能使SegmentTablayout和ViewPager双向同步。 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { tabLayout.setCurrentTab(position); } @Override public void onPageScrollStateChanged(int state) { } }); 至于Adapter的代码就是灰常简单了。 private class MyPagerAdpater extends FragmentPagerAdapter { public MyPagerAdpater(FragmentManager fm) { super(fm); } @Override public int getCount() { return fragments.size(); } @Override public CharSequence getPageTitle(int position) { return mTitles[position]; } @Override public Fragment getItem(int position) { return fragments.get(position); } }这样就形成了文章最开始贴的图片的Tab样式了,并且Viewpager随便滑,Tab随便点。
下面开始说小红点,在FlycoTabLayout中定义了一个小红点的封装类——MsgView。当要添加小红点的时候,我们只需要在布局文件中把它加上就好了,下面先说我在顶部Toolbar上的99+小红点,布局文件代码如下:
<android.support.v7.widget.Toolbar android:id="@+id/azure_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="#0065bd"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageButton android:id="@+id/notification" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/transparent" android:src="@android:drawable/ic_menu_add"/> <com.flyco.tablayout.widget.MsgView android:id="@+id/msgview" xmlns:mv="http://schemas.android.com/apk/res-auto" android:layout_toRightOf="@id/notification" android:gravity="center" android:textColor="#ffffff" android:textSize="11.5sp" android:visibility="gone" mv:mv_backgroundColor="#FD481F" mv:mv_isRadiusHalfHeight="true" mv:mv_strokeColor="#ffffff" mv:mv_strokeWidth="1dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </RelativeLayout> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="Tablayout" android:textColor="#ffffff" android:textSize="16sp"/> </android.support.v7.widget.Toolbar>MsgView定义了三种红点的显示方式:1.没有数字的,就单纯显示个点。2.数字在1-99的,显示实际数字。3.数字大于99的,显示99+。
我们在Toolbar上的99+,实际上就一行代码的事儿。
{ //添加未读消息,带数字未读红点。其实就是在布局文件中写好了 msgView = (MsgView) findViewById(R.id.msgview); UnreadMsgUtils.show(msgView,666); }Tab上通知的小红点呢,不要我们写布局文件和其他方法,SegmentTablayout都给我们封装好了,我们只需要调用SegmentTablayout.showDot(position)方法就行了。
当然,还没有结束,我底部红点就和这些不一样了,底部我采用的是RadioGroup和RadioButton的方式,如果直接在需要显示红点的地方加上MsgView,会不显示,那怎么办呢?这时候就需要我们自己定义一个RadioGroup,让它继承LinearLayout,这样就可以了。
public class NestRadioGroup extends LinearLayout { // holds the checked id; the selection is empty by default private int mCheckedId = -1; // tracks children radio buttons checked state private CompoundButton.OnCheckedChangeListener mChildOnCheckedChangeListener; // when true, mOnCheckedChangeListener discards events private boolean mProtectFromCheckedChange = false; private OnCheckedChangeListener mOnCheckedChangeListener; private PassThroughHierarchyChangeListener mPassThroughListener; /** * {@inheritDoc} */ public NestRadioGroup(Context context) { super(context); init(); } /** * {@inheritDoc} */ public NestRadioGroup(Context context, AttributeSet attrs) { super(context, attrs); init(); } private void init() { mCheckedId = View.NO_ID; setOrientation(HORIZONTAL); mChildOnCheckedChangeListener = new CheckedStateTracker(); mPassThroughListener = new PassThroughHierarchyChangeListener(); super.setOnHierarchyChangeListener(mPassThroughListener); } /** * {@inheritDoc} */ @Override public void setOnHierarchyChangeListener(OnHierarchyChangeListener listener) { // the user listener is delegated to our pass-through listener mPassThroughListener.mOnHierarchyChangeListener = listener; } /** * {@inheritDoc} */ @Override protected void onFinishInflate() { super.onFinishInflate(); // checks the appropriate radio button as requested in the XML file if (mCheckedId != View.NO_ID) { mProtectFromCheckedChange = true; setCheckedStateForView(mCheckedId, true); mProtectFromCheckedChange = false; setCheckedId(mCheckedId); } } /** 递归查找具有选中属性的子控件 */ private static CompoundButton findCheckedView(View child) { if (child instanceof CompoundButton) return (CompoundButton) child; if (child instanceof ViewGroup) { ViewGroup group = (ViewGroup) child; for (int i = 0, j = group.getChildCount(); i < j; i++) { CompoundButton check = findCheckedView(group.getChildAt(i)); if (check != null) return check; } } return null;//没有找到 } @Override public void addView(View child, int index, ViewGroup.LayoutParams params) { final CompoundButton view = findCheckedView(child); if (view != null) { if (view.isChecked()) { mProtectFromCheckedChange = true; if (mCheckedId != -1) { setCheckedStateForView(mCheckedId, false); } mProtectFromCheckedChange = false; setCheckedId(view.getId()); } } super.addView(child, index, params); } /** * <p>Sets the selection to the radio button whose identifier is passed in * parameter. Using -1 as the selection identifier clears the selection; * such an operation is equivalent to invoking {@link #clearCheck()}.</p> * * @param id the unique id of the radio button to select in this group * * @see #getCheckedRadioButtonId() * @see #clearCheck() */ public void check(int id) { // don't even bother if (id != -1 && (id == mCheckedId)) { return; } if (mCheckedId != -1) { setCheckedStateForView(mCheckedId, false); } if (id != -1) { setCheckedStateForView(id, true); } setCheckedId(id); } private void setCheckedId(int id) { mCheckedId = id; if (mOnCheckedChangeListener != null) { mOnCheckedChangeListener.onCheckedChanged(this, mCheckedId); } } private void setCheckedStateForView(int viewId, boolean checked) { View checkedView = findViewById(viewId); if (checkedView != null && checkedView instanceof CompoundButton) { ((CompoundButton) checkedView).setChecked(checked); } } /** * <p>Returns the identifier of the selected radio button in this group. * Upon empty selection, the returned value is -1.</p> * * @return the unique id of the selected radio button in this group * * @see #check(int) * @see #clearCheck() * * @attr ref android.R.styleable#NestRadioGroup_checkedButton */ public int getCheckedRadioButtonId() { return mCheckedId; } /** * <p>Clears the selection. When the selection is cleared, no radio button * in this group is selected and {@link #getCheckedRadioButtonId()} returns * null.</p> * * @see #check(int) * @see #getCheckedRadioButtonId() */ public void clearCheck() { check(-1); } /** * <p>Register a callback to be invoked when the checked radio button * changes in this group.</p> * * @param listener the callback to call on checked state change */ public void setOnCheckedChangeListener(OnCheckedChangeListener listener) { mOnCheckedChangeListener = listener; } /** * {@inheritDoc} */ @Override public LayoutParams generateLayoutParams(AttributeSet attrs) { return new NestRadioGroup.LayoutParams(getContext(), attrs); } /** * {@inheritDoc} */ @Override protected boolean checkLayoutParams(ViewGroup.LayoutParams p) { return p instanceof NestRadioGroup.LayoutParams; } @Override protected LinearLayout.LayoutParams generateDefaultLayoutParams() { return new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); } /** * <p>This set of layout parameters defaults the width and the height of * the children to {@link #WRAP_CONTENT} when they are not specified in the * XML file. Otherwise, this class ussed the value read from the XML file.</p> * * <p>See * {@link android.R.styleable#LinearLayout_Layout LinearLayout Attributes} * for a list of all child view attributes that this class supports.</p> * */ public static class LayoutParams extends LinearLayout.LayoutParams { /** * {@inheritDoc} */ public LayoutParams(Context c, AttributeSet attrs) { super(c, attrs); } /** * {@inheritDoc} */ public LayoutParams(int w, int h) { super(w, h); } /** * {@inheritDoc} */ public LayoutParams(int w, int h, float initWeight) { super(w, h, initWeight); } /** * {@inheritDoc} */ public LayoutParams(ViewGroup.LayoutParams p) { super(p); } /** * {@inheritDoc} */ public LayoutParams(MarginLayoutParams source) { super(source); } /** * <p>Fixes the child's width to * {@link android.view.ViewGroup.LayoutParams#WRAP_CONTENT} and the child's * height to {@link android.view.ViewGroup.LayoutParams#WRAP_CONTENT} * when not specified in the XML file.</p> * * @param a the styled attributes set * @param widthAttr the width attribute to fetch * @param heightAttr the height attribute to fetch */ @Override protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr) { if (a.hasValue(widthAttr)) { width = a.getLayoutDimension(widthAttr, "layout_width"); } else { width = WRAP_CONTENT; } if (a.hasValue(heightAttr)) { height = a.getLayoutDimension(heightAttr, "layout_height"); } else { height = WRAP_CONTENT; } } } /** * <p>Interface definition for a callback to be invoked when the checked * radio button changed in this group.</p> */ public interface OnCheckedChangeListener { /** * <p>Called when the checked radio button has changed. When the * selection is cleared, checkedId is -1.</p> * * @param group the group in which the checked radio button has changed * @param checkedId the unique identifier of the newly checked radio button */ public void onCheckedChanged(NestRadioGroup group, int checkedId); } private class CheckedStateTracker implements CompoundButton.OnCheckedChangeListener { public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { // prevents from infinite recursion if (mProtectFromCheckedChange) { return; } mProtectFromCheckedChange = true; if (mCheckedId != -1) { setCheckedStateForView(mCheckedId, false); } mProtectFromCheckedChange = false; int id = buttonView.getId(); setCheckedId(id); } } /** * <p>A pass-through listener acts upon the events and dispatches them * to another listener. This allows the table layout to set its own internal * hierarchy change listener without preventing the user to setup his.</p> */ private class PassThroughHierarchyChangeListener implements ViewGroup.OnHierarchyChangeListener { private ViewGroup.OnHierarchyChangeListener mOnHierarchyChangeListener; /** * {@inheritDoc} */ @TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1) public void onChildViewAdded(View parent, View child) { if (parent == NestRadioGroup.this) { CompoundButton view = findCheckedView(child);//查找子控件 if (view != null) { int id = view.getId(); // generates an id if it's missing if (id == View.NO_ID && Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) { id = View.generateViewId(); view.setId(id); } view.setOnCheckedChangeListener(mChildOnCheckedChangeListener); } } if (mOnHierarchyChangeListener != null) { mOnHierarchyChangeListener.onChildViewAdded(parent, child); } } /** * {@inheritDoc} */ public void onChildViewRemoved(View parent, View child) { if (parent == NestRadioGroup.this) { CompoundButton view = findCheckedView(child);//查找子控件 if (view != null) { view.setOnCheckedChangeListener(null); } } if (mOnHierarchyChangeListener != null) { mOnHierarchyChangeListener.onChildViewRemoved(parent, child); } } } }这时候我们在布局文件中把MsgView加上就可以了。为了不使文章过长,就只粘含有MagView的RadioButton了。
<com.example.v_lzhiy.tablayout.view.NestRadioGroup android:id="@+id/radioGroup_bottom" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#f9f9f9" android:gravity="center_horizontal" android:orientation="horizontal" android:padding="5dp" > <RelativeLayout android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"> <RadioButton android:id="@+id/rb_azure" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:background="@android:color/transparent" android:button="@android:color/transparent" android:drawableTop="@drawable/rb_me_selector" android:textSize="18sp" android:textColor="@drawable/bottom_radiobutton_selector" android:drawablePadding="1dp" android:gravity="center" android:text="Home"/> <com.flyco.tablayout.widget.MsgView android:id="@+id/msgview_azure" xmlns:mv="http://schemas.android.com/apk/res-auto" android:layout_toRightOf="@id/rb_azure" android:gravity="center" android:textColor="#ffffff" android:visibility="visible" mv:mv_backgroundColor="#FD481F" mv:mv_isRadiusHalfHeight="true" mv:mv_strokeColor="#ffffff" mv:mv_strokeWidth="1dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </RelativeLayout>
这时候我们再调用UnreadMsgUtils.show(msgView,0);就可以了。但是会发现,这个红点有点小啊,怎么把它变大呢? 虽然UnreadMsgUtils有提供setSize方法,但是用起来好像没卵用,为什么呢?看看源码就知道了。所以要改变红点的大小需要我们自己写show方法,其实也很简单,只需要把show方法中控制红点宽高的属性调整下就好。我是这样调整的:
radioGroup = (NestRadioGroup) findViewById(R.id.radioGroup_bottom); msgView_bottom = (MsgView) findViewById(R.id.msgview_azure); RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) msgView_bottom.getLayoutParams(); DisplayMetrics dm = msgView_bottom.getResources().getDisplayMetrics(); msgView_bottom.setVisibility(View.VISIBLE); msgView_bottom.setStrokeWidth(0); msgView_bottom.setText(""); lp.width = (int) (10 * dm.density);//这里从6变10 lp.height = (int) (10 * dm.density);//这里从6变10 msgView_bottom.setLayoutParams(lp);
就这样了,感谢FlycoTabLayout开源项目(github地址:https://github.com/H07000223/FlycoTabLayout)和农民伯伯的支持内部嵌套布局的RadioGroup。(农民伯伯: http://over140.cnblogs.com)
第一次写博客,如果有好的见解的话多多交流,欢迎提建议,O(∩_∩)O谢谢!
相关文章推荐
- GUI - Web前端开发框架
- 评价ui设计作品好坏的八个标准(界面/交互设计研究)
- 为Yahoo! UI Extensions Grid增加内置的可编辑器
- Cocos2d-x UI开发之文本类使用实例
- 谈谈对jquery ui tabs 的理解
- 在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
- UI Events 用户界面事件
- jquery UI Datepicker时间控件的使用方法(基础版)
- Hallo.js基于jQuery UI所见即所得的Web编辑器
- 基于jQuery UI CSS Framework开发Widget的经验
- jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
- jQuery UI设置固定日期选择特效代码分享
- Jquery ajax 同步阻塞引起的UI线程阻塞问题
- jQuery UI的Dialog无法提交问题的解决方法
- jQuery ui实现动感的圆角渐变网站导航菜单效果代码
- jquery UI Datepicker时间控件的使用方法(终结版)
- jquery UI Datepicker时间控件的使用方法(加强版)
- 关于jQuery UI 使用心得及技巧
- jquery ui dialog替代confirm实例分析
- jQuery ui 1.7更新小结