Android 开发中一种蛋疼的UI布局

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

解决思路:这种情况和一般的布局是有些不同,想要实现这种方式的布局,确实找了不少的资料,但是效果都不是很好,过程是曲折的,但是问题需要解决,这种方式在在网上不怎么看到,通过搜索圆角、边框、渐变、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


  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值