Android带数字或红点的底部导航拦和联网等待加载动画示例

首页 > 软件编程 > Android 更新日期: 2017-09-08
这篇文章主要介绍了Android带数字或红点的底部导航拦和联网等待加载动画示例,具有一定的参考价值,有兴趣的同学可以了解一下。

Android带数字或红点的底部导航拦和联网等待加载动画

首先展示一下截图效果,下载地址在文章最后

Android带数字或红点的底部导航拦和联网等待加载动画示例

一、Android带红点的底部导航拦

1.首先写底部导航栏的界面view_main_tab.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:andro
android:
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:background="#27282c"
>

<RelativeLayout
android:
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:layout_weight="1">

<RadioButton
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:button="@null"
android:background="@null"
android:checked="true"
android:clickable="false"
android:drawablePadding="5dp"
android:drawableTop="@drawable/selector_tab_home"
android:gravity="center"
android:text="首页"
android:textColor="@drawable/tab_text_selector"
android:textSize="10sp" />

<TextView
android:
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_alignRight="@id/rb_1"
android:layout_alignTop="@id/rb_1"
android:layout_marginTop="-6dp"
android:layout_marginRight="-6dp"
android:layout_gravity="right"
android:background="@drawable/msg_num_shape"
android:clickable="false"
android:gravity="center"
android:text="3"
android:textColor="@color/white_1"
android:textSize="10sp"
/>

</RelativeLayout>

<RelativeLayout
android:
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:focusable="true">

<RadioButton
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@null"
android:button="@null"
android:clickable="false"
android:drawablePadding="5dp"
android:drawableTop="@drawable/selector_tab_goods_divide"
android:gravity="center"
android:text="商品"
android:textColor="@drawable/tab_text_selector"
android:textSize="10sp" />

<TextView
android:
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_alignRight="@id/rb_2"
android:layout_alignTop="@id/rb_2"
android:layout_marginTop="-6dp"
android:layout_marginRight="-6dp"
android:layout_gravity="right"
android:background="@drawable/msg_num_shape"
android:clickable="false"
android:gravity="center"
android:text="3"
android:textColor="@color/white_1"
android:textSize="10sp"
/>
</RelativeLayout>

<RelativeLayout
android:
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:layout_weight="1">

<RadioButton
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@null"
android:button="@null"
android:clickable="false"
android:drawablePadding="5dp"
android:drawableTop="@drawable/selector_tab_stock_list"
android:gravity="center"
android:text="进货单"
android:textColor="@drawable/tab_text_selector"
android:textSize="10sp" />

<TextView
android:
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_alignRight="@id/rb_3"
android:layout_alignTop="@id/rb_3"
android:layout_marginTop="-6dp"
android:layout_gravity="right"
android:background="@drawable/msg_num_shape"
android:clickable="false"
android:gravity="center"
android:text="3"
android:textColor="@color/white_1"
android:textSize="10sp"
/>

</RelativeLayout>


<RelativeLayout
android:
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:layout_weight="1">

<RadioButton
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@null"
android:button="@null"
android:clickable="false"
android:drawablePadding="5dp"
android:drawableTop="@drawable/selector_tab_member"
android:gravity="center"
android:text="会员"
android:textColor="@drawable/tab_text_selector"
android:textSize="10sp" />


<TextView
android:
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_alignRight="@id/rb_4"
android:layout_alignTop="@id/rb_4"
android:layout_marginTop="-6dp"
android:layout_marginRight="-6dp"
android:layout_gravity="right"
android:background="@drawable/msg_num_shape"
android:clickable="false"
android:gravity="center"
android:text="3"
android:textColor="@color/white_1"
android:textSize="10sp"
/>
</RelativeLayout>

</LinearLayout>

2.修改底部导航栏的数字,在MainActivity中

 /**
 * -1:表示没有新消息
 * -2:表示新消息用红点的方式显示
 * 0-99:直接显示数字
 * >=100:用99+显示
 */
