web-dev-qa-db-ja.com

アニメーション付きのスライドダウンおよびスライドアップレイアウト

ボタンを押したときにスライドを上にしてレイアウトを中央に表示し、もう一度押すと非表示になります...

それで私を助けて、考えています

androidanimationslidedownslideup
40
EliasM

Res/animフォルダーの下に2つのアニメーションxmlを作成します

slide_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android" >

<translate
    Android:duration="1000"
    Android:fromYDelta="0"
    Android:toYDelta="100%" />
</set>

slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android" >

<translate
    Android:duration="1000"
    Android:fromYDelta="100%"
    Android:toYDelta="0" />
</set>

以下のコードのようなアニメーションをロードし、必要に応じてアニメーションを開始します要件に従って

//Load animation 
Animation slide_down = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.slide_down);

Animation slide_up = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.slide_up);

// Start animation
linear_layout.startAnimation(slide_down);
115
Ando Masahashi

これらの簡単な関数を使用します。jqueryslideUp slideDownのように機能し、ヘルパークラスで使用し、ビューを渡すだけです。

public static void expand(final View v) {
    v.measure(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT);
    final int targetHeight = v.getMeasuredHeight();

    // Older versions of Android (pre API 21) cancel animations for views with a height of 0.
    v.getLayoutParams().height = 1;
    v.setVisibility(View.VISIBLE);
    Animation a = new Animation()
    {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            v.getLayoutParams().height = interpolatedTime == 1
                    ? WindowManager.LayoutParams.WRAP_CONTENT
                    : (int)(targetHeight * interpolatedTime);
            v.requestLayout();
        }

        @Override
        public boolean willChangeBounds() {
            return true;
        }
    };

    // 1dp/ms
    a.setDuration((int) (targetHeight / v.getContext().getResources().getDisplayMetrics().density));
    v.startAnimation(a);
}

public static void collapse(final View v) {
    final int initialHeight = v.getMeasuredHeight();

    Animation a = new Animation()
    {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            if(interpolatedTime == 1){
                v.setVisibility(View.GONE);
            }else{
                v.getLayoutParams().height = initialHeight - (int)(initialHeight * interpolatedTime);
                v.requestLayout();
            }
        }

        @Override
        public boolean willChangeBounds() {
            return true;
        }
    };

    // 1dp/ms
    a.setDuration((int)(initialHeight / v.getContext().getResources().getDisplayMetrics().density));
    v.startAnimation(a);
}
25
neoteknic

これは私にはうまくいきません、jquery slideUp/slideDown関数が好きです、このコードを試しましたが、アニメーションの終了後に同じ場所に留まるコンテンツを移動するだけで、ビューの開始時に0dpの高さが必要ですアニメーションの終了後のslideDownとビューの高さ（wrap_contentを使用）。

3
neoteknic

作業中のアプリにも同様の要件がありました。そして、Androidでスライドアップ、スライドダウン、スライドライトを行うサードパーティのライブラリを見つけました。

詳細については、リンクを参照してください： https://github.com/mancj/SlideUp-Android

ライブラリをセットアップするには（要求に応じてGithubページのReadMe部分からコピー）：

SlideUpライブラリを取得

JitPackリポジトリをビルドファイルに追加します。リポジトリの最後にあるルートbuild.gradleに追加します。

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
    maven { url "https://maven.google.com" } // or google() in AS 3.0
  }
}

依存関係を追加します（Module gradleで）

dependencies {
    compile 'com.github.mancj:SlideUp-Android:2.2.1'
    compile 'ru.ztrap:RxSlideUp2:2.x.x' //optional, for reactive listeners based on RxJava-2
    compile 'ru.ztrap:RxSlideUp:1.x.x' //optional, for reactive listeners based on RxJava
}

SlideUpをプロジェクトに追加するには、次の3つの簡単な手順に従います。

ステップ1：

あらゆるタイプのレイアウトを作成する

<LinearLayout
  Android:id="@+id/slideView"
  Android:layout_width="match_parent"
  Android:layout_height="match_parent"/>

ステップ2：

アクティビティ/フラグメントでそのビューを見つけます

View slideView = findViewById(R.id.slideView);

ステップ3：

SlideUpオブジェクトを作成し、ビューを渡します

slideUp = new SlideUpBuilder(slideView)
                .withStartState(SlideUp.State.HIDDEN)
                .withStartGravity(Gravity.BOTTOM)

                //.withSlideFromOtherView(anotherView)
                //.withGesturesEnabled()
                //.withHideSoftInputWhenDisplayed()
                //.withInterpolator()
                //.withAutoSlideDuration()
                //.withLoggingEnabled()
                //.withTouchableAreaPx()
                //.withTouchableAreaDp()
                //.withListeners()
                //.withSavedState()
                .build();

リンクのサンプルプロジェクトを参照することもできます。とても便利だと思いました。

0
sayleep