Android屬性動畫實現(xiàn)布局的下拉展開效果
在Android的3.0之后,google又提出了屬性動畫的這樣一個框架,他可以更好的幫助我們實現(xiàn)更豐富的動畫效果。所以為了跟上技術(shù)的步伐,今天就聊一聊屬性動畫。
這一次的需求是這樣的:當(dāng)點擊一個View的時候,顯示下面隱藏的一個View,要實現(xiàn)這個功能,需要將V iew的visibility屬性設(shè)置gone為visible即可,但是這個過程是一瞬間的,并不能實現(xiàn)我們要的效果。所以,屬性動畫是個不錯的方案。
先把效果貼上
第一個:

第二個:

前面的這個是隱藏著,后面這個是顯示的。當(dāng)點擊這個箭頭的時候,來切換顯示或者隱藏。
現(xiàn)在開始編碼:
布局文件如下
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.ltl.mpiggybank.MainActivity" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#458EFD"
android:padding="10dip" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_vertical"
android:text="下拉展開動畫"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#548AEA"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dip"
android:text="昨日收益(元)"
android:textColor="#ffffff"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.00"
android:textColor="#ffffff"
android:textSize="45sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/linear_hidden"
android:layout_width="match_parent"
android:layout_height="120dip"
android:background="#548AEA"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dip"
android:text="顯示的View"
android:textColor="#ffffff"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.00"
android:textColor="#ffffff"
android:textSize="35sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#548AEA"
android:gravity="center"
android:onClick="onClick"
android:orientation="vertical" >
<ImageView
android:id="@+id/my_iv"
android:layout_width="25dip"
android:layout_height="25dip"
android:layout_margin="20dip"
android:src="@drawable/scroll" />
</LinearLayout>
</LinearLayout>
這里面代碼并不多,也很簡單,三個線性布局,里面裝載著各自的控件,并且還設(shè)置了ID。按鈕是一個線性布局,采用了onClick自身的點擊事件。接下來,當(dāng)點擊了這個線性布局的時候,需要隱藏的控件最終到達一個高度,這個就是我們的目標(biāo)值,只需要通過布局中的dp轉(zhuǎn)換成像素就行了。
mDensity = getResources().getDisplayMetrics().density; mHiddenViewMeasuredHeight = (int) (mDensity * 120 + 0.5);
這里是120就是我們布局里面定義的高度。
然后給這個過程增加一個動畫效果。
ValueAnimator animator = ValueAnimator.ofInt(start, end);
animator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator arg0) {
int value = (int) arg0.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
layoutParams.height = value;
v.setLayoutParams(layoutParams);
}
});
通過這樣一個簡單的ValueAnimator ,就可以很方便的實現(xiàn)顯示和隱藏的動畫效果了。
下面是完整的代碼。
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.animation.ValueAnimator.AnimatorUpdateListener;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends ActionBarActivity {
private LinearLayout mHiddenLayout;
private float mDensity;
private int mHiddenViewMeasuredHeight;
private ImageView mIv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
mHiddenLayout = (LinearLayout) findViewById(R.id.linear_hidden);
mIv = (ImageView) findViewById(R.id.my_iv);
mDensity = getResources().getDisplayMetrics().density;
mHiddenViewMeasuredHeight = (int) (mDensity * 120 + 0.5);
}
public void onClick(View v) {
if (mHiddenLayout.getVisibility() == View.GONE) {
animateOpen(mHiddenLayout);
animationIvOpen();
} else {
animateClose(mHiddenLayout);
animationIvClose();
}
}
private void animateOpen(View v) {
v.setVisibility(View.VISIBLE);
ValueAnimator animator = createDropAnimator(v, 0,
mHiddenViewMeasuredHeight);
animator.start();
}
private void animationIvOpen() {
RotateAnimation animation = new RotateAnimation(0, 180,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
animation.setFillAfter(true);
animation.setDuration(100);
mIv.startAnimation(animation);
}
private void animationIvClose() {
RotateAnimation animation = new RotateAnimation(180, 0,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
animation.setFillAfter(true);
animation.setDuration(100);
mIv.startAnimation(animation);
}
private void animateClose(final View view) {
int origHeight = view.getHeight();
ValueAnimator animator = createDropAnimator(view, origHeight, 0);
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
view.setVisibility(View.GONE);
}
});
animator.start();
}
private ValueAnimator createDropAnimator(final View v, int start, int end) {
ValueAnimator animator = ValueAnimator.ofInt(start, end);
animator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator arg0) {
int value = (int) arg0.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
layoutParams.height = value;
v.setLayoutParams(layoutParams);
}
});
return animator;
}
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android屬性動畫實現(xiàn)炫酷的登錄界面
- Android動畫 實現(xiàn)開關(guān)按鈕動畫(屬性動畫之平移動畫)實例代碼
- 圖文詳解Android屬性動畫
- Android 屬性動畫ValueAnimator與插值器詳解
- Android 自定義view和屬性動畫實現(xiàn)充電進度條效果
- Android 動畫(View動畫,幀動畫,屬性動畫)詳細(xì)介紹
- Android模擬開關(guān)按鈕點擊打開動畫(屬性動畫之平移動畫)
- Android屬性動畫之ValueAnimator代碼詳解
- Android屬性動畫實現(xiàn)圖片從左到右逐漸消失
- Android動畫系列之屬性動畫的基本使用教程
相關(guān)文章
Android單一實例全局可調(diào)用網(wǎng)絡(luò)加載彈窗
這篇文章主要為大家詳細(xì)介紹了Android單一實例全局可調(diào)用網(wǎng)絡(luò)加載彈窗,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-12-12
android利用websocket協(xié)議與服務(wù)器通信
這篇文章主要為大家詳細(xì)介紹了android利用websocket協(xié)議與服務(wù)器通信,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-03-03
Android中SharedPreference詳解及簡單實例
這篇文章主要介紹了 Android中SharedPreference詳解及簡單實例的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09

