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窗口小部件可以轻松实现此功能。

需要RelativeLayout，以便您可以将抽屉连接到布局的底部，并将其打开照片。
SlidingDrawer窗口小部件包含2个必需属性：android:handle和android:content。对于干净的布局，您可能希望将它们作为单独的布局文件。为简单起见，在下面的示例中，它们包含在相同的XML布局中。
背景的不透明度很简单 - 只需将android:background属性作为ARGB（Alpha RGB）值传递即可。下面使用“＃BF000000”，黑色，不透明度大约为75％。
您的最后一步是隐藏句柄并为您的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

This link 给出了创建透明背景颜色的想法。这是#BF000000。

在照片的半透明正文框

2 个答案: