照片上的半透明文本框

Question

我试图在照片上覆盖一个半透明文本框以进行描述。点击屏幕应使其向上/向下滑动。它还应该在底部包含一个评级栏。

与 Google Goggles 非常相似 http://blogote.com/wp-content/ uploads/2010/10/GoogleGoggles1.jpg

你会怎么做？这是我到目前为止所拥有的：

<FrameLayout 
    android:id="@+id/mainlayout" 
    android:layout_height="match_parent" 
    android:layout_width="match_parent" 
    android:orientation="vertical" 
    android:foregroundGravity="bottom"
    xmlns:android="http://schemas.android.com/apk/res/android">

<ImageView
    android:id="@+id/imgview" 
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
<TextView 

    android:layout_height="wrap_content" 
    android:layout_width="match_parent" 
    android:text="@string/hello"/>
</FrameLayout>

Answer 1

这可以通过 RelativeLayout 和 SlidingDrawer 小部件轻松实现。

1. RelativeLayout 是必需的，以便您可以将抽屉附加到布局的底部并将其在照片上方打开。
2. SlidingDrawer 小部件有 2 个必需属性：android:handle 和 android:content。对于干净的布局，您可能需要将它们作为单独的布局文件。为了简单起见，在下面的示例中，它们包含在相同的 XML 布局中。
3. 背景的不透明度很简单 - 只需将 android:background 属性作为 ARGB (Alpha RGB) 值传递即可。下面使用“#BF000000”，它是黑色的，不透明度约为 75%。
4. 最后一步是隐藏句柄并向 ImageView 和 SlidingDrawer 添加事件处理程序。

只是为了好玩，这里有一个完整的工作示例...

您的布局 XML：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                >
<ImageView android:id="@+id/image" 
           android:src="@drawable/bunnywaffles"
           android:layout_width="fill_parent" 
           android:layout_height="fill_parent"
           android:layout_alignParentTop="true"
           />
<SlidingDrawer android:id="@+id/SlidingDrawer" 
               android:handle="@+id/slideHandleButton" 
               android:content="@+id/contentLayout"
               android:layout_width="fill_parent"
               android:layout_height="150dip"
               android:layout_alignParentBottom="true" >
    <Button android:id="@+id/slideHandleButton"
            android:layout_width="0dip" 
            android:layout_height="0dip"
            android:visibility="gone"
            />
    <LinearLayout android:id="@+id/contentLayout"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"  
                  android:orientation="vertical" 
                  android:gravity="center" 
                  android:background="#BF000000">
        <LinearLayout android:layout_width="fill_parent"
                      android:layout_height="wrap_content"
                      android:gravity="center">
            <Button android:id="@+id/Button01" 
                    android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:text="Button1" 
                    />
            <Button android:id="@+id/Button02" 
                    android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:text="Button2" 
                    />
        </LinearLayout>
        <RatingBar android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:numStars="5" />
    </LinearLayout>
</SlidingDrawer>
</RelativeLayout>

以及您的活动 Java：

ImageView _image;
SlidingDrawer _drawer;
Boolean _drawerOpen = false;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    _image = (ImageView) findViewById( R.id.image );
    _image.setOnClickListener(ToggleDrawer);

    _drawer = (SlidingDrawer) findViewById( R.id.SlidingDrawer );
    _drawer.setOnClickListener(ToggleDrawer);
}

private View.OnClickListener ToggleDrawer = new View.OnClickListener() {
    public void onClick(View view) {
        if ( _drawerOpen )
            _drawer.animateClose();
        else
            _drawer.animateOpen();
        _drawerOpen = !_drawerOpen;
    }
};

Answer 2

此链接
给出了创建透明背景颜色的想法。这是#BF000000。