Android入门02 -- UI控件

2021-12-06 本文已影响0人 YanZi_33

TextView控件

TextView是用来显示文本内容的控件，其常用属性有如下：
layout_width：控件的宽度；
layout_height：控件的高度；
- match_parent：表示与父容器等宽；
- wrap_content：表示内容包裹，控件本身的尺寸大小与空间内部元素有关；
- 可设置具体尺寸大小，单位一般用dp；
id：为控件设置一个唯一的id；
text：设置显示的文本内容；
textColor：设置文本显示颜色；
textStyle：设置字体风格；
- normal：默认值无风格；
- bold：加粗效果；
- italic：斜体效果；
textSize：字体大小，单位一般使用sp；
background：设置控件的背景颜色，也可设置成图片；
gravity：设置控件中内容的对齐方向；

设置TextView文本的阴影颜色

shadowColor：设置阴影颜色，需要与shadowRadius一起使用；
shadowRadius：设置阴影的模糊程度，建议使用0.3；
shadowDx：设置阴影在水平方向的偏移，就是水平方向阴影开始的横坐标；
shadowDy：设置阴影在竖直方向的偏移，就是竖直方向阴影开始的纵坐标；
案例代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_width="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:id="@+id/tv_one"
        android:text="燕子"
        android:textColor="@color/black"
        android:textStyle="italic"
        android:textSize="40sp"
        android:gravity="center_vertical"
        android:shadowColor="@color/red"
        android:shadowRadius="3.0"
        android:shadowDx="10"
        android:shadowDy="10"/>
</LinearLayout>

书写XML控件时，从左到右依次书写，会有提示；

实现跑马灯效果的TextView

singleLine：文本内容单行显示；
focusable：是否获取焦点；
focusableInTouchMode：用于控制视图在触摸模式下是否可以聚焦；
ellipsize：省略文本的方式；
marqueeRepeatLimit：字幕动画重复的次数；
案例代码如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_width="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:id="@+id/tv_one"
        android:text="燕子燕子生生世世说话啊哈撒点上课了斯大林打卡"
        android:textColor="@color/black"
        android:textStyle="italic"
        android:textSize="40sp"
        android:gravity="center_vertical"
        android:shadowColor="@color/red"
        android:shadowRadius="3.0"
        android:shadowDx="10"
        android:shadowDy="10"
        android:singleLine="true"
        android:ellipsize="marquee"
        android:marqueeRepeatLimit="marquee_forever"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:clickable="true">
        <requestFocus/>
    </TextView>
</LinearLayout>

注意默认是不开启跑马灯效果，需要开启还需要设置：
- 第一种方式：clickable：属性设置为true，然后点击TextView，就会出现跑马灯效果；
- 第二种方式：新增requestFocus，立即出现跑马灯效果；

Button按钮

首先Button是继承自TextView；
常见属性有如下：
background：设置背景或者颜色，可通过使用drawable中的资源，根据按钮的不同状态，设置不同的图片；
backgroundTint：设置背景的颜色，可通过使用color中的资源，根据按钮的不同状态，设置不同的颜色；
foreground：前置颜色，按钮可以看成背景，文字，前置层 三层的叠加，前置颜色也可通过使用color中的资源进行设置；
首先在drawable中创建button_selector.xml文件，
Snip20211206_30.png
button_selector.xml文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    //点击按钮时的背景图片
    <item android:drawable="@drawable/ic_baseline_airplanemode_active_24" android:state_pressed="true"/>
    //正常状态下的背景图片
    <item android:drawable="@drawable/ic_baseline_airport_shuttle_24" />
</selector>

在res目录中，创建color文件夹，然后再创建button_color_selector.xml文件；
Snip20211206_31.png

Snip20211206_32.png

button_color_selector.xml文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    //点击按钮时的背景图片的颜色
    <item android:color="#ffff0000" android:state_pressed="true"/>
    //正常状态下的背景图片的颜色
    <item android:color="#ff00ff00" />
</selector>

案例代码：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_width="match_parent">

    <Button
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:text="我是按钮"
        android:background="@drawable/button_selector"
        android:backgroundTint="@color/button_color_selector"/>
</LinearLayout>

Button的事件处理

点击事件；
长按事件；
触摸事件；
案例代码：

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

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

        Button button = findViewById(R.id.button);
        //点击事件
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.e("MainActivity","点击按钮");
            }
        });
        //长按事件
        button.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                Log.e("MainActivity","长按按钮");
                return false;
            }
        });
        //触摸事件
        button.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                Log.e("MainActivity","触摸按钮");
                return false;
            }
        });
    }
}

还可在在xml文件中定义点击方法名，如下所示：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_width="match_parent">

    <Button
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:text="我是按钮"
        android:background="@drawable/button_selector"
        android:backgroundTint="@color/button_color_selector"
        android:id="@+id/button"
        android:onClick="clickButton"/>
</LinearLayout>

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
    }
    
    public void clickButton(View view) {
        Log.e("MainActivity","点击按钮");
    }
}

EditText

文本输入框控件，继承自TextView；
其主要属性有如下：
hint：输入提示文本；
textColorHint：输入提示文本的颜色；
inputType：键盘类型；
drawableXXX：在输入框的指定位置添加图片；
drawablePadding：设置图片与输入内容之间的间距；
paddingXXX：设置内容边距；
background：设置背景颜色；
案例代码如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_width="match_parent">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:hint="请输入用户名"
        android:textColorHint="#95a1aa"
        android:inputType="phone"
        android:drawableLeft="@drawable/ic_baseline_account_circle_24"
        android:drawablePadding="15dp"
        android:padding="15dp"
        android:background="@color/white"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:hint="请输入密码"
        android:textColorHint="#95a1aa"
        android:inputType="textPassword"
        android:drawableLeft="@drawable/ic_baseline_lock_24"
        android:drawablePadding="15dp"
        android:padding="15dp"
        android:background="@color/white"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginTop="25dp"
        android:text="登录"
        android:background="@color/red"/>

</LinearLayout>

ImageView

图片显示控件，继承自View；
src：设置图片资源；
scaleType：设置图片的缩放类型；
image.png
maxHeight：最大高度；
maxWidth：最大宽度；
adjustViewBounds：调整View的界限；
案例代码如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_width="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/wd_ranklist_default"
        android:scaleType="centerInside"
        android:maxWidth="200dp"
        android:maxHeight="200dp"
        android:adjustViewBounds="true"/>

</LinearLayout>

ProgressBar

进度条控件，继承自View；
max：进度条的最大值；
progress：进度条已完成的进度值；
indeterminate：如果设置为true，则进度条不精确显示进度；
style：进度条风格；
案例代码如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_width="match_parent">

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/progress_bar"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="控制进度条的显示与隐藏"
        android:onClick="clickButton"/>

    <ProgressBar
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/progress_bar1"
        style="?android:attr/progressBarStyleHorizontal"  //水平进度条
        android:max="100"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="模拟进度"
        android:onClick="click"/>

</LinearLayout>

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {

    private ProgressBar progressBar;
    private ProgressBar progressBar1;

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

        progressBar = findViewById(R.id.progress_bar);
        progressBar1 = findViewById(R.id.progress_bar1);
    }

    public void clickButton(View view) {
        Log.e("MainActivity","点击按钮");
        if (progressBar.getVisibility() == View.GONE) {
            progressBar.setVisibility(View.VISIBLE);
        } else {
            progressBar.setVisibility(View.GONE);
        }
    }

    public void click(View view) {
        int progress = progressBar1.getProgress();
        progress+=10;
        progressBar1.setProgress(progress);
    }
}

Notification通知

NotificationManager：是一个通知管理器类，这个对象是由系统维护的服务，是以单例模式的方式获得，所以一般不直接实例化这个对象，在Activity中可以使用Activity.getSystemService(String)方法获取NotificationManager对象；

ToolBar

类似与iOS中的导航栏；
navigationIcon：设置返回按钮图标；
title：设置主标题；
titleTextColor：设置主标题颜色；
subtitle：设置子标题；
subtitleTextColor：设置子标题颜色；
titleMarginStart：设置主标题距离最左侧的间距；
logo：设置logo图片；
创建工程时默认会创建一个ToolBar，将其去除，改如下代码：

