UI组件（对常规学习帮助不大）

最新推荐文章于 2024-09-23 00:15:00 发布

fjnu-李文昊

最新推荐文章于 2024-09-23 00:15:00 发布

阅读量166

点赞数

本文链接：https://blog.csdn.net/impermanent/article/details/110422163

版权

UI组件

列表组件ListView（SimpleAdapter来实现）

步骤一、导入图片

步骤二、创建一个线性布局，里面加入一个列表组件

<?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:orientation="horizontal"
    >

    <ListView android:id="@+id/mylist"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
     >
    </ListView>
</LinearLayout>

步骤三、创建一个线性布局，里面加入用于加载图片和文字数据的图片组件和文字组件，具体代码如下：

<?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="wrap_content"
    android:orientation="horizontal">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:textSize="20dp"
            android:textColor="#f0f"/>
        <TextView
            android:id="@+id/fy"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:textSize="14dp" />
    </LinearLayout>
    <ImageView
        android:id="@+id/imgID"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginRight="10dp"
        android:layout_alignParentRight="true"
        />
    </RelativeLayout>
</LinearLayout>

可以发现我在代码块中不止嵌套了线性布局，还用相对布局再在外面套了一层，因为如果不用相对布局嵌套的话，线性布局中组件的位置会有问题，这是我在实验中得到的结论。

步骤四、主文件java代码的编写，具体代码如下：

package com.example.helloworld;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.ListView;
import android.widget.SimpleAdapter;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {
    private String[] names = new String[]{"Lion","Tiger","Monkey","Dog","Cat","Elephant"};
    private String[] fy = new String[]{"狮子","老虎","猴子","狗","猫","大象"};
    private int[] imgID = new int[]{R.drawable.lion,R.drawable.tiger,R.drawable.monkey
            ,R.drawable.dog,R.drawable.cat,R.drawable.elephant};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.s3);
        List<Map<String,Object>> listItems = new ArrayList<>();
        for (int i=0; i<names.length; i++){
            Map<String,Object> listItem = new HashMap<>();
            listItem.put("name",names[i]);
            listItem.put("fy",fy[i]);
            listItem.put("imgID",imgID[i]);
            listItems.add(listItem);
        }
        SimpleAdapter simpleAdapter = new SimpleAdapter(this, listItems,R.layout.imglayout
                ,new String[]{"name","imgID","fy"},new int[]{R.id.name,R.id.imgID,R.id.fy});
        ListView list = findViewById(R.id.mylist);
        list.setAdapter(simpleAdapter);
    }
}

运行结果：

对话框AlertDialog组件的自定义

步骤一、添加一个layout的xml线性布局组件（我命名为alert_dialog），并在其中添加两个编辑框：

<?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="match_parent"
    android:orientation="vertical">
    <EditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:hint="UserName"/>
    <EditText
        android:id="@+id/password"
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:hint="Password"/>
</LinearLayout>

步骤二、编辑MainActivity,具体代码如下：

package com.example.sy3_2;

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

import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //不能直接通过AlertDialog的构造函数来生产一个AlertDialog，只能通过以下的语句得到对话框对象
        AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
        //设置标题
        dialog.setTitle("ANDROID APP");
        //点击空白处不会消失
        dialog.setCancelable(false);
        //找到自定义对话框的xml文件
        View view1 = View.inflate(MainActivity.this,R.layout.alert_dialog,null);
        //设置布局
        dialog.setView(view1);
        //得到用户名编辑框
        final EditText e1=view1.findViewById(R.id.username);
        //得到密码编辑框
        final EditText e2=view1.findViewById(R.id.password);
        //点击Cancel的监听事件
        dialog.setNeutralButton("Cancel", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {

            }
        });
        //点击Sign in的监听事件
        dialog.setPositiveButton("Sign in", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                String user=e1.getText().toString().trim();//得到用户名
                String password=e2.getText().toString().trim();//得到密码
                Toast.makeText(MainActivity.this,"用户名:"+user+"\n"+"密码:"+password,Toast.LENGTH_SHORT).show();
            }
        });
        dialog.show();
    }
}

其中的setContentView(R.layout.activity_main);语句其实用哪个边界视图没有太大影响，相当于一个背景，你可以试试，会有一个感性认识。

运行结果如图：

使用XML定义菜单

步骤一、在res下创建menu包，在menu包中创建menu_main.xml文件，具体代码如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <item android:title="@string/t1"
        >
        <menu>
            <!--定义一组选项菜单-->
            <group android:checkableBehavior="single">
                <!--定义多个菜单项-->
                <item
                    android:id="@+id/font_10"
                    android:title="@string/t11"/>
                <item
                    android:id="@+id/font_16"
                    android:title="@string/t12"/>
                <item
                    android:id="@+id/font_20"
                    android:title="@string/t13"/>
            </group>
        </menu>
    </item>
    <!--定义一个普通菜单项-->
    <item android:id="@+id/plain_item"
        android:title="@string/t2"/>
    <item android:title="@string/t3"
        android:icon="@drawable/ic_launcher_background">
        <menu>
            <!--定义一个普通选项菜单-->
            <group>
                <!--定义三个菜单项-->
                <item
                    android:id="@+id/red_font"
                    android:title="@string/t31"/>
                <item
                    android:id="@+id/black_font"
                    android:title="@string/t32"/>
            </group>
        </menu>
    </item>
</menu>

效果如图：
菜单栏
步骤二、在activity_main.xml文档中添加一个用于测试使用的Text组件，这里我们添加一个编辑组件EditText组件：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="93dp"
        android:layout_marginTop="70dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="用于测试的内容"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

如图（在拖动相关组件时要添加自适应边界）：
测试组件
步骤三、在MainActivity.java文件中添加代码块，实现将边界视图添加进主view，并实现相关功能：

package com.example.sy3_3;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.view.ContextMenu;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private EditText editText;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        editText = findViewById(R.id.editText);
        registerForContextMenu(editText);
    }
    //添加菜单项的方法
    @Override
    public boolean onCreateOptionsMenu(Menu menu){
        MenuInflater inflater = new MenuInflater(this);
        //装填R.Menu.my_menu菜单，并添加到menu中
        inflater.inflate(R.menu.menu_mian,menu);
        return super.onCreateOptionsMenu(menu);
    }

    //菜单项被单击后的回调方法
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.isCheckable()){
            //勾选菜单项
            item.setCheckable(true);
        }
        //switch 判断单击哪个菜单项，并有针对性的做出响应
        switch (item.getItemId()){
            case R.id.font_10:
                editText.setTextSize(10 );
                break;
            case R.id.font_16:
                editText.setTextSize(16 );
                break;
            case R.id.font_20:
                editText.setTextSize(20 );
                break;
            case R.id.red_font:
                editText.setTextColor(Color.RED);
                break;
            case R.id.black_font:
                editText.setTextColor(Color.BLACK);
                break;
            case R.id.plain_item:
                Toast.makeText(MainActivity.this,"Toast",Toast.LENGTH_SHORT)
                        .show();
                break;
        }
        return true;
    }


}

最后效果如以下图片（视频太卡就录制了）：
原图：

修改字号为10：
10字号字体
红色：
红色字体
一些需要注意的问题，可以看到我代码中只用了菜单项被单击后的回调方法onOptionsItemSelected,没有使用上下文菜单，所以相关的两个方法我就没有写在里面，按理说：

editText = findViewById(R.id.editText);
        registerForContextMenu(editText);

这两行代码也可以被省略。