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

Android实战_note1(MyMirror_一款小型摄像处理的App)

2018-08-23 779
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 最近在实战做明日科技的一个叫《魔镜》的APP，接触到不少有趣的技能tip，这里记录一下。功能点主要有启动页、摄像头设置、亮度调节、相机焦距调节。界面选择换镜框、吹气起雾、长安碎屏、摇一摇换镜框、系统帮助等子功能，博客会陆续更近本文自觉有些有趣的地方（这里仅做摘要，详见文中）：handler.

最近在实战做明日科技的一个叫《魔镜》的APP，接触到不少有趣的技能tip，这里记录一下。功能点主要有启动页、摄像头设置、亮度调节、相机焦距调节。界面选择换镜框、吹气起雾、长安碎屏、摇一摇换镜框、系统帮助等子功能，博客会陆续更近

本文自觉有些有趣的地方（这里仅做摘要，详见文中）：
  • handler.sendEmptyMessageDelayed()
  • 1.3 中的修改全局配置文件 AndroidManifest.xml
  • name属性表示颜色变量名，在java中调用时就是调用这个名称；#3F51B5表示颜色值；调用格式为@color/setbackground。其中颜色值可以直接在xml中输入，或者点击色块，在弹出窗口中进行选择或输入设置;（如文《资源准备1：颜色资源》中图）
  • 资源准备4：styles样式资源
    MyTheme表示样式的名称，
    android:windowFrame表示窗口的背景颜色，
    android:windowBackground表示窗口的背景图片，
    android:windowIsTranslucent表示窗口是否显示，
    android:windowNoTitle表示窗口是否有标题
  • 一般情况，除了直接使用放在drawable目录下的图片，其实drawable的用法都与XML有关，使用shape、layer-list等标签绘制一些背景，还可以通过selector标签定义view的状态效果。
  • ImageView.ScaleType设置图解

功能点1.快速构建启动页：

此时目录结构：


img_2a5bf3f834d667fd057fb2046c36a3ec.png



1.1 Activity.java全文：
注意代码中的注释，其中 handler.sendEmptyMessageDelayed(1,3000); 这个方法比较有趣

package com.example.mymirror.activity;

import android.content.Intent;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;

import com.example.mymirror.MainActivity;
import com.example.mymirror.R;

public class GuideActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        handler.sendEmptyMessageDelayed(1,3000);//传递what值为1的，空消息，延迟3秒
    }
    //消息处理，接收消息
    private Handler handler = new Handler(new Handler.Callback() {
        @Override
        public boolean handleMessage(Message msg) {
            if (msg.what == 1){
                //创建意图
                Intent intent = new Intent(GuideActivity.this, MainActivity.class);
                startActivity(intent);//跳转界面
                finish();//关闭界面
            }
            return false;
        }
    });

    //屏蔽返回键
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK){
            return false;
        }
        return false;
    }
}

1.2 布局问价设置背景图片：

android:background="@mipmap/background"

全文：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/background"
    tools:context="com.example.mymirror.activity.GuideActivity">

</android.support.constraint.ConstraintLayout>

1.3 修改全局配置文件 AndroidManifest.xml

img_01c80d7985fc82cd27351fd2ca4faf4e.png 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.mymirror">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar">
        <activity android:name=".activity.GuideActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity"></activity>
    </application>

</manifest>

到此，运行程序，结果：启动页界面停顿3秒后，切到MainActivity上：

img_e5b1226c4e9eab54356e22b82b64860e.png
启动页

img_f2ab9ac94b58f752aec2672bc6af25e2.png
停顿3秒后，切到MainActivity上

2.主窗体模块设计

资源准备1：颜色资源
打开app/res/values目录下的colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="setbackground">#a6000000</color>
    <color name="white">#FFFFFF</color>
    <color name="setbackground2">#3FFFFFFF</color>
    <color name="setbackground3">#00000000</color>
    <color name="setbackground4">#7e000000</color>
