Android App 开发学习第三天：基本UI组件

最新推荐文章于 2022-03-26 10:21:51 发布

NikerunZoo

最新推荐文章于 2022-03-26 10:21:51 发布

阅读量228

点赞数

分类专栏： Android App开发文章标签： android

本文链接：https://blog.csdn.net/NikerunZoo/article/details/109354281

版权

Android App开发专栏收录该内容

48 篇文章 4 订阅

订阅专栏

1.文本类组件

文本框

<TextView
android:text:设置显示文本，可在strings中定义该字符串资源
android:textColor:设置文本颜色
android:textSize:设置文本大小
android:singleLine:设置单行显示>
android:textStyle:设置字体样式
android:textAllCaps:设置文本所有内容是否大写
android:layout_centerVertical：设置是否垂直居中显示
编辑框

<EditText
android:hint:设置提示信息
android:textColorHint:设置输入框提示信息的颜色
android:inputType:设置输入的数据是什么类型的，如TextPassword密码。
android:drawableLeft=android:drawableStart,最小sdk17之后使用:设置编辑框左侧的图像
android:drawableRight=android:adrableEnd:设置编辑框右侧图像
android:drawableBottom:设置编辑框底部的图像
android:drawableTop：设置编辑框顶部的图像
android:drawablePadding:设置图像的内边距

android:lines：设置该编辑框可占的行数
android:maxLines：设置最多显示多少行，当超过此行数时它形状的大小不会根据输入内容的多少而改变
android:minLines：设置最少显示多少行，当超过此行数时它形状的大小会根据输入内容的多少而改变
android:maxLength:限制输入的字数
android:selectAllOnFocus：设置是否自动选取该组件内的所有的文本内容
android:autofillHints：在点击自动填充后，显示提示列表，如果不做处理或不添加属性则不会出现提示列表
android:imeOptions:用来设置在使用软键盘输入完成后是跳到下一行，还是不跳动。。关于对该属性的详解https://www.cnblogs.com/sddbk/p/5253177.html
可在MainActivity中，获取编辑框输入的数据

EditText et = (EditText) findViewById(R.id.edit1);
        et.getText();

2.按钮类组件

普通按钮
android:tag:可以用来传值
常用监听器
为普通按钮添加单机时间监听器

匿名内部类作为单击事件监听器

Button button = this.findViewById(R.id.button1);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"单击了按钮1",Toast.LENGTH_SHORT).show();
            }
        });

通过onClick属性实现
1. 在Activity中编写一个包含View类型参数的方法。

 public  void myClick(View view){
        Toast.makeText(MainActivity.this,"单击了按钮2",Toast.LENGTH_LONG).show();
    }

将android:onClick属性指定为步骤（1）中的方法名

  android:onClick="myClick"

图片按钮
imageButton和Button的区别
相同点：单击都可以出发onClick事件
不同点：imageButton没有android:text属性，可在制作图片的时候加上

单选按钮<RadioButton
android:button="@null"：取消单选按钮前边的圆点
单选按钮组包含多个单选按钮，在同一组的单选按钮只能被选中一个
获取选中按钮的值

单击其按钮获取值

RadioGroup rg = this.findViewById(R.id.radiogroup1);
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton r = findViewById(checkedId);
                Toast.makeText(MainActivity.this,"性别："+r.getText(),Toast.LENGTH_SHORT).show();
            }
        });

单击其他按钮获取值

 RadioGroup rg= this.findViewById(R.id.radioGroup)
 Button button1 = this.findViewById(R.id.button1);
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                for (int  i =0 ; i<rg.getChildCount();i++){
                    RadioButton r = (RadioButton) rg.getChildAt(i);
                    if (r.isChecked()){
                        Toast.makeText(MainActivity.this,r.getText(),Toast.LENGTH_SHORT).show();
                        break;
                    }
                }
            }
        });

复选框<CheckBox
android:checked:设置是否被勾选
android:clickable="false"屏蔽单击事件
android:focusable="false"屏蔽单击事件
android:focusableInTouchMode="false"屏蔽单击事件
>
ToggleButton(开关按钮)

