Android系列之实现一个自定义相机的界面

举报
yd_273762914 发表于 2020/12/03 00:38:14 2020/12/03
【摘要】 我们先实现拍照按钮的圆形效果哈,Android开发中,当然可以找美工人员设计图片,然后直接拿进来,不过我们可以自己写代码实现这个效果哈,最常用的的是用layout-list实现图片的叠加,我们这个layout命名为btn_take_photo.xml,这是一个自定义的drawable文件,所以按照规范,我们要将它放在drawable文件夹里 注意:drawable文件夹一般...

我们先实现拍照按钮的圆形效果哈,Android开发中,当然可以找美工人员设计图片,然后直接拿进来,不过我们可以自己写代码实现这个效果哈,最常用的的是用layout-list实现图片的叠加,我们这个layout命名为btn_take_photo.xml,这是一个自定义的drawable文件,所以按照规范,我们要将它放在drawable文件夹里

注意:drawable文件夹一般是来放自定义的drawable文件的,可以将它看成自己写的背景样式等等哦

解释代码:

layer-list里面放3个item,先实现一个白色背景的椭圆,属性android:shape="oval"是实现椭圆的

android:shape=["rectangle" | "oval" | "line" | "ring"]

 shape的形状,默认为矩形,可以设置为矩形(rectangle)、椭圆形(oval)、线性形状(line)、环形(ring)

然后再放入一个item,这个item是一个左右上下都等长的椭圆

ok,这样一个等边的椭圆就做好了

接着再次放入一个一个蓝色背景的椭圆

 


  
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item>
  4. <shape android:shape="oval">
  5. <solid android:color="@color/white" />
  6. </shape>
  7. </item>
  8. <item
  9. android:bottom="6dp"
  10. android:left="6dp"
  11. android:right="6dp"
  12. android:top="6dp">
  13. <shape android:shape="oval">
  14. <solid android:color="@color/blue" />
  15. </shape>
  16. </item>
  17. <item>
  18. <shape android:shape="oval">
  19. <stroke
  20. android:width="1dp"
  21. android:color="@color/blue"
  22. android:dashWidth="0dp" />
  23. </shape>
  24. </item>
  25. </layer-list>

 

 

 

 

 

这是一个界面:activity_take_photo.xml

界面的很简单,这里只是提供参考学习的,解释代码:

SurfaceView是用来拍照用的,注意这个类只要和视频或者拍照的都需要用到,不过项目里一般都是自己写的