</resources>

name属性表示颜色变量名，在java中调用时就是调用这个名称；#3F51B5表示颜色值；调用格式为@color/setbackground。其中颜色值可以直接在xml中输入，或者点击下图框中的色块，在弹出窗口中进行选择或输入设置：

img_ba33ffbab0d7f77164c561b9e7e42c57.png

img_559cc6efb3df539aa88d82b57c7a81ca.png

资源准备2：尺寸资源

调用格式为@dimen/dp_0

img_0908786a4dddcfc813d8d4d588e367b2.png 
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--尺寸资源 -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="dp_0">0dp</dimen>
    <dimen name="dp_3">3dp</dimen>
    <dimen name="dp_5">5dp</dimen>
    <dimen name="dp_10">10dp</dimen>
    <dimen name="dp_18">18dp</dimen>
    <dimen name="dp_20">20dp</dimen>
    <dimen name="dp_30">30dp</dimen>
    <dimen name="dp_45">45dp</dimen>
    <dimen name="dp_55">55dp</dimen>
    <dimen name="dp_160">160dp</dimen>
    <dimen name="dp_200">200dp</dimen>
    <dimen name="dp_300">300dp</dimen>
</resources>

资源准备3：字符串资源

img_5f593dadcae51fcbbcaaa6d0adde1a5c.png 

<resources>
    <string name="app_name">MyMirror</string>
    <string name="back_txt">返回</string>
</resources>

资源准备4：styles样式资源

MyTheme表示样式的名称，
android:windowFrame表示窗口的背景颜色，
android:windowBackground表示窗口的背景图片，
android:windowIsTranslucent表示窗口是否显示，
android:windowNoTitle表示窗口是否有标题

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="MyTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowFrame">@android:color/transparent</item>
        <item name="android:windowBackground">@color/setbackground4</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowNoTitle">true</item>
    </style>
</resources>

资源准备5：drawable图片资源

一般情况，除了直接使用放在drawable目录下的图片，其实drawable的用法都与XML有关，使用shape、layer-list等标签绘制一些背景，还可以通过selector标签定义view的状态效果。

img_97f4a4a684a1bc1fee9b8ac7311a639f.png 
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:drawable="@drawable/back_shape_pink"/>
    <item android:state_pressed="true" android:drawable="@drawable/back_shape_white"/>
</selector>



img_734beadd13971a3b0d4154b782e3f5f0.png 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--实心 -->
    <solid android:color="@color/setbackground2"/>
    <!--描边 -->
    <stroke android:color="@color/white"
        android:width="@dimen/dp_3"/>
    <!--圆角 -->
    <corners android:radius="@dimen/dp_20"/>
    <!--间隔 -->
    <padding android:left="@dimen/dp_10"
        android:top="@dimen/dp_5"
        android:bottom="@dimen/dp_5"
        android:right="@dimen/dp_10"/>
</shape>



img_ce0da1be511987c7359583e934dbc28c.png 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/setbackground2"/>
    <stroke android:color="@color/colorAccent"
        android:width="@dimen/dp_3"/>
    <corners android:radius="@dimen/dp_20"/>
    <padding android:left="@dimen/dp_10"
        android:top="@dimen/dp_5"
        android:bottom="@dimen/dp_5"
        android:right="@dimen/dp_10"/>
</shape>

资源准备6：mipmap资源（项目完成后附上码云地址）

img_040cde4aaa9197523b7a0612181de9ec.png

主窗体布局：

即activity_main.xml布局，布局设计框架如下：

img_910b68d9f34e2aeda806b1a8f1c04a7b.png 

        <!--SurfaceView控件，主界面最底层的显示区域，用来显示摄像头的内容-->
            <!--PictureView：自定义控件，在此控件上完成镜框更换的功能，布满整个显示区域-->
            <!--FunctionView：自定义控件，功能组合控件，将系统帮助、选择相框和亮度调节等3个功能组合到一起，形成主界面顶部功能区-->
            <!--LinearLayout布局：底部焦距调节功能-->
                <!--缩小焦距按钮-->
                <!--拖动条控件-->
                <!--放大焦距按钮-->
            <!--DrawView：吹雾擦雾图层-->

