Android Studio --- > [学习笔记]Button、TextView、EditText

说明

• 源代码
• 为了更全面的了解RN,先熟悉一下Android开发

---

第1章 Android 初体验

1.1 Android开发概述

• Android是Google开发的操作系统
• Android开发是移动应用开发的表现形式之一(Android、IOS、H5 App、Native + H5、 RN、ionic、MUI…)

1.2 Android开发工具

• Android Studio
• 为什么使用Android Studio?
  • Android Studio是Google自己推出的Android集成开发工具,且Google已经停止对Eclipse的支持.

1.3 第一个Android应用

• Everything begin with Hello World!
• Android Studio最大的特定是使用Gradle来构建项目…
  [部分目录说明]

1. res: 存放资源
2. drawable: 图片
3. layout: 布局文件
4. mipmap-hdpi: logo图片
5. values: 颜色、文字
6. AndroidMainfest.xml: 应用里面用到的所有内容,都需要在这个里面注册一下

[部分代码说明]

• src/main/java/com.skypan.helloworld/MainActivity内的函数setContentView(R.layout.activity_main):表示,使用了activity_main布局
• 打开activity_main.xml,将标签名改为如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" />
LinearLayout>

• TextView android:text="Hello World": 显示在手机上的值为Hello World

第2章 UI组件

2.1 布局管理器

• 线性布局(LinearLayout)
• 相对布局(RelativeLayout)
• 以上两种占了接近百分之99

LinearLayout(线性布局)

[最常用属性]:

• android:id: 控件的id
• android:layout_width: 布局的宽度
• android:layout_height: 布局的高度
• android:background: 布局的背景颜色
• android:layout_margin: 布局的左右边距
• android:layout_padding: 布局的内侧边距
• android:orientation: 布局的方向
• dp: 根据屏幕自己算出大小
• match_parent: 匹配父元素
• : 是所有控件的父类,如
• android: gravity= "bottom": 控件子元素的排列方式
• weight: 权重,占父元素宽度(剩余)的权重.相当于flex布局中子元素的属性flex:1; 把剩余内容按照权重去分配

[小结]:

• 通过Android Studio新建的项目,入口文件是/app/src/main/java/com.skypan.helloworld/MainActivity

class MainActivity : AppCompatActivity() {
  override fun onCreate (saveInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
  }
}

• 其中setContentView使用到了activity_main:总体的布局样式

2.1.2 RelativeLayout(相对布局)

[最常见属性]:

• android:layout_toLeftOf: 在谁左边
• android:layout_toRightOf: 在谁右边
• android:layout_alignBottom: 跟谁底部对齐
• android:layout_alignParentBottom: 跟父元素底部对齐
• android:layout_below: 在谁的下面

[栗子]:

• 靠父元素右下角对齐

<RelativeLayout>
  <View
    android:id="@+id/view_1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#000000"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
  />
</RelativeLayout>

• View2相对于View1的右边对齐

<RelativeLayout>
  <View
    android:id="@+id/view_1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#000000"
  />
  <View
    android:id="@+id/view_2"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#FF0033"
    android:layout_toRightOf="@id/view_1"
  />
</RelativeLayout>

2.2 TextView

• 文字大小、颜色
• 显示不下使用…
• 文字 + icon
• 中划线、下划线

[栗子]:

• 1.写一个宽度随父元素,高度等于文本高度的按钮控件

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">
  <Button
    android:id="@+id/btn_textview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="TextView"/>
</LinearLayout>

• 2.点击Button类实现跳转

// MainActivity.java
import andoridx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

  // 声明 button
  private Button mBtnTextView;

  @override
  pretected void onCreate(Bundle saveInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mBtnTextView = (Button) findViewById(R.id.btn_textview);
    mBtnTextView.setOutClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        // 跳转到TextView演示界面
        Intent intent = new Intent(packageContext: MainActivity.this, TextViewActivity.class);
        startActivity(intent);
      }
    })
  }
}

• 3.能在MainActivity中使用TextViewActivity的原因
• AndroidMainfest.xml配置如下:

<application
  android:allowBckup="true"
  ...
   android:name=".MainActivity">
    <intent-filter>
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
    intent-filter>
  activity>
>

• 4.Java操作的TextView: android:id="@+id/tv_4"

// TextViewActivity.java
import androidx.appcompat.app.AppCompatActivity;
import android.widget.TextView;
import android.os.Bundle;
public class TextViewActivity extends AppCompatActivity {

  private TextView mTv4;

  @override
  protected void onCreate (Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_text_view);
    // 获取 id.tv_4
    mTv4 = (TextView) findViewById(R.id.tv_4);
    // 给 id.tv_4划线
    mTv4.getPaint().setFlags(Paint.STRING_THRU_TEXT_FLAG);
    // 去锯齿
    mTv4.getPaint().setAntiAlias(true)
  }
}

2.3 Button

• 文字大小、颜色
• 自定义背景形状
• 自定义按压效果
• 点击事件

Button样式(简单)

• activity_main.xml

<Button
  android:id="@+id/btn_button"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="Button"
  android:layout_marginTop="10dp" />

使用java操作控件

// MainActivity.java

