AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

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

2023-12-19 236
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
搜索推荐
关键词：
APP自定义
APP开发
Android开发
Android实战
APP源码
热烈的马
目录
相关文章
岁月如酒
|
4月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度？
如何优化UniApp开发的App的启动速度？
岁月如酒
909 139
岁月如酒
|
4月前
|
移动开发 JavaScript weex
UniApp开发的App在启动速度方面有哪些优势和劣势？
UniApp开发的App在启动速度方面有哪些优势和劣势？
岁月如酒
448 137
体育数据Lynne
|
4月前
|
数据采集 JavaScript 前端开发
开发比分App？你缺的不是程序员
开发体育比分App，关键不在代码，而在懂体育、懂数据、懂用户。明确定位、理清需求、选好数据源，再找专业的产品、数据与技术人才协同，才能少走弯路。程序员最后入场，效率最高。
体育数据Lynne
309 154
gooking
|
5月前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用，从多端支持范围、核心功能模块及部分界面展示进行客观说明，相关资源信息也将一并呈现。
gooking
204 0
阿丘的记事本
|
7月前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料？不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案，重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具，分析其适用场景与实际应用逻辑，为一线旅游从业者提供高效、低成本的执行参考。
阿丘的记事本
232 1
小华同学ai
|
7月前
|
Rust 安全 前端开发
Github 轻松斩获30k+ Star，桌面应用开发太丝滑啦，Tauri框架能重塑桌面App开发？别错过，抓紧上车
Tauri 是一个基于 Rust 的开源框架，用于构建轻量级、高性能、安全的跨平台桌面及移动应用。它利用系统 WebView 渲染前端界面，后端由 Rust 编写，具备出色的性能和安全性。相比 Electron，Tauri 应用体积更小、启动更快，且默认权限更安全。它支持 React、Vue、Svelte 等主流前端框架，并提供自动更新、CLI 工具链、资源注入优化等功能，适用于生产力工具、开发者工具、数据分析、AI 应用等多种场景。目前 Tauri 在 GitHub 上已获得超过 30,000 Star，社区活跃，是现代桌面应用开发的理想选择。
小华同学ai
944 0
卓伊凡
|
4月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
卓伊凡
601 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
卓伊凡
|
4月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
卓伊凡
518 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
卓伊凡
|
4月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
卓伊凡
900 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡

热门文章

最新文章

  • 1
    通过阿里云APP，可以进行ECS，RDS 等实例的管理
  • 2
    阿里云 Serverless App Engine(SAE)助力升学在线从容应对流量高峰
  • 3
    MNN-LLM App：在手机上离线运行大模型，阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 4
    h5做的app和原生app的区别
  • 5
    重新想象 Windows 8 Store Apps (57) - 本地化和全球化
  • 6
    uni-app开发微信小程序
  • 7
    HC05蓝牙模块与手机APP连接
  • 8
    【1】JAVA---地址App小软件（AddressApp.class）（初步接触项目开发的分层思想）（表现层）
  • 9
    『创意欣赏』20款精致的 iOS7 APP 图标设计
  • 10
    SpringCloud微服务实战——搭建企业级开发框架（四十七）：【移动开发】整合uni-app搭建移动端快速开发框架-添加Axios并实现登录功能
  • 1
    告别手动埋点！Android 无侵入式数据采集方案深度解析
    662
  • 2
    百宝箱开放平台 ✖️ Android 集成说明
    280
  • 3
    【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    518
  • 4
    【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    261
  • 5
    【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    601
  • 6
    【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    900
  • 7
    基于Android的电子记账本系统
    415
  • 8
    【车载Android】模拟Android系统的高负载环境
    409
  • 9
    X Android SDK file not found: adb.安卓开发常见问题-Android SDK 缺少 `adb`（Android Debug Bridge）-优雅草卓伊凡
    684
  • 10
    【08】AI辅助编程完整的安卓二次商业实战-修改消息聊天框背景色-触发聊天让程序异常终止bug牵涉更多聊天消息发送优化处理-优雅草卓伊凡
    420

    • 相关课程

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

    • 相关电子书

    更多
  • 女性移动App安全攻防战
  • 汇聚云计算的生态核能——云市场，云上APP Store
  • 千万级用户直播App——服务端架构设计和思考
    • 下一篇
    第五届伏魔挑战赛如约来袭，诚邀各路高手来战！