（菜鸟篇）：1.android登录界面

来源：互联网发布：淘宝手机卡怎么领取编辑：程序博客网时间：2024/05/21 12:46

大家先看效果图：

1.login.xml

<LinearLayout        android:id="@+id/login_input01"        android:layout_below="@id/zx_text"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_marginTop="50dp"        android:layout_marginLeft="5dp"        android:layout_marginRight="5dp"        android:gravity="center_vertical"android:orientation="horizontal" <span style="color:#cc0000;">android:addStatesFromChildren="true"//这个很重要，</span><span style="color: rgb(204, 0, 0); font-family: Arial, Helvetica, sans-serif; "><em><span style="color:red;">从子控件</span></em></span><span style="color: rgb(204, 0, 0); font-family: Arial, Helvetica, sans-serif; "><u><span style="color:red;"><EditText></span><span style="color:red;">中获取焦点</span></u></span>android:background="@drawable/input_box_selector"><ImageView            android:id="@+id/user_image"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="15dp"            android:layout_marginRight="8dp"            android:background="@drawable/name"            android:clickable="true" /><<span style="color:#ff0000;">EditText</span>            android:id="@+id/user_name"                    android:layout_width="fill_parent"            android:layout_height="40dp"            android:paddingLeft="10dp"            android:maxLength="20"            android:singleLine="true"                <span style="color:#ff0000;">android:background="@null"   </span>                   /></LinearLayout><LinearLayout        android:id="@+id/login_input02"        android:layout_below="@id/login_input01"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_marginTop="8dp"        android:layout_marginLeft="5dp"        android:layout_marginRight="5dp"        android:gravity="center_vertical"        android:addStatesFromChildren="true"android:orientation="horizontal" android:background="@drawable/input_box_selector"><ImageView            android:id="@+id/lock_image"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="15dp"            android:layout_marginRight="8dp"            android:background="@drawable/password"            android:clickable="true" /><EditText            android:id="@+id/user_password"            android:layout_width="fill_parent"            android:layout_height="40dp"            android:paddingLeft="10dp"            android:layout_centerHorizontal="true"            <span style="color:#ff6600;">android:inputType="textPassword"</span>            android:maxLength="20"            android:password="true"            <span style="color:#ff0000;">android:background="@null"</span>            /></LinearLayout>

<LinearLayout     android:id="@+id/linearlayout"    android:layout_below="@id/login_input02"        android:layout_width="match_parent"    android:layout_height="40dp"    android:layout_marginTop="5dp"    android:orientation="horizontal"><CheckBox  android:id="@+id/login_checkBox"  <span style="color:#ff0000;">style="@style/MyCheckBox"</span>  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_gravity="center_vertical"       android:layout_marginRight="3dp"  android:scaleX="0.5"  android:scaleY="0.5"  android:text="@string/login_remember_psw"  android:textColor="#777"  android:textSize="32sp" /><TextView  android:id="@+id/forget_pwd"     android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:text="@string/forget_pwd" android:textSize="16sp" android:textColor="#777" android:gravity="center" android:layout_gravity="center_vertical" android:layout_marginLeft="10dp" android:layout_marginRight="30dp" /></LinearLayout>

<Button         android:id="@+id/login_button"        android:layout_below="@id/linearlayout"        android:layout_width="fill_parent"        android:layout_height="35dp"        android:layout_marginLeft="15dp"        android:layout_marginRight="15dp"        android:layout_marginTop="10dp"        android:layout_centerHorizontal="true"        android:text="@string/login_button"        android:textColor="#ffffff"        android:background="@drawable/login_button_selector"        /><TextView android:id="@+id/register_now"android:layout_below="@id/login_button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="45dp"android:text="@string/register_now"android:layout_centerInParent="true"android:textColor="#ff0000" android:textSize="18sp"    />

2.自定义显示效果

input_box_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:state_focused="false" android:drawable="@drawable/input_normal" />       <item android:state_focused="true" android:drawable="@drawable/input_focused" />  </selector>

input_normal.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <!-- 描边 -->    <stroke        android:width="1dp"        android:color="#cccccc" />      <!-- 设置按钮的四个角为弧形 -->    <corners android:radius="10dp" /></shape>

input_focused.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">    <!-- 描边 -->    <stroke        android:width="1dp"        android:color="#c70900" />      <!-- 设置按钮的四个角为弧形 -->    <corners android:radius="10dp" /></shape>

3.res下values下styles.xml中添加

<style name="MyCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">      <item name="android:button">@drawable/login_checkbox_style</item>      </style>

login_checkbox_style.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:drawable="@drawable/checkbox_clickred" android:state_checked="true"/>      <item android:drawable="@drawable/checkbox_click" android:state_checked="false"/>      <item android:drawable="@drawable/checkbox_click"/>  </selector>

checkbox_clickred.png

checkbox_click.png

是两张图片

4.该登录按钮的自定义选择器

login_button_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >             <item android:state_pressed="false">             <shape android:shape="rectangle" >            <!-- 填充的颜色在strings里面 -->            <solid android:color="@drawable/clr_normal"></solid>                        <!-- 设置按钮的四个角为弧形 -->       <corners android:radius="10dp" />              </shape>    </item>        <item android:state_pressed="true">     <shape android:shape="rectangle">         <!-- 填充的颜色在strings里面 -->            <solid android:color="@drawable/clr_pressed" />                        <!-- 设置按钮的四个角为弧形 -->            <corners android:radius="10dp" />         </shape>    </item>     </selector>

res下values下strings.xml里

<resources>       <drawable name="clr_normal">#c70900</drawable>    <drawable name="clr_pressed">#FF3333</drawable><span style="font-family: Arial, Helvetica, sans-serif;"></span>

<pre name="code" class="html">    <string name="forget_pwd">忘记密码?</string>    <string name="login_button">登录</string>    <string name="login_remember_psw">记住密码</string>    <string name="register_now">还没有账号，立即注册</string>

</resources>

1 0