Android TextView加上阴影效果

废话不多说直接说关键的:

字体阴影需要四个相关参数:

1. android:shadowColor:阴影的颜色
2. android:shadowDx:水平方向上的偏移量
3. android:shadowDy:垂直方向上的偏移量

4. android:shadowRadius:是阴影的的半径大少

最好这4个值都一起设计

          shadowColor这个属性就不多说了,android:shadowDx跟android:shadowDy

        为了更清楚的演示就做个试验,分三组xml布局如下:

<LinearLayout 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"
    android:orientation="vertical"
    android:background="#ff895544" >

     <TextView 
		    android:id="@+id/test_shadow"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ffffffff"
		    android:shadowColor="#ff000000"
		    android:text="Test Shadow"
		    android:layout_gravity="center"
		    android:shadowRadius="1"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
       
		<TextView 
		    android:id="@+id/test_shadow2"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ffffffff"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ff000000"
		    android:shadowRadius="1"
		    android:shadowDx="10"
		    android:shadowDy="10"
		    />
		
		<TextView 
		    android:id="@+id/test_shadow3"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ffffffff"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ff000000"
		    android:shadowRadius="1"
		    android:shadowDx="30"
		    android:shadowDy="30"
		    />
		
</LinearLayout>
dx  dy 分别为   (0 , 0) , (10 , 10 ) , (30 , 30)

结果如下:

现在更加清楚了吧!

下一个属性是android:shadowRadius  是阴影的的半径大少

对于此属性进行6组试验:

dx  dy 都是 30  shadowRadius  分别为: 0 , 0.01 , 1 , 2 , 5 , 10

结果如下:


从结果分析:

1 这个值为0的话是不会显示的

2 值越大,阴影就越大,而且越模糊

到现在应该都清楚这4个值会影响什么效果了,经验丰富的从属性名字就大概知道是什么意思了。


现在回到正常阴影的效果:

      1.可以把shadowRadius  变大来实现阴影模糊,使得看起来更加的自然:

代码:

     <TextView 
   android:id="@+id/test_shadow"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:textSize="60sp"
   android:textColor="#ffffffff"
   android:shadowColor="#ff000000"
   android:text="Test Shadow"
   android:layout_gravity="center"
   android:shadowRadius="1"
   android:shadowDx="5"
   android:shadowDy="5"
   />
       
<TextView 
   android:id="@+id/test_shadow2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:textSize="60sp"
   android:textColor="#ffffffff"
   android:layout_gravity="center"
   android:text="Test Shadow"
   android:shadowColor="#ff000000"
   android:shadowRadius="5"
   android:shadowDx="5"
   android:shadowDy="5"
   />

<TextView 
   android:id="@+id/test_shadow2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:textSize="60sp"
   android:textColor="#ffffffff"
   android:layout_gravity="center"
   android:text="Test Shadow"
   android:shadowColor="#ff000000"
   android:shadowRadius="10"
   android:shadowDx="5"
   android:shadowDy="5"
   />

效果:

调节shadowRadius来确定最适合自己的阴影

2.调试dx  跟 dy来改变光源,使阴影偏向不同的方向 跟  距离

      如果光源是在左边,那么dx 是为正的, 

     光源在最右边,那么dx就是负

     光源在上  那么dy 为 正

     光源在下, 那么dy 为 负  

那么左上 , 右下 就是。。。。。。

dx  跟 dy 的正负调节方向, 其值的大少影响距离 ,dx 跟 dy 的 比值 就影响光源的角度

 <TextView 
		    android:id="@+id/test_shadow"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ffffffff"
		    android:shadowColor="#ff000000"
		    android:text="Test Shadow"
		    android:layout_gravity="center"
		    android:shadowRadius="1"
		    android:shadowDx="5"
		    android:shadowDy="0"
		    />
       
		<TextView 
		    android:id="@+id/test_shadow2"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ffffffff"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ff000000"
		    android:shadowRadius="1"
		    android:shadowDx="-5"
		    android:shadowDy="0"
		    />
		
		<TextView 
		    android:id="@+id/test_shadow2"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ffffffff"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ff000000"
		    android:shadowRadius="1"
		    android:shadowDx="0"
		    android:shadowDy="5"
		    />
		
		<TextView 
		    android:id="@+id/test_shadow3"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ffffffff"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ff000000"
		    android:shadowRadius="1"
		    android:shadowDx="0"
		    android:shadowDy="-5"
		    />



