今天來寫一個QRCode相機~

關於QRCode這件事喔..我其實一直覺得某種意義上來說台灣好像沒有把這項技術廣泛地用在日常生活中

還是說只是因為台中太落後都沒在用

不要瞎掰好嗎~「基德哏」網路正夯經典台詞鄉民都會背| ETtoday網搜新聞| ETtoday新聞雲

 

並沒有!好嗎!( ・ὢ・ )

 

不過我也不是真的都亂講啦

不過中國大陸那邊的確是比較把"二維碼"這個技術用得比較普及就是了

像是支付寶啊、WeChat等等,都還蠻常看到的

反而是Line的QR-Code登入還比他晚出現..( ゚Д゚)

 

Okay,那麼今天我想來做的事就是在Android裝置上寫一個QR-Code掃瞄器

我記得我最早在用QR-Code掃瞄器時是我碩班時期指導大學專題生做的題目

當時我們做了一套類似無人商店倉儲管理系統的東西

還為了那個東西特別去搞了一台機械手臂,哈哈~

 

後來我記得成績還不錯,不過很可惜出去比賽沒有拿獎

所以姑且~我也是拿我N年前洗的東西來重做一遍XDDD

來看功能吧!

 

程式超簡單~沒有Git!

 


 

1. 載入第三方庫以及權限

 

這次的內容我是使用了一個第三方函式庫套件"barcodescanner zxing"

這個套件非常廣泛,從製造到掃描都有給他放進去

那今天我們只做掃描的部分

總之,先來載入吧

 

1.1 載入庫

首先先給你他的連結

https://github.com/dm77/barcodescanner

 

再來來載入囉

請打開build.gradle,並找到dependencies

截圖 2020-12-26 下午3.02.02

 

dependencies輸入以下內容

截圖 2020-12-26 下午3.03.01

implementation 'me.dm7.barcodescanner:zxing:1.9.13'

 

最後按下右上角Sync Now即完成

截圖 2020-12-26 下午3.04.11

 

1.2 撰寫取得相機權限

 

因為掃描QR-Code基本上就是用相機拍攝

因此我們也必須取得Android的相機權限才能夠使用

2020的現在,基本上大家的手機也都至少7.0以上了吧...吧...吧....應該( ´_ゝ`)

 

所以權限機制幾乎都大同小異

 

那麼,請移至AndroidManifest.xml資料夾

截圖 2020-12-26 下午3.08.38

 

再來請加入以下粉底白字內容

 

AndroidManifest.xml

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

    <uses-permission android:name="android.permission.CAMERA" />

    <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/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

 

最後開啟MainActivity.java這個檔案

輸入以下

public class MainActivity extends AppCompatActivity {
    

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        //取得相機權限
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M &&
                ActivityCompat.checkSelfPermission(this
                        , Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
            ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.CAMERA},
                    100);
        }else{
            

        }
    }
    
    /**取得權限回傳*/
    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);

        if (requestCode == 100 && grantResults[0] ==0){
            openQRCamera();
        }else{
            Toast.makeText(this, "權限勒?", Toast.LENGTH_SHORT).show();
        }
    }
    
}

 

這時候執行一下,就可以看到權限訪問的畫面囉

Screenshot_1608966763

 


 

2. 畫介面

 

我希望最後出來是這樣的介面

上半部是一掃瞄器,而直接在下半部顯示掃描結果

Screenshot_1608967088

於是我的介面這樣寫,沒什麼困難的

直接PO吧 :D

截圖 2020-12-26 下午3.24.14

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    tools:context=".MainActivity">

    <me.dm7.barcodescanner.zxing.ZXingScannerView
        android:id="@+id/ZXingScannerView_QRCode"
        android:layout_width="0dp"

        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView_Result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Wait for scan"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ZXingScannerView_QRCode" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.6" />

</androidx.constraintlayout.widget.ConstraintLayout>

 


 

3. 撰寫主要功能

 

Okay,畫好介面後就來撰寫主要功能

我直接PO全部,在講重點(事實上大家都馬程式碼摳走後就不會看重點了XDDDDD)

 

MainActivity.java

public class MainActivity extends AppCompatActivity implements ZXingScannerView.ResultHandler {
    ZXingScannerView zXingScannerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //找到介面
        zXingScannerView = findViewById(R.id.ZXingScannerView_QRCode);
        //取得相機權限
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M &&
                ActivityCompat.checkSelfPermission(this
                        , Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
            ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.CAMERA},
                    100);
        }else{
            //若先前已取得權限,則直接開啟
            openQRCamera();

        }
    }
    /**開啟QRCode相機*/
    private void openQRCamera(){
        zXingScannerView.setResultHandler(this);
        zXingScannerView.startCamera();
    }
    /**取得權限回傳*/
    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);

        if (requestCode == 100 && grantResults[0] ==0){
            openQRCamera();
        }else{
            Toast.makeText(this, "權限勒?", Toast.LENGTH_SHORT).show();
        }
    }
    /**關閉QRCode相機*/
    @Override
    protected void onStop() {
        zXingScannerView.stopCamera();
        super.onStop();
    }
    /**取得QRCode掃描到的物件回傳*/
    @Override
    public void handleResult(Result rawResult) {
        TextView tvResult = findViewById(R.id.textView_Result);
        tvResult.setText(rawResult.getText());
        //ZXing相機預設掃描到物件後就會停止,以此這邊再次呼叫開啟,使相機可以為連續掃描之狀態
        openQRCamera();
    }
}

 

幾個重點,粉底白字的部分就是呼叫開啟QR-Code相機

再來紫底白字的部分就是真正開啟相機的部分

請注意⚠️一定要呼叫.setResultHandler(this);不然無法取得回傳喔!

最後,綠底白字的部分就是在退出APP關閉相機

 

還有一個特別要注意的就是⚠️

在回傳掃描結果的部分,要再呼叫一次開啟相機

否則相機的預設是掃到了物件後就會停止功能喔(-‿◦)

最後執行一下,寫完收工!(´◑ω◐`)

 


 

這次的內容很簡單,程式沒幾行

因為真正複雜的套件都幫你寫好了XD

不過即使簡單,像我這樣以前寫過的人都還要翻一下資料就是了...

那麼這篇文章到此,希望對你有幫助~

TK

arrow
arrow

    碼農日常 發表在 痞客邦 留言(10) 人氣()