快捷導(dǎo)航

Android中使用Kotlin實(shí)現(xiàn)一個(gè)簡(jiǎn)單的登錄界面

更新時(shí)間：2017年09月26日 08:57:52 作者：neuHenry

Kotlin 是一種在 Java 虛擬機(jī)上運(yùn)行的靜態(tài)類(lèi)型編程語(yǔ)言，被稱(chēng)之為 Android 世界的Swift，由 JetBrains 設(shè)計(jì)開(kāi)發(fā)并開(kāi)源。接下來(lái)本文通過(guò)實(shí)例代碼給大家講解Android中使用Kotlin實(shí)現(xiàn)一個(gè)簡(jiǎn)單的登錄界面，一起看看吧

Kotlin 是一種在 Java 虛擬機(jī)上運(yùn)行的靜態(tài)類(lèi)型編程語(yǔ)言，被稱(chēng)之為 Android 世界的Swift，由 JetBrains 設(shè)計(jì)開(kāi)發(fā)并開(kāi)源。

Kotlin 可以編譯成Java字節(jié)碼，也可以編譯成 JavaScript，方便在沒(méi)有 JVM 的設(shè)備上運(yùn)行。

在Google I/O 2017中，Google 宣布 Kotlin 成為 Android 官方開(kāi)發(fā)語(yǔ)言。

剛接觸Kotlin的第一天，仿照QQ的登錄界面，先寫(xiě)一個(gè)簡(jiǎn)單的登錄界面，雖然筆者用的不是很熟，還在慢慢摸索，但是Kotlin是真的很簡(jiǎn)潔，筆者的實(shí)現(xiàn)效果如下：

這里寫(xiě)圖片描述

登錄界面代碼如下：

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 = "登錄賬戶(hù)"
            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 = "賬戶(hù)密碼"
            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("請(qǐng)輸入賬戶(hù)或者密碼")
          }
        }.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("新用戶(hù)注冊(cè)") {
            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) {
    }
  }
}

　　實(shí)現(xiàn)出來(lái)的效果和我們?cè)O(shè)置布局文件所實(shí)現(xiàn)的效果一樣，但是相比使用布局文件來(lái)說(shuō)，使用Kotlin將會(huì)更加的簡(jiǎn)潔明了，省去了定義變量和查找布局文件的操作，大大解放了我們程序員；

　　下面的代碼所示是筆者使用布局文件實(shí)現(xiàn)的布局效果，和上面的效果一樣，但是會(huì)復(fù)雜很多，大家可以自己自己體會(huì)一下；

<?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="登錄賬戶(hù)"
      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="賬戶(hù)密碼"
      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="新用戶(hù)注冊(cè)"
      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>

總結(jié)

以上所述是小編給大家介紹的Android Kotlin實(shí)現(xiàn)一個(gè)簡(jiǎn)單的登錄界面，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: