动画2个视图一起隐藏另一个视图

时间:2017-03-22 17:02:29

标签: android animation xamarin.android android-animation

我有2个视图(一个按钮和一个滑动条),一个在另一个之上,我正在制作帧中较低的一个,我希望另一个视图也可以动画相同的数量。我的问题是下方视图用于剪切顶视图的位置。 (见图)。这两种动画都是由视图模型属性更改触发的。

TimeView.Animate().TranslationYBy(ViewModel.IsShowingEmployees ? -TimeView.Height : TimeView.Height);
MyPositionButton.Animate().TranslationYBy(ViewModel.IsShowingEmployees ? -TimeView.Height : TimeView.Height);

动画前: enter image description here

动画后: enter image description here

如何让低视图停止剪裁上层视图?我试图改变视图的Z和TransitionZ属性,以确保按钮高于条形。我还试图将动画完成时条形图的可见性设置为Gone。此外,我尝试使用TranslateAnimation,以便我可以控制Fill属性。这些都没有奏效。

以下是axml。

<RelativeLayout
    android:id="@+id/map_area_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_toLeftOf="@id/under_list_view">
    <RelativeLayout
        android:id="@+id/map_container_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <RelativeLayout
        android:id="@+id/time_view"
        android:layout_width="300dp"
        android:layout_height="44dp"
        android:background="#ddffffff"
        android:layout_alignParentBottom="true">
        <TextView
            android:id="@+id/time_text_view"
            android:layout_height="match_parent"
            android:layout_width="wrap_content"
            android:text="4:56PM"
            android:textColor="@color/gray_dark"
            android:textSize="18dp"
            android:gravity="center_vertical"
            android:layout_marginLeft="10dp" />
        <SeekBar
            android:id="@+id/time_seek_bar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:max="1440"
            android:progress="700"
            android:progressDrawable="@drawable/custom_scrubber_progress"
            android:thumb="@drawable/custom_scrubber_control"
            android:secondaryProgress="0"
            android:layout_alignParentRight="true"
            android:layout_toRightOf="@+id/time_text_view" />
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/time_view"
        android:layout_alignParentLeft="true"
        android:layout_margin="5dp">
        <ImageButton
            android:id="@+id/my_location_button"
            android:layout_height="50dp"
            android:layout_width="50dp"
            android:background="@drawable/ek_fab_button_ripple_white"
            android:src="@drawable/ic_my_location_24p"
            android:tint="@color/gray_dark" />
    </RelativeLayout>
</RelativeLayout>

1 个答案:

答案 0 :(得分:0)

在打开“显示布局边界”后,OP发现他正在设置Button本身的动画,而不是RelativeLayout。动画RelativeLayout后,不会发生削波。

旧答案

更改RelativeLayout的地点,以便ImageButton的{​​{1}}在SeekBar的下方宣布为ImageButton。在这种情况下,SeekBar将在<RelativeLayout android:id="@+id/map_area_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_toLeftOf="@id/under_list_view"> <RelativeLayout android:id="@+id/map_container_view" android:layout_width="match_parent" android:layout_height="match_parent" /> <RelativeLayout android:id="@+id/time_view" android:layout_width="300dp" android:layout_height="44dp" android:background="#ddffffff" android:layout_alignParentBottom="true"> <TextView android:id="@+id/time_text_view" android:layout_height="match_parent" android:layout_width="wrap_content" android:text="4:56PM" android:textColor="@color/gray_dark" android:textSize="18dp" android:gravity="center_vertical" android:layout_marginLeft="10dp" /> <SeekBar android:id="@+id/time_seek_bar" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:max="1440" android:progress="700" android:progressDrawable="@drawable/custom_scrubber_progress" android:thumb="@drawable/custom_scrubber_control" android:secondaryProgress="0" android:layout_alignParentRight="true" android:layout_toRightOf="@+id/time_text_view" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/time_view" android:layout_alignParentLeft="true" android:layout_margin="5dp"> <ImageButton android:id="@+id/my_location_button" android:layout_height="50dp" android:layout_width="50dp" android:background="@drawable/ek_fab_button_ripple_white" android:src="@drawable/ic_my_location_24p" android:tint="@color/gray_dark" /> </RelativeLayout> </RelativeLayout> 上绘制。

//this is .factory part
var app=angular.module("abs", ["ngRoute", "ui.bootstrap","ngCookies"]);

app.factory('cromeesService', function() {
  var took_live = null;

  var addTook = function(newObj) {        
      took_live = newObj;        
  };

  var getTook = function(){       
      return took_live;       
  };  

  return {
    addTook: addTook,
    getTook: getTook,
  };

}); 

//this is the first controller in first jsp file. 
//this controller makes API call and then addTook value to took_live in .factory
...some other lines...

<script>     
var app = angular.module("abs");    
app.requires.push('ngPrettyJson');
    app.controller("firstController", function($scope,$http,$interval,cromeesService){          

        $scope.message = "some message";

        var onUserComplete = function(response){
            $scope.re = response.data;    
            debugger;
            cromeesService.addTook($scope.re.took);
        };

        var apiCallGET = function(){
            $http.get("url to somewhere")
                 .then(onUserComplete); 
        };          
        $interval(apiCallGET,1000,1);                                   
    });         
</script>

//here is the 2nd controller in a 2nd jsp file
//this controller call getTook() to grab took_live value and use in this controller

app.controller('tileController',function($scope,cromeesService){        
    var tookvalue = cromeesService.getTook();
}