1. 程式人生 > >Android 開發:(三)安卓常用控制元件以及仿《微門戶》登入介面實現

Android 開發:(三)安卓常用控制元件以及仿《微門戶》登入介面實現

一、常用控制元件:
1、文字類控制元件

TextView 負責展示文字,非編輯
EditText 可編輯文字控制元件

2、按鈕類控制元件

Button 按鈕
ImageButton 圖片按鈕
RadioButton與RadioGroup 單選按鈕
CheckBox 複選按鈕

3、圖片控制元件

ImageView 負責顯示圖片

控制元件詳解可以參考:http://blog.csdn.net/netdxy/article/details/50691915

二、登入介面實現:

1.效果圖:

2.程式碼示例:
activity_login.xml:

 <LinearLayout
        android:id="@+id/userName"
        android:layout_width="match_parent"
        android:layout_height="50dp">
        <ImageButton
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginTop="10dp"
            android:background
="#000000" />
<EditText android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/username" android:layout_marginLeft="10dp" android:layout_marginTop="3dp" android:hint="請輸入使用者名稱" /> </LinearLayout
>
<LinearLayout android:id="@+id/passWord" android:layout_width="match_parent" android:layout_height="50dp" android:layout_below="@id/userName"> <ImageButton android:layout_width="30dp" android:layout_height="30dp" android:layout_marginTop="10dp" android:background="#000000" /> <EditText android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/password" android:layout_marginLeft="10dp" android:layout_marginTop="3dp" android:password="true" android:hint="請輸入密碼" /> </LinearLayout> /*RadioGroup搭配RadioButton RadioGroup是單選組合框,可以容納多個RadioButton的容器.在沒有RadioGroup的情況下,RadioButton可以全部都選中;當多個RadioButton被RadioGroup包含的情況下,RadioButton只可以選擇一個。並用setOnCheckedChangeListener來對單選按鈕進行監聽 */ <RadioGroup android:id="@+id/rg" android:layout_width="match_parent" android:layout_height="50dp" android:layout_below="@id/passWord" //相對佈局(在xxx下面開始) android:orientation="horizontal"> //橫向佈局 <RadioButton android:id="@+id/personal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="40dp" android:layout_marginTop="10dp" android:layout_weight="1" //平分空間大小 android:checked="true" //預設選中 android:text="個人登入"/> <RadioButton android:id="@+id/legal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_weight="1" android:text="法人登入"/> </RadioGroup> <Button android:layout_width="match_parent" android:layout_height="45dp" //長寬大小:dp android:layout_marginTop="10dp" android:layout_below="@id/rg" android:id="@+id/loginBtn" android:text="登入" android:background="@drawable/shape" //button圓角設定,具體步驟見下節。 android:textSize="19sp" //字型大小:sp android:textColor="#ffffff" />

LoginActivity:

public class LoginActivity extends AppCompatActivity {

    private Button loginBtn;
    private EditText userName;
    private EditText passWord;
    private RadioGroup radioGroup;
    private RadioButton radioButton;

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

        userName = (EditText) findViewById(R.id.username);
        passWord = (EditText) findViewById(R.id.password);

        //給radioGroup新增點選事件
        radioGroup = (RadioGroup) findViewById(R.id.rg);
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                    //通過getCheckedRadioButtonId()獲取點選的radiobutton
                int rgId = radioGroup.getCheckedRadioButtonId();
                radioButton = (RadioButton) findViewById(rgId);
            }
        });
        //點選登入
        loginBtn = (Button) findViewById(R.id.loginBtn);
        loginBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                        //通過getText()獲取控制元件值
                String usernameStr = userName.getText().toString();
                String passwordStr = passWord.getText().toString();
                String loginTypeStr = radioButton.getText().toString();

                if (loginTypeStr.equals("個人登入")) {
                    //alert提示框
                    Dialog alertDialog = new AlertDialog.Builder(LoginActivity.this).
                            setTitle("登入狀態").
                            setMessage("成功!").
                            create();
                    alertDialog.show();
                }else {
                    Dialog alertDialog = new AlertDialog.Builder(LoginActivity.this).
                            setTitle("登入狀態").
                            setMessage("失敗!").
                            create();
                    alertDialog.show();
                }
        }