Android 开发中一种蛋疼的UI布局-CSDN博客

需求：如下图的一种布局，带有圆角，带有边框，而且颜色的深度呈梯度变化，效果看上去还不错，一般商业软件需要的布局。

解决思路：这种情况和一般的布局是有些不同，想要实现这种方式的布局，确实找了不少的资料，但是效果都不是很好，过程是曲折的，但是问题需要解决，这种方式在在网上不怎么看到，通过搜索圆角、边框、渐变、selector、shape等一些关键词，东拼西凑最后把问题给解决了，达到了产品部门所要求的效果。

这种布局使用了很多新鲜的东西，至今没有看的太懂，比如：selector、shape、gradient、corners这些新词都没怎么接触过，可能是谷歌为一些布局特效提供的吧。不懂没关系，现在可以直接拿过来就能使用了。最后我打包上传上去。上传的我是从项目中截取了部分代码，改了一部分名称，还有部分有些麻烦就没有改，呵呵不知道有没有泄露公司机密。顺便说一下，开发过程中代码的写法要尽量的规范，比如颜色值放在colorlist.xml里，文字放在了strings.xml里，长度放在了dimens.xml，开发中命名的规范性，这里的命名不是很规范了，因为一旦牵涉的页面比较多的时候，不小心就有重复的页面布局，懒惰的我们就会复制粘贴，稍有疏忽就会存在同名的问题，尽管谷歌对这方面也做了很多努力，可以在不同的文件里使用相同的名字，但是这个不是万全之策，而且一旦是同名引起的问题，错误是不太好找的。一定要在复制粘贴的时候注意好命名问题，当然如果你水平够厉害，可以做好代码重用（复制粘贴不算重用吧）

代码中的背景有四种形式：top，bottom,center，round。分别贴在了不同位置的TextView当做背景，周围的框能够伸缩的，这个Demo里别的比较特殊的东西没有注意到，可以自己下载了看一下，用途就是可以实现点击每一个部分都能够实现一个跳转，解决一些实际中需要的问题。

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:id="@+id/llBottom"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/more_body_margin"
        android:layout_marginRight="@dimen/more_body_margin"
        android:layout_marginTop="10dp"
        android:background="@drawable/venue_bg_selector_round"
        android:orientation="vertical"
        android:padding="0.5dp" >

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="46dp"
            android:background="@drawable/venue_bg_selector_top"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:drawableLeft="@drawable/icon"
                android:drawablePadding="9dp"
                android:gravity="center"
                android:paddingLeft="@dimen/more_left_right_margin"
                android:text="测试"
                android:textColor="@color/body_textcolor"
                android:textSize="@dimen/more_body_textsize" />
        </RelativeLayout>

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:src="@color/firstcolor" />

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:src="@color/secondcolor" />

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="46dp"
            android:background="@drawable/venue_bg_selector_center"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:drawableLeft="@drawable/icon"
                android:drawablePadding="9dp"
                android:gravity="center"
                android:paddingLeft="@dimen/more_left_right_margin"
                android:text="测试"
                android:textColor="@color/body_textcolor"
                android:textSize="@dimen/more_body_textsize" />
        </RelativeLayout>

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:src="@color/firstcolor" />

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:src="@color/secondcolor" />

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="46dp"
            android:background="@drawable/venue_bg_selector_center"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:drawableLeft="@drawable/icon"
                android:drawablePadding="9dp"
                android:gravity="center"
                android:paddingLeft="@dimen/more_left_right_margin"
                android:text="测试"
                android:textColor="@color/body_textcolor"
                android:textSize="@dimen/more_body_textsize" />
        </RelativeLayout>

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:src="@color/firstcolor" />

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:src="@color/secondcolor" />

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="46dp"
            android:background="@drawable/venue_bg_selector_bottom"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:drawableLeft="@drawable/icon"
                android:drawablePadding="9dp"
                android:gravity="center"
                android:paddingLeft="@dimen/more_left_right_margin"
                android:text="测试"
                android:textColor="@color/body_textcolor"
                android:textSize="@dimen/more_body_textsize" />
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

Demo下载http://download.csdn.net/detail/walker02/4534951