1. 程式人生 > >2.仿微信--登入介面(LoginActivity)佈局介面的實現

2.仿微信--登入介面(LoginActivity)佈局介面的實現

1.登入介面LoginActivity.java(具體邏輯後邊實現,隨便輸入資訊點選登陸進入主介面)

/**
 * 登陸頁面
 * 
 */
public class LoginActivity extends Activity {
    private EditText et_usertel;
    private EditText et_password;
    private Button btn_login;
    private Button btn_qtlogin;
    ProgressDialog dialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        dialog = new ProgressDialog(LoginActivity.this);
        et_usertel = (EditText) findViewById(R.id.et_usertel);
        et_password = (EditText) findViewById(R.id.et_password);
        btn_login = (Button) findViewById(R.id.btn_login);
        btn_qtlogin = (Button) findViewById(R.id.btn_qtlogin);
        
        // 監聽多個輸入框
        et_usertel.addTextChangedListener(new TextChange());
        et_password.addTextChangedListener(new TextChange());

        btn_login.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
startActivity(new Intent(LoginActivity.this,
                          MainActivity.class));
            }

        });
        btn_qtlogin.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                startActivity(new Intent(LoginActivity.this,
                        RegisterActivity.class));
            }

        });
    }

    // EditText監聽器
    class TextChange implements TextWatcher {

        @Override
        public void afterTextChanged(Editable arg0) {

        }

        @Override
        public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,
                int arg3) {

        }

        @Override
        public void onTextChanged(CharSequence cs, int start, int before,
                int count) {

            boolean Sign2 = et_usertel.getText().length() > 0;
            boolean Sign3 = et_password.getText().length() > 0;

            if (Sign2 & Sign3) {
                btn_login.setTextColor(0xFFFFFFFF);
                btn_login.setEnabled(true);
            }
            // 在layout檔案中,對Button的text屬性應預先設定預設值,否則剛開啟程式的時候Button是無顯示的
            else {
                btn_login.setTextColor(0xFFD0EFC6);
                btn_login.setEnabled(false);
            }
        }

    }
}


2.在AndroidManifest.xml中註冊
<activity
            android:name=".LoginActivity"
            android:theme="@android:style/Theme.NoTitleBar"  />  


3.佈局檔案activity_login.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="@dimen/height_top_bar"
        android:background="@color/common_top_bar_blue" >

        <ImageView
            android:id="@+id/iv_back"
            android:layout_width="40dp"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:onClick="back"
            android:paddingBottom="5dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingTop="5dp"
            android:scaleType="centerInside"
            android:src="@drawable/top_bar_back" />

        <View
            android:id="@+id/view_temp"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp"
            android:layout_toRightOf="@id/iv_back"
            android:background="#14191A" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@id/view_temp"
            android:text="使用手機號登入"
            android:textColor="#ffffff"
            android:textSize="18sp" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="12dp" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="48dp" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:text="國家和地區"
                android:textColor="#353535"
                android:textSize="16sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:text="中國"
                android:textColor="#45c01a"
                android:textSize="16sp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="0.1dp"
                android:layout_alignParentBottom="true"
                android:background="#dbdbdb" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="48dp" >

            <EditText
                android:id="@+id/et_usertel"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:background="@drawable/edittext_login"
                android:hint="你的手機號碼"
                android:inputType="phone"
                android:paddingLeft="90dp"
                android:singleLine="true"
                android:textColorHint="#DDDDDD"
                android:textSize="16sp" 
                android:textCursorDrawable="@null"/>

            <TextView
                android:layout_width="90dp"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@id/et_usertel"
                android:layout_centerVertical="true"
                android:layout_marginLeft="24dp"
                android:text="+86"
                android:textColor="#353535"
                android:textSize="16sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="48dp" >

            <EditText
                android:id="@+id/et_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:background="@drawable/edittext_login"
                android:hint="填寫密碼"
                android:paddingLeft="90dp"
                android:password="true"
                android:singleLine="true"
                android:textColorHint="#DDDDDD"
                android:textSize="16sp"
                android:textCursorDrawable="@null" />

            <TextView
                android:id="@+id/tv_password"
                android:layout_width="90dp"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@id/et_password"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:text="密碼"
                android:textColor="#353535"
                android:textSize="16sp" />
        </RelativeLayout>

        <Button
            android:id="@+id/btn_login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:background="@drawable/btn_register_bg"
            android:enabled="false"
            android:paddingBottom="7dp"
            android:paddingTop="7dp"
            android:text="登入"
            android:textColor="@android:color/white"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/tv_wenti"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginTop="10dp"
            android:text="登入遇到問題?"
            android:textColor="#576B95"
            android:textSize="14sp" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <Button
            android:layout_margin="33dp"
            android:padding="8dp"
            android:background="@drawable/btn_qtlogin_bg"
            android:id="@+id/btn_qtlogin"
            android:layout_width="wrap_content"
            android:layout_height="33dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:text="註冊"
            android:textColor="#353535"
            android:textSize="15sp" />
    </RelativeLayout>

</LinearLayout>

4.佈局檔案裡涉及到的資原始檔

dimens.xml檔案

 <dimen name="height_top_bar">48dp</dimen>

color.xml
<color name="common_top_bar_blue">#22292c</color>

drawable目錄下:

top_bar_back.xml

<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/ac1" />
    <item android:state_selected="true" android:drawable="@drawable/ac1" />
    <item android:drawable="@drawable/ac0" />
</selector>

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

btn_register_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/yuanjiao_3" android:state_pressed="true"/>
 
    <item android:drawable="@drawable/yuanjiao_1" android:state_enabled="false"/>
    <item android:drawable="@drawable/yuanjiao_2" android:state_enabled="true"/>
    <item android:drawable="@drawable/yuanjiao_1"/>

</selector>

btn_qtlogin_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/yuanjiao_4" android:state_pressed="true"/>
    <item android:drawable="@drawable/yuanjiao_5"/>

</selector>
yuanjiao_1.xml
<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/ac1" />
    <item android:state_selected="true" android:drawable="@drawable/ac1" />
    <item android:drawable="@drawable/ac0" />
</selector>
yuanjiao_2.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#45C01A" />

    <corners
        android:bottomLeftRadius="1dp"
        android:bottomRightRadius="1dp"
        android:topLeftRadius="1dp"
        android:topRightRadius="1dp" />

</shape>

yuanjiao_3.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#027A0B" />

    <corners
        android:bottomLeftRadius="1dp"
        android:bottomRightRadius="1dp"
        android:topLeftRadius="1dp"
        android:topRightRadius="1dp" />

</shape>

yuanjiao_4.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#F1F1F1" />

    <corners
        android:bottomLeftRadius="1dp"
        android:bottomRightRadius="1dp"
        android:topLeftRadius="1dp"
        android:topRightRadius="1dp" />

</shape>

yuanjiao_5.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#F0F0F0" />

    <corners
        android:bottomLeftRadius="1dp"
        android:bottomRightRadius="1dp"
        android:topLeftRadius="1dp"
        android:topRightRadius="1dp" />

</shape>

5.最後,在SplashActivity.java中修改 在onStart()方法中修改
//進入登入頁面
					startActivity(new Intent(SplashActivity.this,LoginActivity.class));