美文网首页
Zxing自定义界面

Zxing自定义界面

作者: 取了个很好听的名字 | 来源:发表于2019-06-03 15:55 被阅读0次

    需求说明

    在修改了竖屏和二维码框样式,我想更改captureActivity的界面,修改后的界面如下所示:


    自定义界面.jpg

    修改过程

    首先打开capture.xml 删除除了SurfaceView和viewfinderview外的其他控件,并修改界面如下

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:fitsSystemWindows="false"
        >
      <SurfaceView android:id="@+id/preview_view"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          />
      <com.google.zxing.client.android.ViewfinderView
          android:id="@+id/viewfinder_view"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          />
      <android.support.constraint.ConstraintLayout
          android:id="@+id/cl_toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:background="@color/transparent"
          app:layout_constraintTop_toTopOf="parent"
          android:layout_marginTop="25dp"
          >
        <android.support.constraint.ConstraintLayout
            android:id="@+id/cl"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
          <TextView
              android:id="@+id/toolbar_title"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_gravity="center"
              android:text="扫码支付"
              android:textSize="20sp"
              android:textColor="#ffffff"
              app:layout_constraintTop_toTopOf="parent"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              />
          <ImageView
              android:id="@+id/iv_back"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:src="@drawable/arrow_left"
              app:layout_constraintTop_toTopOf="parent"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintHorizontal_bias="0.05"
              />
          <TextView
              android:id="@+id/tv_picture"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="照片"
              android:textSize="15sp"
              android:textColor="#fff"
              app:layout_constraintBottom_toBottomOf="@+id/toolbar_title"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintHorizontal_bias="0.95"
              />
        </android.support.constraint.ConstraintLayout>
      </android.support.constraint.ConstraintLayout>
    
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="将二维码/条形码放入框内,即可扫码"
          android:textSize="14sp"
          android:textColor="#ffff"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintVertical_bias="0.8"
          />
    
    </android.support.constraint.ConstraintLayout>
    

    别忘了依赖constrainLayout的相关包

    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    

    删除land-dpi下capture.xml的布局以及CaptureActivity相关控件的代码,如果显示如下的界面,表示修改成功。


    修改成功后.jpg

    随后删除menu下的capture.xml,CaptureActivity中onCreateOptionsMenu和onOptionsItemSelected方法,修稿后如下显示:


    删除菜单栏.jpg

    增加主题样式AppTheme并替换CaptureActivity的theme,AppTheme如下:

    <style name="AppTheme">
        <!-- 配置app自己的theme -->
        <item name="android:windowBackground">@color/transparent</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:screenOrientation">portrait</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
      </style>
    

    修改样式后的效果如图所示:


    修改主题样式.jpg

    设置状态栏为透明,状态栏我是用的是QMUI的框架

      //qmui
        implementation 'com.qmuiteam:qmui:1.1.2'
    

    CaptureActivity:

     @Override
      public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
    
        Window window = getWindow();
        window.addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
        setContentView(R.layout.capture);
    
        hasSurface = false;
        inactivityTimer = new InactivityTimer(this);
        beepManager = new BeepManager(this);
        ambientLightManager = new AmbientLightManager(this);
    
        //设置状态栏透明
        QMUIStatusBarHelper.translucent(this);
    
      }
    

    最终效果如下:


    最终效果.jpg

    相关文章

      网友评论

          本文标题:Zxing自定义界面

          本文链接:https://www.haomeiwen.com/subject/svpcxctx.html