带一点浮雕效果的,把dx  dy都设置较小的值

现在三组 设置为 (0.2 , 0.2) , (1 , 1) , (2 , 2)

结果


光圈效果:

     把dx  dy设置为0 , Raduis位置较大就行了,字体颜色跟阴影颜色要协调(建议使用相同,相近,相差太大就难看比如黑色跟白色)

  试验代码:

    

<TextView 
		    android:id="@+id/test_shadow"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ffffffff"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ff00ff00"
		    android:shadowRadius="1"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
     
     <TextView 
		    android:id="@+id/test_shadow2"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ffffffff"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ffee00ff"
		    android:shadowRadius="2"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
       
		<TextView 
		    android:id="@+id/test_shadow2"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ffffffff"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ffeedd00"
		    android:shadowRadius="5"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
		
		
		
		<TextView 
		    android:id="@+id/test_shadow2"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ffffffff"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ff335824"
		    android:shadowRadius="10"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
结果: 这样看起来还算好看把


荧光灯的效果: 把把dx  dy设置为0 , Raduis位置较大就行了,最重要的事字体颜色 跟背景颜色一样(或者非常相近)


如果再把dx  跟  dy再设置一下的话 就会变成这样的dx dy 分别为 (1 ,1) , (2 , 2) , (5 , 5) ,(10 , 10)