activity_main.xml全文：

附：ImageView.ScaleType设置图解

<?xml version="1.0"  encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.MainActivity">
    <!--此处添加主界面上的布局组件 -->
    <SurfaceView
        android:id="@+id/surface"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <com.example.mymirror.view.PictureView
        android:id="@+id/picture"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"/>
    <com.example.mymirror.view.FunctionView
        android:id="@+id/function"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <LinearLayout
        android:id="@+id/bottom_bar"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:padding="@dimen/dp_10">
        <!-- 放大、缩小按钮和拖动条布局代码-->
        <ImageView
            android:id="@+id/minus"
            android:layout_marginLeft="@dimen/dp_30"
            android:layout_width="@dimen/dp_45"
            android:layout_height="@dimen/dp_45"
            android:src="@mipmap/downsmall"
            android:scaleType="centerInside"/>
        <SeekBar
            android:id="@+id/seekbar"
            android:layout_width="@dimen/dp_0"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:progress="0"
            android:thumbOffset="@dimen/dp_0"/>
        <ImageView
            android:id="@+id/add"
            android:layout_marginRight="@dimen/dp_30"
            android:layout_width="@dimen/dp_45"
            android:layout_height="@dimen/dp_45"
            android:src="@mipmap/uplarge"
            android:scaleType="centerInside"/>
    </LinearLayout>
    <com.example.mymirror.view.DrawView
        android:id="@+id/draw_glasses"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"/>

</RelativeLayout>

Design界面显示：

img_e93d6cdedb5ec8e3d9e789aa06baef73.png

创建view包，在包中添加PictureView、FunctionView、DrawView三个java文件用于描述自定义控件：

img_78915366f7b03838841394b2b9a1345c.png

layout文件夹下创建文件view_function.xml，存放顶部功能栏布局：

img_73fa79ad3209bb8e6a65be319d3d699c.png 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="@dimen/dp_10"
    android:background="@color/setbackground"
    android:gravity="center">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_30">
        <!--  问号 按钮-->
        <ImageView
            android:id="@+id/hint"
            android:layout_centerVertical="true"
            android:layout_width="@dimen/dp_45"
            android:layout_height="@dimen/dp_45"
            android:scaleType="centerInside"
            android:src="@mipmap/hint"/>
        <!--  选择相框 按钮-->
        <ImageView
            android:id="@+id/choose"
            android:layout_width="@dimen/dp_45"
            android:layout_height="@dimen/dp_45"
            android:layout_centerVertical="true"
            android:src="@mipmap/choose"
            android:scaleType="centerInside"
            android:layout_alignParentRight="true"/>
        <!--  灯泡图标-->
        <ImageView
            android:id="@+id/cencer"
            android:layout_width="@dimen/dp_45"
            android:layout_height="@dimen/dp_45"
            android:src="@mipmap/light"
            android:scaleType="centerInside"
            android:layout_centerInParent="true"/>
        <!--  减亮度 按钮-->
        <ImageView
            android:id="@+id/light_down"
            android:layout_width="@dimen/dp_45"
            android:layout_height="@dimen/dp_45"
            android:layout_centerVertical="true"
            android:src="@mipmap/downlight"
            android:scaleType="centerInside"
            android:layout_toLeftOf="@+id/cencer"
            android:layout_marginRight="@dimen/dp_20"/>
        <!--  加亮度 按钮-->
        <ImageView
            android:id="@+id/light_up"
            android:layout_width="@dimen/dp_45"
            android:layout_height="@dimen/dp_45"
            android:layout_centerVertical="true"
            android:src="@mipmap/uplight"
            android:scaleType="centerInside"
            android:layout_toRightOf="@+id/cencer"
            android:layout_marginLeft="@dimen/dp_20"/>
    </RelativeLayout>

