android - WunderList アプリのような右スライドインパネル

Question

WunderListがこれをどのように行ったかを誰かが知っているかどうかを知りたいですか? 写真を参照してください:

ここに画像の説明を入力

基本的に、追加したリストアイテムをクリックすると、このドロワーが飛び出してアイテムの詳細が表示されます。この場合、明らかに「Rgh」と呼ばれるアイテムをランダムに追加しました。それをクリックすると、右からスライドします。あなたはそれをスワイプすることができ、元の場所に戻ります。

SliderMenuおそらく jfeinstein10 のようなライブラリだと思いましたが、 Wunderlist には既に左側にスライダーがあります。右（写真）のものは、まったく異なる動作をします。より大きく、コンテンツをプッシュするのではなく、前のアクティビティ (またはフラグメント?) を通過するだけです。また、スワイプから開くことはできません（閉じるだけです）。私はjfeinstien'sでそれを行うことができないことを知っています-右と左は非常に似ている必要があります（サブクラス化しない限り）。

SlidingDrawer と呼ばれるものがあったことは知っていますが、これが使用されていることはほとんどありません。これを実装するための最も好ましい方法は何ですか?

score 3 · Accepted Answer

LinearLayoutとアニメーション。私は自分のアプリで同様のことをしました。
フラグメントも使用していません。Animationクラスを使用すると、コードは次のようになります。

/*
This class is responsible for showing the sliding animation
*/
public class SlideAnim extends Animation {
    int targetWidth;
    View slideView;
    ImageView imageView;
    boolean close;

    public SlideAnim(View _v, boolean _close, int _maxWidth, ImageView imageView) {
        this.slideView = _v;
        this.imageView = imageView;
        targetWidth = _maxWidth;
        close = _close;
    }

    protected void applyTransformation(float interpolatedTime, Transformation t) {
        int newWidth;
        if (!close) {
            newWidth = (int) (targetWidth * interpolatedTime);
        } else {
            newWidth = (int) (targetWidth * (1 - interpolatedTime));
        }
        slideView.getLayoutParams().width = newWidth;
        slideView.requestLayout();
        imageView.setImageResource(slideView.getWidth() > 0 ? R.drawable.purple_arrow_right : R.drawable.purple_arrow_left);
    }

    public void initalize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
    }

    public boolean willChangeBounds() {
        return true;
    }
}

別のアクティビティからアニメーションを呼び出す方法は次のとおりです。

SlideAnim slideAnim = new SlideAnim(trendingListLayout, false, maxListWidth, imageView);
slideAnim.setDuration(500);
slideAnim.reset();
trendingListLayout.clearAnimation();
trendingListLayout.startAnimation(slideAnim);