android:disabledAlpha：设置按钮在禁用时的透明度
android:textOff：按钮没有被选中时显示的文字
android:textOn：按钮被选中时显示的文字另外，除了这个我们还可以自己写个selector，然后设置下Background属性即可~
Switch(开关)
android:showText：设置on/off的时候是否显示文字,boolean
android:splitTrack：是否设置一个间隙，让滑块与底部图片分隔,boolean
android:switchMinWidth：设置开关的最小宽度
android:switchPadding：设置滑块内文字的间隔
android:switchTextAppearance：设置开关的文字外观，暂时没发现有什么用…
android:textOff：按钮没有被选中时显示的文字
android:textOn：按钮被选中时显示的文字
android:textStyle：文字风格，粗体，斜体写划线那些
android:track：底部的图片
android:thumb：滑块的图片
android:typeface：设置字体，默认支持这三种:sans, serif, monospace;除此以外还可以使用其他字体文件(*.ttf)，首先要将字体文件保存在assets/fonts/目录下，不过需要在Java代码中设置： Typeface typeFace =Typeface.createFromAsset(getAssets(),“fonts/HandmadeTypewriter.ttf”); textView.setTypeface(typeFace);

thumb_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/alarm"/>
    <item android:state_pressed="false" android:drawable="@drawable/apple"/>
</selector>

track_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/icon1"/>
    <item android:state_checked="false" android:drawable="@drawable/icon2"/>
</selector>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/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"
    tools:context=".MainActivity">

    <ToggleButton
        android:id="@+id/tbtn_open"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:checked="true"
        android:textOff="打开声音"
        android:textOn="关闭声音"
        />
    <Switch
        android:id="@+id/swh_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff=""
        android:textOn=""
        android:thumb="@drawable/thumb_selector"
        android:track="@drawable/track_selector"/>

</LinearLayout>

MainActivity

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.Switch;
import android.widget.Toast;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {

    private ToggleButton tbtn_open;
    private Switch swh_status;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tbtn_open = findViewById(R.id.tbtn_open);
        swh_status = findViewById(R.id.swh_status);
        tbtn_open.setOnCheckedChangeListener(this);
        swh_status.setOnCheckedChangeListener(this);

    }


    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        switch (buttonView.getId()){
            case R.id.tbtn_open:
                if (buttonView.isChecked())
                    Toast.makeText(this,"打开声音",Toast.LENGTH_SHORT).show();
                else Toast.makeText(this,"关闭声音",Toast.LENGTH_SHORT).show();
                break;
            case R.id.swh_status:
                if (buttonView.isChecked())
                    Toast.makeText(this,"开关：ON",Toast.LENGTH_SHORT).show();
                else Toast.makeText(this,"开关:OFF",Toast.LENGTH_SHORT).show();
                break;
        }
    }
}

3.日期时间类组件

日期选择器

DatePicker

获取日期信息

 <DatePicker
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:id="@+id/datepicker"/>


public class MainActivity extends AppCompatActivity {

    int year,month,day;
    DatePicker datePicker;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         datePicker= this.findViewById(R.id.datepicker);
        Calendar calendar = Calendar.getInstance();
        year = calendar.get(Calendar.YEAR);
        month=calendar.get(Calendar.MONTH);
        day=calendar.get(Calendar.DAY_OF_MONTH);
        datePicker.init(year, month, day, new DatePicker.OnDateChangedListener() {
            @Override
            public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
                MainActivity.this.year = year;
                MainActivity.this.month = monthOfYear;
                MainActivity.this.day = dayOfMonth;
                show(year,monthOfYear,dayOfMonth);
            }
        });

    }

    private  void  show(int year ,int month , int day){
        String str = year+"年"+(month+1)+"月"+day+"日";
        Toast.makeText(MainActivity.this,str,Toast.LENGTH_LONG).show();
    }
}

效果
　　在这里插入图片描述

核心代码

方法

/**

@description 选择日期弹出框
@param listener 选择日期确定后执行的接口
@param curDate 当前显示的日期
@return
@author wqy
@time 2020-1-6 14:23
*/
public void showDatePickDialog(DatePickerDialog.OnDateSetListener listener, String curDate) {
Calendar calendar = Calendar.getInstance();
int year = 0,month = 0,day = 0;
try {
year =Integer.parseInt(curDate.substring(0,curDate.indexOf("-"))) ;
month =Integer.parseInt(curDate.substring(curDate.indexOf("-")+1,curDate.lastIndexOf("-")))-1 ;
day =Integer.parseInt(curDate.substring(curDate.lastIndexOf("-")+1,curDate.length())) ;
} catch (Exception e) {
e.printStackTrace();
year = calendar.get(Calendar.YEAR);
month = calendar.get(Calendar.MONTH);
day=calendar.get(Calendar.DAY_OF_MONTH);
}

DatePickerDialog datePickerDialog = new DatePickerDialog(this,DatePickerDialog.THEME_HOLO_LIGHT,listener, year,month , day);
datePickerDialog.show();
}

调用

 showDatePickDialog(new DatePickerDialog.OnDateSetListener() {
      @Override
       public void onDateSet(DatePicker datePicker, int year, int month, int day) {
          etDate.setText(year + "-" + (month + 1) + "-" + day);
       }
   }, etDate.getText().toString());

说明：etDate为一个输入框EditText 显示当wujiaox前选择的日期，也可使用 TextView 。

⭐使用EditText 时需注意：将EditText Touch 时弹出输入框的效果禁用掉，所以尽量使用 onTouch 来实现弹出，不用 onClick 事件

@Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        if (motionEvent.getAction()==MotionEvent.ACTION_DOWN){
            hideInput();//隐藏输入框
            switch (view.getId()) {
                case R.id.etDate:
                    showDatePickDialog(new DatePickerDialog.OnDateSetListener() {
                        @Override
                        public void onDateSet(DatePicker datePicker, int year, int month, int day) {
                            //选择日期过后执行的事件
                            etDate.setText(year + "-" + (month + 1) + "-" + day);
                        }
                    }, etDate.getText().toString());
                    break;
            }
        }
        return false;
    }

hideInput方法有可能不是当前输入框调出的输入框，在点击之前有输入框也要隐藏掉

/**
     * 隐藏键盘
     */
    protected void hideInput() {
        InputMethodManager imm = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
        View v = getWindow().peekDecorView();
        if (null != v) {
            imm.hideSoftInputFromWindow(v.getWindowToken(), 0);
        }

时间选择器
TimePicker
显示选择的时间

 <TimePicker
        android:id="@+id/timepicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></TimePicker>

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TimePicker tp = this.findViewById(R.id.timepicker);
        tp.setIs24HourView(true);
        tp.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
            @Override
            public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
                String str = hourOfDay+"时"+minute+"分";
                Toast.makeText(MainActivity.this,str,Toast.LENGTH_LONG).show();

            }
        });
    }
}

计时器
<Chronometer
android:format:设置显示时间格式>

setBase():设置计时器的起始时间
setFormat()：设置显示时间的格式
start()：指定开始计时
stop()：指定停止计时
setOnchronometerTickListener()：为计时器绑定事件监听器，当计时器改变时触发该监听器

设置并显示倒计时60s

 <Chronometer
        android:id="@+id/chronometer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFFF00"
        android:layout_marginRight="8dp"
        android:layout_marginTop="10dp"
        android:layout_alignParentRight="true"

        />

public class MainActivity extends AppCompatActivity {
    Chronometer ch ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ch = this.findViewById(R.id.chronometer);
        ch.setBase(SystemClock.elapsedRealtime());
        ch.setFormat("%s");
        ch.start();
        ch.setOnChronometerTickListener(new Chronometer.OnChronometerTickListener() {
            @Override
            public void onChronometerTick(Chronometer chronometer) {
                if (SystemClock.elapsedRealtime() - ch.getBase()>=60000){
                    ch.stop();
                }
            }
        });
    }
}

NikerunZoo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Android App 开发学习第三天：基本UI组件

1.文本类组件文本框<TextViewandroid:text:设置显示文本，可在strings中定义该字符串资源android:textColor:设置文本颜色android:textSize:设置文本大小android:singleLine:设置单行显示>编辑框<EditTextandroid:hint:设置提示信息android:inputType:设置输入的数据是什么类型的，如TextPassword密码。android:drawableLeft=an
复制链接

扫一扫