Android的 - 滚动型和PercentRelativeLayout [英] Android - ScrollView and PercentRelativeLayout

问题描述

我与android.support.percent.PercentRelativeLayout与滚动型相结合的问题。下面的XML文件

 ＆LT;滚动型的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
的xmlns：程序=htt​​p://schemas.android.com/apk/res-auto
机器人：ID =@ + ID / ScrollView01
机器人：layout_width =FILL_PARENT
机器人：layout_height =FILL_PARENT
机器人：fillViewport =真
机器人：滚动条=无＆GT;＆LT; android.support.percent.PercentRelativeLayout
    的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    的xmlns：工具=htt​​p://schemas.android.com/tool​​s
    的xmlns：程序=htt​​p://schemas.android.com/apk/res-auto
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent
    机器人：paddingLeft =@扪/ activity_horizo​​ntal_margin
    机器人：paddingRight =@扪/ activity_horizo​​ntal_margin
    机器人：paddingTop =@扪/ activity_vertical_margin
    机器人：paddingBottom会=@扪/ activity_vertical_margin
    机器人：背景=@色/白
    应用：layout_behavior =@字符串/ appbar_scrolling_view_behavior
    ＆GT;
    ＆LT; ImageView的
        机器人：layout_height =match_parent
        机器人：layout_width =match_parent
        应用：layout_widthPercent =50％
        应用：layout_heightPercent =50％
        应用：layout_marginTopPercent =5％
        应用：layout_marginLeftPercent =5％
        机器人：SRC =@绘制/ O
        机器人：ID =@ + ID / imageView3/＆GT;
    ＆LT; ImageView的
        机器人：layout_height =match_parent
        机器人：layout_width =match_parent
        应用：layout_widthPercent =50％
        应用：layout_heightPercent =50％
        应用：layout_marginTopPercent =30％
        应用：layout_marginLeftPercent =5％
        机器人：SRC =@绘制/ O
        机器人：layout_below =@ + ID / imageView3
        机器人：layout_alignStart =@ + ID / imageView3
        机器人：layout_marginTop =151dp/＆GT;
＆LT; /android.support.percent.PercentRelativeLayout>
 

打印此

使用RelativeLayout的正常工作。
有谁知道哪里出了问题？谢谢！

编辑：如果我设置滚动型高度为1000dp它也能正常工作，但我想的高度是马赫的元素

解决方案

  

我想学习如何使用宽度高度和保证金比例选项，这样我就可以在HTML中使用它们像，CSS。我想设置余量％，而不是在同一个DP的宽度和高度。

相信你可以做你的布局中的Andr​​oid以这种方式将会让你陷入困境。如果您在学习Android的UI布局，第一步是关于你知道有关HTML布局的一切给忘了。 HTML主要是关于文档。良好的移动设备用户界面不应该看起来像一个文件。

让我们一个很简单的例子：一个按钮。假设你想提出一个按钮布局。它应该多大？那么，它应该足以显示该按钮的全部文本大。它应该也不会占用大量的过度空间。

当您设计的布局，你要记住，你不知道用户的屏幕有多大将是。所以，如果你说：我想让我的按钮宽屏幕的20％，在某些设备可能没有足够的空间来显示按钮的全部文本。在其他屏幕，你可能有一个按钮，一个尴尬的空间量，其中文字占用很小的实际的按钮。

至于利润率，谷歌的用户界面指南建议在16DP单位的网格间距。于是就一个电话，一个典型的利润率将是16DP。你在哪里有更大的空间，片剂，48dp保证金将是更合适的。以百分比指定利润率将在大布局创建小包装的设备布局和浪费的空间。

您要明白三个主要的大小概念：

1. 在密度独立像素（DP）绝对测量。这通常是用于边距和填充。




2. match_parent 。我想我的组件占用父组件的整个宽度/高度。




3. WRAP_CONTENT 。我希望我的组件只占用宽度/高度就需要适当地显示，并没有更多的。通常，这将仅用于宽度或高度，但不能同时使用。大多数小工具上浆算法需要至少一侧是为了确定它在另一个尺寸多少空间需要一个已知大小

您可以做的只是用这三种浸润剂UI布局难以置信的。什么是一个按钮的最佳尺寸？在手机上，在纵向模式下，的android：宽=match_parent＆安培; 机器人：身高=WRAP_CONTENT。拿手机的整个宽度，但限制高度刚好足以显示所有按钮文本。完美的。

当然，最终你会希望有两个组成部分并排侧的布局。现在，你该怎么办？这是使用的LinearLayout ，并使用 Android的一个好去处：layout_weight 属性的说：我想这两个组件为具有相同的宽度（即50屏幕宽度的百分比）。

然后你最终可能会尝试像平板电脑较大的设备做一个更复杂的布局。这是 PercentRelativeLayout 可能是最合适的。 PercentageRelativeLayout 是为了处理一些棘手的布局的一个专门的容器中。

如果你想有两个垂直图像和较小的屏幕上滚动的布局，这是我会用什么：

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT;滚动型的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent＆GT;    ＆LT;的LinearLayout
        机器人：layout_width =match_parent
        机器人：layout_height =WRAP_CONTENT
        机器人：layout_marginLeft =16DP
        机器人：layout_marginRight =16DP
        机器人：方向=垂直＆GT;        ＆LT; ImageView的
            机器人：ID =@ + ID / ImageView的
            机器人：layout_width =match_parent
            机器人：layout_height =WRAP_CONTENT
            机器人：layout_marginBottom =16DP
            机器人：SRC =@绘制/ image1的
            机器人：adjustViewBounds =真/＆GT;        ＆LT; ImageView的
            机器人：ID =@ + ID / imageView2
            机器人：layout_width =match_parent
            机器人：layout_height =WRAP_CONTENT
            机器人：SRC =@绘制/ IMAGE2
            机器人：adjustViewBounds =真/＆GT;
    ＆LT; / LinearLayout中＆GT;
