Android App开发图像加工中卡片视图CardView和给图像添加装饰的讲解以及实战(附源码 简单易懂)

川长思鸟来 2023-09-30 16:47 29阅读 0赞

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

一、卡片视图

随着手机越来越先进,开发者已经不满足简单地显示一张张图片,而要设计更多的花样,比如Android提供了一个卡片视图CardView,顾名思义它拥有卡片式的圆角边框,边框外缘有一圈阴影,边框内缘有一圈空白 使用卡片视图前要先修改build.gradle 引入以下依赖

  1. implementation 'androidx.cardview:cardview:1.0.0'

常用方法如下

1:cardBackgroundColor 设置卡片边框的背景颜色

2:cardCornerRadius 设置卡片边框的圆角半径

3:cardElevation 设置卡片边缘的阴影高程

4:contentPadding 设置卡片边框的间隔

效果如下

可以调整圆角与阴影大小,改变视图效果。下拉框中可以选择

7839b2ba17254c96830e16e232f359ae.png

1baf3192f5dd4e42903c59969f9f81fe.png

cd681c9a62c9498ab280969c3b8b7a0c.png

代码如下

Java类

  1. package com.example.picture;
  2. import androidx.appcompat.app.AppCompatActivity;
  3. import androidx.cardview.widget.CardView;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.view.ViewGroup.MarginLayoutParams;
  7. import android.widget.AdapterView;
  8. import android.widget.ArrayAdapter;
  9. import android.widget.Spinner;
  10. import com.example.picture.util.Utils;
  11. public class CardViewActivity extends AppCompatActivity {
  12. private CardView cv_card; // 声明一个卡片视图对象
  13. @Override
  14. protected void onCreate(Bundle savedInstanceState) {
  15. super.onCreate(savedInstanceState);
  16. setContentView(R.layout.activity_card_view);
  17. cv_card = findViewById(R.id.cv_card);
  18. initCardSpinner(); // 初始化卡片类型下拉框
  19. }
  20. // 初始化卡片类型下拉框
  21. private void initCardSpinner() {
  22. ArrayAdapter<String> cardAdapter = new ArrayAdapter<>(this,
  23. R.layout.item_select, cardArray);
  24. Spinner sp_card = findViewById(R.id.sp_card);
  25. sp_card.setPrompt("请选择卡片类型");
  26. sp_card.setAdapter(cardAdapter);
  27. sp_card.setOnItemSelectedListener(new CardSelectedListener());
  28. sp_card.setSelection(0);
  29. }
  30. private String[] cardArray = {"圆角与阴影均为3", "圆角与阴影均为6", "圆角与阴影均为10",
  31. "圆角与阴影均为15", "圆角与阴影均为20"};
  32. private int[] radiusArray = {3, 6, 10, 15, 20};
  33. class CardSelectedListener implements AdapterView.OnItemSelectedListener {
  34. public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
  35. int radius = Utils.dip2px(CardViewActivity.this, radiusArray[arg2]);
  36. cv_card.setRadius(radius); // 设置卡片视图的圆角半径
  37. cv_card.setCardElevation(radius); // 设置卡片视图的阴影长度
  38. MarginLayoutParams params = (MarginLayoutParams) cv_card.getLayoutParams();
  39. // 设置布局参数的四周空白
  40. params.setMargins(radius, radius, radius, radius);
  41. cv_card.setLayoutParams(params); // 设置卡片视图的布局参数
  42. }
  43. public void onNothingSelected(AdapterView<?> arg0) {}
  44. }
  45. }

XML文件

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:app="http://schemas.android.com/apk/res-auto"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical">
  6. <LinearLayout
  7. android:layout_width="match_parent"
  8. android:layout_height="40dp"
  9. android:orientation="horizontal">
  10. <TextView
  11. android:layout_width="wrap_content"
  12. android:layout_height="match_parent"
  13. android:gravity="center"
  14. android:paddingLeft="5dp"
  15. android:text="卡片视图样式:"
  16. android:textColor="@color/black"
  17. android:textSize="17sp" />
  18. <Spinner
  19. android:id="@+id/sp_card"
  20. android:layout_width="0dp"
  21. android:layout_height="wrap_content"
  22. android:layout_weight="1"
  23. android:spinnerMode="dialog" />
  24. </LinearLayout>
  25. <androidx.cardview.widget.CardView
  26. android:id="@+id/cv_card"
  27. android:layout_width="match_parent"
  28. android:layout_height="wrap_content"
  29. android:layout_gravity="center_horizontal|top"
  30. app:cardCornerRadius="3dp"
  31. app:cardElevation="3dp"
  32. app:contentPadding="20dp">
  33. <ImageView
  34. android:id="@+id/iv_scene"
  35. android:layout_width="wrap_content"
  36. android:layout_height="250dp"
  37. android:src="@drawable/ylxs" />
  38. </androidx.cardview.widget.CardView>
  39. </LinearLayout>

