note-03 UI开发

最新推荐文章于 2024-09-07 15:57:32 发布

秀才恶霸

最新推荐文章于 2024-09-07 15:57:32 发布

阅读量263

点赞数

分类专栏： # android《第一行代码第二版》学习笔记文章标签： android

本文链接：https://blog.csdn.net/qq_36341729/article/details/106650811

版权

android《第一行代码第二版》学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

3 UI开发

3.1 常用控件的使用

3.1.1 TextView

用于显示文本信息。文字默认居左上角对齐。可以使用 android:gravity 来指定文字的对齐方式，可选值有 top、bottom、left、right、center等，可以用 “|”来同时指定多个值，这里我们指定的center ，效果等同于 center_vertical | center_horizontal，表示文字在垂直和水平方向都居中对齐。

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

    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="This is TextView" />

</LinearLayout>

可以通过 android:textSize 设置文字大小，通过 android:textColor 设置文字颜色。如下：

<TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="24sp"
        android:textColor="#00ff00"
        android:text="This is TextView" />

Android中字体大小使用sp为单位。

3.1.2 Button

系统会对Button中所有的英文字母自动进行大写转换，如果不想要这种效果，可以使用android:textAllCaps="false"来禁用这一默认属性：

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

在MainActivity中给Button的点击事件注册一个监听器，两种方式：
方式一——匿名类：

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) {
                // 此处添加逻辑
            }
        });
    }

方式二——实现 View.OnClickListener 接口

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = findViewById(R.id.button);
        button.setOnClickListener(this);
    }

    // 实现View.OnClickListener接口，重写onClick()方法
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                // 在此处添加逻辑
                break;
            default:
                break;
        }
    }
}

3.1.3 EditText

允许用户在控件里输入和编辑内容，并可以在程序中对这些内容进行处理。可以使用android:hint="****"在输入框中加入提示信息，然后一旦用户输入了任何内容，提示性的文字就会消失。

 <EditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Type something here"
        />

效果如图：
在这里插入图片描述
　　随着输入内容的不断增多，EditText会被不断拉长。这是由于EditText的高度指定为wrap_content ，因此它总能包含住里面的内容，但是输入的内容过多时，界面就会非常难看。我们可以使用android:maxLines=""来解决，指定最大行数。

<EditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Type something here"
        android:maxLines="3"
        />

当输入的内容超过规定行数（此处为3行）时，文本就会向上滚动，而EditText则不会再继续拉伸。效果如图：
在这里插入图片描述

3.1.4 ImageView

界面上展示图片的控件。需要提起准备好一些图片，图片通常都是放在以 “drawable”开头的目录下。目前我们项目中有一个空的drawable 目录，不过由于这个目录没有指定具体的分辨率，所以一般不使用它来放置图片。我们在res目录下新建一个 drawable-xhdpi 目录，然后将事先准备好的两张图片放入其中。
　　接下来修改activity_main.xml，如下所示：

<ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img1"
        />

通过android:src属性给ImageView指定图片。
　　还可以在程序中通过代码动态地更改ImageView中的图片。修改MainActivity的代码，如下所示：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private EditText editText;

    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = findViewById(R.id.button);
        // 获取EditText
        editText = findViewById(R.id.edit_text);
        // 获取ImageView
        imageView = findViewById(R.id.image_view);
        button.setOnClickListener(this);
    }

    // 实现View.OnClickListener接口，重写onClick()方法
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                Toast.makeText(MainActivity.this,inputText,Toast.LENGTH_SHORT).show();*/
                imageView.setImageResource(R.drawable.img2);
                break;
            default:
                break;
        }
    }
}

3.1.5 ProgressBar

用于在界面上系那是一个进度条。

<ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

Android控件的可见属性：
　　所有的Android控件都具有这个属性，可以通过android:visibility进行指定，可选值有3种：visible、invisible、gone。

