仿抖音底部導航效果（二）

繼續實現仿抖音底部導航

今天要實現效果以下圖

首先在原基礎的佈局中加入一個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>

複製代碼

這裏附上刷新的圖片素材

而後在原代碼中進行修改以實現導航的動畫及刷新功能

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();
        }
});

複製代碼

若是須要完整的能夠評論哈~