备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

Android App开发之自定义图形中位图与图形互转、剪裁图形内部区域、给图形添加部件的讲解及实战（附源码 简单易懂）

2023-12-19 33
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Android App开发之自定义图形中位图与图形互转、剪裁图形内部区域、给图形添加部件的讲解及实战（附源码 简单易懂）

需要图片和源码点赞关注收藏后评论区留言~~~

一、位图与图形互转

Drawable用于在界面上展示图片，Bitmap用于加工图像数据，所以两者之间的转换非常有必要，位图图形BitmapDrawable正是二者之间的桥梁，图形对象与位图对象互相转换都需要它。

图形对象转换成位图对象有个前提，就是该图形原本便是位图格式，否则会转换失败

Drawable类有个setAlpha方法，可以设置图形的灰度值，下面是位图转换成图形对象后再调用setAlpha方法  效果如下

可见不同的灰度比例会有不同的效果

代码如下

Java类

package com.example.picture;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.Spinner;
public class DrawableConvertActivity extends AppCompatActivity {
    private Bitmap mOriginBitmap; // 原始位图
    private ImageView iv_picture; // 声明一个图像视图对象
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawable_convert);
        iv_picture = findViewById(R.id.iv_picture);
        mOriginBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.mandarin_duck);
        initAlphaSpinner(); // 初始化灰度比例下拉框
    }
    // 初始化灰度比例下拉框
    private void initAlphaSpinner() {
        ArrayAdapter<String> alphaAdapter = new ArrayAdapter<>(this,
                R.layout.item_select, alphaNameArray);
        Spinner sp_alpha = findViewById(R.id.sp_alpha);
        sp_alpha.setPrompt("请选择灰度比例");
        sp_alpha.setAdapter(alphaAdapter);
        sp_alpha.setOnItemSelectedListener(new AlphaSelectedListener());
        sp_alpha.setSelection(0);
    }
    private String[] alphaNameArray = {"1", "0.75", "0.5", "0.25", "0"};
    class AlphaSelectedListener implements AdapterView.OnItemSelectedListener {
        public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
            double ratio = Double.parseDouble(alphaNameArray[arg2]);
            // 根据指定位图创建图形对象
            Drawable drawable = new BitmapDrawable(getResources(), mOriginBitmap);
            drawable.setAlpha((int) (255*ratio)); // 设置图形的灰度值
            iv_picture.setImageDrawable(drawable); // 设置图像视图的图形对象
        }
        public void onNothingSelected(AdapterView<?> arg0) {}
    }
}

XML文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:paddingLeft="5dp"
            android:gravity="center"
            android:text="请选择灰度比例"
            android:textColor="@color/black"
            android:textSize="17sp" />
        <Spinner
            android:id="@+id/sp_alpha"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:spinnerMode="dialog" />
    </LinearLayout>
    <ImageView
        android:id="@+id/iv_picture"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerInside" />
</LinearLayout>

二、剪裁图形内部区域

有时候为了美观，并不会显示整个图像，而是显示剪裁后的图像，比如QQ的圆形头像等等。圆形剪裁正是位图图形的拿手好戏，只要调用画笔工具的setShader方法，设置位图着色器即可

下面实现 椭圆 圆角矩形 圆形的剪裁效果

代码如下

Java类

