4个图标的动态布局,必须在android中保持合理的距离

时间:2013-05-02 07:06:18

标签: java android android-layout

我的应用程序底栏有这个布局:

enter image description here

但我想这样做:

enter image description here

实际上我可以,但我想要,这个布局适用于每个屏幕尺寸。实际上,左侧图标向左侧移动,右侧图标向右侧移动,两个中心图标位于中央,但所有这些图标都保持相距很远的距离。我不使用绝对值,我希望这个图标动态地改变他与其他人的距离。我的问题是如何布局它们来实现我的目标。

这是本节的xml:

 <LinearLayout
            android:id="@id/bar_l2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:gravity="center_horizontal" >

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/bottom_bar" >

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentRight="true"
                    android:gravity="center_horizontal"
                    android:orientation="horizontal" >

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

                        <ImageView
                            android:id="@+id/imageView1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/bar1" />

                    </LinearLayout>

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

                        <ImageView
                            android:id="@+id/imageView2"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/bar2" />

                    </LinearLayout>

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

                        <ImageView
                            android:id="@+id/imageView3"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/bar3" />

                    </LinearLayout>

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

                        <ImageView
                            android:id="@+id/imageView4"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_horizontal"
                            android:src="@drawable/bar4" />

                    </LinearLayout>

                </LinearLayout>

            </RelativeLayout>

        </LinearLayout>

2 个答案:

答案 0 :(得分:2)

这是你需要做的:

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal" xmlns:android="http://schemas.android.com/apk/res/android">

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bottom_bar"
    android:gravity="center_horizontal"
    android:orientation="horizontal"
    android:padding="30dp" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/bar1" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/bar2" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/bar3" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/bar4" />
</LinearLayout>

  • 我在这里做的是将父LinearLayout的背景设置为背景图像,将其方向设置为水平。最重要的是它的宽度为 fill_parent 。 因此它将覆盖父级的整个宽度.Padding将帮助您在图像视图之间添加所需的间距。

  • 要使其适合所有屏幕尺寸而不是填充,请使用 android:weight 属性。

希望它有所帮助!

答案 1 :(得分:2)

这很好用

<LinearLayout
            android:id="@id/bar_l2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:gravity="center_horizontal" >

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/bottom_bar" >

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentRight="true"
                    android:gravity="center_horizontal"
                    android:orientation="horizontal" >

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_gravity="center"
                        android:layout_height="wrap_content" >

                        <ImageView
                            android:id="@+id/imageView1"
                           android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:src="@drawable/bar1" />

                    </LinearLayout>

                    <LinearLayout
                              android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_gravity="center"
                        android:layout_height="wrap_content" >

                        <ImageView
                            android:id="@+id/imageView2"
                           android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:src="@drawable/bar2" />

                    </LinearLayout>

                    <LinearLayout
                              android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_gravity="center"
                        android:layout_height="wrap_content" >

                        <ImageView
                            android:id="@+id/imageView3"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:src="@drawable/bar3" />

                    </LinearLayout>

                    <LinearLayout
                             android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_gravity="center"
                        android:layout_height="match_parent" >

                        <ImageView
                            android:id="@+id/imageView4"
                           android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_horizontal"
                            android:src="@drawable/bar4" />

                    </LinearLayout>

                </LinearLayout>

            </RelativeLayout>

        </LinearLayout>