`

让View只显示下边框

阅读更多
下面的代码是实现一个带边框的xml,很常见
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 
	<gradient
		android:startColor="#FFFFFFFF"
		android:centerColor="#FFFFFFFF"
		android:endColor="#FFFFFFFF"
		android:angle="90" />
     -->
	<solid android:color="@android:color/transparent" />
	<stroke android:width="1dp" android:color="#E4E4E4" /> 
	<corners android:radius="0dp" />
</shape>


但如果只要显示下边框呢?这里需要一点技巧:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-1dp" android:right="-1dp" android:left="-1dp">
      <shape>
            <solid android:color="@android:color/transparent" />
            <stroke android:width="1dp" android:color="#666666" />
      </shape>
    </item>
</layer-list>


搞定!

类似的还可以实现边框阴影效果:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Bottom 2dp Shadow -->
    <item>
        <shape  android:shape="rectangle">
            <solid android:color="#BBB" />
            <corners android:radius="5dp" />         
        </shape>
    </item>
    
    <!-- White Top color -->
    <item android:bottom="3px">
        <shape  android:shape="rectangle">
             <solid android:color="#FFF" />
             <corners android:radius="5dp" />
             <padding
                android:top="5dp"
                android:right="5dp"
                android:bottom="5dp"
                android:left="5dp"/>
        </shape>       
    </item>
</layer-list>


再来一个阴影效果:
<item>
    <layer-list>
        <item android:left="4dip" android:top="4.0dip">
            <shape>
                <solid android:color="#66000000"/>
                <corners android:radius="5.0dip"/>
            </shape>
        </item>
        <item android:bottom="4.0dip" android:right="4.0dip">
            <shape>
                <solid android:color="#669dd3"/>
                <corners android:radius="5.0dip"/>
            </shape>
        </item>
    </layer-list>
</item>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics