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

最新推荐文章于 2021-05-27 06:35:58 发布

qq_26976143

最新推荐文章于 2021-05-27 06:35:58 发布

阅读量470

点赞数 2

文章标签： android 登录界面UI设计

本文链接：https://blog.csdn.net/qq_26976143/article/details/51037566

版权

这篇博客展示了Android新手如何设计登录界面，包括login.xml布局文件的详细内容，以及如何通过自定义输入框和复选框样式实现独特的UI效果，如input_box_selector.xml和login_checkbox_style.xml的使用。

摘要由CSDN通过智能技术生成

大家先看效果图：

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>