image.png

案例代码如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/toolbar"
        android:background="#ffff00"
        app:navigationIcon="@drawable/ic_baseline_arrow_back_ios_24"
        app:title="首页"
        app:titleTextColor="@color/red"
        app:titleMarginStart="120dp"
        app:subtitle="子标题"
        app:subtitleTextColor="@color/purple_200"
        app:logo="@drawable/ic_baseline_account_circle_24"/>

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_marginTop="20dp"
        android:background="#ffff00"
        app:navigationIcon="@drawable/ic_baseline_arrow_back_ios_24"
        app:logo="@drawable/ic_baseline_account_circle_24">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="主页"
            android:textSize="25sp"
            android:gravity="center"
            android:layout_gravity="center"/>
    </androidx.appcompat.widget.Toolbar>
</LinearLayout>

上述第二个Toolbar控件实现了自定义主标题居中显示；

AlertDialog对话框

首先创建构建器AlertDialog.Builder，通过构建器创建AlertDialog；
builder.setIcon：设置图标；
builder.setTitle：设置标题；
builder.setMessage：设置提示信息；
builder.setPositiveButton：设置确定按钮；
builder.setNegativeButton：设置取消按钮；
builder.setNeutralButton：设置中间按钮；
builder.create：创建AlertDialog；
builder.show：显示AlertDialog；
builder.setView：设置布局；
案例代码如下：

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

import android.content.DialogInterface;
import android.os.Bundle;
import android.util.Log;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
    }
    public void click(View view) {

        //根据R.layout.dialog_view布局文件生成一个view
        View dialogView = getLayoutInflater().inflate(R.layout.dialog_view,null);

        //构建器
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setIcon(R.mipmap.ic_launcher)
                .setTitle("我是对话框")
                .setMessage("今天天气怎样")
                .setView(dialogView)
                .setPositiveButton("确定", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                Log.e("MainActivity","点击确定");
            }
        }).setNegativeButton("取消", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                Log.e("MainActivity","点击取消");
            }
        }).setNeutralButton("中间", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                Log.e("MainActivity","点击中间");
            }
        }).create().show();
    }
}

其中布局文件dialog_view.xml，内容如下：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/red"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="哈哈 天气和好！"/>
</LinearLayout>

对话框显示如下：

image.png

PopupWindow弹框

new PopupWindow(windowView, ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT,true)：创建PopupWindow，传入view，宽高，是否获取焦点；
setBackgroundDrawable：设置背景；
showAsDropDown：显示弹框，并设置偏移量；
dismiss：关闭弹框；
案例代码：

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.PopupWindow;

public class MainActivity extends AppCompatActivity {

    private PopupWindow popupWindow;

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

    }
    public void click(View view) {

        //从布局文件中获取View
        View windowView = getLayoutInflater().inflate(R.layout.pop_window_view,null);
        Button button1 = windowView.findViewById(R.id.button1);
        Button button2 = windowView.findViewById(R.id.button2);

        //
        popupWindow = new PopupWindow(windowView, ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT,true);
        popupWindow.setBackgroundDrawable(getResources().getDrawable(R.drawable.wd_ranklist_default));
        popupWindow.showAsDropDown(view,100,100);

        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.e("MainActivity","上海");
                popupWindow.dismiss();
            }
        });

        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.e("MainActivity","上海");
                popupWindow.dismiss();
            }
        });
    }
}

创建view的布局文件pop_window_view.xml内容如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@mipmap/ic_launcher"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="上海"
        android:padding="5dp"
        android:textSize="18sp"
        android:id="@+id/button1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="背景"
        android:padding="5dp"
        android:textSize="18sp"
        android:id="@+id/button2"/>
</LinearLayout>

最终的显示效果如下：

image.png

Android入门02 -- UI控件

TextView控件

设置TextView文本的阴影颜色

实现跑马灯效果的TextView

Button按钮

Button的事件处理

EditText

ImageView

ProgressBar

Notification通知

ToolBar

AlertDialog对话框

PopupWindow弹框

猜你喜欢

热点阅读