私はLinearLayoutをアニメーション化しています：

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/top_container"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <com.eazyigz.views.EazyigzImageView
        android:id="@+id/whole_screen"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:scaleType="centerCrop" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal" >

        <View
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1" />

        <LinearLayout
            android:id="@+id/explore_expander"
            android:layout_width="30dp"
            android:layout_height="fill_parent"
            android:background="@color/eazyigz_bg_primary"
            android:orientation="horizontal"
            android:visibility="invisible" >

            <ImageView
                android:id="@+id/explore_expander_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:src="@drawable/purple_arrow_left" />
        </LinearLayout>

        <!-- List Layout -->
        <LinearLayout
            android:id="@+id/explore_list_layout"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:paddingTop="50dp"
            android:background="@color/eazyigz_bg_secondary"
            android:orientation="vertical"
            android:visibility="invisible" >

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="0dp"
                android:layout_marginTop="10dp"
                android:gravity="center_horizontal|center_vertical"
                android:singleLine="true"
                android:ellipsize="marquee"
                android:focusable="true"
                android:fadingEdge="horizontal"
                android:marqueeRepeatLimit ="marquee_forever"
                android:scrollHorizontally="true"
                android:text="@string/top_trending"
                android:textColor="@color/eazyigz_green"
                android:textSize="30sp" />

            <ProgressBar
                android:id="@+id/explore_spinner"
                android:layout_width="50dp"
                android:layout_height="45dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp"
                android:indeterminateDrawable="@drawable/progress_spinner"
                android:visibility="visible"
                android:layout_gravity="center_horizontal|center_vertical"/>
            <ListView
                android:id="@+id/explore_list"
                style="@style/EazyigzListView"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:cacheColorHint="#00000000"
                android:divider="#0000"
                android:layout_marginLeft="10dp" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:paddingBottom="50dp"
        android:paddingLeft="20dp" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" />

        <Button
            android:id="@+id/eazyigz_play"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:background="@drawable/eazyigz_button"
            android:drawablePadding="0dp"
            android:gravity="left|center_vertical"
            android:padding="5dp"
            android:text="@string/playing"
            android:textColor="@color/eazyigz_white"
            android:textSize="36sp"
            android:visibility="gone"/>

        <Button
            android:id="@+id/eazyigz_create"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:background="@drawable/eazyigz_button"
            android:drawablePadding="0dp"
            android:gravity="left|center_vertical"
            android:padding="5dp"
            android:text="@string/create"
            android:textColor="@color/eazyigz_white"
            android:textSize="36sp" />

        <Button
            android:id="@+id/eazyigz_explore"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:background="@drawable/eazyigz_button"
            android:drawablePadding="0dp"
            android:gravity="left|center_vertical"
            android:padding="5dp"
            android:text="@string/explore"
            android:textColor="@color/eazyigz_white"
            android:textSize="36sp" />

        <Button
            android:id="@+id/eazyigz_listen"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/eazyigz_button"
            android:drawablePadding="0dp"
            android:gravity="left|center_vertical"
            android:paddingBottom="5dp"
            android:paddingLeft="5dp"
            android:paddingRight="50dp"
            android:paddingTop="5dp"
            android:text="@string/stations"
            android:textColor="@color/eazyigz_white"
            android:textSize="36sp" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" />
    </LinearLayout>

</merge>

explore_list_layoutは、アニメーション化されるものです。

画面がどのように見えるかのビデオを見る：スライディングアニメーション

score 3 · Accepted Answer

こんにちはKickingLettuce

こんにちはイゴール

アプリケーションの残りの部分の上に、右から来るパネルが必要でした。また、スワイプが途中で完了しました。

最初はAndroidのSlidingDrawerを試してみましたが、最初は非推奨で、次に側面のノブからスワイプする機能+あまり完璧ではないパフォーマンスにより、別のことを考えました。

これをSlidingLayerと呼び、まもなくオープンソース化する予定です。コードの不要な部分を深く掘り下げることなく（つまり、シャドウを簡単に追加することなく）、ある程度の柔軟性を提供する2つの微調整を確実に追加したいと思います。それまでの間、それがあなたに役立つのであれば、私たちはその大部分をSlidingMenu操作に基づいています（私たちはそれがどのように機能するかが大好きです）。これは基本的にコンテナです（ViewGroupに変わる可能性のあるRelativeLayoutから拡張されます-それについて議論したいと思います-RelativeLayout-> pro：用途が広く、余分なビューを避けます。con：別のレイアウトが必要になる場合があります）。これは、指の動きに続いて（scrollToを使用して）スクロールされます->onInterceptTouchEventおよびonTouchEventのタッチをオーバーライドおよび分析します。比較的簡単です。どうぞよろしくお願いします。

それでも、負担をかけたくない場合は、準備ができたらお知らせします。あなたがそれに行くことにした場合に備えて、ここで簡単なフォローアップを行います。

ではごきげんよう。

android - WunderList アプリのような右スライドイン パネル

2 に答える 2

Related

Reference

android - WunderList アプリのような右スライドインパネル