您好,登錄后才能下訂單哦!
怎么在Android中使用Kotlin實現一個登錄界面?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
登錄界面代碼如下:
class LoginActivity : AppCompatActivity(), View.OnClickListener { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) //setContentView(R.layout.activity_login) LoginUi().setContentView(this@LoginActivity) } lateinit var et_account: EditText lateinit var et_password: EditText inner class LoginUi : AnkoComponent<LoginActivity> { override fun createView(ui: AnkoContext<LoginActivity>) = with(ui) { verticalLayout { backgroundColor = context.resources.getColor(android.R.color.white) gravity = Gravity.CENTER_HORIZONTAL imageView(R.drawable.touxiang).lparams { width = dip(100) height = dip(100) topMargin = dip(64) } linearLayout { gravity = Gravity.CENTER_VERTICAL orientation = HORIZONTAL backgroundResource = R.drawable.bg_frame_corner imageView { image = resources.getDrawable(R.mipmap.ic_username) }.lparams(width = wrapContent, height = wrapContent) { leftMargin = dip(12) rightMargin = dip(15) } et_account = editText { hint = "登錄賬戶" hintTextColor = Color.parseColor("#666666") textSize = 14f background = null }.lparams { topMargin = dip(5) } }.lparams(width = dip(300), height = dip(40)) { topMargin = dip(30) } linearLayout { gravity = Gravity.CENTER_VERTICAL orientation = HORIZONTAL backgroundResource = R.drawable.bg_frame_corner imageView { image = resources.getDrawable(R.mipmap.ic_password) }.lparams(width = wrapContent, height = wrapContent) { leftMargin = dip(12) rightMargin = dip(15) } et_password = editText { hint = "賬戶密碼" hintTextColor = Color.parseColor("#666666") textSize = 14f background = null }.lparams { topMargin = dip(5) } }.lparams { width = dip(300) height = dip(40) topMargin = dip(10) } button("登錄") { gravity = Gravity.CENTER background = resources.getDrawable(R.drawable.bg_login_btn) textColor = Color.parseColor("#ffffff") textSize = 18f onClick { if (et_account.text.toString().isNotEmpty() && et_password.text.toString().isNotEmpty()) startActivity<MainActivity>() else toast("請輸入賬戶或者密碼") } }.lparams(width = dip(300), height = dip(44)) { topMargin = dip(18) } linearLayout { orientation = HORIZONTAL gravity = Gravity.CENTER_VERTICAL checkBox("記住密碼") { textColor = Color.parseColor("#666666") textSize = 16f leftPadding = dip(5) } textView("新用戶注冊") { textColor = Color.parseColor("#1783e3") gravity = Gravity.RIGHT textSize = 16f }.lparams(width = matchParent) }.lparams(width = dip(300)) { topMargin = dip(18) } textView("Copyright © Henry") { textSize = 14f gravity = Gravity.CENTER or Gravity.BOTTOM }.lparams { bottomMargin = dip(35) weight = 1f } } } } override fun onClick(v: View) { when (v.id) { } } }
實現出來的效果和我們設置布局文件所實現的效果一樣,但是相比使用布局文件來說,使用Kotlin將會更加的簡潔明了,省去了定義變量和查找布局文件的操作,大大解放了我們程序員;
下面的代碼所示是筆者使用布局文件實現的布局效果,和上面的效果一樣,但是會復雜很多,大家可以自己自己體會一下;
<?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:layout_gravity="center_horizontal" android:background="#ffffff" android:orientation="vertical" android:padding="40dp"> <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/profile_image" android:layout_width="96dp" android:layout_height="96dp" android:layout_gravity="center_horizontal" android:src="@drawable/touxiang" app:civ_border_color="#FF000000" app:civ_border_width="2dp" /> <LinearLayout android:id="@+id/lin_count" android:layout_width="300dp" android:layout_height="40dp" android:layout_marginTop="45dp" android:background="@drawable/bg_frame_corner" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="25dp" android:layout_marginLeft="12dp" android:layout_marginRight="15dp" android:src="@drawable/count" /> <EditText android:id="@+id/loginAccount" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@null" android:hint="登錄賬戶" android:maxLength="11" android:textSize="16sp" /> </LinearLayout> <LinearLayout android:id="@+id/lin_password" android:layout_width="300dp" android:layout_height="40dp" android:layout_marginTop="10dp" android:background="@drawable/bg_frame_corner" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="25dp" android:layout_marginLeft="12dp" android:layout_marginRight="15dp" android:src="@drawable/password"/> <EditText android:id="@+id/loginPassword" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@null" android:hint="賬戶密碼" android:password="true" android:maxLength="11" android:textSize="16sp"/> </LinearLayout> <Button android:id="@+id/login_button" android:layout_width="300dp" android:layout_height="44dp" android:layout_gravity="center" android:background="@drawable/bg_login_btn" android:layout_marginTop="18dp" android:text="登錄" android:textColor="#ffffff" android:textSize="18sp" /> <LinearLayout android:id="@+id/lin_remember" android:layout_width="300dp" android:layout_height="wrap_content" android:layout_marginTop="18dp" android:gravity="center_vertical" android:orientation="horizontal"> <CheckBox android:id="@+id/rem_pas_check" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="5dp" android:text="記住密碼" android:textColor="#666666" android:textSize="16sp" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="right" android:text="新用戶注冊" android:textColor="#1783e3" android:textSize="16sp" /> </LinearLayout> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="35dp" android:layout_weight="1" android:gravity="bottom|center" android:text="Copyright © Henry" android:textSize="14sp" /> </LinearLayout>
看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。