private void messageTips(int num, TextView tv) {
if(num==-1){
 tv.setVisibility(View.GONE);
}else if(num==-2){
tv.setVisibility(View.VISIBLE);
tv.setText("");
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) tv.getLayoutParams();
layoutParams.height= DensityUtil.dip2px(this,10);
layoutParams.width= DensityUtil.dip2px(this,10);
tv.setLayoutParams(layoutParams);
}else if(num>=0&&num<=99){
tv.setVisibility(View.VISIBLE);
tv.setText(num+"");
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) tv.getLayoutParams();
layoutParams.height= DensityUtil.dip2px(this,16);
layoutParams.width= DensityUtil.dip2px(this,16);
tv.setLayoutParams(layoutParams);
}else if(num>=100){
tv.setVisibility(View.VISIBLE);
tv.setText("99+");
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) tv.getLayoutParams();
layoutParams.height= DensityUtil.dip2px(this,16);
layoutParams.width= DensityUtil.dip2px(this,16);
tv.setTextSize(DensityUtil.sp2px(this,3));
tv.setLayoutParams(layoutParams);
}else{
tv.setVisibility(View.GONE);
}

}

3.需要在fragment中修改MainActivity中的底部导航拦,所以,要在MainActivity中,写一些公用的方法。

 /**
 * 在oneFragment中更新,底部导航栏的数字
 * @param num
 */
public void updateOne(int num){
messageTips(num,tv_1);
}
/**
 * 在TwoFragment中更新,底部导航栏的数字
 * @param num
 */
public void updateTwo(int num){
messageTips(num,tv_2);
}
/**
 * 在ThreeFragment中更新,底部导航栏的数字
 * @param num
 */
public void updateThree(int num){
messageTips(num,tv_3);
}
/**
 * 在FourFragment中更新,底部导航栏的数字
 * @param num
 */
public void updateFour(int num){
messageTips(num,tv_4);
}

4.在fragment中修改底部导航拦,得到主页面,调用主页面的修改方法。

mActivity = (MainActivity) getActivity();
number++;
mActivity.updateTwo(number);

二、activity加载动画。

1.activity中的加载动画,要写一个BaseActivity。布局如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:andro
xmlns:tools="http://schemas.android.com/tools"
android:
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.hrobbie.loadingproject.activity.BaseActivity">


<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0.0dp"
android:background="@color/colorPrimary"
app:layout_scrollFlags="enterAlways|scroll"
app:popupTheme="@style/AppTheme.PopupOverlay"
/>
<FrameLayout
android:
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/loading_anim"/>
</FrameLayout>

</LinearLayout>

注意:id为fl_content的FrameLayout的布局里,包含了一个loading_anim的布局,这就是加载布局。加载布局,里面氛围三个线性布局,分别是:加载中布局,加载错误布局,没有数据布局,其中加载失败布局,还需要点击重新加载。内容如下:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:andro
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!--加载中-->
<LinearLayout android:
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="90dp"
android:gravity="center"
android:orientation="vertical"
>

<ImageView
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/loading_everyday" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="正在为您开启干货推荐.."
android:textColor="@color/colorTitle"
android:textSize="14sp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
android:text="看的越多,推荐越准"
android:textColor="@color/colorSubtitle"
android:textSize="12sp"
android:visibility="visible" />

</LinearLayout>


<!--加载失败-->
<LinearLayout
android:
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone">

<ImageView
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/load_err" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="加载失败,点击重试"
android:textSize="15sp" />
</LinearLayout>
<!--加载失败-->
<LinearLayout
android:
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone">

<ImageView
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/load_err" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="sorry,没有您想要的数据"
android:textSize="15sp" />
</LinearLayout>
</FrameLayout>

2.Baseactivity的代码太多,讲一下主要的,重写setContentView方法,把新布局放入id为fl_content的布局中,调用getWindow()。setContentView(rootView);剩下的就跟普通个activity操作一样了。

@Override
public void setContentView(@LayoutRes int layoutResID) {
 View rootView = LayoutInflater.from(this).inflate(R.layout.activity_base,null,false);
addView = LayoutInflater.from(this).inflate(layoutResID, null, false);


//content
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
addView.setLayoutParams(params);
fl_content = (FrameLayout) rootView.findViewById(R.id.fl_content);
fl_content.addView(addView);
getWindow().setContentView(rootView);

initView();
showLoading();
}

