반응형
Android는 간단한 애니메이션을 추가하면서 setvisibility(뷰)를 제공합니다.사라지다)
심플한 레이아웃을 설계했습니다.애니메이션 없이 디자인을 마쳤는데, 텍스트 뷰 클릭 이벤트와 사용법을 모르면 애니메이션을 추가하고 싶습니다.xml 디자인이 좋아 보였습니까?어떤 제안이라도 해주시면 감사하겠습니다.
마이 XML
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:longClickable="false"
android:orientation="vertical"
android:weightSum="16" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#00DDA0"
android:layout_weight="3" >
</LinearLayout>
<TextView
android:id="@+id/Information1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:text="Child Information"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="@+id/layout1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="8.5"
android:background="#BBBBBB"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView" />
</LinearLayout>
<TextView
android:id="@+id/Information2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Parent Information"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="@+id/layout2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#BBBBBB"
android:layout_weight="8.5" >
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView" />
</LinearLayout>
<TextView
android:id="@+id/Information3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Siblings"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="@+id/layout3"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#BBBBBB"
android:layout_weight="8.5" >
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView" />
</LinearLayout>
<TextView
android:id="@+id/Information4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Teacher Information"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="@+id/layout4"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#BBBBBB"
android:layout_weight="8.5" >
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView" />
</LinearLayout>
<TextView
android:id="@+id/Information5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Grade Information"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="@+id/layout5"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#BBBBBB"
android:layout_weight="8.5" >
<TextView
android:id="@+id/textView5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView" />
</LinearLayout>
<TextView
android:id="@+id/Information6"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Health Information"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="@+id/layout6"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#BBBBBB"
android:layout_weight="8.5" >
<TextView
android:id="@+id/textView5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView"
android:layout_weight="8.5" />
</LinearLayout>
</LinearLayout>
마이 자바
public class Certify_Info extends Activity {
private static TextView tv2,tv3,tv5,tv6,tv4,tv1;
private static LinearLayout l1,l2,l3,l4,l5,l6;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_certify__info);
tv1=(TextView) findViewById(R.id.Information1);
tv2=(TextView) findViewById(R.id.Information2);
tv3=(TextView) findViewById(R.id.Information3);
tv4=(TextView) findViewById(R.id.Information4);
tv5=(TextView) findViewById(R.id.Information5);
tv6=(TextView) findViewById(R.id.Information6);
l1=(LinearLayout) findViewById(R.id.layout1);
l2=(LinearLayout) findViewById(R.id.layout2);
l3=(LinearLayout) findViewById(R.id.layout3);
l4=(LinearLayout) findViewById(R.id.layout4);
l5=(LinearLayout) findViewById(R.id.layout5);
l6=(LinearLayout) findViewById(R.id.layout6);
l2.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
tv1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
l2.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
l1.setVisibility(View.VISIBLE);
}
});
tv2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
l1.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
l2.setVisibility(View.VISIBLE);
}
});
tv3.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
l1.setVisibility(View.GONE);
l2.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
l3.setVisibility(View.VISIBLE);
}
});
tv4.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
l1.setVisibility(View.GONE);
l2.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
l4.setVisibility(View.VISIBLE);
}
});
tv5.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
l1.setVisibility(View.GONE);
l2.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
l5.setVisibility(View.VISIBLE);
}
});
tv6.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
l1.setVisibility(View.GONE);
l2.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.VISIBLE);
}
});
}
}
애니메이션을 추가하기 위해 두 가지 작업을 수행할 수 있습니다. 먼저 Android에서 레이아웃 변경을 애니메이션으로 만들 수 있습니다.이렇게 하면 뷰 가시성이나 뷰 위치 변경과 같은 레이아웃의 무언가를 변경할 때마다 Android는 자동으로 페이드/트랜지션 애니메이션을 만듭니다.그 세트를 사용하려면
android:animateLayoutChanges="true"
를 참조해 주세요.
두 번째 옵션은 애니메이션을 수동으로 추가하는 것입니다.그러기 위해서는 Android 3.0(Honeycomb)에서 도입된 새로운 애니메이션 API를 사용하는 것이 좋습니다.몇 가지 예를 들어 보겠습니다.
View:
view.animate().alpha(0.0f);
그러면 다시 페이드인됩니다.
view.animate().alpha(1.0f);
" " " 가 됩니다.View높이만큼 내려갑니다.
view.animate().translationY(view.getHeight());
하면 됩니다.View다른 곳으로 이동한 후 시작 위치로 이동합니다.
view.animate().translationY(0);
이 경우에도 하실 수 있습니다.setDuration()이치노를 들어, 이것은 「」, 「」, 「」를 페이드 .View: 2초 동안:
view.animate().alpha(0.0f).setDuration(2000);
할 수 . 이 .예를 들어, 이 경우, 이 애니메이션은 페이드 아웃됩니다.View 동안 로 이동합니다.
view.animate()
.translationY(view.getHeight())
.alpha(0.0f)
.setDuration(300);
또한 청취자를 애니메이션에 할당하고 모든 이벤트에 반응할 수 있습니다.애니메이션이 시작될 때, 끝날 때, 반복될 때 등등. 클래스 AnimatorListenerAdapterAnimatorListener필요한 것만 있으면 돼요.이것에 의해, 코드의 판독성이 향상됩니다.예를 들어 다음 코드가 페이드 아웃됩니다.View0.이 0.3초(300밀리초)로 됩니다.View.GONE.
view.animate()
.translationY(view.getHeight())
.alpha(0.0f)
.setDuration(300)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
view.setVisibility(View.GONE);
}
});
애니메이션을 가장 Visibility입니다.Transition API서포트하다 전화하세요.TransitionManager.beginDelayedTransition런음음음음음음 음노에는 '하다'와 같은 몇 가지 기본 전환이 .Fade,Slide
import androidx.transition.TransitionManager;
import androidx.transition.Transition;
import androidx.transition.Fade;
private void toggle() {
Transition transition = new Fade();
transition.setDuration(600);
transition.addTarget(R.id.image);
TransitionManager.beginDelayedTransition(parent, transition);
image.setVisibility(show ? View.VISIBLE : View.GONE);
}
서 ★★★★★parent입니다.ViewGroup★★★★
은 '있다'는 입니다.Slide★★★★
import androidx.transition.Slide;
Transition transition = new Slide(Gravity.BOTTOM);
다른 것이 필요한 경우 사용자 지정 전환을 쉽게 작성할 수 있습니다. 다음과 같습니다.CircularRevealTransition다른 답변으로 써놨어요.CircularReveal 애니메이션으로 보기를 표시하거나 숨깁니다.
Transition transition = new CircularRevealTransition();
android:animateLayoutChanges="true"옵션도 마찬가지입니다.AutoTransition을 전환으로 사용합니다.
xml 상위 레이아웃에 이 행을 추가해 보십시오.
android:animateLayoutChanges="true"
레이아웃은 다음과 같습니다.
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:longClickable="false"
android:orientation="vertical"
android:weightSum="16">
.......other code here
</LinearLayout>
이 링크를 확인해 주세요.L2R, R2L, T2B, B2T 애니메이션 등의 애니메이션을 사용할 수 있습니다.
이 코드는 왼쪽에서 오른쪽으로 애니메이션을 표시합니다.
TranslateAnimation animate = new TranslateAnimation(0,view.getWidth(),0,0);
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
view.setVisibility(View.GONE);
R2L부터 하고 싶다면
TranslateAnimation animate = new TranslateAnimation(0,-view.getWidth(),0,0);
로서 위에서 아래로
TranslateAnimation animate = new TranslateAnimation(0,0,0,view.getHeight());
그 반대도 마찬가지입니다.
@Xaver Kapeller의 답변을 바탕으로 새로운 뷰가 화면에 뜨면 스크롤 애니메이션을 만드는 방법(및 이를 숨기기 위한 애니메이션)을 알아냈습니다.
다음 상태부터 진행됩니다.
- 단추
- 마지막 단추
로.
- 단추
- 버튼 1
- 버튼 2
- 버튼 3
- 버튼 4
- 마지막 단추
그리고 역도 성립.
따라서 사용자가 첫 번째 버튼을 클릭하면 페이드 애니메이션을 사용하여 "버튼 1", "버튼 2", "버튼 3", "버튼 4" 요소가 나타나고 "마지막 버튼" 요소는 끝까지 아래로 이동합니다.레이아웃의 높이도 변경되므로 스크롤 보기를 올바르게 사용할 수 있습니다.
애니메이션으로 요소를 표시하는 코드는 다음과 같습니다.
private void showElements() {
// Precondition
if (areElementsVisible()) {
Log.w(TAG, "The view is already visible. Nothing to do here");
return;
}
// Animate the hidden linear layout as visible and set
// the alpha as 0.0. Otherwise the animation won't be shown
mHiddenLinearLayout.setVisibility(View.VISIBLE);
mHiddenLinearLayout.setAlpha(0.0f);
mHiddenLinearLayout
.animate()
.setDuration(ANIMATION_TRANSITION_TIME)
.alpha(1.0f)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
updateShowElementsButton();
mHiddenLinearLayout.animate().setListener(null);
}
})
;
mLastButton
.animate()
.setDuration(ANIMATION_TRANSITION_TIME)
.translationY(mHiddenLinearLayoutHeight);
// Update the high of all the elements relativeLayout
LayoutParams layoutParams = mAllElementsRelativeLayout.getLayoutParams();
// TODO: Add vertical margins
layoutParams.height = mLastButton.getHeight() + mHiddenLinearLayoutHeight;
}
애니메이션 요소를 숨기는 코드입니다.
private void hideElements() {
// Precondition
if (!areElementsVisible()) {
Log.w(TAG, "The view is already non-visible. Nothing to do here");
return;
}
// Animate the hidden linear layout as visible and set
mHiddenLinearLayout
.animate()
.setDuration(ANIMATION_TRANSITION_TIME)
.alpha(0.0f)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
Log.v(TAG, "Animation ended. Set the view as gone");
super.onAnimationEnd(animation);
mHiddenLinearLayout.setVisibility(View.GONE);
// Hack: Remove the listener. So it won't be executed when
// any other animation on this view is executed
mHiddenLinearLayout.animate().setListener(null);
updateShowElementsButton();
}
})
;
mLastButton
.animate()
.setDuration(ANIMATION_TRANSITION_TIME)
.translationY(0);
// Update the high of all the elements relativeLayout
LayoutParams layoutParams = mAllElementsRelativeLayout.getLayoutParams();
// TODO: Add vertical margins
layoutParams.height = mLastButton.getHeight();
}
애니메이션을 숨기기 위한 간단한 해킹이 있습니다.애니메이션 리스너 mHiddenLinearLayout에서 다음을 사용하여 리스너 자체를 삭제해야 했습니다.
mHiddenLinearLayout.animate().setListener(null);
이는 일단 애니메이션 리스너가 뷰에 연결되면 다음에 이 뷰에서 애니메이션을 실행할 때 리스너도 함께 실행되기 때문입니다.애니메이션 청취자의 버그일 수 있습니다.
프로젝트의 소스 코드는 GitHub:https://github.com/jiahaoliuliu/ViewsAnimated에 있습니다.
해피 코딩!
업데이트: 보기에 연결된 모든 청취자의 경우 애니메이션이 종료된 후 제거해야 합니다.이것은, 다음의 방법으로 행해집니다.
view.animate().setListener(null);
@ashakirov 답변을 바탕으로 페이드 애니메이션으로 표시/숨기기 확장입니다.
fun View.fadeVisibility(visibility: Int, duration: Long = 400) {
val transition: Transition = Fade()
transition.duration = duration
transition.addTarget(this)
TransitionManager.beginDelayedTransition(this.parent as ViewGroup, transition)
this.visibility = visibility
}
사용 예
view.fadeVisibility(View.VISIBLE)
view.fadeVisibility(View.GONE, 2000)
이 방법으로 메뉴를 표시하거나 숨길 수 있었습니다.
MenuView.java(FrameLayout 확장)
private final int ANIMATION_DURATION = 500;
public void showMenu()
{
setVisibility(View.VISIBLE);
animate()
.alpha(1f)
.setDuration(ANIMATION_DURATION)
.setListener(null);
}
private void hideMenu()
{
animate()
.alpha(0f)
.setDuration(ANIMATION_DURATION)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
setVisibility(View.GONE);
}
});
}
솔루션 확장
fun View.slideVisibility(visibility: Boolean, durationTime: Long = 300) {
val transition = Slide(Gravity.BOTTOM)
transition.apply {
duration = durationTime
addTarget(this@slideVisibility)
}
TransitionManager.beginDelayedTransition(this.parent as ViewGroup, transition)
this.isVisible = visibility
}
용도:
textView.slideVisibility(true)
아래 코드를 찾아서 Circuler에서 보기를 볼 수 있도록 하십시오. true를 전송하면 투명/사라집니다.거짓으로 보내면 보일 거예요.anyView는 표시/숨기는 뷰로, 임의의 뷰(레이아웃, 버튼 등)가 될 수 있습니다.
private fun toggle(flag: Boolean, anyView: View) {
if (flag) {
val cx = anyView.width / 2
val cy = anyView.height / 2
val initialRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()
val anim = ViewAnimationUtils.createCircularReveal(anyView, cx, cy, initialRadius, 0f)
anim.addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator) {
super.onAnimationEnd(animation)
anyView.visibility = View.INVISIBLE
}
})
anim.start()
} else {
val cx = anyView.width / 2
val cy = anyView.height / 2
val finalRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()
val anim = ViewAnimationUtils.createCircularReveal(anyView, cx, cy, 0f, finalRadius)
anyView.visibility = View.VISIBLE
anim.start()
}
}
언급URL : https://stackoverflow.com/questions/22454839/android-adding-simple-animations-while-setvisibilityview-gone
반응형
'IT이야기' 카테고리의 다른 글
| Mocha 테스트에서 VueX 스토어를 라우터에 Import할 수 없음 (0) | 2022.06.03 |
|---|---|
| 순수 VUE 구성 요소에 스타일 추가 (0) | 2022.06.03 |
| 포인터 표현식: *ptr++, *+ptr 및 ++*ptr (0) | 2022.06.03 |
| axios 응답 개체의 모든 항목에서 vuex 상태로 특정 값을 추출하려면 어떻게 해야 합니까? (0) | 2022.06.03 |
| Vue js의 Firebase에서 토큰을 검색하는 동안 오류가 발생하는 이유는 무엇입니까? (0) | 2022.06.03 |