上面使用的背景色跟字体都是为(#ff895544) 那么我们把字体设置为相近(#ff784433)的那么结果为:

代码:

<LinearLayout 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"
    android:orientation="vertical"
    android:background="#ff895544" >

     <TextView 
		    android:id="@+id/test_shadow"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ff784433"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ff00ff00"
		    android:shadowRadius="1"
		    android:shadowDx="1"
		    android:shadowDy="1"
		    />
     
     <TextView 
		    android:id="@+id/test_shadow2"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ff784433"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ffee00ff"
		    android:shadowRadius="2"
		    android:shadowDx="2"
		    android:shadowDy="2"
		    />
       
		<TextView 
		    android:id="@+id/test_shadow2"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ff784433"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ffeedd00"
		    android:shadowRadius="5"
		    android:shadowDx="5"
		    android:shadowDy="5"
		    />
		
		
		
		<TextView 
		    android:id="@+id/test_shadow2"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ff784433"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ff335824"
		    android:shadowRadius="10"
		    android:shadowDx="10"
		    android:shadowDy="10"
		    />
</LinearLayout>
结果就是:

  这个更明显一点

再把dx  dy 都设置为0

结果:


颜色混合:主要是修改字体颜色的alpha值

代码:

<LinearLayout 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"
    android:orientation="vertical"
    android:background="#ff000000" >

     <TextView 
		    android:id="@+id/test_shadow"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#ffffffff"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ffffff00"
		    android:shadowRadius="5"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
     <TextView 
		    android:id="@+id/test_shadow"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#afffffff"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ffffff00"
		    android:shadowRadius="5"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
     <TextView 
		    android:id="@+id/test_shadow"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#9fffffff"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ffffff00"
		    android:shadowRadius="5"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
     <TextView 
		    android:id="@+id/test_shadow"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#6fffffff"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ffffff00"
		    android:shadowRadius="5"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
     <TextView 
		    android:id="@+id/test_shadow"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#3fffffff"
		    android:layout_gravity="center"
		    android:text="Test Shadow"
		    android:shadowColor="#ffffff00"
		    android:shadowRadius="5"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
		
</LinearLayout>
结果:   可以让阴影颜色现在显示在字体颜色中

代码:

<LinearLayout 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"
    android:orientation="vertical"
    android:background="#ff000000" >

    <TextView 
		    android:id="@+id/test_shadow"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#cc000000"
		    android:text="Test Shadow"
		    android:layout_gravity="center"
		    android:shadowColor="#aa22ff22"
		    android:shadowRadius="10"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
       
     <TextView 
		    android:id="@+id/test_shadow"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#aa000000"
		    android:text="Test Shadow"
		    android:layout_gravity="center"
		    android:shadowColor="#aa22ff22"
		    android:shadowRadius="10"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
      <TextView 
		    android:id="@+id/test_shadow"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#77000000"
		    android:text="Test Shadow"
		    android:layout_gravity="center"
		    android:shadowColor="#aa22ff22"
		    android:shadowRadius="10"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
       <TextView 
		    android:id="@+id/test_shadow"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#33000000"
		    android:text="Test Shadow"
		    android:layout_gravity="center"
		    android:shadowColor="#aa22ff22"
		    android:shadowRadius="10"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
       
		<TextView 
		    android:id="@+id/test_shadow2"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#33000000"
		    android:text="Test Shadow"
		    android:layout_gravity="center"
		    android:shadowColor="#aaffffff"
		    android:shadowRadius="10"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
		
		<TextView 
		    android:id="@+id/test_shadow2"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#55000000"
		    android:text="Test Shadow"
		    android:layout_gravity="center"
		    android:shadowColor="#ffffffff"
		    android:shadowRadius="10"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
		<TextView 
		    android:id="@+id/test_shadow2"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#77000000"
		    android:text="Test Shadow"
		    android:layout_gravity="center"
		    android:shadowColor="#ffffffff"
		    android:shadowRadius="10"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
		<TextView 
		    android:id="@+id/test_shadow2"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#99000000"
		    android:text="Test Shadow"
		    android:layout_gravity="center"
		    android:shadowColor="#ffffffff"
		    android:shadowRadius="10"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
		<TextView 
		    android:id="@+id/test_shadow2"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:textSize="60sp"
		    android:textColor="#aa000000"
		    android:text="Test Shadow"
		    android:layout_gravity="center"
		    android:shadowColor="#ffffffff"
		    android:shadowRadius="10"
		    android:shadowDx="0"
		    android:shadowDy="0"
		    />
		
</LinearLayout>

结果2:

通过改变   字体背景色, 字体颜色  字体阴影色 阴影半径 dx  dy alpha  就可以实现这么多种效果(当然还有更多的效果,主要是颜色搭配)

原来textView也可以这么美,完全不需要使用图片

  • 38
    点赞
  • 94
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
Android中,可以使用SpannableStringBuilder类来实现TextView中嵌套TextView效果。具体步骤如下: 1. 创建一个外部的TextView,设置它的text为一个SpannableStringBuilder对象。 2. 在SpannableStringBuilder对象中插入需要嵌套的TextView,使用setSpan()方法将TextView对象作为参数传入。 3. 设置TextView的布局参数,使其可以适应外部TextView的尺寸。 以下是示例代码: ``` TextView outerTextView = findViewById(R.id.outer_text_view); SpannableStringBuilder builder = new SpannableStringBuilder(); TextView innerTextView = new TextView(this); innerTextView.setText("Inner TextView"); builder.append("Outer TextView "); builder.setSpan(new MySpannable(innerTextView), builder.length(), builder.length() + 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); outerTextView.setText(builder); outerTextView.setMovementMethod(LinkMovementMethod.getInstance()); class MySpannable extends ClickableSpan { private TextView textView; public MySpannable(TextView textView) { this.textView = textView; this.textView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)); } @Override public void onClick(View widget) { // Do something when inner TextView is clicked } @Override public void updateDrawState(TextPaint ds) { super.updateDrawState(ds); ds.setColor(ds.linkColor); // Use link color for inner TextView ds.setUnderlineText(false); } @Override public void drawBackground(Canvas canvas, Paint paint, int left, int right, int top, int baseline, int bottom, CharSequence text, int start, int end, int lnum) { // Do not draw background for inner TextView } } ``` 在上面的代码中,我们创建了一个内部TextView对象,并将它作为参数传入MySpannable类的构造方法中。然后,使用setSpan()方法将MySpannable对象插入到SpannableStringBuilder对象中,从而实现了TextView的嵌套效果。 注意,为了使内部TextView能够响应点击事件,需要调用setMovementMethod()方法并传入LinkMovementMethod.getInstance()。此外,还需要重写MySpannable类的updateDrawState()方法来设置内部TextView的颜色,以及重写drawBackground()方法来取消内部TextView的背景色。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值