3.新的activity只需集成BaseActivity,当需要加载成功是,调用loadSuccess()方放,加载失败时调用loadError(),失败后重新加载,需要调用reLoading()重新加载,并调用onRefresh()重新加载数据。如果没有数据调用noData()

三、fragment中加载动画,把加载布局,放入fragment中我暂时没有好的办法提出BaseFragment进行统一加载。有一些注意事项。

1.viewpager进行布局加载时,最好能够预加载一个屏幕的数据。

 vp_main.setOffscreenPageLimit(3);//最好是一屏能显示的fragment数-1。

2.在BaseFragment重写setUserVisibleHint方法,当fragment可见时,才联网加载数据。

@Override
public void setUserVisibleHint(boolean isVisibleToUser) {
super.setUserVisibleHint(isVisibleToUser);

if (getUserVisibleHint()){
isVisible=true;
onVisible();
}else {
isVisible=false;
onInvisible();
}
}

3.fragment继承BaseFragment需要在onViewCreated中调用一下联网加载方法,因为,setUserVisibleHint执行比较靠前,页面还没有添加到布局,就加载数据,会造成填充数据失败,需要当页面完全添加到布局中,再联网请求。

 @Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
mActivity= (MainActivity) getActivity();
showLoading();
lazyLoad();
}

下载地址:LoadingProject_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • Android实现仿慕课网下拉加载动画
    这篇文章是我在做动画的项目中整理出来的,在eoe看了篇帖子,然后仿慕课网做了一个下拉加载动画.此功能实现方法是AnimationDrawable类进行 Animation-list中item的循环遍历图片,类似于flash里的帧帧动画,需要的朋友可以参考下具体实现方法就不多介绍了先附上源码,相信大家都容易看的懂: 这里为了让这个动画效果可被复用,于是就继承了 ...
  • PagerSlidingTabStrip制作Android带标签的多界面滑动切换
    PagerSlidingTabStrip制作Android带标签的多界面滑动切换
    这篇文章主要介绍了使用PagerSlidingTabStrip制作Android带标签的多界面滑动切换效果的方法,PagerSlidingTabStrip是GitHub上的一个开源项目,调用这个库可以少写不少代码XD 需要的朋友可以参考下这里我们用到了两个库,一个是Android SDK里自带的android-support-v4,另一个是PagerSlid ...
  • Android实现底部导航栏功能选项卡
    Android实现底部导航栏功能选项卡
    这篇文章主要介绍了Android实现底部导航栏功能,可以随意切换不同的页面,实现选项卡功能,感兴趣的小伙伴们可以参考一下现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能.我们先看下该demo实例的框架图: 其中各个类的作用以及资源文件就不详细解释了, ...
  • 异步加载技术实现当滚动条到最底部的瀑布流效果
    当滚动条到最底部的时候触发一个事件,这个事件写入$.get事件,实现瀑布流效果,下面试具体的实现异步加载技术实现瀑布流效果.当滚动条到最底部的时候触发一个事件,这个事件写入$.get()事件,向内部程序页传递类别id和页码,程序将会返回那个类别下的相对页的产品列表,如果程序查询当前类无产品即返回空. 滚动条事件要写在window.onscroll中才有效判断 ...
  • CSS网页布局入门教程10:带当前标识的标签式横向导航
    当前标识指用户点击该频道或栏目,该栏目的标签呈现出与其他标签不同的颜色用以提示用户所处的位置. 这种设计是网站设计中相当简单而且是相当经典的一种增进网站可用性的方式.网站让用户使用时是应该考虑到用户浏览的思考过程,糟糕的网页设计只顾及页面本身而不去考虑用户感受,优秀的设计应当是以用户为中心出发的,这样一种简单的当前频道的标识往往是许多设计师所忽略的内容,用户 ...
  • Android实现ListView分页自动加载数据的方法
    Android实现ListView分页自动加载数据的方法
    这篇文章主要介绍了Android实现ListView分页自动加载数据的方法,涉及Android生成listview列表的相关技巧,需要的朋友可以参考下Android应用开发中,采用ListView组件来展示数据是很常用的功能,当一个应用要展现很多的数据时,一般情况下都不会把所有的数据一次就展示出来,而是通过分页的形式来展示数据,个人觉得这样会有更好的用户体验 ...
猜你喜欢