简体   繁体   中英

How to create this kind of layout for android

I have design of andorid layout I have no idea how to start the UI use what (grid, table layout or ). by this Please give me example. Here is the design!

在此处输入图片说明

One way to do this is with nested LinearLayouts:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="#dddddd" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:gravity="center" >

            <ImageButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="#ff4000" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:gravity="center" >

            <TextView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:textColor="#000000"
                android:text="text here text here text here text here text here text here text here text here text here"/>

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:orientation="vertical"
        android:background="#cccccc" >

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

            <ImageButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:layout_margin="5dp"
                android:background="#ff8000" />

            <ImageButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="3"
                android:layout_margin="5dp"
                android:background="#ffbf00" />

        </LinearLayout>

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

            <ImageButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:layout_margin="5dp"
                android:background="#ff4000" />

            <ImageButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:layout_margin="5dp"
                android:background="#facc2e" />

        </LinearLayout>

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

            <ImageButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:layout_margin="5dp"
                android:background="#ffbf00" />

            <ImageButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:layout_margin="5dp"
                android:background="#ff8000" />

            <ImageButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:layout_margin="5dp"
                android:background="#ffbf00" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

我希望本教程可以对您有所帮助: http : //www.chess-ix.com/blog/the-use-of-layout_weight-with-android-layouts/ ,您可以只使用LinearLayout进行水平和垂直操作您的用户界面

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM