Android Layout Design for normal screen sizes

房东的猫 提交于 2019-12-12 01:54:19

问题


I am a hobbiest app developer and I feel I have a good grasp on android basics but the main thing that I struggle at is app design. I understand how to develop for different screen sizes and densities. But the main thing I struggle at is each of the normal and other sizes cover such a range of sizes within their respective categories. I have been searching and searching and not been bale to find a solution.

The main issue I am having is when designing using eclipse, i make a design using nexus one at the design looks perfect for what I want when I swap to a smaller screen like 3.2 HVGA or even the nexus galaxy which are all normal sized images, the location of my images have moved. So what looked perfect for the nexus one looks awful on some other normal screen sizes.

What can be done to ensure if an image is directly next to another that it stays that way on a different screens. I will give an example of the current design I am working on and I hope somebody can explain what im doing wrong/how i can improve.

Nexus One Design:

3.2 HVGA:

  the xml generated:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    android:orientation="vertical" >

    <Button
        android:id="@+id/Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/i1"
        android:text="Button" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/i2" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/Button1"
        android:layout_alignTop="@+id/Button1"
        android:layout_marginLeft="106dp"
        android:layout_marginTop="160dp"
        android:background="@drawable/i3" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button2"
        android:layout_alignBottom="@+id/button2"
        android:layout_alignRight="@+id/Button1"
        android:layout_marginRight="112dp"
        android:background="@drawable/i4" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button3"
        android:layout_alignLeft="@+id/button3"
        android:background="@drawable/i5" />

</RelativeLayout>

回答1:


Try adding another layout for side buttons to group them together, and then center that layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/RelativeLayout1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:columnCount="4"
                android:orientation="vertical"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true">

    <Button
        android:id="@+id/Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/i1"
        android:text="Button" />

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:id="@+id/RelativeLayout2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="false"
            android:layout_alignParentTop="true"
            android:background="@drawable/i2"
            android:layout_alignParentLeft="true"/>

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/i3"
            android:layout_below="@+id/button1"
            android:layout_alignParentLeft="true"/>

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/i4"
            android:layout_below="@+id/button4"
            android:layout_toRightOf="@+id/button2"/>

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/i5"
            android:layout_toRightOf="@+id/button2"
            android:layout_alignParentTop="true"/>
    </RelativeLayout>
</RelativeLayout>



回答2:


You need to create different images for each of the screen resolutions and put them into the respective drawable folder drawable--hdpi, drawable-mdpi, drawable-xhdpi, etc. Also be sure that you are using dp in your xml file, which it appears you are. Just be sure you always do so.

Designing for the different screens can be tricky because you have to essentially create the same image 4 or 5 times.

Also, make sure you are testing on actual handsets, because the emulator doesn't always give you an accurate layout.



来源:https://stackoverflow.com/questions/27258043/android-layout-design-for-normal-screen-sizes

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!