android - 照片上的半透明文本框

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

这可以通过 aRelativeLayout和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。