美文网首页
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