仿QQ登录界面（PC端）=课堂实操_仿qq登录界面waqngzhan-CSDN博客

本文链接：https://blog.csdn.net/py0303/article/details/43163009

本文详细介绍了如何使用线程布局在PC端实现仿QQ登录界面，包括布局规范、嵌套顺序及关键代码实现。重点展示了登录界面的UI设计与交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在仿QQ登录界面，我用了线程布局，因为刚开始学，觉得线程布局的方法比较规范，在前期打基础比较可靠的一种方法！

用线程布局做（PC端）仿QQ登录界面需要注意的是：

1.布局的规范、嵌套的顺序；

2.因为嵌套的东西比较多，很容易弄乱，但我觉得还是它的布局能给我一种规范的感觉，一环扣一环。

以下是我的仿登录界面代码：layout====》》》activity_main.xml

<span style="font-size:18px;"><span style="color:#009900;"><LinearLayout</span> <span style="color:#ff0000;">xmlns:android=</span><span style="color:#3366ff;">"http://schemas.android.com/apk/res/android"</span>
    <span style="color:#ff0000;">xmlns:tools=</span><span style="color:#3366ff;">"http://schemas.android.com/tools"</span>
    <span style="color:#ff0000;">android:id=</span><span style="color:#3366ff;">"@+id/LinearLayout1"</span>
    <span style="color:#ff0000;">android:layout_width=</span><span style="color:#3366ff;">"match_parent"</span>
    <span style="color:#ff0000;">android:layout_height=</span><span style="color:#3366ff;">"match_parent"</span>
    <span style="color:#ff0000;">android:orientation=</span><span style="color:#3366ff;">"vertical"</span>
    <span style="color:#ff0000;">tools:context=</span><span style="color:#3366ff;">".MainActivity"</span> <span style="color:#009900;">></span>
     <span style="color:#009900;"><ImageView</span>
        <span style="color:#ff0000;">android:id=</span><span style="color:#3366ff;">"@+id/imgbackground"</span>
        <span style="color:#ff0000;">android:layout_width=</span><span style="color:#3366ff;">"fill_parent"</span>
        <span style="color:#ff0000;">android:layout_height=</span><span style="color:#3333ff;">"wrap_content"</span>
        <span style="color:#ff0000;">android:layout_gravity=</span><span style="color:#3333ff;">"center_horizontal"</span>
        <span style="color:#ff0000;">android:src=</span><span style="color:#3333ff;">"@drawable/background"</span> <span style="color:#009900;">/></span>
     <span style="color:#009900;"><LinearLayout</span> 
	     <span style="color:#ff0000;">android:id=</span><span style="color:#3333ff;">"@+id/LinearLayout2"</span>
	     <span style="color:#ff0000;">android:layout_width=</span><span style="color:#3333ff;">"match_parent"</span>
	     <span style="color:#ff0000;">android:layout_height=</span><span style="color:#3333ff;">"wrap_content"</span>
	     <span style="color:#ff0000;">android:orientation=</span><span style="color:#3333ff;">"horizontal"</span><span style="color:#009900;">></span>
       	<span style="color:#009900;"><ImageView</span>
        <span style="color:#ff0000;">android:id=</span><span style="color:#3333ff;">"@+id/ImageView2"</span>
        <span style="color:#ff0000;">android:layout_width=</span><span style="color:#3333ff;">"wrap_content"</span>
        <span style="color:#ff0000;">android:layout_height=</span><span style="color:#3333ff;">"wrap_content"</span>
        <span style="color:#ff0000;">android:src=</span><span style="color:#3333ff;">"@drawable/imgqq"</span> <span style="color:#009900;">/></span>
        <span style="color:#009900;"><TableLayout</span>
        <span style="color:#ff0000;">android:id=</span><span style="color:#3333ff;">"@+id/TableLayout1"</span>
        <span style="color:#ff0000;">android:layout_width=</span><span style="color:#3333ff;">"fill_parent"</span>
        <span style="color:#ff0000;">android:layout_height=</span><span style="color:#3333ff;">"wrap_content"</span> <span style="color:#009900;">></span>
        <span style="color:#009900;"><TableRow></span>
              <span style="color:#009900;"><EditText</span>
                <span style="color:#ff0000;">android:id=</span><span style="color:#3333ff;">"@+id/et_username"</span>
                <span style="color:#ff0000;">android:layout_width=</span><span style="color:#3333ff;">"wrap_content"</span>
                <span style="color:#ff0000;">android:layout_height=</span><span style="color:#3333ff;">"wrap_content"</span>
                <span style="color:#ff0000;">android:layout_weight=</span><span style="color:#3333ff;">"1.5"</span>
                <span style="color:#ff0000;">android:hint=</span><span style="color:#3333ff;">"@string/usernamehint"</span>
                <span style="color:#ff0000;">android:textSize=</span><span style="color:#3333ff;">"12sp"</span> 
                <span style="color:#009900;">></span>
            <span style="color:#009900;"></EditText></span>
             <span style="color:#009900;"><TextView</span>
                <span style="color:#ff0000;">android:id=</span><span style="color:#3333ff;">"@+id/tx_username"</span>
                <span style="color:#ff0000;">android:layout_width=</span><span style="color:#3333ff;">"wrap_content"</span>
                <span style="color:#ff0000;">android:layout_height=</span><span style="color:#3333ff;">"wrap_content"</span>
                <span style="color:#ff0000;">android:layout_weight=</span><span style="color:#3333ff;">"1"</span>
                <span style="color:#ff0000;">android:text=</span><span style="color:#3333ff;">"@string/username"</span>
                <span style="color:#ff0000;">android:textSize=</span><span style="color:#3333ff;">"12sp"</span> <span style="color:#009900;">/></span>
        <span style="color:#009900;"></TableRow></span>
           <span style="color:#009900;"><TableRow></span>
            
            <span style="color:#009900;"><EditText</span>
                <span style="color:#ff0000;">android:id=</span><span style="color:#3333ff;">"@+id/et_userpwd"</span>
                <span style="color:#ff0000;">android:layout_width=</span><span style="color:#3333ff;">"200dip"</span>
                <span style="color:#ff0000;">android:layout_height=</span><span style="color:#3333ff;">"wrap_content"</span>
                <span style="color:#ff0000;">android:layout_weight=</span><span style="color:#3333ff;">"1.5"</span>
                <span style="color:#ff0000;">android:hint=</span><span style="color:#3333ff;">"@string/userpwdhint"</span>
                <span style="color:#ff0000;">android:textSize=</span><span style="color:#3333ff;">"12sp"</span> 
                <span style="color:#ff0000;">android:password=</span><span style="color:#3333ff;">"true"</span><span style="color:#009900;">></span>
            <span style="color:#009900;"></EditText></span>
            <span style="color:#009900;"><TextView</span>
                <span style="color:#ff0000;">android:id=</span><span style="color:#3333ff;">"@+id/tx_userpwd"</span>
                <span style="color:#ff0000;">android:layout_width=</span><span style="color:#3333ff;">"wrap_content"</span>
                <span style="color:#ff0000;">android:layout_height=</span><span style="color:#3333ff;">"wrap_content"</span>
                <span style="color:#ff0000;">android:layout_weight=</span><span style="color:#3333ff;">"1"</span>
                <span style="color:#ff0000;">android:text=</span><span style="color:#3333ff;">"@string/userpwd"</span>
                <span style="color:#ff0000;">android:textSize=</span><span style="color:#3333ff;">"12sp"</span> <span style="color:#009900;">/></span>
          <span style="color:#009900;"></TableRow></span>
    <span style="color:#009900;"></TableLayout></span>
    <span style="color:#009900;"></LinearLayout></span>
     <span style="color:#009900;"><LinearLayout</span> 
          <span style="color:#ff0000;">android:id=</span><span style="color:#3333ff;">"@+id/LinearLayout4"</span>
          <span style="color:#ff0000;">android:layout_width=</span><span style="color:#3333ff;">"fill_parent"</span>
          <span style="color:#ff0000;">android:layout_height=</span><span style="color:#3333ff;">"wrap_content"</span>
          <span style="color:#ff0000;">android:orientation=</span><span style="color:#3333ff;">"horizontal"</span>
          <span style="color:#ff0000;">android:gravity=</span><span style="color:#3333ff;">"center_horizontal"</span><span style="color:#009900;">></span>
         <span style="color:#009900;"><CheckBox</span>
		    <span style="color:#ff0000;">android:id=</span><span style="color:#3333ff;">"@+id/cb1"</span>
		    <span style="color:#ff0000;">android:layout_width=</span><span style="color:#3333ff;">"wrap_content"</span>
		    <span style="color:#ff0000;">android:layout_height=</span><span style="color:#3333ff;">"wrap_content"</span>
		    <span style="color:#ff0000;">android:checked=</span><span style="color:#3333ff;">"true"</span>
		    <span style="color:#ff0000;">android:text=</span><span style="color:#3333ff;">"@string/ck1"</span><span style="color:#006600;">/></span>
		     <span style="color:#006600;"><CheckBox</span>
		    <span style="color:#ff0000;">android:id=</span><span style="color:#3333ff;">"@+id/cb2"</span>
		    <span style="color:#ff0000;">android:layout_width=</span><span style="color:#3333ff;">"wrap_content"</span>
		    <span style="color:#ff0000;">android:layout_height=</span><span style="color:#3333ff;">"wrap_content"</span>
		    <span style="color:#ff0000;">android:text=</span><span style="color:#3333ff;">"@string/ck2"</span><span style="color:#006600;">/></span>
     
    <span style="color:#006600;"></LinearLayout></span>
      <span style="color:#006600;"><LinearLayout</span> 
          <span style="color:#ff0000;">android:id=</span><span style="color:#3333ff;">"@+id/LinearLayout3"</span>
          <span style="color:#ff0000;">android:layout_width=</span><span style="color:#3333ff;">"fill_parent"</span>
          <span style="color:#ff0000;">android:layout_height=</span><span style="color:#3333ff;">"wrap_content"</span>
          <span style="color:#ff0000;">android:orientation=</span><span style="color:#3333ff;">"horizontal"</span>
          <span style="color:#ff0000;">android:gravity=</span><span style="color:#3333ff;">"center_horizontal"</span><span style="color:#006600;">></span>
        <span style="color:#006600;"><Button</span>
        <span style="color:#ff0000;">android:id=</span><span style="color:#3333ff;">"@+id/Button1"</span>
        <span style="color:#ff0000;">android:layout_width=</span><span style="color:#3333ff;">"wrap_content"</span>
        <span style="color:#ff0000;">android:layout_height=</span><span style="color:#3333ff;">"wrap_content"</span>
        <span style="color:#ff0000;">android:text=</span><span style="color:#3333ff;">"@string/bnt_login"</span> 
        <span style="color:#006600;">/></span>

    <span style="color:#006600;"><Button</span>
        <span style="color:#ff0000;">android:id=</span><span style="color:#3333ff;">"@+id/Button2"</span>
        <span style="color:#ff0000;">android:layout_width=</span><span style="color:#3333ff;">"wrap_content"</span>
        <span style="color:#ff0000;">android:layout_height=</span><span style="color:#3333ff;">"wrap_content"</span>
        <span style="color:#ff0000;">android:text=</span><span style="color:#3333ff;">"@string/bnt_cancel"</span> <span style="color:#006600;">/></span>
     
    <span style="color:#006600;"></LinearLayout></span>