</LinearLayout>

对应预览图：

img_2bcd7723b0363ec4843bed103cd93749.png

FunctionView全文：

package com.example.mymirror.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

/**
 * Created by 700 on 2018/8/23.
 */

public class FunctionView extends LinearLayout implements View.OnClickListener{
    private LayoutInflater mInflater;//声明寻找XML文件类
    private ImageView hint,choose,down,up;//控件对象
    /**
     * 回调接口，4个按钮
     */
    private onFunctionViewItemClickListener listener;
    public interface onFunctionViewItemClickListener{
        void hint();//提示
        void choose();//选择相框
        void down();//减少亮度
        void up();//增加亮度
    }
    /**
     * 初始化构造函数
     */
    public FunctionView(Context context) {
        super(context);
    }

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

    public FunctionView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void onClick(View v) {
        
    }

    public void setOnFunctionViewItemClickListener(onFunctionViewItemClickListener monFunctionViewItemClickListener){
        this.listener = monFunctionViewItemClickListener;//设置监听对象
    }
}

PictureView全文：

package com.example.mymirror.view;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;


/**
 * Created by 700 on 2018/8/23.
 */

public class PictureView extends ImageView {
    public PictureView(Context context) {
        super(context);
    }

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

    public PictureView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

DrawView全文：

package com.example.mymirror.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by 700 on 2018/8/23.
 */

public class DrawView extends View{
    public DrawView(Context context) {
        super(context);
    }

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

    public DrawView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

运行结果：


img_0389e5bd52438bd8b7c29bba0a257294.png
文章标签：
Android开发
数据格式
XML
Java
关键词：
Android实战
Android app
APP android
APP实战
Android摄像
李蔚蓬
目录
相关文章
Ant.Dream
|
4天前
|
缓存 数据处理 Android开发
Android经典实战之Kotlin常用的 Flow 操作符
本文介绍 Kotlin 中 `Flow` 的多种实用操作符，包括转换、过滤、聚合等，通过简洁易懂的例子展示了每个操作符的功能，如 `map`、`filter` 和 `fold` 等，帮助开发者更好地理解和运用 `Flow` 来处理异步数据流。
Ant.Dream
35 4
Ant.Dream
|
4天前
|
API Android开发 开发者
Android经典实战之使用ViewCompat来处理View兼容性问题
本文介绍Android中的`ViewCompat`工具类，它是AndroidX库核心部分的重要兼容性组件，确保在不同Android版本间处理视图的一致性。文章列举了设置透明度、旋转、缩放、平移等功能，并提供了背景色、动画及用户交互等实用示例。通过`ViewCompat`，开发者可轻松实现跨版本视图操作，增强应用兼容性。
Ant.Dream
26 5
Ant.Dream
|
1天前
|
Linux Android开发 iOS开发
Android经典实战之Kotlin Multiplatform跨平台开发
KMP（Kotlin Multiplatform）是由JetBrains开发的开源技术，让开发者能在多平台间高效重用代码，保留原生编程优势。适用于Android/iOS应用、多平台库及桌面应用开发。KMP支持代码共享、预期与实际声明机制，具备灵活性、稳定性和性能优势。通过Compose Multiplatform可实现跨平台UI共享。开发者可访问官方文档开始学习。
Ant.Dream
8 1
Ant.Dream
|
9天前
|
缓存 API Android开发
Android经典实战之Kotlin Flow中的3个数据相关的操作符：debounce、buffer和conflate
本文介绍了Kotlin中`Flow`的`debounce`、`buffer`及`conflate`三个操作符。`debounce`过滤快速连续数据，仅保留指定时间内的最后一个；`buffer`引入缓存减轻背压；`conflate`仅保留最新数据。通过示例展示了如何在搜索输入和数据流处理中应用这些操作符以提高程序效率和用户体验。
Ant.Dream
24 6
Ant.Dream
|
7天前
|
API Android开发 开发者
Android经典实战之用WindowInsetsControllerCompat方便的显示和隐藏状态栏和导航栏
本文介绍 `WindowInsetsControllerCompat` 类，它是 Android 提供的一种现代化工具，用于处理窗口插入如状态栏和导航栏的显示与隐藏。此类位于 `androidx.core.view` 包中，增强了跨不同 Android 版本的兼容性。主要功能包括控制状态栏与导航栏的显示、设置系统窗口行为及调整样式。通过 Kotlin 代码示例展示了如何初始化并使用此类，以及如何设置系统栏的颜色样式。
Ant.Dream
32 2
如夜了我衣衫太薄便归家靠路灯
|
7天前
|
开发工具 Android开发
uniapp 安卓app 调起微信app 授权登录
uniapp 安卓app 调起微信app 授权登录
如夜了我衣衫太薄便归家靠路灯
19 1
旺仔大牛
|
7天前
|
Android开发
将AAB(Android App Bundle)转换为APK
将AAB(Android App Bundle)转换为APK
旺仔大牛
18 1
旺仔大牛
|
7天前
|
开发工具 Android开发
上架Google Play报错:For new apps, Android App Bundles must be signed with an RSA key.
上架Google Play报错:For new apps, Android App Bundles must be signed with an RSA key.
旺仔大牛
20 1
Ant.Dream
|
7天前
|
API Android开发 Kotlin
Android实战经验分享之如何获取状态栏和导航栏的高度
在Android开发中，掌握状态栏和导航栏的高度对于优化UI布局至关重要。本文介绍两种主要方法：一是通过资源名称获取，简单且兼容性好；二是利用WindowInsets，适用于新版Android，准确性高。文中提供了Kotlin代码示例，并对比了两者的优缺点及适用场景。
Ant.Dream
53 1
旺仔大牛
|
8天前
|
Android开发
Cannot create android app from an archive...containing both DEX and Java-bytecode content
Cannot create android app from an archive...containing both DEX and Java-bytecode content
旺仔大牛
11 2

热门文章

最新文章

