آموزش انیمیشن Flip در برنامه نویسی اندروید

سلام دوستان امیدوارم حالتان خوب باشد در این سری از آموزش برنامه نویسی اندروید به آموزش انیمیشن Flip در برنامه نویسی اندروید می پردازیم بحث انیمیشن در برنامه نویسی اندروید بسیار مهم است شاید بیشترین بخشی که بروی کاربر تاثیر می گذارد همین انیمیشن باشد از این انیمیشن برای تغییر انیمیشن باز شدن یک اکتیویتی دیگر می توانید استفاده در ادامه می توانید پیش نمایشی از آن را مشاهده کنید با ما همراه باشید.

ابتدا ما باید انیمیشن ها را ایجاد کنیم در این آموزش سه تا فایل انیمیشن سفارشی داریم (ما انیمیشن را برای فرگمنت set می کنیم قبلا آموزش تنظیم انیمیشن برای layout معمولی را قرار داده بودیم می توانید از لینک زیر استفاده کنید )

آموزش ایجاد انیمیشن برای اکتیویتی در اندروید

یک پوشه به نام anim در ریشه res ایجاد کنید.
سپس یک فایل به نام card_flip_left_in.xml در آن ایجاد کرده و سپس کد زیر را در آن قرار دهید.

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />
    <objectAnimator
        android:valueFrom="-180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="300" />
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="150"
        android:duration="1" />
</set>

<objectAnimator

android:valueFrom="1.0"

android:valueTo="0.0"

android:propertyName="alpha"

android:duration="0" />

<objectAnimator

android:valueFrom="-180"

android:valueTo="0"

android:propertyName="rotationY"

android:interpolator="@android:interpolator/accelerate_decelerate"

android:duration="300" />

<objectAnimator

android:valueFrom="0.0"

android:valueTo="1.0"

android:propertyName="alpha"

android:startOffset="150"

android:duration="1" />

</set>

یک فایل دیگر در همان مسیر به نام card_flip_left_out.xml ایجاد کرده وکدهای زیر را در آن قرار دهید.

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="180"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

<objectAnimator

android:valueFrom="0"

android:valueTo="180"

android:propertyName="rotationY"

android:interpolator="@android:interpolator/accelerate_decelerate"

android:duration="@integer/card_flip_time_full" />

<objectAnimator

android:valueFrom="1.0"

android:valueTo="0.0"

android:propertyName="alpha"

android:startOffset="@integer/card_flip_time_half"

android:duration="1" />

</set>

در همان مسیر یک فایل دیگر به نام card_flip_right_in.xml ایجاد کرده و کدهای زیر را در آن قرار دهید.

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />
    <objectAnimator
        android:valueFrom="180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

<objectAnimator

android:valueFrom="1.0"

android:valueTo="0.0"

android:propertyName="alpha"

android:duration="0" />

<objectAnimator

android:valueFrom="180"

android:valueTo="0"

android:propertyName="rotationY"

android:interpolator="@android:interpolator/accelerate_decelerate"

android:duration="@integer/card_flip_time_full" />

<objectAnimator

android:valueFrom="0.0"

android:valueTo="1.0"

android:propertyName="alpha"

android:startOffset="@integer/card_flip_time_half"

android:duration="1" />

</set>

و در آخر یک فایل دیگر به نام card_flip_right_out.xml ایجاد کرده و کدهای زیر را در آن قرار دهید.

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="-180"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

<objectAnimator

android:valueFrom="0"

android:valueTo="-180"

android:propertyName="rotationY"

android:interpolator="@android:interpolator/accelerate_decelerate"

android:duration="@integer/card_flip_time_full" />

<objectAnimator

android:valueFrom="1.0"

android:valueTo="0.0"

android:propertyName="alpha"

android:startOffset="@integer/card_flip_time_half"

android:duration="1" />

</set>

فایل های بالا دو انیمیشن را ایجاد می کند یک انیمیشن به سمت راست و دومی انیمیشن به سمت چپ (علت دو فایل بودن هر انیمیشن بهتر بودن شکل ظاهری انیمیشن است ویدیو را مشاهده کنید متوجه خواهید شد).
همانطور که در بالاتر گفتیم این آموزش در فرگمنت است پس در layout خود یک فایل به نام fragment_card_front.xml ایجاد کرده و کدهای زیر را در آن قرار دهید.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@null"
        android:scaleType="fitXY"
        android:src="@drawable/android_team" />
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:contentDescription="@null"

android:scaleType="fitXY"

android:src="@drawable/android_team" />

</LinearLayout>

layout بالا قسمت جلویی یا همان روبه روی ما است.
یک Layout یگر به نام fragment_card_back.xml ایجاد کرده و کدهای زیر را در آن قرارد دهید.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#a6c"
    android:orientation="vertical">
    <TextView
        android:id="@android:id/text1"
        style="?android:textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Programchi.ir"
        android:textColor="#fff"
        android:textStyle="bold" />
    <TextView
        style="?android:textAppearanceSmall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:lineSpacingMultiplier="1.2"
        android:text="Best Programming Site !"
        android:textAllCaps="true"
        android:textColor="#80ffffff"
        android:textStyle="bold" />
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#a6c"