package com.example.picture;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.Spinner;
import com.example.picture.widget.CircleDrawable;
import com.example.picture.widget.OvalDrawable;
import com.example.picture.widget.RoundDrawable;
public class DrawableCutActivity extends AppCompatActivity {
    private Bitmap mOriginBitmap; // 原始位图
    private ImageView iv_picture; // 声明一个图像视图对象
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawable_cut);
        iv_picture = findViewById(R.id.iv_picture);
        mOriginBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.mandarin_duck);
        initMethodSpinner(); // 初始化剪裁方式下拉框
    }
    // 初始化剪裁方式下拉框
    private void initMethodSpinner() {
        ArrayAdapter<String> methodAdapter = new ArrayAdapter<>(this,
                R.layout.item_select, methodArray);
        Spinner sp_method = findViewById(R.id.sp_method);
        sp_method.setPrompt("请选择剪裁方式");
        sp_method.setAdapter(methodAdapter);
        sp_method.setOnItemSelectedListener(new MethodSelectedListener());
        sp_method.setSelection(0);
    }
    private String[] methodArray = {"不裁剪", "圆形剪裁", "椭圆剪裁", "圆角矩形剪裁"};
    class MethodSelectedListener implements AdapterView.OnItemSelectedListener {
        public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
            if (arg2 == 0) { // 不裁剪
                iv_picture.setImageBitmap(mOriginBitmap); // 设置图像视图的位图对象
            } else if (arg2 == 1) { // 圆形剪裁
                Drawable drawable = new CircleDrawable(DrawableCutActivity.this, mOriginBitmap);
                iv_picture.setImageDrawable(drawable); // 设置图像视图的图形对象
            } else if (arg2 == 2) { // 椭圆剪裁
                Drawable drawable = new OvalDrawable(DrawableCutActivity.this, mOriginBitmap);
                iv_picture.setImageDrawable(drawable); // 设置图像视图的图形对象
            } else if (arg2 == 3) { // 圆角矩形剪裁
                Drawable drawable = new RoundDrawable(DrawableCutActivity.this, mOriginBitmap);
                iv_picture.setImageDrawable(drawable); // 设置图像视图的图形对象
            }
        }
        public void onNothingSelected(AdapterView<?> arg0) {}
    }
}

XML文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:paddingLeft="5dp"
            android:gravity="center"
            android:text="请选择剪裁方式"
            android:textColor="@color/black"
            android:textSize="17sp" />
        <Spinner
            android:id="@+id/sp_method"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:spinnerMode="dialog" />
    </LinearLayout>
    <ImageView
        android:id="@+id/iv_picture"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerInside" />
</LinearLayout>

三、给图形添加小部件

除了剪裁图形之外，还能给图形添加小部件，比如文字，图标等等，原来自定义图形类的时候，重写draw方法等同于重写视图的onDraw方法，因此在draw方法中就可以添加图案。

此处可以设置个性化字体，用到了字体工具Typeface的createFromAsset方法，该方法允许从assets目录下的字体文件生成字体对象，然后调用画笔对象的setTypeface方法，就能使文字呈现对应的字体样式

同样能给图片加水印 效果如下

代码如下

Java类

package com.example.picture;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Typeface;
import android.os.Bundle;
import android.os.Handler;
import android.os.Looper;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.Spinner;
import com.example.picture.widget.MarkTextDrawable;
public class DrawableTextActivity extends AppCompatActivity {
    private final static String TAG = "DrawableTextActivity";
    private Bitmap mOriginBitmap; // 原始位图
    private ImageView iv_picture; // 声明一个图像视图对象
    private Typeface[] mTypeFaceArray; // 字体数组
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawable_text);
        iv_picture = findViewById(R.id.iv_picture);
        mOriginBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.mandarin_duck);
        iv_picture.setImageBitmap(mOriginBitmap); // 设置图像视图的位图对象
        new Handler(Looper.myLooper()).post(() -> loadTypeFace()); // 加载字体文件
    }
    // 加载字体文件
    private void loadTypeFace() {
        mTypeFaceArray = new Typeface[fontFileArray.length];
        for (int i=0; i<fontFileArray.length; i++) {
            String fontFile = "fonts/" + fontFileArray[i] + ".ttf";
            // 根据assets目录下的字体文件创建字体对象
            mTypeFaceArray[i] = Typeface.createFromAsset(getAssets(), fontFile);
        }
        initFontSpinner(); // 初始化中文字体下拉框
    }
    // 初始化中文字体下拉框
    private void initFontSpinner() {
        ArrayAdapter<String> fontAdapter = new ArrayAdapter<>(this,
                R.layout.item_select, fontNameArray);
        Spinner sp_font = findViewById(R.id.sp_font);
        sp_font.setPrompt("请选择中文字体");
        sp_font.setAdapter(fontAdapter);
        sp_font.setOnItemSelectedListener(new FontSelectedListener());
        sp_font.setSelection(0);
    }
    private String[] fontNameArray = {"常规", "仿宋", "楷体", "隶书", "黑体", "幼圆",
            "华文行楷", "华文新魏", "华文彩云", "华文琥珀", "方正舒体", "方正姚体"};
    private String[] fontFileArray = {"Regular", "FangSong", "KaiTi", "LiShu", "HeiTi", "YouYuan",
            "HangKai", "XinWei", "CaiYun", "HuPo", "ShuTi", "YaoTi"};
    class FontSelectedListener implements AdapterView.OnItemSelectedListener {
        public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
            // 根据指定位图创建水印图形对象
            MarkTextDrawable drawable = new MarkTextDrawable(DrawableTextActivity.this, mOriginBitmap);
            drawable.setMarkerText("鸳鸯戏水", mTypeFaceArray[arg2]); // 设置水印文字及其字体
            iv_picture.setImageDrawable(drawable); // 设置图像视图的图形对象
        }
        public void onNothingSelected(AdapterView<?> arg0) {}
    }
}

