Android界面布局文字水印

一、需求分析

某友说要解决一个需求，在每个布局中加上水印效果，如下图：

 

从图中，我们看到在内容布局中很明显有文字水印效果，如何实现这种效果呢：

（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;    }}

通过以上几个步骤就可以轻松实现水印文字效果啦~

三、效果图

源码下载