右键滑动面板,如WunderList App

时间:2013-03-03 00:49:28

标签: android

我想知道是否有人知道WunderList是如何做到的?见图:

enter image description here

基本上,如果您点击添加的任何列表项,此抽屉会弹出以显示项目详细信息。在这种情况下,我随机添加了一个项目,显然称为“Rgh”。单击它,它从右侧滑出。你可以滑动它,它可以回到原来的位置。

我认为这是一个SliderMenu库,也许就像jfeinstein10那样,但是Wunderlist左边有一个滑块。右边的那个(图中)表现完全不同。它更大,而不是推送内容,它只是超过以前的活动(或片段?)。它不能通过刷卡(仅关闭)打开。我知道jfeinstien的,你不能做任何事情 - Right和LEft非常相似(除非你提出它)。

我知道有一种叫做SlidingDrawer的东西,但我几乎看不到这种情况了,这可能是吗?实现这一目标的最佳方式是什么?

2 个答案:

答案 0 :(得分:3)

LinearLayout plus动画。我在我的应用程序中做了类似的事 甚至没有使用碎片。使用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;
    }
}

以下是我从另一个Activity调用动画的方法:

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 是获取动画效果的内容。

查看屏幕外观的视频:Sliding Animation

答案 1 :(得分:3)

Hello KickingLettuce

嗨伊戈尔

我们需要一个来自右侧的面板,在应用程序的其余部分之上,我们希望它是“可滑动的”,包括基本的“最近点”打开或关闭以及加速跟踪,以决定如果要做滑动是在中途完成的。

我们最初尝试使用Android的SlidingDrawer,但首先是它的弃用,然后只是从侧面的旋钮滑动+它不那么完美的性能使我们考虑做其他事情。

我们称之为SlidingLayer,我们很快就会计划很快开源。我们只是想确保添加一对调整,为您提供一些灵活性,而无需深入研究代码中不必要的部分(即:轻松添加阴影)。 在此期间,如果它对您有所帮助,我们将其中很大一部分基于SlidingMenu操作(我们喜欢它的工作原理)。 它基本上是一个容器(从可能变成ViewGroup的RelativeLayout扩展 - 我很想辩论 - RelativeLayout - &gt; pro:多功能,避免额外的视图.con:你可能需要不同的布局)。这是在你的手指移动后滚动(使用scrollTo) - &gt;通过覆盖和分析onInterceptTouchEvent和onTouchEvent中的触摸。 这相对容易。我会为你欢呼。围绕这两种方法已经有很好的教程和代码示例。

尽管如此,如果你不想承担这个负担,我会在你准备好的时候通知你。 如果你决定去做,我会在这里做一个简短的跟进。

一切顺利。