先看一下效果图
 
 
 
          
 
 
 
1.先自定义一个类 ，继承RelativeLayout
 
public class VerifyCodeView extends RelativeLayout {

    private EditText editText;
    private TextView[] textViews;
    private static int MAX = 6;
    private String inputContent;
    
    public VerifyCodeView(Context context) {
        this(context, null);
    }

    public VerifyCodeView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public VerifyCodeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        View inflate = View.inflate(context, R.layout.view_verify_code, this);

        textViews = new TextView[MAX];
        textViews[0] = (TextView)inflate.findViewById(R.id.tv_0);
        textViews[1] = (TextView) inflate.findViewById(R.id.tv_1);
        textViews[2] = (TextView) inflate.findViewById(R.id.tv_2);
        textViews[3] = (TextView) inflate.findViewById(R.id.tv_3);
        textViews[4] = (TextView) inflate.findViewById(R.id.tv_4);
        textViews[5] = (TextView) inflate.findViewById(R.id.tv_5);
        editText = (EditText) inflate.findViewById(R.id.edit_text_view);

        editText.setCursorVisible(false);//隐藏光标
        setEditTextListener();
    }

    private void setEditTextListener() {
        editText.addTextChangedListener(new TextWatcher() {

            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void afterTextChanged(Editable editable) {
                inputContent = editText.getText().toString();

                if (inputCompleteListener != null) {
                    if (inputContent.length() >= MAX) {
                        inputCompleteListener.inputComplete();
                    } else {
                        inputCompleteListener.invalidContent();
                    }
                }

                for (int i = 0; i < MAX; i++) {
                    if (i < inputContent.length()) {
                        textViews[i].setText(String.valueOf(inputContent.charAt(i)));
                    } else {
                        textViews[i].setText("");
                    }
                }
            }
        });
    }


    private InputCompleteListener inputCompleteListener;

    public void setInputCompleteListener(InputCompleteListener inputCompleteListener) {
        this.inputCompleteListener = inputCompleteListener;
    }

    public interface InputCompleteListener {

        void inputComplete();

        void invalidContent();
    }

    public String getEditContent() {
        return inputContent;
    }
}
 
 
 
2.view_verify_code 布局
 
<?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="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:gravity="center"
        android:orientation="horizontal">


        <TextView
            android:id="@+id/tv_0"
            style="@style/textview_style" />

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/tv_1"
            style="@style/textview_style" />

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/tv_2"
            style="@style/textview_style" />

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/tv_3"
            style="@style/textview_style" />

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/tv_4"
            style="@style/textview_style" />

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/tv_5"
            style="@style/textview_style" />


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:gravity="center"
        android:orientation="horizontal">


        <View
            android:layout_width="41dp"
            android:layout_height="2dp"
            android:layout_gravity="bottom"
            android:background="@color/translucent_white" />

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <View
            android:layout_width="41dp"
            android:layout_height="2dp"
            android:layout_gravity="bottom"
            android:background="@color/translucent_white" />

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <View
            android:layout_width="41dp"
            android:layout_height="2dp"
            android:layout_gravity="bottom"
            android:background="@color/translucent_white" />

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <View
            android:layout_width="41dp"
            android:layout_height="2dp"
            android:layout_gravity="bottom"
            android:background="@color/translucent_white" />

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <View
            android:layout_width="41dp"
            android:layout_height="2dp"
            android:layout_gravity="bottom"
            android:background="@color/translucent_white" />

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <View
            android:layout_width="41dp"
            android:layout_height="2dp"
            android:layout_gravity="bottom"
            android:background="@color/translucent_white" />


    </LinearLayout>

    <com.csdn.demo.MyEditText
        android:id="@+id/edit_text_view"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@android:color/transparent"
        android:textColor="@color/transparent"
        android:longClickable="false"
        android:maxLength="6"
        android:inputType="number" />
</RelativeLayout>
 
 
 
3.再创建一个输入框的类 MyEditText
 
public class MyEditText extends AppCompatEditText {
    private long lastTime = 0;

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

    public MyEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyEditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onSelectionChanged(int selStart, int selEnd) {
        super.onSelectionChanged(selStart, selEnd);
        this.setSelection(this.getText().length());
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                long currentTime = System.currentTimeMillis();
                if (currentTime - lastTime < 500) {
                    lastTime = currentTime;
                    return true;
                } else {
                    lastTime = currentTime;
                }
                break;
        }
        return super.onTouchEvent(event);
    }
}
 
 
 
4.在Style中加入这些样式 直接粘贴进去
 
<style name="textview_style">
        <item name="android:layout_height">48dp</item>
        <item name="android:layout_width">41dp</item>
        <item name="android:background">@color/transparent</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textSize">30dp</item>
        <item name="android:textStyle">bold</item>
    </style>
 
 
 
5.在colors中添加这些 直接粘贴进去
 
    <color name="white">#AAB2CB</color>
    <color name="transparent">#00000000</color>
    <color name="translucent_white">#ddd</color>
 
 
 
6.mainactivity中的布局
 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity"
    android:background="#fff">

    <com.csdn.demo.VerifyCodeView
        android:id="@+id/verify_code_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="80dp"/>