visible表示控件是可见的，这个值是默认值，不指定android:visibility时，控件都是可见的；
invisible：控件不可见，但它仍然占据着原来的位置和大小，可以理解为控件变成透明状态了；
gone：控件不仅不可见，而且不再占据任何屏幕控件。
我们还可以通过代码来设置控件的可见性，使用的是setVisibility()方法，可以传入 View.VISIBLE、View.INVISIBLE、View.GONE这三种值。修改MainActivity中的代码如下：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private EditText editText;

    private ImageView imageView;

    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = findViewById(R.id.button);
        // 获取EditText
        editText = findViewById(R.id.edit_text);
        // 获取ImageView
        imageView = findViewById(R.id.image_view);
        // 获取ProgressBar
        progressBar = findViewById(R.id.progress_bar);
        button.setOnClickListener(this);
    }

    // 实现View.OnClickListener接口，重写onClick()方法
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                if (progressBar.getVisibility() == View.GONE) {
                    progressBar.setVisibility(View.VISIBLE);
                } else {
                    progressBar.setVisibility(View.GONE);
                }
                break;
            default:
                break;
        }
    }
}

点击按钮即可切换进度条的可见性。

3.1.6 AlertDialog

当前界面弹出一个对话框，这个对话框是置于所有界面元素之上的，能给屏蔽掉其他控件的交互能力。因此AlertDialog 一般多是用于提示非常重要的内容或者警告信息。

public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
                dialog.setTitle("This is Dialog");
                dialog.setMessage("zhh好看吗？");
                dialog.setCancelable(false);// 是否用Back键关闭对话框（否）
                dialog.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        Toast.makeText(MainActivity.this,"zhh好看好看最好看！",Toast.LENGTH_LONG).show();
                    }
                });
                dialog.setNegativeButton("No", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        Toast.makeText(MainActivity.this,"你撒谎你个骗子",Toast.LENGTH_LONG).show();
                    }
                });
                dialog.show();
                break;
            default:
                break;
        }
    }

注释：dialog.setCancelable(false);// 是否用Back键关闭对话框（否）
参数为false——Back键无法关闭对话框；true——可以。

3.1.7 ProgressDialog

显示一个对话框并在对话框中显示一个进度条。一般用于表示当前操作比较耗时，让用户耐心等待。修改MainActivity代码如下：

public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);
                progressDialog.setTitle("This is ProgressDialog");
                progressDialog.setMessage("加载中…");
                progressDialog.setCancelable(true);
                progressDialog.show();
                break;
            default:
                break;
        }
    }

效果：
在这里插入图片描述
**注意：**如果在setCancelable()中传入false，表示ProgressDialog是不能通过Back键取消的，此时就一定要在代码中做好控制，当数据加载完毕后必须要调用ProgressDialog的dismiss()方法来关闭对话框，否则ProgressDialog将会一直存在。

3.2 详解4种布局

布局是一种可用于放置很多控件的容器，它可以按照一定的规律调整内部控件的位置，从而编写出精美的界面。当然，布局的内部除了放置控件外，也可以放置布局，通过多层布局的嵌套，就能够完成一些比较复杂的界面实现。

3.2.1 线性布局

LinearLayout又称线性布局，是一种非常常用的布局。这个布局会将它所包含的控件在线性方向上依次排列。通过 android:orientation属性指定排列发方向，取值有：vertical——垂直；horizontal——水平。
android:layout_gravity属性，指定控件在布局中的对齐方式。

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="Button1"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Button2"
        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="Button3"
        />
</LinearLayout>

效果：
在这里插入图片描述

android:layout_weight属性：允许使用比例的方式来指定控件的大小，在手机屏幕的适配性方面可以起到非常重要的左右。例如：编写一个消息发送界面，需要一个文本编辑器和一个发送按钮，修改activity_main.xml 中的代码如下：

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

    <EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="请输入信息" />

    <Button
        android:id="@+id/send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="发送" />
</LinearLayout>