二、给图像添加装饰

虽然原样图片能够满足多数场合,但是有时需要给图片添加一些小装饰,比如添加图片边框,添加文字水印,添加图标水印等等,一般是利用画布工具Canvas来绘制图案,具体细节结合画笔工具Paint即可 Canvas常用方法如下

drawarc 绘制扇形或者弧形

drawBitmap 绘制位图

drawCircle 绘制圆形

drawLine 绘制直线

drawOval 绘制椭圆

drawPath 绘制路径

drawPoint 绘制点

drawRect 绘制矩形

drawRoundRect 绘制圆角矩形

drawText 绘制文字

效果如下

无装饰风格如下

3137f11ff0094b89b5806641ef76cb2b.png

添加了时间戳装饰如下

016601d6c1144104ada9aef63117ec87.png

f37b5f4563df4bb680ad2f61b5bfb2de.png

添加边框效果如下

f7dfd46a8c2440dd8f404bcef5e688db.png

代码如下

Java类

  1. package com.example.picture;
  2. import androidx.appcompat.app.AppCompatActivity;
  3. import android.graphics.Bitmap;
  4. import android.graphics.BitmapFactory;
  5. import android.os.Bundle;
  6. import android.view.View;
  7. import android.widget.AdapterView;
  8. import android.widget.ArrayAdapter;
  9. import android.widget.Spinner;
  10. import com.example.picture.util.DateUtil;
  11. import com.example.picture.widget.DecorateImageView;
  12. public class ImageDecorateActivity extends AppCompatActivity {
  13. private DecorateImageView div_scene; // 声明一个装饰视图对象
  14. @Override
  15. protected void onCreate(Bundle savedInstanceState) {
  16. super.onCreate(savedInstanceState);
  17. setContentView(R.layout.activity_image_decorate);
  18. div_scene = findViewById(R.id.div_scene);
  19. initDecorateSpinner(); // 初始化装饰类型下拉框
  20. }
  21. // 初始化装饰类型下拉框
  22. private void initDecorateSpinner() {
  23. ArrayAdapter<String> decorateAdapter = new ArrayAdapter<>(this,
  24. R.layout.item_select, decorateNameArray);
  25. Spinner sp_decorate = findViewById(R.id.sp_decorate);
  26. sp_decorate.setPrompt("请选择装饰类型");
  27. sp_decorate.setAdapter(decorateAdapter);
  28. sp_decorate.setOnItemSelectedListener(new DecorateSelectedListener());
  29. sp_decorate.setSelection(0);
  30. }
  31. private String[] decorateNameArray = {"无装饰", "时间戳装饰", "标志图装饰", "相框装饰"};
  32. class DecorateSelectedListener implements AdapterView.OnItemSelectedListener {
  33. public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
  34. if (arg2 == 0) { // 无装饰
  35. div_scene.showNone(); // 不显示任何装饰
  36. } else if (arg2 == 1) { // 时间戳装饰
  37. String text = DateUtil.getNowFullDateTime();
  38. div_scene.showText(text, true); // 显示装饰文本
  39. } else if (arg2 == 2) { // 标志图装饰
  40. Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.flower_lotus);
  41. div_scene.showLogo(bitmap, true); // 显示装饰标志
  42. } else if (arg2 == 3) { // 相框装饰
  43. Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.photo_frame1);
  44. div_scene.showFrame(bitmap, true); // 显示装饰相框
  45. }
  46. }
  47. public void onNothingSelected(AdapterView<?> arg0) {}
  48. }
  49. }

XML文件

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:orientation="vertical" >
  5. <LinearLayout
  6. android:layout_width="match_parent"
  7. android:layout_height="40dp"
  8. android:orientation="horizontal" >
  9. <TextView
  10. android:layout_width="wrap_content"
  11. android:layout_height="match_parent"
  12. android:paddingLeft="5dp"
  13. android:gravity="center"
  14. android:text="图像装饰类型:"
  15. android:textColor="@color/black"
  16. android:textSize="17sp" />
  17. <Spinner
  18. android:id="@+id/sp_decorate"
  19. android:layout_width="0dp"
  20. android:layout_height="wrap_content"
  21. android:layout_weight="1"
  22. android:spinnerMode="dialog" />
  23. </LinearLayout>
  24. <com.example.picture.widget.DecorateImageView
  25. android:id="@+id/div_scene"
  26. android:layout_width="match_parent"
  27. android:layout_height="270dp"
  28. android:src="@drawable/ylxs" />
  29. </LinearLayout>

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

发表评论

表情:
评论列表 (有 0 条评论,29人围观)

还没有评论,来说两句吧...

相关阅读