XML文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:paddingLeft="5dp"
            android:gravity="center"
            android:text="请选择中文字体"
            android:textColor="@color/black"
            android:textSize="17sp" />
        <Spinner
            android:id="@+id/sp_font"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:spinnerMode="dialog" />
    </LinearLayout>
    <ImageView
        android:id="@+id/iv_picture"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerInside" />
</LinearLayout>

创作不易 觉得有帮助请 点赞关注收藏~~~

文章标签：
Android开发
Java
数据格式
XML
搜索推荐
关键词：
Android开发
Android自定义
Android源码
APP android
APP源码
热烈的马
目录
相关文章
aqi00
|
5天前
|
Linux 编译器 Android开发
FFmpeg开发笔记（九）Linux交叉编译Android的x265库
在Linux环境下，本文指导如何交叉编译x265的so库以适应Android。首先，需安装cmake和下载android-ndk-r21e。接着，下载x265源码，修改crosscompile.cmake的编译器设置。配置x265源码，使用指定的NDK路径，并在配置界面修改相关选项。随后，修改编译规则，编译并安装x265，调整pc描述文件并更新PKG_CONFIG_PATH。最后，修改FFmpeg配置脚本启用x265支持，编译安装FFmpeg，将生成的so文件导入Android工程，调整gradle配置以确保顺利运行。
aqi00
24 1
FFmpeg开发笔记（九）Linux交叉编译Android的x265库
是阿超
|
24天前
|
XML Java Android开发
Android实现自定义进度条(源码+解析)
Android实现自定义进度条(源码+解析)
是阿超
52 1
张继群
|
28天前
|
Java Android开发
Android 开发获取通知栏权限时会出现两个应用图标
Android 开发获取通知栏权限时会出现两个应用图标
张继群
14 0
请看我回答~
|
2天前
|
数据库 Android开发 开发者
安卓应用开发：构建高效用户界面的策略
【4月更文挑战第24天】 在竞争激烈的移动应用市场中，一个流畅且响应迅速的用户界面(UI)是吸引和保留用户的关键。针对安卓平台，开发者面临着多样化的设备和系统版本，这增加了构建高效UI的复杂性。本文将深入分析安卓平台上构建高效用户界面的最佳实践，包括布局优化、资源管理和绘制性能的考量，旨在为开发者提供实用的技术指南，帮助他们创建更流畅的用户体验。
请看我回答~
9 0
一歲抬頭
|
4天前
|
移动开发 Java Unix
Android系统 自动加载自定义JAR文件
Android系统 自动加载自定义JAR文件
一歲抬頭
21 1
一歲抬頭
|
4天前
|
Shell Android开发 开发者
Android系统 自定义动态修改init.custom.rc
Android系统 自定义动态修改init.custom.rc
一歲抬頭
23 0
一歲抬頭
|
4天前
|
存储 安全 Android开发
Android系统 自定义系统和应用权限
Android系统 自定义系统和应用权限
一歲抬頭
19 0
源码星辰
|
17天前
|
监控 数据可视化 安全
智慧工地SaaS可视化平台源码，PC端+APP端，支持二开，项目使用，微服务+Java++vue+mysql
环境实时数据、动态监测报警，实时监控施工环境状态，有针对性地预防施工过程中的环境污染问题，打造文明生态施工，创造绿色的生态环境。
源码星辰
14 0
智慧工地SaaS可视化平台源码，PC端+APP端，支持二开，项目使用，微服务+Java++vue+mysql
请看我回答~
|
19天前
|
XML 开发工具 Android开发
构建高效的安卓应用：使用Jetpack Compose优化UI开发
【4月更文挑战第7天】 随着Android开发不断进化，开发者面临着提高应用性能与简化UI构建流程的双重挑战。本文将探讨如何使用Jetpack Compose这一现代UI工具包来优化安卓应用的开发流程，并提升用户界面的流畅性与一致性。通过介绍Jetpack Compose的核心概念、与传统方法的区别以及实际集成步骤，我们旨在提供一种高效且可靠的解决方案，以帮助开发者构建响应迅速且用户体验优良的安卓应用。
请看我回答~
19 0
请看我回答~
|
22天前
|
监控 算法 Android开发
安卓应用开发：打造高效启动流程
【4月更文挑战第5天】 在移动应用的世界中，用户的第一印象至关重要。特别是对于安卓应用而言，启动时间是用户体验的关键指标之一。本文将深入探讨如何优化安卓应用的启动流程，从而减少启动时间，提升用户满意度。我们将从分析应用启动流程的各个阶段入手，提出一系列实用的技术策略，包括代码层面的优化、资源加载的管理以及异步初始化等，帮助开发者构建快速响应的安卓应用。
请看我回答~
13 0