这些代码只是参考互相学习,功能的话,自己还在做,所以先提供这些学习的...,希望可以帮助学习的人,然后自己写博客的目的也是对自己学习的技术进行收录和共享,只是本着互相学习的目的


  
  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:background="#ffffff">
  5. <!-- 显示预览图形 -->
  6. <SurfaceView
  7. android:id="@+id/surfaceView"
  8. android:layout_width="match_parent"
  9. android:layout_height="match_parent" />
  10. <RelativeLayout
  11. android:id="@+id/buttonLayout"
  12. android:layout_width="match_parent"
  13. android:layout_height="match_parent"
  14. android:background="@drawable/pic">
  15. <RelativeLayout
  16. android:id="@+id/panel_take_photo"
  17. android:layout_width="fill_parent"
  18. android:layout_height="wrap_content"
  19. android:layout_alignParentBottom="true"
  20. android:background="@color/white"
  21. android:gravity="center_vertical"
  22. android:padding="2dp">
  23. <Button
  24. android:id="@+id/btn_take_photo"
  25. android:layout_width="50dp"
  26. android:layout_height="50dp"
  27. android:background="@drawable/btn_take_photo"
  28. android:layout_centerHorizontal="true"
  29. android:layout_alignTop="@+id/iv_album" />
  30. <ImageView
  31. android:id="@+id/iv_album"
  32. android:layout_width="40dp"
  33. android:layout_height="40dp"
  34. android:layout_alignParentLeft="true"
  35. android:layout_centerVertical="true"
  36. android:layout_marginLeft="20dp"
  37. android:padding="5dp"
  38. android:src="@drawable/camera_library" />
  39. <ImageView
  40. android:id="@+id/title_btn_black"
  41. android:layout_width="40dp"
  42. android:layout_height="40dp"
  43. android:layout_alignParentRight="true"
  44. android:layout_centerVertical="true"
  45. android:layout_marginRight="20dp"
  46. android:padding="5dp"
  47. android:src="@drawable/camera_back" />
  48. </RelativeLayout>
  49. <LinearLayout
  50. android:id="@+id/photo_area"
  51. android:layout_width="fill_parent"
  52. android:layout_height="wrap_content"
  53. android:layout_above="@id/panel_take_photo"
  54. android:layout_centerVertical="true"
  55. android:background="@color/white"
  56. android:orientation="horizontal"></LinearLayout>
  57. <!-- 自定义的标题栏-->
  58. <RelativeLayout
  59. android:id="@+id/camera_top"
  60. android:layout_width="fill_parent"
  61. android:layout_height="40dp"
  62. android:layout_alignParentTop="true"
  63. android:background="@color/black">
  64. <ImageView
  65. android:id="@+id/btn_black"
  66. android:layout_width="wrap_content"
  67. android:layout_height="fill_parent"
  68. android:layout_alignParentLeft="true"
  69. android:paddingBottom="10dp"
  70. android:paddingLeft="10dp"
  71. android:paddingTop="10dp"
  72. android:src="@drawable/back" />
  73. <ImageView
  74. android:id="@+id/btn_change"
  75. android:layout_width="wrap_content"
  76. android:layout_height="fill_parent"
  77. android:layout_alignParentRight="true"
  78. android:layout_centerVertical="true"
  79. android:paddingBottom="10dp"
  80. android:paddingRight="10dp"
  81. android:paddingTop="10dp"
  82. android:src="@drawable/camera_flip" />
  83. </RelativeLayout>
  84. <!-- 自定义的CameraGrid-->
  85. <org.personality.camera.ui.view.CameraGrid
  86. android:id="@+id/masking"
  87. android:layout_width="match_parent"
  88. android:layout_height="match_parent"
  89. android:layout_above="@id/photo_area"
  90. android:layout_alignParentTop="true" />
  91. <View
  92. android:id="@+id/focus_index"
  93. android:layout_width="40dp"
  94. android:layout_height="40dp"
  95. android:layout_above="@id/photo_area"
  96. android:background="@drawable/cam_focus"
  97. android:visibility="invisible" />
  98. </RelativeLayout>
  99. </FrameLayout>

 

提供自定义CameraGrid类:

 


  
  1. /**
  2. * 自定义的View
  3. * 照相机井字线
  4. *
  5. */
  6. public class CameraGrid extends View {
  7. private int topBannerWidth = 0;
  8. private Paint mPaint;
  9. public CameraGrid(Context context) {
  10. this(context,null);
  11. }
  12. public CameraGrid(Context context, AttributeSet attrs) {
  13. super(context, attrs);
  14. init();
  15. }
  16. private void init(){
  17. mPaint = new Paint();
  18. mPaint.setColor(Color.WHITE);
  19. mPaint.setAlpha(120);
  20. mPaint.setStrokeWidth(1f);
  21. }
  22. private boolean showGrid = true;
  23. public boolean isShowGrid() {
  24. return showGrid;
  25. }
  26. public void setShowGrid(boolean showGrid) {
  27. this.showGrid = showGrid;
  28. }
  29. public int getTopWidth() {
  30. return topBannerWidth;
  31. }
  32. }

 

 

 

 

 

 

文章来源: smilenicky.blog.csdn.net,作者:smileNicky,版权归原作者所有,如需转载,请联系作者。

原文链接:smilenicky.blog.csdn.net/article/details/51051104

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200