仿抖音底部导航(二)

简介: 继续实现仿抖音底部导航今天要实现效果如下图实现效果首先在原基础的布局中加入一个ImageView 这里附上刷新的图片素材image然后在原代码中进行修改以实现导航的动画及刷新功能1.

继续实现仿抖音底部导航

今天要实现效果如下图

img_daa440e9339305fb35247a7c5022e8cc.gif
实现效果

首先在原基础的布局中加入一个ImageView

<LinearLayout
    android:layout_width="wrap_content"
    android:orientation="vertical"
    android:id="@+id/nav_top"
    android:layout_centerInParent="true"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="wrap_content"
        android:text="标题"
        android:id="@+id/nav_item_tv_title"
        android:textColor="#F1F1F1"
        android:textSize="16sp"
        android:layout_height="wrap_content" />
    <!--新加入的-->
    <ImageView
        android:id="@+id/reflash"
        android:layout_width="25dp"
        android:src="@mipmap/shuaxin"
        android:visibility="gone"
        android:layout_centerInParent="true"
        android:layout_height="25dp" />
</LinearLayout>

这里附上刷新的图片素材

img_9cd0a3334f9c7f596523e99c58e07b12.png
image

然后在原代码中进行修改以实现导航的动画及刷新功能

1.添加是否显示刷新图片的标记

//默认设为flase
private boolean isShowReflashImage=false;
//并添加set方法
public void setShowReflashImage(boolean showReflashImage) {
    isShowReflashImage = showReflashImage;
}

2.然后修改激活和取消激活的方法

public void startActive(){
    //根据上一步添加的标记来判断是否显示ImageView
    if(isShowReflashImage){
        textView_title.setVisibility(GONE);
        imageView_Shuaxin.setVisibility(VISIBLE);
    }else {
        textView_title.setTextColor(Color.WHITE);
        textView_title.setTextSize(18);
    }
    textView_line.animate().alpha(1).setDuration(200).start();
}
public void cancelActive(){
    if(isShowReflashImage){
        textView_title.setVisibility(VISIBLE);
        imageView_Shuaxin.setVisibility(GONE);
        textView_line.setAlpha(0);
    }else {
        textView_title.setTextColor(Color.parseColor("#F1F1F1"));
        textView_title.setTextSize(16);
    }
    textView_line.animate().alpha(0).setDuration(200).start();
}

3.给负责刷新的ImageView添加旋转动画

private void initListener() {
    final Animation rotateAnimation = new RotateAnimation(0,-360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
    rotateAnimation.setDuration(300);
    imageView_Shuaxin.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            imageView_Shuaxin.startAnimation(rotateAnimation);
        }
    });
}

4.最后加上刷新事件

1)新建NavItemReflashListener
public interface NavItemReflashListener {
    void onReflash(View v);
}
2)给NavItemView加上NavItemReflashListener属性并设置set方法
public void setNavItemReflashListener(NavItemReflashListener navItemReflashListener) {
    this.navItemReflashListener = navItemReflashListener;
}
3)在imageView_Shuaxin的点击事件中调用onReflash(View v)方法
imageView_Shuaxin.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            imageView_Shuaxin.startAnimation(rotateAnimation);
            if(navItemReflashListener!=null){
                navItemReflashListener.onReflash(v);
            }
        }
});

5.在MainActivity中将想要显示刷新控件的NavItemView设置ShowReflashImagewei为true并加上刷新事件

navItemView1.setShowReflashImage(true);
    navItemView1.setNavItemReflashListener(new NavItemReflashListener() {
        @Override
        public void onReflash(View v) {
            Toast.makeText(MainActivity.this, "刷新", Toast.LENGTH_SHORT).show();
        }
});

最后附上完整代码https://gitee.com/itfittnesss/DouYin

目录
相关文章
|
前端开发 JavaScript
HTML+CSS+JS仿京东购物车页面动态效果
HTML+CSS+JS仿京东购物车页面动态效果
167 0
|
4月前
|
前端开发
css动画(仿微信聊天页面)
css动画(仿微信聊天页面)
|
11月前
|
前端开发
移动端开发——京东首页制作(流式布局)
移动端开发——京东首页制作(流式布局)
|
JavaScript 前端开发
仿抖音短视频系统源码,点击实现波纹效果
仿抖音短视频系统源码,点击实现波纹效果
1861 0
|
XML Android开发 数据格式
仿抖音底部导航效果(一)
最终效果预览 最终效果 这次实现的是第一步效果 本次效果 原理解析:通过对控件添加动画来实现仿抖音底部导航的效果 一.首先编写布局文件(这里是用TextView作为底部的指示横线) 二.
2067 0
类似微信图片浏览,常见应用场景如微信朋友圈照片九宫格和微信聊天图片预览
本项目受Google官方demo Zooming a View 启发,实现了点击小图放大至全屏预览,退出全屏恢复至原来位置这两个过程的动画过渡。 常见应用场景如微信朋友圈照片九宫格和微信聊天图片预览,某些手机系统相册等viewpager图片查看 缩放 拖拽下拉缩小退出(效果同微信图片浏览) 特点1.支持自定义图片加载框架。
2245 0
|
JavaScript 前端开发
第65天:仿网易轮播图
仿网易轮播图 1、HTML部分 1 DOCTYPE html> 2 3 4 5 仿网易轮播图 6 7 8 9 10 11 12 13 14 ...
1252 0
微信小程序把玩(三)tabBar底部导航
原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 主要属性: 对于tabBar整体属性设置: ...
1001 0