Android studio 簡易登錄界面

 

•參考資料

　　[1]:視頻資源

　　[2]:Android TextView設置圖標，調整圖標大小

•效果展示圖

　　

•前置知識

• TextView
• EditText
• Button 以及按壓效果，點擊事件

•出現的問題

　　輸入文本框 $Account$ 和 $Password$ 左側的圖標大小問題；

　　我是隨便在網上下載的兩張圖片，像素太大，以至於占用了太多的空間，如何修改 EditText 中圖標的大小呢？

　　參考資料：Android TextView設置圖標，調整圖標大小

　　首先，我在 $activity\_next.xml$ 中放置了兩個 $EditText$ 組件，設置的 $id$ 分別為 $et\_1$ , $et\_2$； 

　　並把以下兩張圖片放在了 drawable 文件夾中，並分別取名為 $account.png$ , $password.png$；

　　　　　　　

　　$(account.png)$     $(password.png)$

　　其中，$account.png$ 放置在 $et\_1$ 組件中， $password.png$ 放置在 $et\_2$ 組件中；

　　在其對應的 $next\_activyti.java$ 文件中設置如下代碼即可改變其在 $EditText$ 中的大小；

EditText Et1 = findViewById(R.id.et_1);
Drawable icon = getResources().getDrawable(R.drawable.account);//找到account.png這張圖片
icon.setBounds(0,0,44,44);
Et1.setCompoundDrawables(icon, null, null, null);

EditText Et2 = findViewById(R.id.et_2);
Drawable password = getResources().getDrawable(R.drawable.password);//找到password.png這張圖片
password.setBounds(0,0,44,44);
Et2.setCompoundDrawables(password,null,null,null);

　　$setBounds(left,top,right,bottom)$ 里的參數從左到右分別是：

• • $drawable$ 的左邊到 $EditText$ 左邊緣 + $padding$ 的距離
  • $drawable$ 的上邊離 $EditText$ 上邊緣 + $padding$ 的距離
  • $drawable$ 的右邊離 $EditText$ 左邊緣 + $padding$ 的距離
  • $drawable$ 的下邊離 $EditText$ 上邊緣 + $padding$ 的距離

　　相當於以 $EditText$ 邊框的左邊和上邊為參考，通過設置 $drawable$ 的位置來改變其顯示的大小；

•點擊事件

　　如上圖（$gif$）所示，再點擊 $Sign in$ 按鈕的時候出現了點擊事件 $Login failed$；

　　只需在 $next\_activyti.java$ 添加如下代碼即可；

Btn1 = findViewById(R.id.btn_1);//btn_1 是 Sign in 按鈕的 id
Btn1.setOnClickListener(new View.OnClickListener(){//設置點擊事件

    public void onClick(View view){
        Toast.makeText(nextActivity.this,"Login failed",Toast.LENGTH_SHORT).show();
    }
});

•完整代碼

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".nextActivity"
    android:padding="10dp">

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sign in to Hyacinth"
        android:textSize="30sp"
        android:textColor="#9E9191"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"/>

    <EditText
        android:id="@+id/et_1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@id/tv_1"
        android:layout_marginTop="60dp"
        android:textSize="20sp"
        android:textColor="#FFAD33"
        android:hint="Account"
        android:background="@drawable/ic_btn3"
        android:paddingLeft="15dp"
        android:drawableLeft="@drawable/account"
        android:drawablePadding="10dp"
        />

    <EditText
        android:id="@+id/et_2"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@id/et_1"
        android:layout_marginTop="10dp"
        android:textSize="20sp"
        android:textColor="#FFAD33"
        android:hint="Password"
        android:inputType="textPassword"
        android:background="@drawable/ic_btn3"
        android:paddingLeft="15dp"
        android:drawableLeft="@drawable/password"
        android:drawablePadding="10dp"
        />
    <Button
        android:id="@+id/btn_1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@id/et_2"
        android:layout_marginTop="40dp"
        android:background="@drawable/ic_btn_sel"
        android:text="Sign in"
        android:textAllCaps="false"
        />

</RelativeLayout>

public class nextActivity extends AppCompatActivity {

    private Button Btn1;

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

        EditText Et1 = findViewById(R.id.et_1);
        Drawable icon = getResources().getDrawable(R.drawable.account);
        icon.setBounds(0,0,44,44);
        Et1.setCompoundDrawables(icon, null, null, null);

        EditText Et2 = findViewById(R.id.et_2);
        Drawable password = getResources().getDrawable(R.drawable.password);
        password.setBounds(0,0,44,44);
        Et2.setCompoundDrawables(password,null,null,null);

        Btn1 = findViewById(R.id.btn_1);
        Btn1.setOnClickListener(new View.OnClickListener(){

            public void onClick(View view){
                Toast.makeText(nextActivity.this,"Login failed",Toast.LENGTH_SHORT).show();
            }
        });
    }
}