9/09/2560

สร้าง Android Application Scan QR Code โดย Android Studio

จากที่เคย แนะนำการสร้าง Mobile Application สำหรับ Scan QR Code โดยใช้ Ionic กับ Cordova ไปแล้ว นั้นในครั้งนี้จะเป็นการสอนการสร้าง Android Application สำหรับ Scan QR Code แบบ  Native โดยใช้ Android Studio

1. เรียกใช้ Library zxing สำหรับ Scan QR Code ใน build.gradle (module app) ตามรูป


2. กำหนด Permission ให้  Application สามารถเรีกใช้งาน กล้องมือถือได้ 


3. สร้าง Main Activity โดยมี Layout เป็น 

<LinearLayout
    android:gravity="center"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<!--TextView สำหรับแสดง text ข้อความสำหรับ ผลลัพธ์ของ QR Code ที่ scan ได้ -->
    <TextView
        android:textSize="48px"
        android:textAlignment="center"
        android:id="@+id/txtResult"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="QR Code Content" />
<!--ปุ่มสำหรับกดเพื่อ Scan QR Code -->
    <Button
        android:layout_marginTop="20px"
        android:id="@+id/scanBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Scan QR/Barcode" />

</LinearLayout>

4. เขียนคำสั่งใน MainActivity.java
  
   TextView txtResult;//สร้าง object txtResult ที่เป็น TextView

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //กำหนดให้ txtResult มาจาก TextView ที่มี id เป็น txtResult ใน Layout
        txtResult = (TextView)findViewById(R.id.txtResult);
        //กำหนด ชุดคำสั่ง เมื่อ กดปุ่ม ที่มี id เป็น R.id.scanBtn ใน Layout
        Button buttonIntent = (Button)findViewById(R.id.scanBtn);
        buttonIntent.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //เมื่อกดปุ่ม Scan แล้วจะเปิดหน้า Scan QR Code ที่อยู่ใน class ScanActivity
                Intent intent = new Intent(getApplicationContext(),ScanActivity.class);
                startActivityForResult(intent,999);

            }
        });


    }
    //method ที่จะรับข้อความที่ Scan ได้จาก QR Code 
    public void onActivityResult(int requestCode, int resultCode, Intent intent) {


            if (resultCode == RESULT_OK)
            {
                //รับค่าข้อความที่ Scan ได้จาก QR Code
                String contents = intent.getStringExtra("SCAN_RESULT");
                txtResult.setText("Result : " + contents);//แสดงข้อความที่ได้ Scan ใส่ใน Layout
            }

    }

5. สร้าง Activity ใหม่ชื่อ  ScanActivity  ซึ่ง  class ScanActivity จะ implements ZXingScannerView.ResultHandler ซึ่ง มาจาก https://github.com/dm77/barcodescanner





//import library สำหรับ Scan QR Code
import com.google.zxing.Result;
import me.dm7.barcodescanner.zxing.ZXingScannerView;

public class ScanActivity extends AppCompatActivity implements ZXingScannerView.ResultHandler {

    private ZXingScannerView zXingScannerView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scan);

        scan();//เมื่อเปิด Activity มาจะให้ เรียก Method Scan เลย
    }

    public void scan(){ //method scan สำหรับ เปิดกล้องอ่าน QR Code
        zXingScannerView =new ZXingScannerView(getApplicationContext());
        setContentView(zXingScannerView);
        zXingScannerView.setResultHandler(this);
        zXingScannerView.startCamera();

    }

    @Override
    protected void onPause() {
        super.onPause();
        zXingScannerView.stopCamera();
    }


    @Override
    public void handleResult(Result result) {// method ที่จะทำงานเมื่อ scan QR Code แล้ว
        Toast.makeText(getApplicationContext(),result.getText(), Toast.LENGTH_SHORT).show();
        zXingScannerView.stopCamera();

        Intent returnIntent = new Intent();
       //result.getText() คือ string ข้อความที่ได้หลังจาก Scan QRCode
        returnIntent.putExtra("SCAN_RESULT",result.getText());
        //ส่ง string ข้อความ  กลับไปที่ onActivityResult เพื่อแสดงข้อความของ QR Code
        setResult(RESULT_OK,returnIntent);
        finish();

    }
}

ผลลัพธ์ที่ได้คือ


เมื่อรัน App


เมื่อกดปุ่ม Scan QR Code

หลังจาก Scan QR  แล้ว App แสดง string ของ QR Code ตรง result


หากต้องการติดต่อเรียนทำโปรเจคเกี่ยวกับ QR Code สามารถดูข้อมูลได้ที่ www.projectsoft.biz