Android界面布局文字水印

版权声明:本文为博主原创文章,未经博主允许不得转载。 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;
    }
}
通过以上几个步骤就可以轻松实现水印文字效果啦~


三、效果图



源码下载

猜你喜欢

转载自blog.csdn.net/u013718120/article/details/73920742
今日推荐