如何处理自定义布局

Question

我正在尝试创建一个自定义 UI 元素（图片中的蓝色），它将放置在常规 RelativeLayout 中（它将被使用 2 或 3 次）。视图必须包含 TextView、ImageButtons 和类似的小部件。我已经阅读了有关自定义 Views、ViewGroups 的内容，但我不知道该使用哪一个。我应该延长 RelativeLayout 吗？任何帮助（尤其是教程链接）都会有所帮助。谢谢

我正在尝试做的事情的图片；

Answer 1

你找不到关于 UI 的好教程，所以我试着为你做仅使用 xml ！我只是在编辑填充和 layout_weight ..和 layout_gravity .. 这些是您需要的重要内容 Phone 屏幕 (4")

平板电脑屏幕 (10.1")

布局如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="20dp"
    android:paddingTop="20dp"
    android:paddingRight="20dp">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:background="@drawable/bbbb"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="textView"
                android:id="@+id/textView30"
                android:layout_gravity="center"
                android:background="@drawable/btn_back"
                android:textColor="#ffffffff"
                android:paddingRight="25dp"
                android:paddingLeft="25dp" />
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginTop="20dp">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:id="@+id/button5"
                android:layout_weight="1"
                android:background="@drawable/btn_back"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffffff" />

            <Button
                android:background="@drawable/btn_back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:id="@+id/button6"
                android:layout_weight="1"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffffff" />

            <Button
                android:background="@drawable/btn_back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:id="@+id/button7"
                android:layout_weight="1"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffffff" />
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:layout_margin="10dp"
                android:background="@drawable/btn_back">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:text="textView"
                    android:id="@+id/textView"
                    android:layout_centerHorizontal="true"
                    android:textColor="#ffffffff" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:text="Text"
                    android:id="@+id/textView28"
                    android:layout_below="@+id/textView"
                    android:background="#ffffffff"
                    android:layout_marginBottom="5dp"
                    android:padding="10dp"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:gravity="center" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:layout_margin="10dp"
                android:background="@drawable/btn_back">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:text="textView"
                    android:id="@+id/textView27"
                    android:layout_centerHorizontal="true"
                    android:textColor="#ffffffff" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:text="Text"
                    android:id="@+id/textView29"
                    android:layout_below="@+id/textView27"
                    android:background="#ffffffff"
                    android:layout_marginBottom="5dp"
                    android:padding="10dp"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:gravity="center" />
            </RelativeLayout>
        </LinearLayout>

    </LinearLayout>
</RelativeLayout>

这里是 drawablr/btn_back.xml

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#0067EB"/>
            <stroke
                android:width="1dp"
                android:color="#00000000" />
            <corners
                android:radius="8dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <solid
                android:color="#0061C2"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#00000000" />
            <corners
                android:radius="8dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

这里是 drawable/bbbb.xml

      <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="14dp"
        />
    <gradient
        android:angle="45"
        android:startColor="#FFF"
        android:endColor="#eee"
        android:type="linear"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="270dp"
        android:height="60dp"
        />
    <stroke
        android:width="3dp"
        android:color="#307FE6"
        />
</shape>

如何处理自定义布局

How to approach custom Layout

android

android-layout

android-view