＆LT; /滚动型＆GT;
 

在一个滚动容器的两个图像是一样宽设备

当谈到的ImageView ，还有一招了解上浆。 的android：adjustViewBounds =真正的意思是：因为我的身高是WRAP_CONTENT（即灵活），使我的高度，它保留了与宽度长宽比

我建议你去通过关于UI布局Android的教程，并查看示例项目，以了解布局是如何在Android中完成的。

老兄，我明白了。当我第一次听说Android的布局，我很迷惑，看有没有一个标准的百分比型浆纱pretty。但正如我在做Android的越来越多的布局，我开始明白部件尺寸是如何工作的，并得到了它更好。然后，我开始写的实施了自己的上浆算法的自定义组件，用内置的Andr​​oid的功能。

就坚持下来，它都将是有意义，你已经与布局工作了一段时间后。

I have a problem with combining the android.support.percent.PercentRelativeLayout with ScrollView. The following xml file

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollbars="none">

<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:background="@color/white"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    >
    <ImageView
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        app:layout_marginTopPercent="5%"
        app:layout_marginLeftPercent="5%"
        android:src="@drawable/o"
        android:id="@+id/imageView3" />
    <ImageView
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        app:layout_marginTopPercent="30%"
        app:layout_marginLeftPercent="5%"
        android:src="@drawable/o"
        android:layout_below="@+id/imageView3"
        android:layout_alignStart="@+id/imageView3"
        android:layout_marginTop="151dp" />
</android.support.percent.PercentRelativeLayout>

prints this

With RelativeLayout it works fine. Does anyone knows where is the problem? Thanks!

EDIT: If i set ScrollView height into 1000dp it also works fine but i want the height to be as mach as the elements

解决方案

I want to learn how to use the percentage options for width height and margin so i can use them like in html, css. I want to set margin in % and not in dp same for width and height.

Believing that you can do all your layouts in Android in this fashion is going to get you into trouble. If you are learning UI layout in Android, the first step is to forget about everything you know regarding HTML layout. HTML is mainly about documents. A good mobile device UI shouldn't look like a document.

Let's take a really simple example: a button. Say you want to put a button in your layout. How big should it be? Well, it should be big enough to display the entire text of the button. It should also not take a lot of excessive space.

When you are designing your layouts, you have to keep in mind that you don't know how big the user's screen is going to be. So if you say, "I want to make my button width 20% of the screen", on some devices you may not have enough room to display the entire text of the button. On other screens, you may have a button with an embarrassing amount of space, where the text takes up very little of the actual button.

And as for margins, Google UI guidelines recommend grid spacing in 16dp units. So on a phone, a typical margin is going to be 16dp. On a tablet where you have more room, a 48dp margin is going to be more appropriate. Specifying margins with percentages will create packed layouts on small devices and wasted space on large layouts.

You have to understand three main sizing concepts:

1. Absolute measurement in density-independent pixels (dp). This is generally used for margins and padding.

2. match_parent. I want my component to take up the entire width/height of the parent component.

3. wrap_content. I want my component to take up only the width/height it needs to display appropriately, and no more. Generally this will only be used for width or height, but not both. Most widget sizing algorithms require at least one side to be a "known" size in order to determine how much space it needs in the other dimension.

You can do an incredible amount of UI layouts just using these three sizings. What's the best size for a button? On a phone, in portrait mode, android:width="match_parent" & android:height="wrap_content". Take the entire width of the phone, but restrict the height to just enough to show all the button text. Perfect.

Of course, eventually you will want to have a layout with two components side-by-side. Now what do you do? This is a good place to use a LinearLayout and use the android:layout_weight attribute to say: I want these two components to have the same width (i.e. 50% of the screen width).

And then you may end up trying to do a more complex layout for a larger device like a tablet. This is where PercentRelativeLayout might be most appropriate. PercentageRelativeLayout is a specialized container meant to handle some of the trickier layouts.

If you want a layout that has two vertical images and scrolls for smaller screens, this is what I would use:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:src="@drawable/image1"
            android:adjustViewBounds="true" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/image2"
            android:adjustViewBounds="true" />
    </LinearLayout>
</ScrollView>

Two images in a scrolling container that are as wide as the device.

When it comes to ImageView, there is a trick to know about sizing. android:adjustViewBounds="true" means: since my height is "wrap_content" (i.e. flexible), make my height so that it retains the aspect ratio with the width.

I recommend that you go through the Android tutorials about UI layouts, and look at the sample projects to learn about how layouts are done in Android.

Dude, I get it. When I first learned Android layout, I was pretty mystified to see there wasn't a standard percentage-type sizing. But as I did more and more layouts in Android, I started to understand how component sizing worked and got better at it. Then I started to write custom components that implemented their own sizing algorithms, using the capabilities built into Android.

Just stick with it, it will all make sense after you've worked with layouts for awhile.

这篇关于Android的 - 滚动型和PercentRelativeLayout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！