效果：
在这里插入图片描述
EditText的宽度指定成了0dp，不会影响宽度，指定属性android:layout_weight之后，控件的宽度不应该再由android:layout_width来决定，这里指定成 0dp 是一种比较规范的写法。

3.2.3 相对布局

RelativeLayout 又称作相对布局，也是一种非常常用的布局。和LinearLayout的排列规则不同，RelativeLayout 显得更加随意一些，它可以通过相对定位的方式让控件出现在布局的任何位置。也正因为如此，RelativeLayout中的属性非常多。修改xml文件如下：

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Button 1"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Button 2"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button 3"/>

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="Button 4"/>

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="Button 5"/>
</RelativeLayout>

效果：
在这里插入图片描述

3.2.3 帧布局

FrameLayout又称作帧布局，相比于前面两种布局简单了很多，因此它的应用场景也就少了很多。这种布局没有方便的定位方式，所有的控件都会默认摆放在布局的左上角。使用android:layout_gravity可以指定对齐方式。

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

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:text="This is TextView" />

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:src="@mipmap/ic_launcher" />
</FrameLayout

效果：
在这里插入图片描述
　　总体来讲，FrameLayout由于定位方式的欠缺，导致它的应用场景较少，不过在碎片中可以用到。

3.2.4 百分比布局

在这种布局中，不再使用 wrap_content、match_parent 等方式来指定控件的大小，而是允许直接指定控件在布局中所占的百分比，这样的话就可以轻松实现平分布局甚至是任意比例分割布局的效果。
　　由于LinearLayout 本身已经支持按比例指定控件的大小了，因此百分比布局只为FrameLayout 和 RelativeLayout 进行了功能扩展，提供了 PercentFrameLayout 和 PercentRelativeLayout 这两个全新的布局。
　　不同于前三种布局，百分比布局属于新增布局，那么怎样才能做到让新增布局在所有Android版本上都能使用呢？为此，Android 团队将百分比布局定义在了 support库 中，我们只需要在项目的 build.gradle 中添加百分比布局库的依赖，就能保证百分比布局在 Android 所有系统版本上的兼容性了。
　　打开app/build.gradle 文件，在 dependencies 闭包中添加如下内容（与郭神书中所述有些出入，版本更新导致，我的As版本3.5.2）：

dependencies {

    // 添加百分比布局库的依赖
    implementation 'androidx.percentlayout:percentlayout:1.0.0'
    
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}

需要注意的是，每当修改了任何 gradle 文件时，As 都会弹出一个如图所示的提示：
在这里插入图片描述
　　点击 Sync No 进行同步。
　　修改layout中的 *.xml 文件，代码如下（新版本取消了support库，放在androidx下）：

<androidx.percentlayout.widget.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_gravity="left|top"
        android:text="Button 1"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="50%" />

    <Button
        android:id="@+id/button2"
        android:layout_gravity="right|top"
        android:text="Button 2"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="50%" />

    <Button
        android:id="@+id/button3"
        android:layout_gravity="left|bottom"
        android:text="Button 3"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="50%" />

    <Button
        android:id="@+id/button4"
        android:layout_gravity="right|bottom"
        android:text="Button 4"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="50%" />

</androidx.percentlayout.widget.PercentFrameLayout>

效果：
在这里插入图片描述

注：Android中还有 AbsoluteLayout、TableLayout等布局，不过使用得实在太少，不做讲解。

3.3 创建自定义控件

控件和布局的继承结构：
在这里插入图片描述
　　由图可知，我们所用的所有控件都是直接或间接继承自View 的，所用的所有布局都是直接或间接继承自 ViewGroup的。View是Android中最基本的一种UI组件，它可以在屏幕上绘制一块矩形区域，并能响应这块区域的各种事件，因此，我们使用的各种控件其实就是在 View的基础上又添加了各自特有的功能。而 ViewGroup则是一种特殊的 View，它可以包含很多子 View和子ViewGroup，是一个用于放置控件和布局的容器。

3.3.1 引入布局

