• 第二章 基本UI组件

    1 文本框组件

    1.1 TextView

    示例：实现QQ聊天框

    1. "1.0" encoding="utf-8"?>
    2. <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="match_parent"
    7.     android:columnCount="6"
    8.     android:rowCount="4"
    9.     android:background="@drawable/bg"
    10.     tools:context=".MainActivity">
    11.  
    12.     <ImageView
    13.         android:layout_width="wrap_content"
    14.         android:layout_height="wrap_content"
    15.         android:layout_gravity="end"
    16.         android:paddingRight="10dp"
    17.         android:src="@drawable/ico2"
    18.         android:layout_column="5"
    19.         android:layout_row="0"/>
    20.  
    21.     <TextView
    22.         android:layout_marginTop="10dp"
    23.         android:paddingTop="10dp"
    24.         android:layout_width="wrap_content"
    25.         android:layout_height="wrap_content"
    26.         android:maxWidth="@dimen/max_width"
    27.         android:layout_gravity="end"
    28.         android:background="@drawable/bg_textview"
    29.         android:text="你好呀，好久不见了！最近忙什么呢？"
    30.         android:textColor="#16476b"
    31.         android:textSize="14sp"
    32.         android:layout_column="1"
    33.         android:layout_row="0"
    34.         android:layout_columnSpan="4"/>
    35.  
    36.     <ImageView
    37.         android:layout_width="wrap_content"
    38.         android:layout_height="wrap_content"
    39.         android:layout_gravity="start"
    40.         android:paddingLeft="10dp"
    41.         android:src="@drawable/ico1"
    42.         android:layout_column="0"
    43.         android:layout_row="1"/>
    44.  
    45.     <TextView
    46.         android:paddingTop="10dp"
    47.         android:layout_marginTop="10dp"
    48.         android:layout_width="wrap_content"
    49.         android:layout_height="wrap_content"
    50.         android:maxWidth="@dimen/max_width"
    51.         android:layout_gravity="start"
    52.         android:background="@drawable/bg_textview2"
    53.         android:text="最近在做一个手机游戏，所以很少上QQ"
    54.         android:textColor="#FFFFFF"
    55.         android:textSize="14sp"
    56.         android:layout_column="1"
    57.         android:layout_row="1"
    58.         android:layout_columnSpan="4"/>
    59.  
    60.     <ImageView
    61.         android:layout_width="wrap_content"
    62.         android:layout_height="wrap_content"
    63.         android:layout_gravity="end"
    64.         android:paddingRight="10dp"
    65.         android:src="@drawable/ico2"
    66.         android:layout_column="5"
    67.         android:layout_row="2"/>
    68.  
    69.     <TextView
    70.         android:paddingTop="10dp"
    71.         android:layout_marginTop="10dp"
    72.         android:layout_width="wrap_content"
    73.         android:layout_height="wrap_content"
    74.         android:maxWidth="@dimen/max_width"
    75.         android:layout_gravity="end"
    76.         android:background="@drawable/bg_textview"
    77.         android:text="最近进展如何？需要我帮忙吗？"
    78.         android:textColor="#16476b"
    79.         android:textSize="14sp"
    80.         android:layout_column="1"
    81.         android:layout_row="2"
    82.         android:layout_columnSpan="4"/>
    83.  
    84.     <ImageView
    85.         android:layout_width="wrap_content"
    86.         android:layout_height="wrap_content"
    87.         android:layout_gravity="start"
    88.         android:paddingLeft="10dp"
    89.         android:src="@drawable/ico1"
    90.         android:layout_column="0"
    91.         android:layout_row="3"/>
    92.  
    93.     <TextView
    94.         android:paddingTop="10dp"
    95.         android:layout_marginTop="10dp"
    96.         android:layout_width="wrap_content"
    97.         android:layout_height="wrap_content"
    98.         android:maxWidth="@dimen/max_width"
    99.         android:layout_gravity="start"
    100.         android:background="@drawable/bg_textview2"
    101.         android:text="总算大功告成了，有时间发给你玩哦"
    102.         android:textColor="#FFFFFF"
    103.         android:textSize="14sp"
    104.         android:layout_column="1"
    105.         android:layout_row="3"
    106.         android:layout_columnSpan="4"/>
    107. GridLayout>

    1.2 编辑框 EditText

     几个重要属性：

    • hint：当用户没有输入的时候对用户的输入进行提示
    • inputType：限定用户输入的内容
    • drawStart、drawEnd、drawBottom、drawTop：可以在左侧、右侧、上面、下面绘制一个小图标
    • lines：控制行数，超过行数将向上滚动

    示例：

    1. "1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="match_parent"
    7.     android:background="#EAEAEA"
    8.     android:orientation="vertical"
    9.     tools:context=".MainActivity">
    10.  
    11.     <EditText
    12.         android:layout_width="match_parent"
    13.         android:layout_height="wrap_content"
    14.         android:lines="6"
    15.         android:hint="说点什么吧。。。"
    16.         android:background="#FFFFFF"
    17.         android:padding="5dp"
    18.         android:gravity="left|top"
    19.         android:layout_marginBottom="10dp"
    20.         android:inputType="textMultiLine"/>
    21.  
    22.     <TextView
    23.         android:layout_width="match_parent"
    24.         android:layout_height="wrap_content"
    25.         android:drawableLeft="@mipmap/addpicture"
    26.         android:drawablePadding="5dp"
    27.         android:text="添加照片"
    28.         android:gravity="center_vertical"
    29.         android:background="#FFFFFF"
    30.         android:padding="8dp"
    31.         android:layout_marginBottom="10dp"/>
    32.  
    33.     <ImageView
    34.         android:layout_width="match_parent"
    35.         android:layout_height="wrap_content"
    36.         android:src="@mipmap/bottom"
    37.         android:scaleType="fitXY"/>
    38.  
    39. LinearLayout>

    1.3 普通按钮

     按钮通常与监听器组合使用。

    什么是监听器？

     有两种方式添加事件监听器：

    • 匿名内部类方式
    1. Button button = findViewById(R.id.button1);
    2. button.setOnClickListener(new View.OnClickListener() {
    3.     @Override
    4.     public void onClick(View v) {
    5.         Toast.makeText(MainActivity.this, "你点击了按钮", Toast.LENGTH_SHORT).show();
    6.     }
    7. });
    • 通过onClick属性实现
    1. 在Activity中编写一个包含View类型参数的方法。
    2. 将android:onClick指定为刚刚指定的方法名
    1. public void myClick(View view) {
    2.     Toast.makeText(MainActivity.this, "你点击了按钮2", Toast.LENGTH_SHORT).show();
    3. }
    1. <Button
    2.     android:layout_width="match_parent"
    3.     android:layout_height="wrap_content"
    4.     android:text="按钮2"
    5.     android:onClick="myClick"/>

    1.4 图片按钮 

     1.5 单选按钮

    两种方式获得单选的内容：

    1. public class MainActivity extends AppCompatActivity {
    2.  
    3.     RadioGroup radioGroup;
    4.  
    5.     @Override
    6.     protected void onCreate(Bundle savedInstanceState) {
    7.         super.onCreate(savedInstanceState);
    8.         setContentView(R.layout.activity_main);
    9.  
    10.         //方式1
    11.         radioGroup = findViewById(R.id.radioGroup);
    12.         radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
    13.             @Override
    14.             public void onCheckedChanged(RadioGroup group, int checkedId) {
    15.                 RadioButton radioButton = findViewById(checkedId);
    16.                 Toast.makeText(MainActivity.this, "性别："+radioButton.getText(), Toast.LENGTH_SHORT).show();
    17.             }
    18.         });
    19.  
    20.         //方式2
    21.         Button button = findViewById(R.id.button);
    22.         button.setOnClickListener(new View.OnClickListener() {
    23.             @Override
    24.             public void onClick(View v) {
    25.                 for(int i = 0; i < radioGroup.getChildCount(); i++) {
    26.                     RadioButton radioButton = (RadioButton) radioGroup.getChildAt(i);
    27.                     if(radioButton.isChecked()) {
    28.                         Toast.makeText(MainActivity.this, "性别："+radioButton.getText(), Toast.LENGTH_SHORT).show();
    29.                     }
    30.                 }
    31.             }
    32.         });
    33.     }
    34. }

     1.6 复选框

     与单选框不同的是，复选框可以选中多个。

    1. <Button
    2.     android:id="@+id/btn_login"
    3.     android:layout_width="match_parent"
    4.     android:layout_height="wrap_content"
    5.     android:text="确认登录"
    6.     android:background="#009688"/>
    7.  
    8. <Button
    9.     android:layout_marginTop="20dp"
    10.     android:layout_width="match_parent"
    11.     android:layout_height="wrap_content"
    12.     android:text="取消"
    13.     android:background="#FFFFFF"/>
    1. btn_login = findViewById(R.id.btn_login);
    2. checkBox1 = findViewById(R.id.checkbox1);
    3. checkBox2 = findViewById(R.id.checkbox2);
    4. checkBox3 = findViewById(R.id.checkbox3);
    5.  
    6. btn_login.setOnClickListener(new View.OnClickListener() {
    7.         @Override
    8.         public void onClick(View v) {
    9.             String str = "";
    10.             if(checkBox1.isChecked()) {
    11.                 str += checkBox1.getText().toString() + "\n";
    12.             }
    13.             if(checkBox2.isChecked()) {
    14.                 str += checkBox2.getText().toString() + "\n";
    15.             }
    16.             if(checkBox3.isChecked()) {
    17.                 str += checkBox3.getText().toString();
    18.             }
    19.             Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
    20.         }
    21. });

    1.7 日期选择器

     

    1. <DatePicker
    2.     android:id="@+id/date_picker"
    3.     android:layout_width="wrap_content"
    4.     android:layout_height="wrap_content"/>
    1. DatePicker datePicker = findViewById(R.id.date_picker);
    2. datePicker.setOnDateChangedListener(new DatePicker.OnDateChangedListener() {
    3.         @Override
    4.         public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
    5.                 String str = year + "年" + monthOfYear + "月" + dayOfMonth + "日";
    6.                 Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
    7.             }
    8. });

    1.8 时间选择器

    1. <TimePicker
    2.     android:id="@+id/timepicker"
    3.     android:layout_width="wrap_content"
    4.     android:layout_height="wrap_content"/>
    1. DatePicker datePicker = findViewById(R.id.date_picker);
    2. datePicker.setOnDateChangedListener(new DatePicker.OnDateChangedListener() {
    3.        @Override
    4.        public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
    5.                 String str = year + "年" + monthOfYear + "月" + dayOfMonth + "日";
    6.                 Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
    7.             }
    8. });

    1.9 计时器

     

    1. <Chronometer
    2.     android:id="@+id/chronometer"
    3.     android:layout_width="wrap_content"
    4.     android:layout_height="wrap_content"
    5.     android:textColor="#FFFF00"
    6.     android:layout_alignParentRight="true"
    7.     android:layout_marginRight="20dp"
    8.     android:layout_marginTop="40dp"
    9.     android:textSize="20sp"/>
    1. Chronometer chronometer = findViewById(R.id.chronometer);
    2. chronometer.setBase(SystemClock.elapsedRealtime());
    3. chronometer.setFormat("%s");
    4. chronometer.start();
    5. chronometer.setOnChronometerTickListener(new Chronometer.OnChronometerTickListener() {
    6.        @Override
    7.        public void onChronometerTick(Chronometer chronometer) {
    8.              if(SystemClock.elapsedRealtime() - chronometer.getBase() >= 60000) {
    9.                 chronometer.stop();
    10.              }
    11.         }
    12. });

  • 相关阅读:
    Redis查询Key
    分享一个开源的windows安卓投屏工具，scrcpy
    Golang MQTT的使用 实现发布订阅
    QT学习总结之QObject详解
    MySQL
    OceanBase 里的 schema 是什么？
    CountDownLatch和CyclicBarrier：如何让多线程步调一致？
    深度学习入门（十九）深度学习计算——自定义层
    vivo 推送系统的容灾建设与实践
    getBytes方法
  • 原文地址：https://blog.csdn.net/qq_37054755/article/details/127476120