Skip to content

B
BottomBarLayout

ChayChan / BottomBarLayout

通知 1
Star 1
Fork 0
B
BottomBarLayout

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 eb7f66a6 编写于 作者: C chaychan
浏览文件
操作

Merge remote-tracking branch 'origin/master'

上级 26717fb7 e4ab5a5f
隐藏空白更改
内联 并排
Showing with 234 addition and 43 deletion
README.md
浏览文件 @ eb7f66a6
......@@ -3,9 +3,43 @@
![](./intro_img/display1.gif)
####显示未读数、提示小红点、提示消息
![](./intro_img/4.png)
### BottomBarLayout的使用
#### BottomBarItem属性介绍
<!--默认状态下的图标-->
<attr name="iconNormal" format="reference"/>
<!--选中状态下的图标-->
<attr name="iconSelected" format="reference"/>
<!--底部文字-->
<attr name="itemText" format="string"/>
<!--文字大小-->
<attr name="itemTextSize" format="dimension"/>
<!--默认状态下的文字颜色-->
<attr name="textColorNormal" format="color"/>
<!--选中状态下的文字颜色-->
<attr name="textColorSelected" format="color"/>
<!--文字和图标的顶部距离-->
<attr name="itemMarginTop" format="dimension"/>
<!--是否开启触摸背景效果-->
<attr name="openTouchBg" format="boolean"/>
<!--设置触摸背景-->
<attr name="touchDrawable" format="reference"/>
<!--设置图标的宽度-->
<attr name="iconWidth" format="dimension"/>
<!--设置图标的高度-->
<attr name="iconHeight" format="dimension"/>
<!--设置BottomBarItem的padding-->
<attr name="itemPadding" format="dimension"/>
<!--设置未读数字体大小-->
<attr name="unreadTextSize" format="dimension"/>
<!--设置提示消息字体大小-->
<attr name="msgTextSize" format="dimension"/>
#### 布局文件中配置
在xml文件中，配置BottomBarLayout，包裹子条目BottomBarItem
......@@ -94,33 +128,6 @@
</LinearLayout>
#### BottomBarItem属性介绍
<!--默认状态下的图标-->
<attr name="iconNormal" format="reference"/>
<!--选中状态下的图标-->
<attr name="iconSelected" format="reference"/>
<!--底部文字-->
<attr name="itemText" format="string"/>
<!--文字大小-->
<attr name="itemTextSize" format="dimension"/>
<!--默认状态下的文字颜色-->
<attr name="textColorNormal" format="color"/>
<!--选中状态下的文字颜色-->
<attr name="textColorSelected" format="color"/>
<!--文字和图标的顶部距离-->
<attr name="itemMarginTop" format="dimension"/>
<!--是否开启触摸背景效果-->
<attr name="openTouchBg" format="boolean"/>
<!--设置触摸背景-->
<attr name="touchDrawable" format="reference"/>
<!--设置图标的宽度-->
<attr name="iconWidth" format="dimension"/>
<!--设置图标的高度-->
<attr name="iconHeight" format="dimension"/>
<!--设置BottomBarItem的padding-->
<attr name="itemPadding" format="dimension"/>
#### java文件中设置
找过对应的ViewPager和BottomBarLayout,为ViewPager设置Adapter，然后为BottomBarLayout设置ViewPager
......@@ -149,6 +156,22 @@
}
});
#### 显示未读数、提示小红点、提示消息
mBottomBarLayout.setUnread(0,20);//设置第一个页签的未读数为20
mBottomBarLayout.setUnread(1,101);//设置第二个页签的未读书
mBottomBarLayout.showNotify(2);//设置第三个页签显示提示的小红点
mBottomBarLayout.setMsg(3,"NEW");//设置第四个页签显示NEW提示文字
当设置的未读数小于或等于0时，消失未读数的小红点将会消失；
当未读数为1-99时，则显示对应的数字；
当未读数大于99时，显示99+；
#### 隐藏提示小红点、提示消息
mBottomBarLayout.hideNotify(2);//隐藏第三个页签显示提示的小红点
mBottomBarLayout.hideMsg(3);//隐藏第四个页签显示的提示文字
#### BottomBarItem的介绍
&emsp;&emsp;BottomBarItem继承于LinearLayout，其子View有显示图标的ImageView和展示文字的TextView,分别可以通过getImageView()和getTextView()方法获取到对应的子控件。github上不少底部导航栏的控件都没能获取到对应的子控件，所以在需要对子控件进行操作的时候极不方便，有一些的思路并不是用ImageView和TextView，而是用绘制的，所以也不能获取到对应的显示图标的控件或展示文字的控件，造成无法获取到该控件，无法进行一些业务上的操作，比如类似今日头条的底部的首页，点击首页的页签，会更换成加载中的图标，执行旋转动画，BottomBarLayout可以轻松地做到这个需求。
......@@ -233,7 +256,7 @@
打开app的module中的build.gradle，在dependencies{}中，添加依赖，如下：
dependencies {
compile 'com.github.chaychan:BottomBarLayout:1.0.2'
compile 'com.github.chaychan:BottomBarLayout:1.0.4'
}
......
demo/src/main/java/com/chaychan/bottombarlayout/MainActivity.java
浏览文件 @ eb7f66a6
......@@ -115,6 +115,11 @@ public class MainActivity extends FragmentActivity {
cancelTabLoading(bottomItem);//停止旋转动画
}
});
mBottomBarLayout.setUnread(0,20);//设置第一个页签的未读数为20
mBottomBarLayout.setUnread(1,101);//设置第二个页签的未读书
mBottomBarLayout.showNotify(2);//设置第三个页签显示提示的小红点
mBottomBarLayout.setMsg(3,"NEW");//设置第四个页签显示NEW提示文字
}
/**停止首页页签的旋转动画*/
......
library/build.gradle
浏览文件 @ eb7f66a6
......@@ -22,7 +22,7 @@ android {
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile fileTree(include: ['*.jar'], dir: 'libs')
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
......
library/src/main/java/com/chaychan/library/BottomBarItem.java
浏览文件 @ eb7f66a6
......@@ -5,14 +5,15 @@ import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
/**
* @author ChayChan
* @description: 底部tab条目
......@@ -35,9 +36,15 @@ public class BottomBarItem extends LinearLayout {
private int mIconHeight;//图标的高度
private int mItemPadding;//BottomBarItem的padding
private TextView mTextView;
private ImageView mImageView;
private TextView mTvUnread;
private TextView mTvNotify;
private TextView mTvMsg;
private TextView mTextView;
private int mUnreadTextSize = 10; //未读数默认字体大小10sp
private int mMsgTextSize = 6; //消息默认字体大小6sp
public BottomBarItem(Context context) {
......@@ -73,6 +80,9 @@ public class BottomBarItem extends LinearLayout {
mIconHeight = ta.getDimensionPixelSize(R.styleable.BottomBarItem_iconHeight, 0);
mItemPadding = ta.getDimensionPixelSize(R.styleable.BottomBarItem_itemPadding, 0);
mUnreadTextSize = ta.getDimensionPixelSize(R.styleable.BottomBarItem_unreadTextSize, UIUtils.sp2px(mContext,mUnreadTextSize));
mMsgTextSize = ta.getDimensionPixelSize(R.styleable.BottomBarItem_msgTextSize, UIUtils.sp2px(mContext,mMsgTextSize));
ta.recycle();
checkValues();
......@@ -107,22 +117,27 @@ public class BottomBarItem extends LinearLayout {
view.setPadding(mItemPadding,mItemPadding,mItemPadding,mItemPadding);
}
mImageView = (ImageView) view.findViewById(R.id.iv_icon);
mTvUnread = (TextView) view.findViewById(R.id.tv_unred_num);
mTvMsg = (TextView) view.findViewById(R.id.tv_msg);
mTvNotify = (TextView) view.findViewById(R.id.tv_point);
mTextView = (TextView) view.findViewById(R.id.tv_text);
mImageView.setImageResource(mIconNormalResourceId);
if (mIconWidth != 0 && mIconHeight != 0){
//如果有设置图标的宽度和高度，则设置ImageView的宽高
LayoutParams imageLayoutParams = (LayoutParams) mImageView.getLayoutParams();
FrameLayout.LayoutParams imageLayoutParams = (FrameLayout.LayoutParams) mImageView.getLayoutParams();
imageLayoutParams.width = mIconWidth;
imageLayoutParams.height = mIconHeight;
mImageView.setLayoutParams(imageLayoutParams);
}
mTextView.getPaint().setTextSize(mTextSize);
mTextView.setText(mText);
mTextView.setTextColor(mTextColorNormal);
mTextView.setTextSize(TypedValue.COMPLEX_UNIT_PX,mTextSize);//设置底部文字字体大小
mTvUnread.setTextSize(TypedValue.COMPLEX_UNIT_PX,mUnreadTextSize);//设置未读数的字体大小
mTvMsg.setTextSize(TypedValue.COMPLEX_UNIT_PX,mMsgTextSize);//设置提示文字的字体大小
mTextView.setTextColor(mTextColorNormal);//设置底部文字字体颜色
mTextView.setText(mText);//设置标签文字
LayoutParams textLayoutParams = (LayoutParams) mTextView.getLayoutParams();
textLayoutParams.topMargin = mMarginTop;
......@@ -156,4 +171,44 @@ public class BottomBarItem extends LinearLayout {
mImageView.setImageResource(isSelected?mIconSelectedResourceId:mIconNormalResourceId);
mTextView.setTextColor(isSelected?mTextColorSelected:mTextColorNormal);
}
private void setTvVisiable(TextView tv){
//都设置为不可见
mTvUnread.setVisibility(GONE);
mTvMsg.setVisibility(GONE);
mTvNotify.setVisibility(GONE);
tv.setVisibility(VISIBLE);//设置为可见
}
/**
* 设置未读数
* @param unreadNum 小于等于0则隐藏，大于0小于99则显示对应数字，超过99显示99+
*/
public void setUnreadNum(int unreadNum){
setTvVisiable(mTvUnread);
if (unreadNum <= 0){
mTvUnread.setVisibility(GONE);
}else if (unreadNum <= 99){
mTvUnread.setText(String.valueOf(unreadNum));
}else{
mTvUnread.setText("99+");
}
}
public void setMsg(String msg){
setTvVisiable(mTvMsg);
mTvMsg.setText(msg);
}
public void hideMsg(){
mTvMsg.setVisibility(GONE);
}
public void showNotify(){
setTvVisiable(mTvNotify);
}
public void hideNotify(){
mTvNotify.setVisibility(GONE);
}
}
library/src/main/java/com/chaychan/library/BottomBarLayout.java
浏览文件 @ eb7f66a6
......@@ -139,6 +139,48 @@ public class BottomBarLayout extends LinearLayout implements ViewPager.OnPageCha
mViewPager.setCurrentItem(mCurrentItem,mSmoothScroll);
}
/**
* 设置未读数
* @param position 底部标签的下标
* @param unreadNum 未读数
*/
public void setUnread(int position,int unreadNum){
mItemViews.get(position).setUnreadNum(unreadNum);
}
/**
* 设置提示消息
* @param position 底部标签的下标
* @param msg 未读数
*/
public void setMsg(int position,String msg){
mItemViews.get(position).setMsg(msg);
}
/**
* 隐藏提示消息
* @param position 底部标签的下标
*/
public void hideMsg(int position){
mItemViews.get(position).hideMsg();
}
/**
* 显示提示的小红点
* @param position 底部标签的下标
*/
public void showNotify(int position){
mItemViews.get(position).showNotify();
}
/**
* 隐藏提示的小红点
* @param position 底部标签的下标
*/
public void hideNotify(int position){
mItemViews.get(position).hideNotify();
}
public int getCurrentItem() {
return mCurrentItem;
}
......
library/src/main/res/drawable/shape_notify_point.xml 0 → 100644
浏览文件 @ eb7f66a6
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/red" />
<size
android:width="10dp"
android:height="10dp" />
</shape>
\ No newline at end of file
library/src/main/res/drawable/shape_unread.xml 0 → 100644
浏览文件 @ eb7f66a6
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="20dp" />
<solid android:color="@color/red" />
<padding android:left="4dp" android:right="4dp" android:top="1dp" android:bottom="1dp"/>
</shape>
\ No newline at end of file
library/src/main/res/layout/item_bottom_bar.xml
浏览文件 @ eb7f66a6
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
>
<ImageView
android:id="@+id/iv_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/iv_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
<TextView
android:id="@+id/tv_unred_num"
android:layout_width="wrap_content"
android:minWidth="15dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="14dp"
android:background="@drawable/shape_unread"
android:gravity="center"
android:text="99+"
android:textColor="@color/white"
android:textSize="10sp"
android:visibility="gone" />
<TextView
android:id="@+id/tv_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="14dp"
android:background="@drawable/shape_unread"
android:gravity="center"
android:text="NEW"
android:textColor="@color/white"
android:textSize="6sp"
android:visibility="gone" />
<TextView
android:id="@+id/tv_point"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="10dp"
android:background="@drawable/shape_notify_point"
android:gravity="center"
android:textSize="6sp"
android:visibility="gone" />
</FrameLayout>
<TextView
android:id="@+id/tv_text"
......
library/src/main/res/values/attr.xml
浏览文件 @ eb7f66a6
......@@ -25,5 +25,9 @@
<attr name="iconHeight" format="dimension"/>
<!--设置BottomBarItem的padding-->
<attr name="itemPadding" format="dimension"/>
<!--设置未读数字体大小-->
<attr name="unreadTextSize" format="dimension"/>
<!--设置提示消息字体大小-->
<attr name="msgTextSize" format="dimension"/>
</declare-styleable>
</resources>
\ No newline at end of file
library/src/main/res/values/colors.xml
浏览文件 @ eb7f66a6
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="white">#ffffff</color>
<color name="red">#ff0000</color>
<color name="selector_grey">#DDDDDD</color>
</resources>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或