`

shape使用 （设置虚线、圆角、渐变）

 
阅读更多

先上效果图：

对于列表的一个item的布局activity_fragment_my_route_item.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="top"
        android:orientation="vertical" 
   	    android:layout_marginLeft="10dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="6dp"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="20dp">

			<include layout="@layout/shape_startoff_view"/>
            

            <TextView
                android:id="@+id/lx_start_text"
                android:layout_width="wrap_content"
                android:layout_height="20dp"
                android:text="起始地点"
                android:textColor="#000000"
                android:gravity="center_vertical|left"
                android:textSize="15sp" 
    			android:layout_marginLeft="10dp"/>

        </LinearLayout>

        <!-- 切的虚线图 -->
        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="22dp"
            android:layout_height="8dp"
            android:src="@drawable/lx_split" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="20dp" >

			<include layout="@layout/shape_destination_view"/>
           

            <TextView
                android:id="@+id/lx_stop_text"
                android:layout_width="wrap_content"
                android:layout_height="20dp"
                android:layout_gravity="center_vertical"
                android:text="达到地点"
                android:gravity="center_vertical|left"
                android:textColor="#000000"
                android:textSize="15sp" 
    			android:layout_marginLeft="10dp"/>

        </LinearLayout>

       <ImageView
             android:id="@+id/lx_time_part_split"
            android:layout_width="22dp"
            android:layout_height="8dp"
            android:src="@drawable/lx_split" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="20dp" 
            android:id="@+id/lx_time_part">

            <ImageView
                android:id="@+id/lx_time_image"
                android:layout_width="wrap_content"
                android:layout_height="20dp"
                android:scaleType="centerInside"
                android:src="@drawable/lx_time" />

            <TextView
                android:id="@+id/lx_time_text"
                android:layout_width="wrap_content"
                android:layout_height="20dp"
                android:text="出发时间"
                android:textColor="#000000"
                android:gravity="center_vertical|left"
                android:textSize="15sp" 
    			android:layout_marginLeft="10dp"/>

        </LinearLayout>

         <!-- <ImageView
            android:id="@+id/lx_dis_part_split"
            android:layout_width="22dp"
            android:layout_height="8dp"
            android:src="@drawable/lx_split" />
         
        <LinearLayout
            android:id="@+id/lx_dis_part"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="wrap_content"
                android:layout_height="15dp"
                android:src="@drawable/lx_dis" />

            <TextView
                android:id="@+id/lx_dis_text"
                android:layout_width="wrap_content"
                android:layout_height="15dp"
                android:text="距离"
                android:gravity="center_vertical|left"
                android:textColor="#000000"
                android:textSize="10dp" />

        </LinearLayout>
        
        -->
        
        
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="6dp"
            android:orientation="vertical" >
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:gravity="center_vertical"
        android:orientation="vertical"
        android:layout_marginRight="10dp" >

        <ImageView
            android:id="@+id/lx_r_btn"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:src="@drawable/ypc" />
    </LinearLayout>
</LinearLayout>

 

 

这里使用到一个切的虚线图（见附件图），而圆形图是自己做的：

shape_startoff_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:background="@drawable/shape_circle" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
		android:layout_centerInParent="true"
        android:text="@string/my_route_start_off"
        android:textStyle="bold" />

</RelativeLayout>

 

shape_destination_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:background="@drawable/shape_circle" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
		android:layout_centerInParent="true"
        android:text="@string/my_route_destination"
        android:textStyle="bold" />

</RelativeLayout>

 

shape_distance_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:background="@drawable/shape_circle" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
		android:layout_centerInParent="true"
        android:text="@string/my_route_distance"
        android:textStyle="bold" />

</RelativeLayout>

 

共用的圆圈背景：

shape_circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
            
    <!-- 填充颜色(shape背景) -->
    <solid android:color="#FFFFFF"></solid>
   
    <!-- 线的宽度，颜色灰色 -->
    <stroke android:width="1dp" android:color="@color/circle_bg"></stroke>        
   
    <!-- 矩形的圆角半径--> 
    <corners android:radius="10dp" />
    
    
    <!-- 圆角   
    <corners  
        android:radius="11dp"  
        android:topLeftRadius="11dp"  
        android:topRightRadius="11dp"  
        android:bottomLeftRadius="11dp"  
        android:bottomRightRadius="11dp"/>
    -->
            
</shape>

 

 

  • 大小: 187.7 KB
  • 大小: 2.8 KB
分享到：
| shape使用 （设置虚线、圆角、渐变）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Android设置虚线、圆角、渐变

    在Android开发中，为UI元素添加虚线、圆角和渐变效果是常见的需求，可以提升应用的视觉吸引力。下面将详细讲解如何实现这些效果。 ### 一、虚线（Dashed Line） 在Android中，我们可以使用`Shape Drawable`来创建...

    android shape的使用及渐变色、分割线、边框、半透明阴影

    Android Shape的使用及渐变色、分割线、边框、半透明阴影 Android Shape是一种在Android系统中使用的图形形状控件，可以用于创建各种形状的视图控件，例如矩形、椭圆、线条、圆环等。Shape控件可以使用xml文件来...

    android shape样式

    在Android开发中，Shape是XML资源文件中定义的一种图形元素，它可以用来创建各种形状，如矩形、椭圆、线和路径，同时支持自定义样式，包括圆角、虚线边框、部分圆角以及颜色的渐变效果。这篇内容将深入探讨Android ...

    Android中shape的使用

    Android 中的 shape 是一种定义控件显示属性的方式，通过使用 shape 可以实现控件的背景、边框、圆角、渐变等效果。今天，我们来详细讲解 shape 的使用规则和其在实际开发中的应用。 首先，shape 的基本结构是 `...

    android中shape的使用

    使用`&lt;stroke&gt;`元素可以设置边框，包括宽度（`android:width`）、颜色（`android:color`）以及虚线样式（`android:dashWidth`和`android:dashGap`）。通过`&lt;corners&gt;`元素，可以对矩形的角落进行圆角处理，设置`...

    Android控件美化之Shape的使用

    如果想要设置虚线边框，可以使用`android:dashWidth`和`android:dashGap`属性： ```xml android:width="2dp" android:color="#dcdcdc" android:dashWidth="5dp" android:dashGap="3dp"/&gt; ``` 这会创建一个带...

    Android-shape标签的使用

    下面我们将详细探讨Shape标签的使用方法以及如何通过它来提升Android应用的界面美观度。 首先，我们来看看Shape标签的基本结构： ```xml &lt;shape xmlns:android="http://schemas.android.com/apk/res/android"&gt; ...

    android shape

    Android 中的 Shape 是一个非常重要的概念，它用于定义控件的显示属性，如颜色、渐变、描边、圆角、间隔等。今天，我们将详细地介绍 Shape 的使用方法和相关知识点。 首先，看下面的代码： ```xml &lt;shape&gt; &lt;!-- ...

    drawable之shape的学习

    在实际应用中，`shape`不仅限于简单的背景，还可以与其他`Drawable`结合使用，如层叠(`layer-list`)、帧动画(`animation-list`)等，以实现更复杂的视觉效果。同时，`shape`的属性还可以通过代码动态修改，适应不同...

    shape 标签

    本教程将详细介绍如何在Android中简单使用Shape，并通过一个名为`ShapeDemo`的示例进行演示。 首先，Shape是通过在`res/drawable`目录下创建XML文件来定义的。一个基本的Shape XML文件通常包括以下元素： 1. `...

    Android下基于XML的Graphics_shape使用方法.docx

    `Graphics_shape`是Android SDK提供的一种强大的工具，允许通过XML文件定义各种形状，如矩形、椭圆、线性渐变、径向渐变等，而无需依赖外部图像资源。这种方式既方便又节省内存，特别适合动态改变或自定义UI元素。 ...

    Android控件美化之Shape的使用[汇编].pdf

    若要将边框设置为虚线，可以使用`android:dashWidth`和`android:dashGap`，前者定义虚线的宽度，后者定义虚线间的空白距离。 4. **圆角（corners）**：`&lt;corners&gt;`标签用于创建圆角效果。`android:radius`设置所有...

    Android shape 属性

    在XML布局文件的`&lt;shape&gt;`标签内，你可以设置颜色、渐变、边框等属性。 2. **颜色填充** - `solid`: 这个属性用于设置形状的填充颜色，例如`&lt;solid android:color="#FF0000" /&gt;`将形状填充为红色。 - `gradient`:...

    博客<详解shape标签>对应源码

    - `android:cornerRadius`设置圆角半径，实现圆角矩形。 - `android:padding`设置内边距。 2. **椭圆（oval）**： - 无需指定宽度和高度，椭圆大小由其父视图决定。 - 可通过`android:shape`属性的缺失或设置为...

    Android-ShapeView方便从XML创建可复用的shape减少了类似ML的shape数量

    此外，`ShapeView`还提供了丰富的自定义选项，比如渐变填充、图案填充、边框样式（虚线、点线等）、圆角矩形的四个角的不同圆角半径等。这些特性使得`ShapeView`能够满足大部分形状绘制的需求。 在实际项目中，你...

    shapeDrawable 的属性大全，使用

    在Android开发中，Shape Drawable是Android图形库中的一个重要组成部分，用于创建各种形状并进行自定义装饰，如背景、边框、圆角、渐变等。Shape Drawable通过XML定义，可以轻松地实现视图的视觉样式，提高代码的...

    安卓之 （UI）shape和selector的结合使用1

    在XML布局文件中，你可以使用`android:background="@drawable/shape"`来设置控件的背景。 Shape支持四种基本形状： 1. rectangle（矩形）：最常见的形状，用于创建方形或矩形背景。 2. oval（椭圆）：用于创建圆形...

Magicbox
Global site tag (gtag.js) - Google Analytics