// 声明控件
private Button mBtnButton
// 找到按钮 btn_button
mBtnButton = (Button) findViewById(R.id.btn_button);
// 给 mBtnButton 添加点击事件
mBtnButton.setOnClickListener(new View.OnClickListener(){
  // 点击按钮后执行的操作
})

实现跳转

import andoirdx.appcompat.app.AppCompatActivity;
import andoird.widget.Button;
import android.content.Intent;

public class MainActivity extends AppCompatActivity {
  // 声明button
  private Button mBtnButton;

  @override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // 找到按钮
    mBtnButton = (Button) findViewById(R.id.btn_button);
    mBtnButton.setOnClickListener(new View.OnClickListener() {
      @ovrride
      public void onClick(View v) {
        // 跳转到 Button 演示界面
        Intent intent = new Intent( packageContext: MainActivity.this, ButtonActivity.class);
        startActivity(intent);
      }
    })
  }
}

做一个矩形的按钮

• 1.在res/drawable -> New -> Drawable resource file -> btn_2.xml
• 代码如下:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <solid
    android:color="#ffffff" />

  <corners
    android:radius="15dp" />

按压效果

• res/drawable/bg_btn4.xml
• 样式

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <shape>
      <solid android:color="#cc7c00" />
      <corners android:radius="15dp" />
    shape>
  item>
  <item android:state_pressed="false">
    <shape>
      <solid android:color="#ff9900">
      <corners android:radius="15dp" />
    shape>
  item>
selector>

• 引用如下
• activity_button.xml

<Button
  android:id="@+id/btn_4"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_below="@id/btn_3"
  android:layout_marginTop="5dp"
  android:text="Button 4"
  android:textSize="20sp"
  android:textColor="#0066ff"
  android:background="@drawable/bg_btn4" />

点击按钮,响应Toast

• 假设有按钮如下: activity_button.xml

<Button
 ...
 android:onClick="showToast" />

• 对应Java文件 ButtonActivity.java 中加入如下:

public void showToast(View view) {
  Toast.makeText(context: this, text:'点击', Toast.LENGTH_SHORT).show();
}

[报错]:

• Could not find method showToast(View) in a parent or ancestor Context for android: 写按钮触发事件的时候,没有传入参数 View view,将public void showToast()改为public void showToast(View view)

点击按钮,响应Toast[方法2]

• [核心方法] :Button.setOnClickListener()
• 假设有按钮如下: activity_button.xml

<Button
  android:id="@+id/btn_3"
  ....
/>

• 对于的Java文件ButtonActivity.java中加入如下:

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.Toast;
import android.view.View;

public class ButtonActivity extends AppCompatActivity {
  private Button mBtn3;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mBtn3 = (Button) findViewById(R.id.btn_3);
    mBtn3.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        Toast.makeText(ButtonActivity.this, 'btn3被点击', Toast.LENGTH_SHORT).show();
      }
    })
  }
}

给TextView控件添加点击事件

• TextView控件activity_button.xml,如下:

<TextView
  android:id="@+id/tv_1"
  ...
/>

• 在Java中获取控件,并设置点击事件ButtonActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
import android.widget.Toast;
import android.view.View;

public class ButtonActivity extends AppCompatActivity {
  private TextView mTv1;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // tv_1的点击事件
    mTv1 = (TextView) findViewById(R.id.tv_1);
    mTv1.setOnClickListener(new View.OnClickListener(){
      @Override
      public void onClick(View v) {
        Toast.makeText(ButtonActivity.this, "TextView被点击", Toast.LENGTH_SHORT).show();
      }
    })
  }
}

2.4 EditText(输入控件)

• 常用属性
• 监听事件
• 制作登录界面

2.4.1 加一个跳转页面的按钮

• 按钮样式: activity_main.xml

<Button
  android:id="@+id/btn_edittext"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="EditText"
  android:textAllCaps="false"/>

• 按钮的点击事件: MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.context.Intent;
import android.widget.Button;
import android.view.View;

public class MainActivity extends AppCompatActivity {
  // 声明button
  private Button mBtnEditText;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // 找到 btn_edittext
    mBtnEditText = (Button) findViewById(R.id.btn_edittext);
    mBtnEditText.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        // 跳转到 EditText 界面
        // 这里先假设有 EditTextActivity
        Intent intent = new Intent(MainActivity.this, EditTextActivity.class);
        startActivity(intent);
      }
    });
  }
}

• 按钮的活动页面: activity_edit_text.xml

<RelativeLayout xmlns:android="http://schemas.android/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:padding="15dp">

  <EditText
    android:id="@+id/et_1"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:textSize="16sp"
    android:textColor="#ffad33"
    android:hint="用户名"/>

  <EditText
    android:id="@+id/et_2"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_below="@id/et_1"
    android:hint="密码"
    android:inputType="textPassword"
    android:layout_marginTop="5dp"
  />
RelativeLayout>

• 给用户名输入框activity_edit_text.xml加样式
• 输入控件如下

<EditText
  android:id="@+id/et_1"
  ...
  android:background="@drawable/bg_username"
/>

• 在res/drawable -> New -> Drawable resource file -> bg_username.xml(shape)
• 写入形状如下:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <stroke
    android:width="1dp"
    andorid:color="#999999" />

  <corners
    android:radius="5dp"/>