版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013718120/article/details/73920742
刚创建的React Native 微信公众号,
欢迎微信扫描关注订阅号,
每天定期会分享react native 技术文章,
移动技术干货,精彩文章技术推送
。同时可以扫描我的微信加入react-native技术交流微信群。欢迎各位大牛,React Native技术爱好者加入交流!
一、需求分析
某友说要解决一个需求,在每个布局中加上水印效果,如下图:
从图中,我们看到在内容布局中很明显有文字水印效果,如何实现这种效果呢:
(1)水印文字有旋转
(2)水印效果处于内容布局之下
(3)水印文字位置不固定
分析以上三步,想必大家都想到了,利用Android自定义View的方式来实现。
二 、功能实现
1、自定义水印文字
从需求图中可以看到,水印文字有旋转角度,颜色,字体大小等等属性。颜色,字体的属性系统TextView已经帮我们实现,所以我们可以继承TextView。旋转的角度使用自定义属性即可。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="WaterMarkText">
<attr name="degree" format="integer" />
</declare-styleable>
</resources>
package watermark;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.Gravity;
import android.widget.TextView;
import com.song.androidwatermark.R;
/**
* 水印文字
* Created by Song on 2017/6/29.
*/
public class WaterMarkText extends TextView {
private int mDegree; // 旋转角度
public WaterMarkText(Context context) {
this(context, null);
}
public WaterMarkText(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public WaterMarkText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.setGravity(Gravity.CENTER);
// 获取自定义属性
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.WaterMarkText,defStyleAttr,0);
for (int i = 0; i < ta.getIndexCount(); i++) {
int index = ta.getIndex(i);
switch (index) {
case R.styleable.WaterMarkText_degree:
mDegree = ta.getInt(index,0);
break;
}
}
ta.recycle();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(getMeasuredWidth(), getMeasuredHeight()+80);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.save();
// 位移,保持文字居中
canvas.translate(getCompoundPaddingLeft(), getExtendedPaddingTop());
// 以文字中心轴旋转
canvas.rotate(mDegree, this.getWidth() / 2f, this.getHeight() / 2f);
super.onDraw(canvas);
canvas.restore();
}
/**
* 设置旋转角度
* @param degree
*/
public void setDegree(int degree) {
this.mDegree = degree;
}
}
2、自定义水印布局
水印布局中,水印文字随机展示在某个位置,我们可以获取【x,y】的坐标范围,然后在范围中产生随机数,展示水印文字即可。此处为了方便,我直接定义位置
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00000000"
tools:context="com.song.androidwatermark.MainActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<watermark.WaterMarkText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Songlcy"
android:textColor="@android:color/darker_gray"
android:textSize="25sp"
app:degree="350"
/>
<watermark.WaterMarkText
android:layout_marginTop="50dp"
android:layout_marginLeft="150dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Songlcy"
android:textColor="@android:color/darker_gray"
android:textSize="25sp"
app:degree="350"
/>
<watermark.WaterMarkText
android:layout_marginTop="120dp"
android:layout_marginLeft="100dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Songlcy"
android:textColor="@android:color/darker_gray"
android:textSize="25sp"
app:degree="350"
/>
<watermark.WaterMarkText
android:layout_marginTop="30dp"
android:layout_marginLeft="250dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Songlcy"
android:textColor="@android:color/darker_gray"
android:textSize="25sp"
app:degree="350"
/>
</LinearLayout>
</FrameLayout>
3、添加水印到当前布局
如何将水印布局添加到内容布局之下,我们可以利用DecoerView来实现。在onCreate中设置了根布局后,会生成DecoerView,那么我们可以通过addView的方式,将水印布局添加,通过第二个参数来控制布局层次即可。
package com.song.androidwatermark;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
protected void onStart() {
addWaterMarkView();
super.onStart();
}
/**
* 添加水印
*/
private void addWaterMarkView() {
View waterMarkView = LayoutInflater.from(this)
.inflate(R.layout.layout_watermark,null);
getRootView().addView(waterMarkView,0);
}
/**
* 获取根布局DecorView
* @return
*/
private ViewGroup getRootView() {
ViewGroup rootView = (ViewGroup)findViewById(android.R.id.content);
return rootView;
}
}
通过以上几个步骤就可以轻松实现水印文字效果啦~