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

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

2023-12-19 68
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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自定义
APP开发
APP源码
Android实战
热烈的马
目录
相关文章
游客qf4jmczx4xu2y
|
5天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图：打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中，自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程，以及如何通过它们增强应用的用户体验。我们将从基础出发，逐步深入，最终让你能够自信地设计和实现专属的UI组件。
游客qf4jmczx4xu2y
17 4
请看我回答~
|
7天前
|
Android开发 Swift iOS开发
探索安卓与iOS开发的差异和挑战
【10月更文挑战第37天】在移动应用开发的广阔舞台上，安卓和iOS这两大操作系统扮演着主角。它们各自拥有独特的特性、优势以及面临的开发挑战。本文将深入探讨这两个平台在开发过程中的主要差异，从编程语言到用户界面设计，再到市场分布的不同影响，旨在为开发者提供一个全面的视角，帮助他们更好地理解并应对在不同平台上进行应用开发时可能遇到的难题和机遇。
请看我回答~
20 4
肥猪肥猪-17824
|
9天前
|
XML 存储 Java
探索安卓开发之旅：从新手到专家
【10月更文挑战第35天】在数字化时代，安卓应用的开发成为了一个热门话题。本文旨在通过浅显易懂的语言，带领初学者了解安卓开发的基础知识，同时为有一定经验的开发者提供进阶技巧。我们将一起探讨如何从零开始构建第一个安卓应用，并逐步深入到性能优化和高级功能的实现。无论你是编程新手还是希望提升技能的开发者，这篇文章都将为你提供有价值的指导和灵感。
肥猪肥猪-17824
24 4
肥猪肥猪-17824
|
7天前
|
存储 API 开发工具
探索安卓开发：从基础到进阶
【10月更文挑战第37天】在这篇文章中，我们将一起探索安卓开发的奥秘。无论你是初学者还是有经验的开发者，这篇文章都将为你提供有价值的信息和建议。我们将从安卓开发的基础开始，逐步深入到更复杂的主题，如自定义组件、性能优化等。最后，我们将通过一个代码示例来展示如何实现一个简单的安卓应用。让我们一起开始吧！
肥猪肥猪-17824
19 1
shuj
|
8天前
|
存储 XML JSON
探索安卓开发：从新手到专家的旅程
【10月更文挑战第36天】在这篇文章中，我们将一起踏上一段激动人心的旅程，从零基础开始，逐步深入安卓开发的奥秘。无论你是编程新手，还是希望扩展技能的老手，这里都有适合你的知识宝藏等待发掘。通过实际的代码示例和深入浅出的解释，我们将解锁安卓开发的关键技能，让你能够构建自己的应用程序，甚至贡献于开源社区。准备好了吗？让我们开始吧！
shuj
21 2
山东布谷科技_sun
|
9天前
|
Android开发
布谷语音软件开发：android端语音软件搭建开发教程
语音软件搭建android端语音软件开发教程！
山东布谷科技_sun
25 3
游客v42ruarbnarj2
|
17天前
|
编解码 Java Android开发
通义灵码：在安卓开发中提升工作效率的真实应用案例
本文介绍了通义灵码在安卓开发中的应用。作为一名97年的聋人开发者，我在2024年Google Gemma竞赛中获得了冠军，拿下了很多项目竞赛奖励，通义灵码成为我的得力助手。文章详细展示了如何安装通义灵码插件，并通过多个实例说明其在适配国际语言、多种分辨率、业务逻辑开发和编程语言转换等方面的应用，显著提高了开发效率和准确性。
游客v42ruarbnarj2
89 7
chnjames
|
1月前
|
移动开发 小程序 测试技术
自定义多级联动选择器指南（uni-app）
在本文中，探讨了如何在uni-app中创建自定义多级联动选择器组件。这个组件具有强大的多端支持，可适用于H5、APP、微信小程序、支付宝小程序等多种平台。
chnjames
33 1
自定义多级联动选择器指南（uni-app）
shuj
|
15天前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域，自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View，以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理，进而探索内存和布局优化技巧，最终实现既美观又高效的安卓界面。
shuj
28 5
我不是游客20240119
|
14天前
|
JSON Java Android开发
探索安卓开发之旅：打造你的第一个天气应用
【10月更文挑战第30天】在这个数字时代，掌握移动应用开发技能无疑是进入IT行业的敲门砖。本文将引导你开启安卓开发的奇妙之旅，通过构建一个简易的天气应用来实践你的编程技能。无论你是初学者还是有一定经验的开发者，这篇文章都将成为你宝贵的学习资源。我们将一步步地深入到安卓开发的世界中，从搭建开发环境到实现核心功能，每个环节都充满了发现和创造的乐趣。让我们开始吧，一起在代码的海洋中航行！
我不是游客20240119
26 2

热门文章

最新文章

  • 1
    Android 11 中的存储机制更新
  • 2
    《Android游戏开发详解》——第1章，第1.1节什么是编程
  • 3
    android处理拍照旋转问题及带来的对内存占用
  • 4
    Android Sqlite数据库版本升级管理初探
  • 5
    离线安装Eclipse的Android ADT开发插件
  • 6
    Android——Fragment介绍
  • 7
    android使用Activity
  • 8
    Android开发1——查找所需要出示权限的内容
  • 9
    实现一个用于显示当前时间的Google Android 窗口小部件（AppWidget）
  • 10
    Android学习之四大组件（四）——BroadcastReceiver
  • 1
    binder机制原理面试，安卓app开发教程
    82
  • 2
    uni-app subNVue 原生子窗体开发指南
    271
  • 3
    Android mk 集成app
    54
  • 4
    uni-app和Vue.js二者之间有什么区别？
    63
  • 5
    uni-app 安装与配置
    111
  • 6
    开发uniapp过程中对app、微信小程序与h5的webview调试
    1110
  • 7
    jenkins编译H5做的android端编译卫士app记录
    48
  • 8
    C#/ASP.NET应用程序配置文件app.config/web.config的增、删、改操作
    70
  • 9
    Xpath高阶定位技巧，轻松玩转App测试元素定位！
    88
  • 10
    简洁大气APP下载单页源码
    116

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 【图生图】一键部署3D卡通风格模型
  • 图表样式智能美化工具
  • 星轨-钉钉APP分发实训
    • 下一篇
    阿里云OSS设置跨域访问