<span style="color:#006600;"></LinearLayout></span></span>

values===》》》strings.xml

<span style="font-size:18px;"></span><pre name="code" class="html"><span style="font-size:18px;"><span style="color:#006600;"><?xml</span> <span style="color:#ff0000;">version=</span><span style="color:#3333ff;">"1.0"</span> <span style="color:#ff0000;">encoding=</span><span style="color:#3333ff;">"utf-8"?</span><span style="color:#006600;">></span>
<span style="color:#006600;"><resources></span>

    <span style="color:#006600;"><string</span> <span style="color:#ff0000;">name=</span><span style="color:#3333ff;">"app_name"</span>>newqq<span style="color:#006600;"></string></span>
    <span style="color:#006600;"><string</span> <span style="color:#ff0000;">name=</span><span style="color:#3333ff;">"menu_settings"</span>>Settings<span style="color:#006600;"></string></span>
    <span style="color:#006600;"><string</span> <span style="color:#ff0000;">name=</span><span style="color:#3333ff;">"hello_world"</span>>Hello world!<span style="color:#006600;"></string></span>
    <span style="color:#006600;"><string</span> <span style="color:#ff0000;">name=</span><span style="color:#3333ff;">"userpwdhint"</span>>请输入QQ密码<span style="color:#006600;"></string></span>
    <span style="color:#006600;"><string</span> <span style="color:#ff0000;">name=</span><span style="color:#3333ff;">"userpwd"</span>>找回密码<span style="color:#006600;"></string></span>
    <span style="color:#006600;"><string</span> <span style="color:#ff0000;">name=</span><span style="color:#3333ff;">"ck1"</span>>自动登录<span style="color:#006600;"></string></span>
    <span style="color:#006600;"><string</span> <span style="color:#ff0000;">name=</span><span style="color:#3333ff;">"ck2"</span>>记住密码<span style="color:#006600;"></string></span>
    <span style="color:#006600;"><string</span> <span style="color:#ff0000;">name=</span><span style="color:#3333ff;">"bnt_login"</span>>登录<span style="color:#006600;"></string></span>
    <span style="color:#006600;"><string</span> <span style="color:#ff0000;">name=</span><span style="color:#3333ff;">"bnt_cancel"</span>>取消<span style="color:#006600;"></string></span>
    <span style="color:#006600;"><string</span> <span style="color:#ff0000;">name=</span><span style="color:#3333ff;">"usernamehint"</span>>请输入账号<span style="color:#006600;"></string></span>
    <span style="color:#006600;"><string</span> <span style="color:#ff0000;">name=</span><span style="color:#3333ff;">"username"</span>>注册账号<span style="color:#006600;"></string></span>
    
    
</resources></span>

src===》》》example.newqq===》》》MainActivity.java

<span style="font-size:18px;">public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button btn=(Button) findViewById(R.id.Button1);
        btn.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				Toast.makeText(getApplicationContext(), "登录成功", 200).show();
				
			}
		});
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
    
}
</span>