  • 1
    安卓逆向系列教程 4.8 去广告 II
  • 2
    Android获取移动设备IP地址
  • 3
    android 四种堆状态
  • 4
    Android 腾讯热修复 Tinker + Flutter
  • 5
    【移动开发】Android应用程序中实用的代码框架（一）
  • 6
    Android应用程序键盘（Keyboard）消息处理机制分析（5）
  • 7
    Android拖拽教程
  • 8
    Android中Service的使用详解和注意点（LocalService）
  • 9
    解决genemotion模拟器冲突导致的Android Studio无法启动ADB的问题
  • 10
    [Android]使用Kotlin+Anko开发Android（一）
  • 1
    【专栏：HTML与CSS前端技术趋势篇】HTML与CSS在PWA（Progressive Web Apps）中的应用
    68
  • 2
    【Flutter前端技术开发专栏】Flutter中的混合应用(Hybrid Apps)开发
    91
  • 3
    浅蓝色的APP下载界面HMTL源码
    47
  • 4
    【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法
    286
  • 5
    【专栏】从网页轻松转换为应用越来越便捷
    98
  • 6
    Serverless 应用引擎操作报错合集之阿里函数计算中出现'python app.py'的错误如何解决
    57
  • 7
    Java智慧工地云平台源码带APP SaaS模式 支持私有化部署和云部署
    96
  • 8
    [AI 阿里 EMO] 集成进通义千问app，全民演唱，人人可用！
    434
  • 9
    react-app框架——使用monaco editor实现online编辑html代码编辑器
    194
  • 10
    【SpringBoot】Error starting ApplicationContext. To display the conditions report re--run your app
    170

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 星轨-钉钉APP分发实训
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS