仿網易星球浮動小球

讀唄開發過程中遇到新需求，類似於網易星球收集黑鑽的介面，考慮到可能也有人會使用，索性封裝成庫，後面好移植使用

先看看需要實現的效果：

需求分析：

1. 資料集合可能是int、double、float等型別
2. 小球位置隨機
3. 沒有資料時只有一個預設小球，位置固定
4. 小球上下抖動，點擊向上運動消失

實現分析：

1. 小球隨機的位置固定在父view的寬高範圍內
2. 可以在初始化和點選時判斷集合是否為空從而顯示預設小球
3. 補間動畫實現抖動、屬性動畫實現點選上滑消失（純屬個人習慣，沒有規定動畫型別）

實現步驟：

FloatView

父控制元件使用Relativelayout（背景可以先指定，後面已經抽取出來可以自定義）

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@mipmap/star_bg">
</RelativeLayout>

小球佈局

<TextView
    android:id="@+id/float_view"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:gravity="center"
    android:text="0.01234"
    android:textSize="6dp"
    android:textColor="#ffffff"
    android:background="@drawable/shape_circle">
</TextView>
 

上面佈局都是暫定的，後面封裝的時候都保留了介面

1、定義構造方法

 public FloatView(Context context) {
       this(context,null);
       mcontext = context;
     }

 public FloatView(Context context, AttributeSet attrs) {
       super(context, attrs);
       mcontext = context;  
     }

public FloatView(Context context, AttributeSet attrs, int defStyleAttr) {
       this(context, attrs);
       mcontext = context;
    }
 

2、初始化預設小球

LayoutParams params = new LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);
defaultView = (TextView) LayoutInflater.from(mcontext).inflate(R.layout.view_float, this, false); params.addRule(RelativeLayout.CENTER_IN_PARENT);       
if (mFloat.size() != 0){
    defaultView.setVisibility(GONE);
}
addView(defaultView,params);

3、設定子view位置並新增

1. 子View隨機座標範圍（保證不能出parentView的邊界）

       Random randomX = new Random();
       Random randomY = new Random();
       float x = randomX.nextFloat() * (parentWidth - childView.getMeasuredWidth());
       float y = randomY.nextFloat() * (parentHeight - childView.getMeasuredHeight());
       childView.setX(x);
       childView.setY(y);
   

2. 新增子View

   for (int i = 0; i < mFloat.size(); i++) {
       TextView floatview = (TextView) LayoutInflater.from(mcontext).inflate(R.layout.view_float, this, false);
       setChildViewPosition(floatview);
       floatview.measure(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
       addView(floatview);
   }
   

5、設定子View抖動動畫

  Animation anim = new TranslateAnimation(0,0,-10,20);
  anim.setInterpolator(new AccelerateDecelerateInterpolator());
  anim.setDuration(ANIMATION_TIME);
  anim.setRepeatCount(Integer.MAX_VALUE);
  anim.setRepeatMode(Animation.REVERSE);//反方向執行
  view.startAnimation(anim);

6、點選移除（使用回撥介面暴露方法，並判斷是否是資料集合是否為空以顯示預設子View）

    alueAnimator animator = ValueAnimator.ofFloat(parentHeight,0);
    animator.setDuration(1000);
    animator.setInterpolator(new LinearInterpolator());
    //動畫更新的監聽
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float Value = (float) animation.getAnimatedValue();

            view.setAlpha(Value/parentHeight);
            view.setTranslationY(view.getY()-(parentHeight-Value));
        }
    });
    animator.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            removeView(view);
        }
    });
    animator.start();

設定回撥（詳情見原始碼）：

  mListener.itemClick((int)view.getTag(),mFloat.get((int)view.getTag()));

實現效果圖：

難點分析：

1、獲取的寬高為0？
view繪製過程中measure的時間和Activity的生命週期不能保持一致，所以可能在onCreate()中獲取的寬高為0；
解決辦法：使用post()

post(new Runnable() {
      @Override
       public void run() {
           init();
       }
});

2、子View的屬性為wrap_content，獲取的寬高為0,？
在獲取的寬高的時候，先指定測量規則

int width = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
int height = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
parentView.measure(width,height);
parentHeight = parentView.getMeasuredHeight();
parentWidth = parentView.getMeasuredWidth();

3、傳輸資料固定？
這裡list使用Number型別的泛型，可以指定為int、float、double、long

public void setList(List<? extends Number> list){
    ...
    //回撥裡
    mListener.itemClick((int)view.getTag(),mFloat.get((int)view.getTag()));
}

封裝

使用方法：

在工程目錄的build.gradle中新增JitPack.io的程式碼倉庫地址

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

專案目錄中的build.gradle中新增依賴

ependencies {
    compile 'com.github.ErChenZhang:StarFloatView:v1.1'
}

在佈局檔案中使用

     <com.smoke.zhangchen.floatviewlib.FloatView
        android:id="@+id/float_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content
        app:childTextColor="#ff0000"
        app:defaultViewText="正在生成中"
        app:chidTextSize="6sp"
        app:parentViewBackground="@mipmap/star_bg"
        app:childViewBackground="@drawable/shape_circle">

1. childTextColor:小球文字顏色大小，預設白色
2. defaultViewText:預設小球顯示文字
3. parentViewBackground：整體背景
4. childViewBackground：小球背景

5. chidTextSize：小球文字大小，預設6sp

   設定資料

   當前資料支援int、long、float、double

    List<Float> list = new ArrayList<>();
       list.add((float) 1.245);
       list.add((float) 1.567);
       list.add((float) 0.261);
       floatview.setList(list);
   

小球點選回撥（value.floatValue()對應傳入的list型別）

floatview.setOnItemClickListener(new FloatView.OnItemClickListener() {
    @Override
     public void itemClick(int position, Number value) {
         Toast.makeText(MainActivity.this, "當前是第"+position+"個，其值是"+value.floatValue(), Toast.LENGTH_SHORT).show();
        }
});