</LinearLayout>
 
 
 
7.MainActivity的代码
 
public class MainActivity extends AppCompatActivity {


    private VerifyCodeView verifyCodeView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        verifyCodeView = findViewById(R.id.verify_code_view);

        verifyCodeView.setInputCompleteListener(new VerifyCodeView.InputCompleteListener() {

            @Override
            public void inputComplete() {

                Toast.makeText(MainActivity.this, ""+ verifyCodeView.getEditContent(), Toast.LENGTH_SHORT).show();

            }

            @Override
            public void invalidContent() {

            }

        });
    }
}
 
 
 
大功告成 ！！！

效果图： 
 
 
交互是：默认第一行黄色，点击一行哪一行就变为黄色 
 动工：拿到效果图的时候，第一反应是用ul，li来布局后来布局完了之后发现点的时候没光标啊！只考虑了布局没考虑到输入的问题。。 
 so返工1> 解决输入，引入input框 
 代码结构：学号/工号文字标签，一个input框，加下面一条横线； 
  
 此时提一下，input的样式，去掉input的边框border及获取焦点的时候去掉光亮边框;
 
input{border: 0px;outline: none;}
//去掉input的边框border及获取焦点的时候去掉光亮边框;
 
交互实现： 
 当此行input获取焦点的时候，寻找它的兄弟节点，文字标签和横线都变色。 
 寻找兄弟节点：
 
<input onfocus="changeColor(this)" onblur="init(this)" />
function getPrevElement(node){  
        if(node.nodeType == 1){  
            return node;  
        }  
        if(node.previousSibling){  
            return getPrevElement(node.previousSibling);  
        }  
        return null;  
    }  
function getNextElement(node){  
        if(node.nodeType == 1){  
            return node;  
        }  
        if(node.nextSibling){  
            return getNextElement(node.nextSibling);  
        }  
        return null;  
    }  

var oP = getPrevElement(obj.previousSibling);
var oLine = getNextElement(obj.nextSibling);
 
等写好交互时，发现，左边的文字标签，右边的验证码图片，布局要配合移动端的自适应，而我当时是拿着设计图的长宽像素直接写的额（这样导致的结果是安卓那边集成之后发现打开这个就如同打开网页一样小！input框输入还会页面放大的那种==）。于是又辗转调css，全部换成百分比，字体也要跟着百分比。 
 <-此乃返工2 
 
对了提一下，放大了input框之后，发现input框的光标好小[相对]！而当时”身在此山中的我”一心想着的是改变光标的位置、大小。。后来才恍悟，设置input里的字体大小就可以了，光标随着变换。
 
然而此时问题又出现了 
  
 我这样的交互方式有个致命的bug就是，用户只能点击input框所在的点才能获取焦点，而人们习惯性的是点击绿色框所在的区域均可获取到输入的焦点。 
 此时解决方案可以是在绿色的整个包裹层加个监听事件。然而我懒（吗？+安卓那边的人有点强势要得急加他们说他们的交互方式是另一种 
 我一看，这简单啊！于是就全部改了&& 
 他们的交互是： 
  
 点击那一行输入的时候那一行原本的提示字（教务处密码等）都不见了。 
 很明显这个是input，提示字是input自带的placeholder。然后设置下placeholder样式、显现即可
 
html：
<body>
    <input type="text" name="number" placeholder="学号/工号" class="active" style="margin-top: 100px;">
    <input type="password" name="password" placeholder="教务处密码" >
    <div class="getcode">
        <input type="text" name="code" placeholder="验证码">
        <span class="codepic"></span>
    </div>
    <a class="Btn">注 册</a>
    <div class="footer">
        iSWUST @2017
    </div>
</body>
 
js代码：
 
var arrInput = document.getElementsByTagName("input");
    var arrText =["学号/工号","教务处密码","验证码"];
    for(var i = 0;i<arrInput.length;i++){
        arrInput[i].index=i;
        arrInput[i].onfocus=function(){//获取焦点
            arrInput[0].className="";//将默认的第一行亮色去掉
            this.className = "active";
        }
        arrInput[i].onblur=function(){//失去焦点
            this.placeholder = arrText[this.index];
            this.className = "";
        }
    }
 
交互的active，点到哪一行哪一行加个active的classname；
 
.active{border-bottom: 2px solid #FFCA28;}
 
对了，还有input里面placeholder的样式：
 
input::-webkit-input-placeholder{color:lightgray;font-size: 46px;}
input.active::-webkit-input-placeholder {color: #FFCA28;}
 
最后，over 
 最最后，没想到一个简简单单的页面如此简洁的元素构成的页面都这么多讲究，平时应该多练习，还有很重要的是，动手写之前就应该想清楚些，页面的构造。要有下棋的意识，走完这一步要想到下好几步。

怎么添加横线
 
元件库中双击引脚在输入名字的时候每一个字母后面加上反斜杠 ‘’ 就可以了。
 例如:
 
 R\E\S\E\T
 
横线的含义
 
取反。

def printo():

    print("------------------")


n = int(input("请输入需要的横线数："))
count = 1
while n >= count:
        printo()
        count+=1
if n < count:
        exit()