android:orientation="vertical">

<TextView

android:id="@android:id/text1"

style="?android:textAppearanceLarge"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="Programchi.ir"

android:textColor="#fff"

android:textStyle="bold" />

<TextView

style="?android:textAppearanceSmall"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:lineSpacingMultiplier="1.2"

android:text="Best Programming Site !"

android:textAllCaps="true"

android:textColor="#80ffffff"

android:textStyle="bold" />

</LinearLayout>

layout بالا قسمت پشتی را تنظیم می کند.
حالا باید کد های مروبط به layout ها را قرار دهید (ما کار خاصی با فرگمنت انجام نداده ایم و هنوز انیمیشن ها در اینجا لود نشده است)
یک فایل جاوا به نام FrontLayoutFragment.java ایجاد کرده و کدهای زیر را در آن قرار دهید (این کلاس مربوط به اولین فرگمنت ما است)

package ir.programchi;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class FrontLayoutFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_card_front, container, false);
    }
}

package ir.programchi;

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class FrontLayoutFragment extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_card_front, container, false);

}

یک فایل جاوا دیگر به نام BackLayoutFragment.java ایجاد کرده و کدهای زیر را در آن قرار دهید.

package ir.programchi
;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class BackLayoutFragment extends Fragment{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_card_back, container, false);
    }
}

package ir.programchi

;

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class BackLayoutFragment extends Fragment{

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_card_back, container, false);

}

حالا باید اکتویتی اصلی را که فرگمنت ها در آن لود می شوند را ایجاد کنیم پس در activity_main.xml کد های زیر را قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/btn_flip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Flip Layout" />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent">

<Button

android:id="@+id/btn_flip"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:text="Flip Layout" />

</RelativeLayout>

و در آخر در MainActivity.java کد زیر را قرار دهید.

public class MainActivity extends AppCompatActivity implements FragmentManager.OnBackStackChangedListener {
private boolean isShowingBackLayout = false;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        if (savedInstanceState == null) {
            getFragmentManager()
                    .beginTransaction()
                    .add(R.id.container, new FrontLayoutFragment())
                    .commit();
        } else {
            isShowingBackLayout = (getFragmentManager().getBackStackEntryCount() > 0);
        }
        getFragmentManager().addOnBackStackChangedListener(this);
        View btnFlip = findViewById(R.id.btn_flip);
        btnFlip.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                flipCard();
            }
        });
    }
        private void flipCard() {
        if (isShowingBackLayout) {
            getFragmentManager().popBackStack();
            return;
        }
        isShowingBackLayout = true;
        getFragmentManager().beginTransaction()
                .setCustomAnimations(
                        R.animator.card_flip_right_in, R.animator.card_flip_right_out,
                        R.animator.card_flip_left_in, R.animator.card_flip_left_out)
                .replace(R.id.container, new BackLayoutFragment())
                .addToBackStack(null)
                .commit();
    }
    @Override
    public void onBackStackChanged() {
        isShowingBackLayout = (getFragmentManager().getBackStackEntryCount() > 0);
    }
}

public class MainActivity extends AppCompatActivity implements FragmentManager.OnBackStackChangedListener {

private boolean isShowingBackLayout = false;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

if (savedInstanceState == null) {

getFragmentManager()

.beginTransaction()

.add(R.id.container, new FrontLayoutFragment())

.commit();

} else {

isShowingBackLayout = (getFragmentManager().getBackStackEntryCount() > 0);

}

getFragmentManager().addOnBackStackChangedListener(this);

View btnFlip = findViewById(R.id.btn_flip);

btnFlip.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

flipCard();

}

});

}

private void flipCard() {

if (isShowingBackLayout) {

getFragmentManager().popBackStack();

return;

}

isShowingBackLayout = true;

getFragmentManager().beginTransaction()

.setCustomAnimations(

R.animator.card_flip_right_in, R.animator.card_flip_right_out,

R.animator.card_flip_left_in, R.animator.card_flip_left_out)

.replace(R.id.container, new BackLayoutFragment())

.addToBackStack(null)

.commit();

}

@Override

public void onBackStackChanged() {

isShowingBackLayout = (getFragmentManager().getBackStackEntryCount() > 0);

}

این آموزش هم به پایان رسید .

موفق و پیروز باشید.

مطالعه بیشتر

آموزش انیمیشن Flip در برنامه نویسی اندروید

آموزش ایجاد انیمیشن برای اکتیویتی در اندروید

مطالب مشابه

دیدگاهتان را بنویسید لغو پاسخ

آموزش ایجاد انیمیشن برای اکتیویتی در اندروید

مطالب مشابه

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی