的Android线性布局与动画

我实现此作为延伸的LinearLayout自定义视图的要求，所述的LinearLayout包含两个以上LinearLayouts（每行），并且每个元件是延伸的RelativeLayout的并包含用于动画/状态变化的功能的另一自定义视图。

我遇到的问题是..因为动画长大的圆圈箭头缩放的ImageView的ImageView的是由其父容器裁剪，因为大小设置一次绘制。我可以在父自称setScaleX/Y缩放ImageView的前..但后来我得到一些怪异的行为......必须有一个简单的解决方案！

类布局文件

public class CameraCalibrationIndicatorCircles extends LinearLayout { 

ArrayList<CalibrationIndicatorCircle> circles; 
int currentCircleIndex = 0; 

public CameraCalibrationIndicatorCircles(Context context) { 
    super(context); 
    initialize(context); 
} 

public CameraCalibrationIndicatorCircles(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    initialize(context); 
} 

public CameraCalibrationIndicatorCircles(Context context, AttributeSet attrs, int defStyleAttr) { 
    super(context, attrs, defStyleAttr); 
    initialize(context); 
} 

public void initialize(Context context){ 
    inflate(context, R.layout.camera_calibration_indication_circles_view, this); 

    circles = new ArrayList<>(); 

    CalibrationIndicatorCircle 
      c0,  c1, c2,  c3,  c4, 
      c5,  c6, c7,  c8,  c9; 

    c0 = (CalibrationIndicatorCircle)findViewById(R.id.c0); 
    c1 = (CalibrationIndicatorCircle)findViewById(R.id.c1); 
    c2 = (CalibrationIndicatorCircle)findViewById(R.id.c2); 
    c3 = (CalibrationIndicatorCircle)findViewById(R.id.c3); 
    c4 = (CalibrationIndicatorCircle)findViewById(R.id.c4); 
    c5 = (CalibrationIndicatorCircle)findViewById(R.id.c5); 
    c6 = (CalibrationIndicatorCircle)findViewById(R.id.c6); 
    c7 = (CalibrationIndicatorCircle)findViewById(R.id.c7); 
    c8 = (CalibrationIndicatorCircle)findViewById(R.id.c8); 
    c9 = (CalibrationIndicatorCircle)findViewById(R.id.c9); 

    circles.add(c0); 
    circles.add(c1); 
    circles.add(c2); 
    circles.add(c3); 
    circles.add(c4); 
    circles.add(c5); 
    circles.add(c6); 
    circles.add(c7); 
    circles.add(c8); 
    circles.add(c9); 

    currentCircleIndex = 0; 
    circles.get(currentCircleIndex).indicateCurrent(); 

} 

public void successfulEvent(){ 
    if(currentCircleIndex < CalibrationBox.MINIMUM_NUMBER_OF_CAMERA_IMAGES_FOR_CALIB) { 
     circles.get(currentCircleIndex).indicateSucess(1,1, true); 
     currentCircleIndex++; 
     if (currentCircleIndex < CalibrationBox.MINIMUM_NUMBER_OF_CAMERA_IMAGES_FOR_CALIB) 
      circles.get(currentCircleIndex).indicateCurrent(); 
    } 
} 

}

布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="vertical" android:layout_width="wrap_content" 
android:layout_height="wrap_content" android:weightSum="4" 
android:clipChildren="false"> 

<LinearLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:weightSum="5" 
    android:layout_weight="1" 
    android:orientation="horizontal" 
    android:clipChildren="false"> 

    <CalibrationIndicatorCircle 
     android:id="@+id/c0" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" /> 

    <CalibrationIndicatorCircle 
     android:id="@+id/c1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" /> 

    <CalibrationIndicatorCircle 
     android:id="@+id/c2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" /> 

    <CalibrationIndicatorCircle 
     android:id="@+id/c3" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" /> 

    <CalibrationIndicatorCircle 
     android:id="@+id/c4" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" /> 

</LinearLayout> 

<LinearLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:weightSum="5" 
    android:layout_weight="1" 
    android:orientation="horizontal"> 

    <CalibrationIndicatorCircle 
     android:id="@+id/c5" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" /> 

    <CalibrationIndicatorCircle 
     android:id="@+id/c6" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" /> 

    <CalibrationIndicatorCircle 
     android:id="@+id/c7" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" /> 

    <CalibrationIndicatorCircle 
     android:id="@+id/c8" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" /> 

    <CalibrationIndicatorCircle 
     android:id="@+id/c9" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" /> 

</LinearLayout> 
</LinearLayout>

单圈视图类

public class CalibrationIndicatorCircle extends RelativeLayout { 

ImageView mWaiting, mCurrent, mSuccess, mCompleted; 
boolean mIsCurrent = false; 
Context mContext; 

public CalibrationIndicatorCircle(Context context) { 
    super(context); 
    initialize(context); 
} 

public CalibrationIndicatorCircle(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    initialize(context); 
} 

public CalibrationIndicatorCircle(Context context, AttributeSet attrs, int defStyleAttr) { 
    super(context, attrs, defStyleAttr); 
    initialize(context); 
} 

public void initialize(Context context){ 
    inflate(context, R.layout.calibration_indicator_circle_view, this); 
    mWaiting = (ImageView)findViewById(R.id.waiting); 
    mCurrent = (ImageView)findViewById(R.id.current); 
    mSuccess = (ImageView)findViewById(R.id.success); 
    mCompleted = (ImageView)findViewById(R.id.completed); 
    mCurrent.setVisibility(INVISIBLE); 
    mSuccess.setVisibility(INVISIBLE); 
    mCompleted.setVisibility(INVISIBLE); 
} 

public void indicateCurrent(){ 
    post(new Runnable() { 
     @Override 
     public void run() { 
      mWaiting.setVisibility(INVISIBLE); 
      mCurrent.setVisibility(VISIBLE); 
      mIsCurrent = true; 
     } 
    }); 
} 

public void indicateSucess(final float scaleX, final float scaleY, final boolean hideCheckMark){ 

    post(new Runnable() { 
     @Override 
     public void run() { 
      //Animate 
      mSuccess.setScaleX(0); 
      mSuccess.setScaleY(0); 
      mSuccess.setVisibility(VISIBLE); 
      mCurrent.setVisibility(INVISIBLE); 
      mWaiting.setVisibility(INVISIBLE); 
      mSuccess 
        .animate() 
        .scaleX(scaleX) 
        .scaleY(scaleY) 
        .setDuration(500) 
        .setListener(new Animator.AnimatorListener() { 
         @Override 
         public void onAnimationStart(Animator animation) { 

         } 

         @Override 
         public void onAnimationEnd(Animator animation) { 

          if(hideCheckMark) { 

           new Thread(new Runnable() { 
            @Override 
            public void run() { 
             postDelayed(new Runnable() { 
              @Override 
              public void run() { 
               mSuccess.setVisibility(INVISIBLE); 
               mCompleted.setVisibility(VISIBLE); 
              } 
             }, 300); 
            } 
           }).start(); 

          } 

         } 

         @Override 
         public void onAnimationCancel(Animator animation) { 

         } 

         @Override 
         public void onAnimationRepeat(Animator animation) { 

         } 
        }) 
        .start(); 
     } 
    }); 

} 

public void hideUntilReady() { 
    post(new Runnable() { 
     @Override 
     public void run() { 
      mWaiting.setVisibility(INVISIBLE); 
      mCurrent.setVisibility(INVISIBLE); 
      mSuccess.setVisibility(INVISIBLE); 
      mCompleted.setVisibility(INVISIBLE); 
     } 
    }); 
} 
}

单圈布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:clipChildren="false"> 

<ImageView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:srcCompat="@drawable/image_success_icon" 
    android:layout_centerInParent="true" 
    android:id="@+id/success" 
    android:scaleType="fitXY" /> 

<ImageView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:srcCompat="@drawable/image_current_icon" 
    android:layout_centerInParent="true" 
    android:id="@+id/current" 
    android:scaleType="fitXY" /> 

<ImageView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:srcCompat="@drawable/image_waiting_icon" 
    android:id="@+id/waiting" 
    android:layout_centerInParent="true" 
    android:scaleType="fitXY" /> 

<ImageView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:srcCompat="@drawable/image_taken_icon" 
    android:id="@+id/completed" 
    android:layout_centerInParent="true" 
    android:scaleType="fitXY" /> 

</RelativeLayout>

来源

2017-02-17 Arjun

使用setClipChildren(false)在ViewGroup为RelativeLayout或LinearLayout其中ImageView包含英寸

来源

2017-02-17 18:07:12

尝试这样做在像了层次结构的布局的每一层被..与视图的大小做被设置一次绘制不管动画 – Arjun

我一直使用这个很长一段时间，它的工作很棒。如果您使用xml发布代码，那么我们只能进一步挖掘。 –

我已经添加了上面的代码 – Arjun

的Android线性布局与动画

回答

相关问题