EditText实现大众(登录/注册)输入框,TextView实现仿CheckBox效果

757 查看


我想很多人看到上图红框中的部分的实现第一反应就是使用CheckBox控件来实现,博主在一开始也是这么去做的,但是后来用不同的手机去做测试的时候发现checkbox对适配表现的很差劲,文字与图片的距离很不好控制,后来项目组长告诉我直接用去TextView去实现,试了才知道其实用TextView去实现很简单。代码:
viewheader.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rl_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_homepage_header" >

<LinearLayout
    android:id="@+id/ll_header_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="10sp" >

    <Button
        android:id="@+id/btn_header_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_header_back" />
</LinearLayout>

<TextView
    android:id="@+id/tv_header_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:textColor="@color/white"
    android:textSize="25sp" />

 </RelativeLayout>

activity_register.xml:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg_homepage_middle"
android:orientation="vertical" >

<include layout="@layout/view_header" /><!--项目中经常用到include控件,减少重复代码-->

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="13dp"
    android:paddingRight="13dp"
    android:paddingTop="13dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_complaint_username" >  <!--后来想想其实把这个属性放替换到EditText中也是可以实现这个效果的,并且还少了层布局-->

        <EditText
            android:id="@+id/edt_register_username"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15sp"
            android:background="@null"
            android:drawableLeft="@drawable/icon_username"
            android:drawablePadding="20sp"      <!-- 用于控制EditText上图片与文字之间的距离-->
            android:ems="8"
            android:hint="@string/edt_register_name"
            android:textSize="15sp"
            android:inputType="text"
            android:singleLine="true" />
    </RelativeLayout>

    <ImageView                            <!--上下EditText之间的分割线-->
        android:id="@+id/divider_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_complaint_divider"
        android:contentDescription="@null" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_complaint_phone" >

        <EditText
            android:id="@+id/edt_register_phone"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15sp"
            android:layout_marginRight="15sp"
            android:background="@null"
            android:drawableLeft="@drawable/icon_phone"
            android:drawablePadding="20sp"
            android:ems="8"
            android:textSize="15sp"
            android:hint="@string/hint_your_phone"
            android:inputType="phone"
            android:singleLine="true" />
    </RelativeLayout>

    <ImageView
        android:id="@+id/divider_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_complaint_divider"
        android:contentDescription="@null" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_complaint_platenumber" >

        <EditText
            android:id="@+id/edt_register_password"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15sp"
            android:layout_marginRight="15sp"
            android:background="@null"
            android:drawableLeft="@drawable/icon_password"
            android:drawablePadding="20sp"
            android:ems="8"
            android:textSize="15sp"
            android:hint="@string/tv_register_password_1"
            android:inputType="textPassword"
            android:singleLine="true" />
    </RelativeLayout>

    <ImageView
        android:id="@+id/divider_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_complaint_divider"
        android:contentDescription="@null" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_complaint_4s" >

        <EditText
            android:id="@+id/edt_user_repassword"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15sp"
            android:layout_marginRight="15sp"
            android:background="@null"
            android:drawableLeft="@drawable/icon_password"
            android:drawablePadding="20sp"
            android:ems="8"
            android:textSize="15sp"
            android:hint="@string/tv_register_repassword"
            android:inputType="textPassword"
            android:singleLine="true" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp" >

        <RelativeLayout
            android:id="@+id/rl_edt_code"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_edt_code" >

            <EditText
                android:id="@+id/edt_verify_code"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="15sp"
                android:layout_marginRight="15sp"
                android:background="@null"
                android:drawableLeft="@drawable/icon_code"
                android:drawablePadding="20sp"
                android:ems="8"
                android:textSize="15sp"
                android:hint="@string/edt_register_code"
                android:inputType="text"
                android:singleLine="true" />
        </RelativeLayout>

        <Button
            android:id="@+id/get_verify_code"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:background="@drawable/bg_btn_getcode"
            android:text="@string/btn_register_code"
            android:textColor="@color/steeblue2" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal"
        android:padding="8dp" >

        <TextView
            android:id="@+id/check_if_read"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="13sp"
            android:drawableLeft="@drawable/bg_if_read_yes"  <!--TextView中仍然可以用drawablePadding来控制图片与文本之间的距离-->
            android:clickable="true"   <!--事实证明这个属性在这里可有可无-->
            android:text="@string/tv_if_read" />

        <TextView
            android:id="@+id/tv_article"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tv_article"
            android:textSize="14sp"
            android:textColor="@color/steelblue" />
    </LinearLayout>

    <Button
        android:layout_marginTop="30dp"
        android:id="@+id/btn_submit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:text="@string/btn_determine"
        android:textColor="@color/white"
        android:background="@drawable/bg_register_submit"
        />
</LinearLayout>

</LinearLayout>

RegisterActivity.java:

public class RegisterActivity extends Activity {
private TextView tv_header;
private TextView tv_check;
private Button btn_back;
private boolean flag = true;

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

private void initHeader() {
    tv_header = (TextView) findViewById(R.id.tv_header_title);
    tv_check = (TextView) findViewById(R.id.check_if_read);
    tv_header.setText(R.string.btn_register);
    tv_check.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            if (flag == false) {
                tv_check.setCompoundDrawablesWithIntrinsicBounds(          
                        R.drawable.bg_if_read_yes, 0, 0, 0);  //这个方法和Drawablexxx属性对应用于动态设置TextView的drawable
                flag = true;
            }else if(flag==true){
                tv_check.setCompoundDrawablesWithIntrinsicBounds(R.drawable.bg_if_read_blank,0,0, 0);
                flag=false;
            }
        }

    });
    btn_back = (Button) findViewById(R.id.btn_header_left);

    btn_back.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            finish();
        }
    });

}

}
Ok就是这些啦