常用布局

左中右布局

左中右布局
    <!-- 左中右布局(ToolBar),左右内容可设置 padding。缺点:单行。 -->

    <!-- 1、父布局,使用 RelativeLayout -->
    <!-- 2、左内容,默认居左 -->
    <!-- 3、中间内容,使用 android:layout_centerInParent="true" 居中 -->
    <!-- 4、右内容,使用 android:layout_alignParentRight="true" 居右 -->
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="40.0dp"
        android:background="#ff6600"
        android:gravity="top">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="详细资讯"
            android:textColor="#ffffffff"
            android:textSize="20.0sp"/>

        <ImageButton
            android:layout_width="50.0dp"
            android:layout_height="fill_parent"
            android:background="@null"
            android:contentDescription=""
            android:gravity="center"
            android:scaleType="centerInside"
            android:src="@drawable/ic_core_arrow_l"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_alignParentRight="true"
            android:background="@null"
            android:gravity="center"
            android:text="收藏"
            android:textColor="#ffffffff"
            android:textSize="14.0sp"/>
    </RelativeLayout>

左右布局

左右布局
    <!-- 左右布局(更多 item ),优点:左右可随意设置图标等额外内容。 -->
    <!-- 1、父布局,使用 LinearLayout -->
    <!-- 2、左内容,使用 android:layout_width="0.0dp" 占满屏幕(左可以设置图标等额外内容)。 -->
    <!-- 3、右内容,占据左满屏后的空间 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:layout_width="3.0dp"
            android:layout_height="16sp"
            android:layout_marginLeft="5.0dp"
            android:layout_marginRight="5.0dp"
            android:background="#ff6501"
            android:gravity="start|center_vertical"
            android:text=""/>

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="0.0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="left"
            android:text="最新资讯"
            android:textColor="#282828"
            android:textSize="16.0sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/tv_more"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:text="更多"
            android:textColor="#969696"
            android:textSize="13.0sp"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_core_arrow_small"
            android:contentDescription="@null"/>
    </LinearLayout>

左右布局

左右布局
    <!-- 左右布局(更多 item ),缺点:右内容过长会覆盖左内容上。 -->
    <!-- 1、父布局,使用 RelativeLayout -->
    <!-- 2、左内容,默认左。 -->
    <!-- 3、右内容,使用 android:layout_alignParentRight="true" 居右。 -->
    <!-- 4、备注:左右内容可以使用 android:layout_toRightOf="@id/tv_more" 设置额外图标等内容 -->


    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:text="最新资讯"
            android:textColor="#282828"
            android:textSize="16.0sp"
            android:textStyle="bold"/>


        <TextView
            android:id="@+id/tv_more"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerInParent="true"
            android:text="更多"
            android:textColor="#969696"
            android:textSize="13.0sp"/>

    </RelativeLayout>

左右平分+间隔线

左右平分+间隔线
    <!-- 上间隔线 -->
    <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="1.0px"
                android:background="#ddd"
                android:orientation="horizontal">
    </LinearLayout>

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

    <!-- 左右平分 -->
    <LinearLayout
                    android:id="@+id/ll_cancel"
                    android:layout_width="0.0dp"
                    android:layout_height="40.0dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:layout_toRightOf="@+id/iv_icon"
                        android:text="稍後再說"
                        android:textColor="#999999"
                        android:textSize="14.0sp"/>
    </LinearLayout>

    <!-- 左右间隔线 -->
    <LinearLayout
                    android:layout_width="1.0px"
                    android:layout_height="fill_parent"
                    android:background="#ddd">
    </LinearLayout>

    <LinearLayout
                    android:id="@+id/ll_open"
                    android:layout_width="0.0dp"
                    android:layout_height="40.0dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:layout_toRightOf="@+id/iv_icon"
                        android:text="去開啟"
                        android:textColor="#fe6200"
                        android:textSize="14.0sp"/>
                </LinearLayout>
    </LinearLayout>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 UI布局 1.1日志的使用 【 verbose:详细信息(黑色) debug:调试信息(蓝色) info:...
    征程_Journey阅读 732评论 0 0
  • 写在前面 一直想写一写布局,趁今天有空好好总结一下,留着以后看。 综述 Android的布局有好多好多种,官方的、...
    林里icer阅读 32,277评论 1 25
  • ASDK布局使用Flexbox方式布局。 Flexbox 验证:http://nguyenhuy.github.i...
    黄x黄阅读 1,146评论 0 2
  • 1、水平居中 方法一:margin:0 auto; 是最常见的水平居中解决方案,但有其局限性:块级元素,已知宽度,...
    qsister阅读 1,136评论 0 1
  • flex布局是什么 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。F...
    耳_总阅读 661评论 0 1