下拉菜单或幻灯片上查看 [英] Drop down menu or view on slide

问题描述

我想知道有人可以指导我如何完成以下操作，

I was wondering if someone could guide me on how to accomplish the following,

用户拥有标题栏，当用户持有标题栏并拖动;它向用户显示不同的视图。这是一个驻留在tabhost中的视图。

The user has a title bar, when the user holds the title bar and drags down; it shows the user a different view. This is a view residing in a tabhost.

它类似于android的默认状态栏。

It is similar to android's default statusbar.

推荐答案

您应该尝试使用 ViewFlipper 与 RelativeLayout 孩子和附加的OnTouchListeners在头 s。

You should try to accomplish this (an AccordionView-like behavior) using ViewFlipper with RelativeLayout children and attached OnTouchListeners on the headers. It worked for me.

示例应用程序

main.xml // res / layouts

main.xml //inside res/layouts

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent">
    <ViewFlipper android:id="@+id/flipper" 
        android:layout_width="fill_parent" android:layout_height="fill_parent">
        <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
            <TextView android:id="@+id/txt_states" android:text="First panel" 
                android:layout_centerHorizontal="true"
                android:textSize="18dp" android:textStyle="bold" android:textColor="@android:color/white"
                android:layout_width="wrap_content" android:layout_height="wrap_content" />
            <Button android:id="@+id/btn_next" android:text="@string/goto_second"
                android:layout_width="fill_parent" android:layout_height="wrap_content" 
                android:gravity="center_horizontal" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true"/>
            <TextView android:id="@+id/txt_content1" android:text="@string/loremipsum1" 
                 android:layout_width="fill_parent" android:layout_height="fill_parent" 
                 android:layout_below="@id/txt_states" android:layout_above="@id/btn_next" 
                 android:layout_marginTop="10dp" />
        </RelativeLayout>
        <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
            <Button android:id="@+id/btn_prev" android:text="@string/goto_first"
                android:layout_width="fill_parent" android:layout_height="wrap_content"
                android:gravity="center_horizontal" android:layout_centerHorizontal="true" />
            <TextView android:id="@+id/txt_commands" android:text="Second panel" 
                android:layout_centerHorizontal="true"
                android:textSize="18dp" android:textStyle="bold" android:textColor="@android:color/white"
                android:layout_width="wrap_content" android:layout_height="wrap_content" 
                android:layout_below="@id/btn_prev" />
            <TextView android:id="@+id/txt_content2" android:text="@string/loremipsum2" 
                 android:layout_width="fill_parent" android:layout_height="fill_parent"
                 android:layout_below="@id/txt_commands" android:layout_marginTop="10dp" />
        </RelativeLayout>
    </ViewFlipper>
</RelativeLayout>

androidManifest.xml //仅限活动声明

androidManifest.xml //activity declaration only

<activity android:name=".AccordionSample" android:label="@string/app_name">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

AccordionSample.java //您的主要活动

AccordionSample.java //your main activity

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ViewFlipper;

public class AccordionSample extends Activity implements View.OnTouchListener 
{
    private float oldTouchValue;
    private ViewFlipper flipper;
    private Button currentButton;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        flipper = (ViewFlipper)findViewById(R.id.flipper);
        findViewById(R.id.btn_prev).setOnTouchListener(this);
        findViewById(R.id.btn_next).setOnTouchListener(this);
    }

    private boolean onButtonTouchEvent(MotionEvent touchevent)
    {
        if (currentButton == null)
            return false;
        switch (touchevent.getAction())
        {
            case MotionEvent.ACTION_DOWN:
            {
                oldTouchValue = touchevent.getY();
                break;
            }
            case MotionEvent.ACTION_UP:
            {
                float currentY = touchevent.getY();
                final float diff = oldTouchValue - currentY;
                if ((diff < -100) && (currentButton.getId() == R.id.btn_prev))
                {
                    //Up --> Bottom
                    flipper.setInAnimation(AccordionAnimation.inFromTopAnimation());
                    flipper.setOutAnimation(AccordionAnimation.outToBottomAnimation());
                    flipper.showNext();
                }
                else if ((diff > 100) && (currentButton.getId() == R.id.btn_next))
                {
                    //Bottom --> Up
                    flipper.setInAnimation(AccordionAnimation.inFromBottomAnimation());
                    flipper.setOutAnimation(AccordionAnimation.outToTopAnimation());
                    flipper.showPrevious();
                }
                break;
            }
        }
        currentButton = null;
        return true;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event)
    {
        currentButton = (Button)v;
        final boolean result = this.onButtonTouchEvent(event);
        return result;
    }
}

AccordionAnimation.java / for the up and down sliding

AccordionAnimation.java //for the up and down sliding

import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;

public class AccordionAnimation
{
    public static Animation inFromBottomAnimation()
    {
        Animation inFromBottom =
                new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
                        Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
        inFromBottom.setDuration(350);
        inFromBottom.setInterpolator(new AccelerateInterpolator());
        return inFromBottom;
    }

    public static Animation outToTopAnimation()
    {
        Animation outtoTop =
                new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
                        Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, -1.0f);
        outtoTop.setDuration(350);
        outtoTop.setInterpolator(new AccelerateInterpolator());
        return outtoTop;
    }

    public static Animation inFromTopAnimation()
    {
        Animation inFromTop =
                new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
                        Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
        inFromTop.setDuration(350);
        inFromTop.setInterpolator(new AccelerateInterpolator());
        return inFromTop;
    }

    public static Animation outToBottomAnimation()
    {
        Animation outtoBottom =
                new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
                        Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, +1.0f);
        outtoBottom.setDuration(350);
        outtoBottom.setInterpolator(new AccelerateInterpolator());
        return outtoBottom;
    }
}

strings.xml / in res / values

strings.xml //inside res/values

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="goto_first">Slide down to see the first panel</string>
    <string name="goto_second">Slide up to see the second panel</string>
    <string name="loremipsum1">Lorem ipsum dolor sit amet...</string>
    <string name="loremipsum2">Sed ut perspiciatis unde omnis iste...</string>
    <string name="app_name">AccordionSample</string>
</resources>

修改

如果你想将不同的视图拆分成不同的布局xml，例如

Edit
If you'd like to split your different views into different layout xmls, say

1. first_view.xml和


2. 第二个视图您应该修改 onCreate 方法：

$ b <

you should modify your onCreate method:

flipper = (ViewFlipper)findViewById(R.id.flipper);
LayoutInflater inflater = getLayoutInflater();

final View firstView = inflater.inflate(R.layout.first_view, flipper, false);
flipper.addView(firstView);

final View secondView = inflater.inflate(R.layout.second_view, flipper, false);
flipper.addView(secondView);

firstView.findViewById(R.id.btn_next).setOnTouchListener(this);
secondView.findViewById(R.id.btn_prev).setOnTouchListener(this);

修改

或更优雅高效，只需将您为不同视图创建的布局xml包含到 main.xml 中：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent">
    <ViewFlipper android:id="@+id/flipper" 
        android:layout_width="fill_parent" android:layout_height="fill_parent">
        <include android:id="@+id/flipping_view_1" layout="@layout/flipping_view_1" />
        <include android:id="@+id/flipping_view_2" layout="@layout/flipping_view_2" />
    </ViewFlipper>
</RelativeLayout>

其中

• layout / flipping_view_1.xml
  包含第一个 RelativeLayout ，
  和
• 
  
• layout / flipping_view_2.xml
  包含第二个 RelativeLayout / $>
  

• the layout/flipping_view_1.xml contains the first RelativeLayout, and
• the layout/flipping_view_2.xml contains the second RelativeLayout

在原始main.xml中的 ViewFlipper

of the ViewFlipper inside your original main.xml.

要详细了解Android布局的可重用性以及整体布局技术，您应该看看 Romain Guy的伟大的帖子涵盖了布局技巧。

To learn more about the reusability of android layouts, and layout techniques overall, you should take a look at Romain Guy's great post covering layout tricks.

这篇关于下拉菜单或幻灯片上查看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！