Android布局 - ScrollView内的ImageView - 图片前的空间

4

我是Android的新手,还在学习如何完成任务并且对布局有疑问。

Trying to Achieve

目前我得到的结果(顶部有额外空间,黑色背景):

What I am getting

我想要一个带有顶部栏的布局,其中包含一些按钮;一个可滚动的中间部分;以及底部栏,也包含按钮。我目前只实现了布局的一部分,但是我有一个关于在ScrollView中放置ImageView的问题。

这是我的布局XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<Button
 android:id="@+id/btnPrevious"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Previous" />

<Button
 android:id="@+id/btnCurrent"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@+id/btnPrevious"
 android:text="Current" />

<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/btnCurrent"
    android:fillViewport="true"
    >
    <RelativeLayout
        android:id="@+id/childOfScrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"   

        >
        <com.example.touch.TouchImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerInside"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_marginTop="10sp"
            android:contentDescription="none"
            android:background="#000000"
            android:src="@drawable/ic_launcher" 
        />
   </RelativeLayout>

</ScrollView>

<Button
     android:id="@+id/btnExtra"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_below="@+id/scrollView"
     android:text="Extra"
 />

</RelativeLayout>

我正在使用URL动态设置图像,示例如下:

image = (ImageView) findViewById(R.id.image);
currentButton = (Button) findViewById(R.id.btnCurrent);
currentButton.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        String address = ImageAddress.getImageAddress(0);
        Bitmap bm = getImageBitmap(address); //
        image.setImageBitmap(bm); // where 
    }
});

// get image bitmap later in my code
private Bitmap getImageBitmap(String url) {
    Bitmap bm = null;
    try {
        URL aURL = new URL(url);
        URLConnection conn = aURL.openConnection();
        conn.connect();
        InputStream is = conn.getInputStream();
        BufferedInputStream bis = new BufferedInputStream(is);
        bm = BitmapFactory.decodeStream(bis);
        bis.close();
        is.close();
   } catch (IOException e) {
       Log.e("Problem", "Error getting bitmap", e);
   }
   return bm;
} 

简单总结一下,为什么我在页面顶部(和底部)会得到这样的额外导航空间?(黑色背景)
更新: Updated picture of layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
     android:id="@+id/btnPrevious"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Previous" />

    <Button
     android:id="@+id/btnCurrent"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Current" />

</LinearLayout>

<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:scrollbars="none"
    >

    <com.example.touch.TouchImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:contentDescription="none"
        android:background="#000000"
        android:src="@drawable/ic_launcher"  />
</ScrollView>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
         android:id="@+id/btnExtra"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Extra"
     />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:text="button2" />
</LinearLayout>
</LinearLayout>

1
事实证明这是模拟器的一个错误,实际设备上显示是正确的。 - SoluableNonagon
4个回答

15

要将ImageView的边界调整为图像大小,请包括:

android:adjustViewBounds="true"

这将移除围绕图像创建的边距。


我遇到了同样的问题,这个方法解决了它。 - Juan

1
看起来黑色区域可能是背景显示,图片只是奇怪地居中了。
也许你可以尝试将TouchImageView中的layout_marginTop改为使用dp而不是sp。从我所读的资料来看,sp主要用于文本。
所以可以尝试这样做:
android:layout_marginTop="10dp"

没有起作用,而且我把marginTop属性全部删除了,它看起来仍然一样。 - SoluableNonagon
事实证明,这是模拟器的一个问题,在实际设备上,显示是正确的。 - SoluableNonagon

1

Nick是正确的。您应该使用dp或dip来设置边距。使用sp来设置android:textSize。

从现在的外观来看,建议使用LinearLayout会更好。请尝试以下内容。 :)

<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/btnCurrent"
    android:fillViewport="true"
>
<LinearLayout
    android:id="@+id/childOfScrollView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center_vertical"
    android:layout_gravity="top"
    >
    <com.example.touch.TouchImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:layout_marginTop="10dp"
        android:contentDescription="none"
        android:background="#000000"
        android:src="@drawable/ic_launcher" />
   </LinearLayout>

</ScrollView>

没有起作用,而且我把marginTop属性全部删除了,它看起来仍然一样。 - SoluableNonagon
我在这里看到可能的原因。在布局绘制完成后,你正在动态设置位图。尝试动态构建滚动视图,我没有时间测试它,但希望能为你指明正确的方向。祝好运! - Phillip C
事实证明,这是模拟器的一个问题,在实际设备上,显示是正确的。 - SoluableNonagon

1

1,顶部区域是操作栏,您可以使用NoActionBar主题或调用getActionBar().hide();来隐藏它。

更新

2,您可以使用LinearLayout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:id="@+id/btn_download"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:text="button1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:text="button2" />
</LinearLayout>

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="10sp"
        android:contentDescription="none"
        android:background="#000000"
         />
</ScrollView>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:text="button1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:text="button2" />
</LinearLayout>
</LinearLayout>

活动:

public class TestActivity extends Activity implements View.OnClickListener {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test);
        mDownloadButton = (Button) findViewById(R.id.btn_download);
        mDownloadButton.setOnClickListener(this);
        mImageView = (ImageView) findViewById(R.id.image);
    }

    private Button mDownloadButton;
    private ImageView mImageView;

    private final String ADDRESS =
        "http://images4.fanpop.com/image/photos/14700000/Beautifull-cat-cats-14749885-500-375.jpg";
    private static Bitmap getImageBitmap(String url) {
        Bitmap bm = null;
        try {
            URL aURL = new URL(url);
            URLConnection conn = aURL.openConnection();
            conn.connect();
            InputStream is = conn.getInputStream();
            BufferedInputStream bis = new BufferedInputStream(is);
            bm = BitmapFactory.decodeStream(bis);
            bis.close();
            is.close();
        } catch (IOException e) {
            Log.e("Problem", "Error getting bitmap", e);
        }
        return bm;
    }

    @Override
    public void onClick(View view) {
        new FetchBitmapTask().execute(ADDRESS);
    }

    private class FetchBitmapTask extends AsyncTask<String, Void, Bitmap> {
        @Override
        protected void onPostExecute(final Bitmap bitmap) {
           runOnUiThread(new Runnable() {
               @Override
               public void run() {
                   mImageView.setImageBitmap(bitmap);
               }
           });
        }

        @Override
        protected Bitmap doInBackground(String... strings) {
            return getImageBitmap(strings[0]);
        }
    }
}

谢谢您提供有关我尝试实现的布局的额外信息,但我仍然在顶部得到了大量空间。(请参见上面的更新) - SoluableNonagon
对于TouchImageView,请尝试使用android:layout_width="match_parent" android:layout_height="match_parent" - zyb758
虽然有所改变,但问题仍然存在。 - SoluableNonagon
TouchImageView的背景是黑色的,scrollview的背景应该是白色的,所以我认为问题应该出在你的TouchImageView代码上。请使用ImageView进行测试。 - zyb758
我将它改成了普通的ImageView,但它看起来仍然一样。 - SoluableNonagon
事实证明,这是模拟器的一个问题,在实际设备上,显示是正确的。 - SoluableNonagon

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接