界面顶部标题栏的实现：
1.新建布局title.xml

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

    <Button
        android:id="@+id/title_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:background="@drawable/back_bg"
        android:text="Back"
        android:textColor="#fff" />

    <TextView
        android:id="@+id/text_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Title text"
        android:textColor="#fff"
        android:textSize="24sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:background="@drawable/edit_bg"
        android:text="Edit"
        android:textColor="#fff" />
</LinearLayout>

2.程序中使用这个标题栏
修改activity.xml 中的代码，如下：

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

    <include layout="@layout/title" />
</LinearLayout>

3.在MainActivity 中将系统自带的标题栏隐藏掉，代码如下：

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

        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null){
            actionBar.hide();
        }
    }

效果：
在这里插入图片描述

3.3.2 创建自定义控件

如果标题栏的返回按钮，不管在哪一个活动中，这个按钮的功能都是相同的，即销毁当前活动，此时最好使用自定义控件的方式来实现。
　　新建TitleLayout 继承自 LinearLayout，让它成为我们自定义的标题栏控件，代码如下：

public class TitleLayout extends LinearLayout {
    public TitleLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.title,this);
    }
}

重写了LinearLayout中带有两个参数的构造函数，在布局中引入TitleLayout控件就会调用这个构造函数。然后在构造函数中想、需要对标题栏布局进行动态加载，就要借助LayoutInflater 来实现。
　　自定义kongjian创建好之后，需要在布局文件中添加这个自定义控件，修改activity.xml中的代码，如下：

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

    <com.ts.uicustomviews.TitleLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

添加自定义控件和添加普通控件的方式基本是一样的，只不过在添加自定义控件的时候，我们需要指明控件的完整类名，包名在这里不可以省略。
　　为标题栏的按钮注册点击事件，修改TitleLayout中的代码，如下：

public class TitleLayout extends LinearLayout {
    public TitleLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.title,this);
        Button titleBack = findViewById(R.id.title_back);
        Button titleEdit = findViewById(R.id.title_edit);
        titleBack.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                ((Activity)getContext()).finish();
            }
        });
        titleEdit.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getContext(),"You clicked Edit button",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

3.4 最常用和最难用的控件——ListView

ListView允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内，同时屏幕上原有的数据则会滚出屏幕。

3.4.1 ListView的简单用法

新建ListViewTest项目，修改activity_main.xml中代码如下：

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

    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

修改MainActivity中的代码如下：

public class MainActivity extends AppCompatActivity {
    private String[] data = {"Apple", "Banana", "Orange", "Watermelon",
            "Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango",
            "Apple", "Banana", "Orange", "Watermelon",
            "Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango"};

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

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_list_item_1,data);
        ListView listView = findViewById(R.id.list_view);
        listView.setAdapter(adapter);
    }
}

数组中的数据无法直接传递给ListView，需要借助于适配器，此处使用ArrayAdapter。
效果：
在这里插入图片描述

3.4.2 定制ListView的界面

给每行数据前添加图片。
1 定义一个实体类 Fruit，作为ListView 适配器的适配类型。

public class Fruit {
    private String name; // 水果名
    private int imageId; // 对应图片的资源id

    public Fruit(String name, int imageId) {
        this.name = name;
        this.imageId = imageId;
    }

    public String getName() {
        return name;
    }

    public int getImageId() {
        return imageId;
    }
}

2 为ListView 的子项指定一个我们自定义的布局，在layout 目录下新建 fruit_item.xml ，代码如下：

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

    <ImageView
        android:id="@+id/fruit_iamge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/fruit_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp" />
</LinearLayout>

3 创建一个自定义的适配器，继承自 ArrayAdapter，并将泛型指定为Fruit 类。新建类 FruitAdapter，代码如下：

public class FruitAdapter extends ArrayAdapter {
    private int resourceId;

    public FruitAdapter(Context context, int textViewResourceId, List<Fruit> objects) {
        super(context, textViewResourceId, objects);
        resourceId = textViewResourceId;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Fruit fruit = (Fruit) getItem(position);
        View view = LayoutInflater.from(getContext()).inflate(resourceId,parent,false);
        ImageView fruitImage = view.findViewById(R.id.fruit_iamge);
        TextView fruitName = view.findViewById(R.id.fruit_name);
        fruitImage.setImageResource(fruit.getImageId());
        fruitName.setText(fruit.getName());
        return view;
    }
}

4 修改 MainActivity 中的代码，如下：

public class MainActivity extends AppCompatActivity {
    private List<Fruit> fruitList = new ArrayList<>();

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

        initFruits(); // 初始化水果数据
        FruitAdapter adapter = new FruitAdapter(MainActivity.this,R.layout.fruit_item,fruitList);
        ListView listView = findViewById(R.id.list_view);
        listView.setAdapter(adapter);
    }

    // 初始化水果数据的方法
    private void initFruits(){
        for (int i=0;i<2;i++){
            Fruit apple = new Fruit("Apple",R.drawable.apple);
            fruitList.add(apple);
            Fruit banana = new Fruit("Banana",R.drawable.banana);
            fruitList.add(banana);
            Fruit orange = new Fruit("Orange",R.drawable.orange);
            fruitList.add(orange);
            Fruit watermelon = new Fruit("Watermelon",R.drawable.watermelon);
            fruitList.add(watermelon);
            Fruit pear = new Fruit("Pear",R.drawable.pear);
            fruitList.add(pear);
            Fruit grape = new Fruit("Grape",R.drawable.grape);
            fruitList.add(grape);
            Fruit pineapple = new Fruit("Pineapple",R.drawable.pineapple);
            fruitList.add(pineapple);
            Fruit strawberry = new Fruit("Strawberry",R.drawable.strawberry);
            fruitList.add(strawberry);
            Fruit cherry = new Fruit("Cherry",R.drawable.cherry);
            fruitList.add(cherry);
            Fruit mango = new Fruit("Mango",R.drawable.mango);
            fruitList.add(mango);
        }
    }
}

5 效果
在这里插入图片描述

3.4.3 提升ListView的运行效率

目前我们 ListView 的运行效率很低，因为在 FruitAdapter的getView() 方法中，每次都将布局重新加载了一遍，当ListView 快速滚动的时候，这就会成为性能的瓶颈。
　优化方式：
　　getView()方法中还有一个 convertView 参数，这个参数用于将之前加载好的布局进行缓存，以便之后进行重用。修改 FruitAdapter 中的代码，如下：

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    Fruit fruit = (Fruit) getItem(position);
    View view;
    // 通过加入判断提高运行效率
    if (convertView == null) {
        view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);
    } else {
        view = convertView;
    }
    ImageView fruitImage = view.findViewById(R.id.fruit_iamge);
    TextView fruitName = view.findViewById(R.id.fruit_name);
    fruitImage.setImageResource(fruit.getImageId());
    fruitName.setText(fruit.getName());
    return view;
}

还可继续优化：
　　虽然现在已经不会再重复去加载布局，但是每次在 getView() 方法中还是会调用 View的 findViewById() 方法来获取一次控件的实例。我们可以借助于一个 ViewHolder 来对这部分性能进行优化，修改 FruitAdapter 中的代码，如下：

public class FruitAdapter extends ArrayAdapter<Fruit> {
    private int resourceId;

    public FruitAdapter(Context context, int textViewResourceId, List<Fruit> objects) {
        super(context, textViewResourceId, objects);
        resourceId = textViewResourceId;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Fruit fruit = getItem(position);
        View view;
        ViewHolder viewHolder;
        if (convertView == null) {
            view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);
            viewHolder = new ViewHolder();
            viewHolder.fruitImage = view.findViewById(R.id.fruit_iamge);
            viewHolder.fruitName = view.findViewById(R.id.fruit_name);
            view.setTag(viewHolder); // 将 ViewHolder存储在View中
        } else {
            view = convertView;
            viewHolder = (ViewHolder) view.getTag(); // 重新获取 viewHolder
        }
        viewHolder.fruitImage.setImageResource(fruit.getImageId());
        viewHolder.fruitName.setText(fruit.getName());
        return view;
    }

    class ViewHolder{
        ImageView fruitImage;
        TextView fruitName;
    }
}

