专栏首页Nicky's blogAndroid实现一个自定义相机的界面

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

我们先实现拍照按钮的圆形效果哈,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,这样一个等边的椭圆就做好了

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

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/white" />
        </shape>
    </item>
    <item
        android:bottom="6dp"
        android:left="6dp"
        android:right="6dp"
        android:top="6dp">
        <shape android:shape="oval">
            <solid android:color="@color/blue" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <stroke
                android:width="1dp"
                android:color="@color/blue"
                android:dashWidth="0dp" />
        </shape>
    </item>
</layer-list>

这是一个界面:activity_take_photo.xml

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

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

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

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <!-- 显示预览图形 -->

    <SurfaceView
        android:id="@+id/surfaceView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <RelativeLayout
        android:id="@+id/buttonLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/pic">

        <RelativeLayout
            android:id="@+id/panel_take_photo"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@color/white"
            android:gravity="center_vertical"
            android:padding="2dp">


            <Button
                android:id="@+id/btn_take_photo"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/btn_take_photo"
                android:layout_centerHorizontal="true"
                android:layout_alignTop="@+id/iv_album" />

            <ImageView
                android:id="@+id/iv_album"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:padding="5dp"
                android:src="@drawable/camera_library" />

            <ImageView
                android:id="@+id/title_btn_black"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="20dp"
                android:padding="5dp"
                android:src="@drawable/camera_back" />
        </RelativeLayout>


        <LinearLayout
            android:id="@+id/photo_area"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_above="@id/panel_take_photo"
            android:layout_centerVertical="true"
            android:background="@color/white"
            android:orientation="horizontal"></LinearLayout>

        <!-- 自定义的标题栏-->
        <RelativeLayout
            android:id="@+id/camera_top"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:layout_alignParentTop="true"
            android:background="@color/black">

            <ImageView
                android:id="@+id/btn_black"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_alignParentLeft="true"
                android:paddingBottom="10dp"
                android:paddingLeft="10dp"
                android:paddingTop="10dp"
                android:src="@drawable/back" />

            <ImageView
                android:id="@+id/btn_change"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:paddingBottom="10dp"
                android:paddingRight="10dp"
                android:paddingTop="10dp"
                android:src="@drawable/camera_flip" />

        </RelativeLayout>

        <!-- 自定义的CameraGrid-->
        <org.personality.camera.ui.view.CameraGrid
            android:id="@+id/masking"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/photo_area"
            android:layout_alignParentTop="true" />

        <View
            android:id="@+id/focus_index"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_above="@id/photo_area"
            android:background="@drawable/cam_focus"
            android:visibility="invisible" />
    </RelativeLayout>

</FrameLayout>

提供自定义CameraGrid类:

/**
 * 自定义的View
 * 照相机井字线
 *
 */
public class CameraGrid extends View {

    private int topBannerWidth = 0;
    private Paint mPaint;

    public CameraGrid(Context context) {
        this(context,null);
    }

    public CameraGrid(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init(){
        mPaint = new Paint();
        mPaint.setColor(Color.WHITE);
        mPaint.setAlpha(120);
        mPaint.setStrokeWidth(1f);
    }


    private boolean showGrid = true;

    public boolean isShowGrid() {
        return showGrid;
    }

    public void setShowGrid(boolean showGrid) {
        this.showGrid = showGrid;
    }

    public int getTopWidth() {
        return topBannerWidth;
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用JWT技术解决IM系统Socket长连接的身份认证痛点1、引言2、原作者3、系列文章5、完全搞懂什么是JWT技术6、我们是怎样使用JWT技术的?7、JWT技术的缺点8、点评附录:更多即时通讯方面的文

    本文引用了封宇《JWT技术解决IM系统的认证痛点》一文的部分内容,即时通讯网重新整理、增补和修订,感谢原作者的无私分享。

    JackJiang
  • 安卓开发基础教程-Android多界面应用程序开发

    本套教程主要讲解安卓开发的相关知识,从基础到精通。一方面可以巩固自己所得,另一方面可以帮助对安卓开发感兴趣的朋友。

    做全栈攻城狮
  • 运行时权限

    我们在夸数据共享的时候,遇到危险的权限时候系统会让我们进行是否授权,只有我们授权了才能使用这些权限.比如拨号(可能引起收费的敏感权限)等,这里我们来演示一下调用...

    Dream城堡
  • 窃听风云:扒掉你的最后一条“胖次”

    “每个人的手机都是一部窃听器,不管你开不开机,都能被窃听。”在2009年上映的《窃听风云》中吴彦祖饰演的人物有这样一句台词,随着影片热映,“手机窃听”的问题被更...

    FB客服
  • Android6.0到9.0的适配爬坑总结

      大家还记得Android 6.0权限适配的泪水吗?而现在谷歌已经出了Android P的稳定版,而且谷歌粑粑,为了大家能给辛苦熬夜加班,特地的和个大市场合作...

    用户1269200
  • 程序员带你学习安卓开发系列-Android文件存储

    输入帐号密码,并勾选记住帐号 ,点击登录时,保存帐号信息。下次登陆可以直接显示上次保存的QQ帐号。

    做全栈攻城狮
  • LitePal操作数据库

    Dream城堡
  • Android adb无线调试脚本

    使用adb的无线调试功能十分的方便。 但是实际工作中,总是要手动输入,十分麻烦。所以就把它写成脚本文件。

    deep_sadness
  • 手把手带你快速上手调试Flutter项目

    在讲解调试工具之前,先来看看有关的设置选项,点击菜单栏File-->Settings-->Languages & Frameworks --> Flutter,...

    AWeiLoveAndroid
  • 安卓开发基础教程-使用隐式意图打开系统内置应用,干货

    本教程致力于讲解及快速进行安卓开发的学习。除安卓开发教程之外,还有Python、C#、网站建设、SEO等教程。对电脑技术感兴趣的朋友直接点击上方“关注”。

    做全栈攻城狮

扫码关注云+社区

领取腾讯云代金券