如何正确构建布局?

时间:2017-12-08 16:50:31

标签: android xml android-layout

我对Android编程很新,我可以通过StackOverflow找出很多问题。但是有一件事我一直在努力:布局。 我建议使用DP,但看起来它不是最终的解决方案。

请参阅下文,我的XML代码及其what it looks like on my Nexus 5X

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.damien.dartscorer.MainActivity"
android:clipToPadding="false">




<View
    android:layout_width="match_parent"
    android:layout_height="350dp"
    android:background="#b71c1c"/>
<ImageView
        android:id="@+id/mask"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="24dp"
        android:scaleType="fitCenter"
        android:src="@drawable/targe_mask"
        android:visibility="invisible"
        android:layout_marginBottom="280dp"/>

    <ImageView
        android:id="@+id/target"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="24dp"
        android:scaleType="fitCenter"
        android:src="@drawable/target"
        android:visibility="visible"
        android:layout_marginBottom="280dp"/>


    <TextView
        android:id="@+id/pointTextView"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="center_vertical|center_horizontal"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="15dp"
        android:layout_marginVertical="90dp"
        android:background="@drawable/pressed_button"
        android:fontFamily="sans-serif-medium"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:visibility="invisible" />



    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="315dp">

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

        </Space>

        <Button
            android:id="@+id/button_x2"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/pressed_button"
            android:onClick="timesTwoClick"
            android:text="x2"
            android:textStyle="bold"
            android:textSize="18dp"
            android:textColor="#ffebee" />

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

        </Space>

        <Button
            android:id="@+id/btn_25"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/halfb"
            android:elevation="9dp"/>

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

        </Space>

        <Button
            android:id="@+id/btn_missed"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/zero" />

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

        </Space>

        <Button
            android:id="@+id/btn_50"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/bull" />


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

        </Space>

        <Button
            android:id="@+id/button_x3"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/pressed_button"
            android:onClick="timesThreeClick"
            android:text="x3"
            android:textStyle="bold"
            android:textSize="18dp"
            android:textColor="#ffebee" />

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

        </Space>

    </LinearLayout>



<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="230dp"
    android:layout_gravity="bottom">

    <TextView
        android:id="@+id/playerName1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="60dp"
        android:layout_marginTop="32dp"
        android:text="Player"
        android:visibility="visible"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/playerName2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:layout_marginEnd="60dp"
        android:layout_marginTop="32dp"
        android:text="Player"
        android:visibility="visible"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/playerName3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/scoreC"
        android:layout_marginStart="60dp"
        android:text="Player"
        android:visibility="visible"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/playerName4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/scoreD"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="60dp"
        android:text="Player"
        android:visibility="visible"
        android:textSize="24sp" />


    <TextView
        android:id="@+id/scoreA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/playerName1"
        android:layout_marginStart="60dp"
        android:visibility="visible"
        android:textSize="18sp"
        android:text="Pts" />

    <TextView
        android:id="@+id/scoreB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_below="@+id/playerName2"
        android:layout_marginBottom="24dp"
        android:layout_marginEnd="60dp"
        android:visibility="visible"
        android:textSize="18sp"
        android:text="Pts" />


    <TextView
        android:id="@+id/scoreC"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="32dp"
        android:layout_marginStart="60dp"
        android:visibility="visible"
        android:textSize="18sp"
        android:text="Pts" />

    <TextView
        android:id="@+id/scoreD"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_marginBottom="32dp"
        android:layout_marginEnd="60dp"
        android:textSize="18sp"
        android:visibility="visible"
        android:text="Pts" />
</RelativeLayout>

<RelativeLayout
    android:id="@+id/winLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="gone">

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#DD000000">

    </View>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="32dp"
        android:textColor="#FFEAED"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="150dp"
        android:id="@+id/winner" />

    <Button
        android:id="@+id/btn_replay"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_below="@+id/winner"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="140dp"
        android:background="@drawable/replay" />
    <Button
        android:id="@+id/btn_home"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_below="@+id/btn_replay"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:background="@drawable/home" />


</RelativeLayout>

</FrameLayout>

正如你在second image看到的那样,Pixel上的布局很糟糕,但屏幕没有太大差异!那么我怎么能建立一个最小的一致性呢?

另外,我无法为我的按钮添加高程,我真的不知道为什么。

感谢您的帮助, 达明

1 个答案:

答案 0 :(得分:0)

这不是Android XML布局的方式,此代码不遵循UI开发的指导原则,如父元素和子元素。请先检查一些XML布局代码,然后尝试使用它进行开发。

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false">
    <LinearLayout
        android:id="@+id/ll_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <View
            android:layout_width="match_parent"
            android:layout_height="350dp"
            android:background="#b71c1c"/>
    </LinearLayout>
    <TextView
        android:id="@+id/tv_1"
        android:layout_below="@+id/ll_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:text="Some data"/>
    <TextView
        android:layout_below="@+id/ll_top"
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:text="some other data"/>
</RelativeLayout>

这是一个示例代码,只需尝试这个并通过更改参数

来解决它