其中新增了一个内部类，用于对控件的实例进行缓存。

3.3.4 ListView的点击事件

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
   @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Fruit fruit = fruitList.get(position);
        Toast.makeText(MainActivity.this,fruit.getName(),Toast.LENGTH_SHORT).show();
    }
});

3.5 更强大的滚动控件——RecyclerView

背景：ListView虽然强大，但是并非完全没有缺点，比如我们不使用技巧来提升它的运行效率，那么它的性能非常差。还有 ListView的扩展性不够好，只能实现数据纵向滚动，无法实现横向滚动。
　　为此，RecyclerView 应运而生，可以理解为加强版的ListView。轻松实现和ListView 同样的效果，还优化了 ListView中存在的各种不足之处。

3.5.1 RecyclerView的基本用法

1 在 app/build.gradle文件概念，添加下图所示红色部分的依赖（As版本为3.5.2，版本不同添加上方式略有不同，请留意）：
在这里插入图片描述

2 添加完记得点击一个 Sync Now 来同步。然后修改 activity_main.xml 中的代码如下：

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

注意：由于RecyclerView并不是内置在系统SDK当中的，所以需要把完整的包路径写出来。

3 图片、Fruit类、fruit_item.xml 和ListViewTest 项目中一样，直接复制过来。新建FruitAdapter类，让这个适配器继承自 RecyclerView.Adapter，并将泛型指定为FruitAdapter.ViewHolder。其中ViewHolder使我们在FruitAdapter中定义的一个内部类，代码如下：

public class FruitAdapter extends RecyclerView.Adapter <FruitAdapter.ViewHolder>{
    private List<Fruit> mFruitList;

    public FruitAdapter(List<Fruit> fruitList) {
        mFruitList = fruitList;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item,parent,false);
        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Fruit fruit = mFruitList.get(position);
        holder.fruitImage.setImageResource(fruit.getImageId());
        holder.fruitName.setText(fruit.getName());
    }

    @Override
    public int getItemCount() {
        return mFruitList.size();
    }

    static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView fruitImage;
        TextView fruitName;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            fruitImage = itemView.findViewById(R.id.fruit_iamge);
            fruitName = itemView.findViewById(R.id.fruit_name);
        }
    }
}

4 修改MainActivity中的代码

public class MainActivity extends AppCompatActivity {
    private List<Fruit> fruitList = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFruits();// 初始化水果数据
        RecyclerView recyclerView = findViewById(R.id.recycler_view);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        FruitAdapter adapter = new FruitAdapter(fruitList);
        recyclerView.setAdapter(adapter);
    }

    // 初始化水果方法
    private void initFruits() {
        for (int i = 0; i < 3; i++) {
            Fruit apple = new Fruit("Apple", R.drawable.apple);
            fruitList.add(apple);
            Fruit banana = new Fruit("Banana", R.drawable.banana);
            fruitList.add(banana);
            Fruit orange = new Fruit("Orange", R.drawable.orange);
            fruitList.add(orange);
            Fruit watermelon = new Fruit("Watermelon", R.drawable.watermelon);
            fruitList.add(watermelon);
            Fruit pear = new Fruit("Pear", R.drawable.pear);
            fruitList.add(pear);
            Fruit grape = new Fruit("Grape", R.drawable.grape);
            fruitList.add(grape);
            Fruit pineapple = new Fruit("Pineapple", R.drawable.pineapple);
            fruitList.add(pineapple);
            Fruit strawberry = new Fruit("Strawberry", R.drawable.strawberry);
            fruitList.add(strawberry);
            Fruit cherry = new Fruit("Cherry", R.drawable.cherry);
            fruitList.add(cherry);
            Fruit mango = new Fruit("Mango", R.drawable.mango);
            fruitList.add(mango);
        }
    }
}

