# E2

**Repository Path**: aoyang2684/E2

## Basic Information

- **Project Name**: E2
- **Description**: 实验二_创建首个Kotlin应用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-06
- **Last Updated**: 2022-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 实验二

## README

# E2

## 实验二_创建首个Kotlin应用

##### 一、初始工作

* 首先创建一个新工程，并选择basic activity，点击Next，为应用程序命名（例如：My First App），选择Kotlin语言，然后点击Finish。并使用系统中最新的API Level创建应用程序。

  ![输入图片说明](https://gitee.com/aoyang2684/E2/raw/master/%E5%AE%9E%E9%AA%8C%E6%88%AA%E5%9B%BE/QQ%E6%88%AA%E5%9B%BE20220507144244.png)


* 然后run一下空程序，查看两个fragment切换的效果.

  ![输入图片说明](https://gitee.com/aoyang2684/E2/raw/master/%E5%AE%9E%E9%AA%8C%E6%88%AA%E5%9B%BE/QQ%E6%88%AA%E5%9B%BE20220414172026.png)


##### 二、设置第一个页面的布局

* 在fragment_first.xml里，首先添加两个button，原先那个next按钮作为random按钮，其他新添加的两个一个作为toast一个作为count.

* TOAST按钮的布局代码：

  ```
      <Button
          android:id="@+id/toast_button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginStart="24dp"
          android:background="@color/buttonBackground"
          android:text="@string/toast_button_text"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/textview_first" />
  ```

* COUNT按钮的布局代码：

  ```
   <Button
          android:id="@+id/count_button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/count_button_text"
          android:background="@color/buttonBackground"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toStartOf="@+id/random_button"
          app:layout_constraintStart_toEndOf="@+id/toast_button"
          app:layout_constraintTop_toBottomOf="@+id/textview_first" />
  ```

* RANDOM按钮的布局代码：

  ```
     <Button
          android:id="@+id/random_button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginEnd="24dp"
          android:background="@color/buttonBackground"
          android:text="@string/random_button_text"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/textview_first" />
  ```

* 设置中间textview的布局代码(该框后面作为容纳count按钮累加得到的数字)

  ```
   <TextView
          android:id="@+id/textview_first"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:fontFamily="sans-serif-condensed"
          android:text="@string/hello_first_fragment"
          android:textColor="@android:color/white"
          android:textSize="72sp"
          android:textStyle="bold"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />
  ```

* values>colors.xml里添加颜色资源

  ```
      <color name="screenBackground">#2196F3</color>
      <color name="buttonBackground">#BBDEFB</color>
  ```

  一个作为按钮的背景颜色，一个作为第一个fragment的背景颜色.

* 注意，在实验的API level中（31），这种设置并不生效，需修改res/values/themes.xml的style值，这里必须在style文件内添加".bridge"，不然不会生效.

  ```
      <style name="Theme.Lab2" parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge">
  ```

* 代码填充后，第一个fragment的效果图：

  ![输入图片说明](https://gitee.com/aoyang2684/E2/raw/master/%E5%AE%9E%E9%AA%8C%E6%88%AA%E5%9B%BE/QQ%E6%88%AA%E5%9B%BE20220505162251.png)

##### 三、设置代码自动补全

​	在setting里找到auto import,勾选java和kotlin栏里的add unambiguous imports on the fly

​	![输入图片说明](https://gitee.com/aoyang2684/E2/raw/master/%E5%AE%9E%E9%AA%8C%E6%88%AA%E5%9B%BE/QQ%E6%88%AA%E5%9B%BE20220507145522.png)

##### 四、添加第一个fragment的按钮相应事件

* 为Toast按钮添加一个toast消息

  ```
   view.findViewById<Button>(R.id.toast_button).setOnClickListener(){
              val myToast = Toast.makeText(context,"Hello Toast!",Toast.LENGTH_LONG)
              myToast.show()
          }
  ```

* 为Count添加更新屏幕数字的功能

  ```
  view.findViewById<Button>(R.id.count_button).setOnClickListener(){
              countMe(view)
          }
  ```

  这里countMe函数需要自己添加

  ```
  //计数方法
      private fun countMe(view: View) {
  
          val showCountTextView = view.findViewById<TextView>(R.id.textview_first)
  
  
          val countString = showCountTextView.text.toString()
  
  
          var count = countString.toInt()
  
          count++
  
  
          showCountTextView.text = count.toString()
      }
  
  ```
* Toast按钮与Count按钮的效果如图

  ![输入图片说明](https://gitee.com/aoyang2684/E2/raw/master/%E5%AE%9E%E9%AA%8C%E6%88%AA%E5%9B%BE/QQ%E6%88%AA%E5%9B%BE20220505165536.png)

##### 五、设置第二个页面布局

* 在第二个页面添加一个textview来显示随机数

  ```
    <TextView
          android:id="@+id/textview_header"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_marginStart="24dp"
          android:layout_marginLeft="24dp"
          android:layout_marginTop="24dp"
          android:layout_marginEnd="24dp"
          android:layout_marginRight="24dp"
          android:textColor="@color/colorPrimaryDark"
          android:textSize="24sp"
          android:text="@string/random_heading"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />
  
  
  ```

* 修改初始textview_second来显示随机数范围的提示信息

  ```
   <TextView
          android:id="@+id/textview_random"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="R"
          android:textColor="@android:color/white"
          android:textSize="72sp"
          android:textStyle="bold"
          app:layout_constraintBottom_toTopOf="@+id/button_second"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/textview_header"
          app:layout_constraintVertical_bias="0.45" />
  
  ```

  这里的文本信息：

  ```
      <string name="random_heading">Here is a random number between 0 and %d</string>
  
  ```

* 设置一个按钮回到第一个fragment

  ```
     <Button
          android:id="@+id/button_second"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/previous"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintHorizontal_bias="0.498"
          app:layout_constraintStart_toStartOf="parent" />
  
  ```

* 添加颜色资源

  ```
      <color name="colorPrimaryDark">#3700B3</color>
      <color name="screenBackground2">#26C6DA</color>
  
  ```

* 第二个页面布局效果图：

 ![输入图片说明](https://gitee.com/aoyang2684/E2/raw/master/%E5%AE%9E%E9%AA%8C%E6%88%AA%E5%9B%BE/QQ%E6%88%AA%E5%9B%BE20220505172106.png)

##### 六、启用safeArgs

* 这里因为每个人的版本不同，会出现很多问题，我个人的Android Studio版本是2020.3.1，gradle版本为7.0.2

* 经过多次尝试并看了技术长的文档，填写以下代码可以build成功

* 首先找到project模块下的build.gradle，添加如下信息：

  ```
  dependencies {
          def nav_version = "2.3.0"
          classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
      }
  
  ```

* 然后找到APP模块下的build.gradle，在plugins中添加如下信息：

  ```
  plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'androidx.navigation.safeargs'
  
  ```

* build成功效果图

 ![输入图片说明](https://gitee.com/aoyang2684/E2/raw/master/%E5%AE%9E%E9%AA%8C%E6%88%AA%E5%9B%BE/QQ%E6%88%AA%E5%9B%BE20220505192401.png)


##### 七、创建导航动作的参数并更新FirstFragment和secondFragment的响应代码

* FirstFragment和secondFragment属性栏里找到argument，并添加一个参数myArg,类型为整型integer

* 也可以在代码中添加：

  ```
  <argument
            android:name="myArg"
            app:argType="integer" />
  
  ```

 ![输入图片说明](https://gitee.com/aoyang2684/E2/raw/master/%E5%AE%9E%E9%AA%8C%E6%88%AA%E5%9B%BE/QQ%E6%88%AA%E5%9B%BE20220507152038.png)

* 在FirstFragment.kt中找到randombutton的处理代码，注释掉原先代码，更替为：

  ```
  binding.randomButton.setOnClickListener {
              val showCountTextView = view.findViewById<TextView>(R.id.textview_first)
              val currentCount = showCountTextView.text.toString().toInt()
  
              val action = FirstFragmentDirections.actionFirstFragmentToSecondFragment(currentCount)
  
              //findNavController().navigate(R.id.action_FirstFragment_to_SecondFragment)
              findNavController().navigate(action)
          }
  
  ```

* 添加第二个页面的相应代码，打开SecondFragment.kt，这里需要导入navArgs包：

  ```
  import androidx.navigation.fragment.navArgs
  
  ```

  在onViewCreated代码之前添加一行：

  ```
  val args: SecondFragmentArgs by navArgs()
  
  ```

  在onViewCreated中获取传递过来的参数列表，提取count值

  根据count值生成随机数

  textview_random中显示count值

  ```
  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding.buttonSecond.setOnClickListener {
            findNavController().navigate(R.id.action_SecondFragment_to_FirstFragment)
        }
        val count = args.myArg
        val countText = getString(R.string.random_heading, count)
        view.findViewById<TextView>(R.id.textview_header).text = countText
        val random = java.util.Random()
        var randomNumber = 0
        if (count > 0) {
            randomNumber = random.nextInt(count + 1)
        }
        view.findViewById<TextView>(R.id.textview_random).text = randomNumber.toString()

    }
  
  ```

##### 八、运行程序
* 最终效果图<br />
  ![输入图片说明](https://gitee.com/aoyang2684/E2/raw/master/%E5%AE%9E%E9%AA%8C%E6%88%AA%E5%9B%BE/ljhl1-29ku3.gif)