Android使用自定义view实现标题栏、梯形布局以及二维码扫描

案例效果图：

项目清单文件权限:

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

build.gradle添加依赖

compile 'com.journeyapps:zxing-android-embedded:3.3.0'

要求：

实现如图所示效果，标题栏通过组合View的方式进行实现，统一对外暴露左侧按钮和右侧按钮点击

的方法，在点击右侧的回调方法中跳转到图二所示页面，图二的页面标题栏显示上一个页面组合View

的视图，通过自定义ViewGroup的方式实现梯形布局（下一个视图的起始位置是上一个视图的结束位置）。

图一中间的进度条使用继承自View的方式进行实现，并使用自定义属性的方式来设置进度条中间的颜色。

点击扫描二维码按钮之后，进度条开始以每秒10%的进度进行，当进度条走到100%后，跳转到图三的扫

描二维码页面，实现扫描二维码的功能。

通过组合View的方式实现标题栏

header.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/ib_left"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_centerVertical="true"
        android:src="@drawable/left" />

    <ImageView
        android:id="@+id/ib_right"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/shenfen" />

    <TextView
        android:id="@+id/tv_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />
</RelativeLayout>

Header.java

package com.bwie.tixing;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;


public class Header extends RelativeLayout {
    private TextView mTextView;
    private ImageView ib_right;
    private ImageView ib_left;

    private String titleText;
    private int titleTextColor;
    private float titleTextSize;

    public Header(Context context) {
        super(context);
    }

    public Header(Context context, AttributeSet attrs) {
        super(context, attrs);

        //加载视图的布局
        LayoutInflater.from(context).inflate(R.layout.header,this,true);

        //加载自定义的属性
        TypedArray a=context.obtainStyledAttributes(attrs,R.styleable.Header);
        titleText=a.getString(R.styleable.Header_titleText);
        titleTextColor=a.getColor(R.styleable.Header_titleTextColor, Color.WHITE);
        titleTextSize=a.getDimension(R.styleable.Header_titleTextSize,20f);

        //回收资源，这一句必须调用
        a.recycle();
    }

    /**
     * 此方法会在所有的控件都从xml文件中加载完成后调用
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        //获取子控件
        mTextView= (TextView) findViewById(R.id.tv_header);
        ib_right= (ImageView) findViewById(R.id.ib_right);
        ib_left = findViewById(R.id.ib_left);
        //将从资源文件中加载的属性设置给子控件
        if (!TextUtils.isEmpty(titleText))
            setPageTitleText(titleText);
        setPageTitleTextColor(titleTextColor);
        setPageTitleTextSize(titleTextSize);

    }

    /**
     * 设置标题文字
     * @param text
     */
    public void setPageTitleText(String text) {
        mTextView.setText(text);
    }

    /**
     * 设置标题文字颜色
     * @param color
     */
    public void setPageTitleTextColor(int color) {
        mTextView.setTextColor(color);
    }

    /**
     * 设置标题文字大小
     * @param size
     */
    public void setPageTitleTextSize(float size) {
        mTextView.setTextSize(size);
    }

    /**
     * 设置按钮点击事件监听器
     * @param listener
     */
    public void setOnRightClickListener(OnClickListener listener) {
        ib_right.setOnClickListener(listener);
    }

    public void setOnLeftClickListener(OnClickListener listener) {
        ib_left.setOnClickListener(listener);
    }
}

通过自定义属性实现进度条

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="CirclePercentView">
        <attr name="radius" format="dimension" />
        <attr name="stripeWidth" format="dimension" /><!--色带宽度-->
        <attr name="percent" format="integer" /><!--百分比 最大值为100-->
        <attr name="smallColor" format="color" />&