3.5.2 实现横向滚动和瀑布流布局

1 首先对fruit_item.xml进行修改，将它里面的元素改成垂直排列。如下：

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

    <ImageView
        android:id="@+id/fruit_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />

    <TextView
        android:id="@+id/fruit_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp" />
</LinearLayout>

2 修改MainActivity中的代码如下：

public class MainActivity extends AppCompatActivity {
    private List<Fruit> fruitList = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFruits();// 初始化水果数据
        RecyclerView recyclerView = findViewById(R.id.recycler_view);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);

        // 水平***************
        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        // 水平***************

        recyclerView.setLayoutManager(layoutManager);
        FruitAdapter adapter = new FruitAdapter(fruitList);
        recyclerView.setAdapter(adapter);
    }
    ...
}

3 效果
在这里插入图片描述
ListView和RecyclerView在布局上的区别：
　　ListView的布局排列是由自身去管理的，而RecyclerView 则将这个工作交给了 LayoutManager，LayoutManager 中制定了一套可扩展的布局排列接口，自雷只需要按照接口的规范来实现，就能定制出各种不同排列方式的布局了。
　　
　　除了LinearLayoutManager 之外，RecyclerView还给我们提供了 GridLayoutManager和 StaggerGridLayoutManager 这两种内置的布局排列方式。GridLayoutManager 可以用于实现网格布局，StaggerGridLayoutManager 可以用于实现瀑布流布局。

3.5.3 RecyclerView的点击事件

RecyclerView 并没有提供类似于setOnItemClickListener()这样的注册监听器方法，而是需要我们自己给子项具体的View去注册点击事件。
1 修改FruitAdapter ：

public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {
    private List<Fruit> mFruitList;

    public FruitAdapter(List<Fruit> fruitList) {
        mFruitList = fruitList;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item, parent, false);
        final ViewHolder holder = new ViewHolder(view);
        holder.fruitView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Fruit fruit = mFruitList.get(position);
                Toast.makeText(v.getContext(), "You clicked view " + fruit.getName(), Toast.LENGTH_SHORT).show();
            }
        });
        holder.fruitImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Fruit fruit = mFruitList.get(position);
                Toast.makeText(v.getContext(),"You clicked image "+fruit.getName(),Toast.LENGTH_SHORT).show();
            }
        });
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Fruit fruit = mFruitList.get(position);
        holder.fruitImage.setImageResource(fruit.getImageId());
        holder.fruitName.setText(fruit.getName());
    }

    @Override
    public int getItemCount() {
        return mFruitList.size();
    }

    static class ViewHolder extends RecyclerView.ViewHolder {
        View fruitView;
        ImageView fruitImage;
        TextView fruitName;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            fruitView = itemView;
            fruitImage = itemView.findViewById(R.id.fruit_image);
            fruitName = itemView.findViewById(R.id.fruit_name);
        }
    }
}

2 效果
点击图片：在这里插入图片描述

点击文字，由于 TextView并没有注册点击事件，因此点击文字这个事件会被子项的最外层布局捕获到。如下：
在这里插入图片描述

秀才恶霸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
note-03 UI开发

三、UI开发3 UI开发3.1 常用控件的使用3.1.1 TextView3.1.2 Button3.1.3 EditText3.1.4 ImageView3.1.5 ProgressBar3.1.6 AlertDialog3.1.7 ProgressDialog3.2 详解4种布局3.2.1 线性布局3.2.3 相对布局3.2.3 帧布局3.2.4 百分比布局3.3 创建自定义控件3.3.1 引入布局3.3.2 创建自定义控件3 UI开发3.1 常用控件的使用3.1.1 TextView用于显示文
复制链接

扫一扫