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

摘要： 繼續實現仿抖音底部導航 今天要實現效果如下圖 首先在原基礎的佈局中加入一個ImageView <LinearLayout android:layout_width="wrap_content" android:orienta...

繼續實現仿抖音底部導航

今天要實現效果如下圖

首先在原基礎的佈局中加入一個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.然後修改啟用和取消啟用的方法

注‘Android技術交流群878873098，歡迎大家加入交流，暢談！本群有免費學習資料視訊且免費分享

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

如果需要完整的可以評論哈~

注‘Android技術交流群878873098，歡迎大家加入交流，暢談！本群有免費學習資料視訊且免費分享