热门文章

最新文章

  • 1
    我的Android之路(持续更新总结~)
  • 2
    Android实现自定义进度条(源码+解析)
  • 3
    安卓适配性策略：确保应用在不同设备上的兼容性
  • 4
    构建高效Android应用：探究Kotlin与Java的性能差异
  • 5
    安卓安全性指南：保护用户数据免受恶意攻击
  • 6
    安卓多线程和并发处理：提高应用效率
  • 7
    安卓UI/UX设计原则：打造引人入胜的用户体验
  • 8
    Android为什么不能在子线程更新UI
  • 9
    构建高效Android应用：从优化用户体验到提升性能
  • 10
    安卓投屏神器 Scrcpy安 报错ERROR: Could not find any ADB device
  • 1
    HC05蓝牙模块与手机APP连接
    42
  • 2
    【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果（五十二）
    46
  • 3
    【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果（五十一）
    48
  • 4
    【微信小程序】-- uni-app 项目创建 & 目录结构讲解（四十九）
    55
  • 5
    【微信小程序】-- 配置uni-app的开发环境（四十八）
    37
  • 6
    python爬虫之app爬取-微信朋友圈
    80
  • 7
    python爬虫之app爬取-mitmproxy 的使用
    40
  • 8
    python爬虫之app爬取-charles的使用
    58
  • 9
    【问题篇】打包Vue-cli3创建的vue项目成App的apk文件
    26
  • 10
    短剧系统开发（网页版/APP/小程序）丨短剧系统开发运营版及源码出售
    94

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南
  • 互联网安全-移动APP漏洞风险与解决方案

    • 相关电子书

    更多
  • 女性移动App安全攻防战
  • 汇聚云计算的生态核能——云市场，云上APP Store
  • 千万级用户直播App——服务端架构设计和思考

    • 相关实验场景

    更多
  • 【图生图】一键部署3D卡通风格模型
  • 星轨-钉钉APP分发实训
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）