Android学习（二）初步UI学习

如何编写Android UI界面

使用Android Studio进行Android项目开发，通过编写XML代码进行UI界面开发。

常用控件

1. TextView

该控件主要用于显示文本信息。在layout布局文件中使用标签< TextView >进行使用。
常用属性有：
指定显示文本内容：android:text = "text content"
指定文本字体大小：android:textSize = “20sp”
指定文本字体颜色：android:textColor = "#00ff00"
指定文本字体对齐方式：android:gravity = “center” 居中显示

2. Button

该控件主要用于交互点击操作。在layout布局文件中使用标签< Button >进行使用。
常用属性有：
支持TextView大部分属性
是否启动字母大写显示：android:textAllCaps = "false"

3. EditText

该控件主要用于交互输入事件。在layout布局文件中使用标签< EditText >进行使用。
常用属性有：
支持TextView大部分属性
指定提示性文字：android:hint = "hint content"
指定输入最大行数：android:maxLines = "2"

4. ImageView

该控件主要用于展示图片资源。在layout布局文件中使用标签< ImageView >进行使用。
常用属性有:
设置显示图片内容：android:src = “@drawable/test_img”

5. progressBar

该控件主要用于提示用户当前正在加载资源，需要等待的状态。在layout布局文件中使用标签< ProgressBar >进行使用。

6. AlertDialog

该控件主要用于简单的提示确认功能。
代码如下：

AlertDialog.Builder dialog = new AlertDialog.Builder(this);
                dialog.setTitle("test dialog");
                dialog.setMessage("test message");
                dialog.setCancelable(false);
                dialog.setPositiveButton("know", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        dialog.dismiss();
                    }
                });
                dialog.setNegativeButton("cancel", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        dialog.dismiss();
                    }
                });
                dialog.show();

首先，构建AlertDialog实例，然后为此对象添加各种属性（标题、内容…）
然后，调用setPositiveButton()和setNegativeButton()方法，设置确认和取消按钮事件。
最后，调用show()方法，显示此控件内容。

7. ProgressDialog

该控件主要用于简单的进度条显示功能。
代码如下：

ProgressDialog dialog = new ProgressDialog(this);
                dialog.setTitle("title");
                dialog.setMessage("message");
                dialog.setCancelable(true);
                dialog.show();

Material Design

Material Design是跨平台和设备的视觉、运动和交互设计的综合指南。使用Material Design可以极大提高用户体验，还很简单方便。

滑动菜单 DrawerLayout

该控件是support-v4提供。其中该控件下添加两个子控件。第一个子控件用于主屏幕的显示，第二个子控件用于滑动后的显示。

注意，第二个子控件需要layout_gravity指定滑动方向，这里我们是左滑动显示。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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="com.example.testapplication.MaterialActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="我是主屏幕"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:text="我是滑动后内容"
        android:background="@color/colorAccent"/>

</android.support.v4.widget.DrawerLayout>

如果还想在代码中控制滑动，可以添加如下：

DrawerLayout drawerLayout = findViewById(R.id.draw_layout);
...
drawerLayout.openDrawer(GravityCompat.START);
...

NavigationView

NavigationView控件通常是放在DrawerLayout里使用的。基本使用流程如下：

1. 添加依赖

implementation 'com.android.support:design:26.1.0'

2. 创建headerLayout布局文件

<?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="200dp"
    android:orientation="vertical"
    android:padding="20dp"
    android:background="@color/colorAccent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:layout_gravity="center_horizontal"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="name"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="mail"/>

</LinearLayout>

3. 创建一个menu文件，用于指定交互内容

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/name"
            android:icon="@mipmap/ic_launcher"
            android:title="name" />
        <item
            android:id="@+id/sex"
            android:icon="@mipmap/ic_launcher"
            android:title="sex" />
        <item
            android:id="@+id/call"
            android:icon="@mipmap/ic_launcher"
            android:title="call" />
    </group>
</menu>

4. 在main_layout布局中添加NavigationView控件

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/draw_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.testapplication.MaterialActivity">

    <Button
        android:id="@+id/draw"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="我是主屏幕" />

    <android.support.design.widget.NavigationView
        android:id="@+id/design_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/header_layout"
        app:menu="@menu/test_menu">
    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

5. 在代码中处理交互逻辑

package com.example.testapplication;

import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;

public class MaterialActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_material);
        final DrawerLayout drawerLayout = findViewById(R.id.draw_layout);
        Button button = findViewById(R.id.draw);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                drawerLayout.openDrawer(GravityCompat.START);
            }
        });
        NavigationView navigationView = findViewById(R.id.design_navigation_view);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                //菜单子项逻辑处理
                drawerLayout.closeDrawers();
                return true;
            }
        });
    }
}

效果如下，审美有限，做到很粗糙，见谅。有点个人信息雏形了。

悬浮按钮 FloatingActionButton

只是有悬浮效果的按钮，使用起来和普通Button一致。

<android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:elevation="8dp"/>

卡片布局 CardView

使用起来和FrameLayout一致，添加了阴影和圆角效果。

基本布局

帧布局

该布局，默认控件放置在屏幕左上角。
常用属性有：
指定控件位于布局位置android:layout_gravity="center|left"
例如代码如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.testapplication.SecondActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|left"
        android:text="左中" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:text="右下角" />
</FrameLayout>

线性布局

该布局非常常用，用于水平方向或者竖直方向进行界面开发。
常用属性有：
指定布局排列方向(vertical/horizontal)：android:orientation="vertical"
指定控件占屏幕的权重比例：android:layout_weight="1"
例如代码如下：

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="2" />
</LinearLayout>

相对布局

该布局从名称可以看出是相对某个控件来发布的，自由度很高。相对在Android进行布局绘制显示时，会耗费更多时间和性能。
常用属性有：
指定位于父布局左侧：android:layout_alignParentLeft="true"
指定位于父布局中间：android:layout_centerInParent="true"
指定位于该控件上方：android:layout_above="@+id/center_button"
指定位于该控件下方：android:layout_below="@id/center_button"
指定位于该控件右侧：android:layout_toRightOf="@id/center_button"
指定和该控件左侧对齐：android:layout_alignLeft="@id/center_button"
上述属性可以组合使用，例如代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.testapplication.SecondActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="左上" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/center_button"
        android:layout_alignLeft="@id/center_button"
        android:text="中间偏上" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/center_button"
        android:layout_toRightOf="@id/center_button"
        android:text="中间右侧对齐" />

    <Button
        android:id="@+id/center_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="中间" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="右下" />
</RelativeLayout>

约束布局

该布局最大特点就是，减少布局嵌套层级。一个复杂布局可能需要多个不同布局嵌套使用，代码复杂。此布局可以极大减少布局嵌套层级，可以视情况使用。
常用方法有：
该控件左侧与指定控件左侧对齐：app:layout_constraintLeft_toLeftOf=“parent”
引导线以来指定占水平或者竖直的百分百：Guideline
例如代码如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.example.testapplication.SecondActivity">

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.2" />

    <Button
        android:id="@+id/center_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中间"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="占屏幕高度20%"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/guideline2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中间偏上"
        app:layout_constraintBottom_toTopOf="@id/center_button"
        app:layout_constraintLeft_toLeftOf="@id/center_button"
        app:layout_constraintRight_toRightOf="@id/center_button" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中间右侧对齐"
        app:layout_constraintLeft_toRightOf="@id/center_button"
        app:layout_constraintTop_toTopOf="@+id/center_button" />


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右下"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

ListView

用来展示大量数据。简单写一个，帮大家梳理个流程。

1. 首先，布局中填入listview控件。

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.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="com.example.testapplication.SecondActivity">

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

</android.support.constraint.ConstraintLayout>

2. 然后，指定子项布局，创建实体和适配器。

子项布局如下：

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

    <TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold" />
</LinearLayout>

创建实体

package com.example.testapplication;

public class Test {

    private String title;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public Test(String title) {
        this.title = title;
    }
}

创建适配器

package com.example.testapplication;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

import java.util.List;

public class TestAdapter extends ArrayAdapter<Test> {

    private int resourceId;

    public TestAdapter(@NonNull Context context, int resource, @NonNull List<Test> objects) {
        super(context, resource, objects);
        resourceId = resource;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        Test test = getItem(position);
        View view;
        ViewHolder viewHolder;
        if (convertView == null) {
            view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);
            viewHolder = new ViewHolder();
            viewHolder.textView = view.findViewById(R.id.item_title);
            view.setTag(viewHolder);    //存储
        } else {
            view = convertView;
            viewHolder = (ViewHolder) view.getTag();
        }

        viewHolder.textView.setText(test.getTitle());
        return view;
    }

    class ViewHolder {
        TextView textView;
    }
}

3. 最后，传入数据、适配器，进行展示。

package com.example.testapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class SecondActivity extends AppCompatActivity {

    private List<Test> tests;
    private ListView listView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        initView();
        initData();
        initEvent();
    }

    private void initView() {
        listView = findViewById(R.id.list);
    }

    private void initData() {
        tests = new ArrayList<>();
        for (int i = 0; i <= 5; i++) {
            tests.add(new Test("test_item_" + i));
        }
        TestAdapter adapter = new TestAdapter(this, R.layout.test_item, tests);
        listView.setAdapter(adapter);
    }

    private void initEvent() {
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(SecondActivity.this, tests.get(position).getTitle(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

简单listview编写完成。

RecyclerView

用来替换ListView，性能更加强大。和listView代码流程一致，代码稍微不同。

1. 首先，添加依赖，布局中填入RecyclerView控件。
   添加依赖：

 implementation 'com.android.support:recyclerview-v7:28.0.0'

添加控件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.example.testapplication.SecondActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>

</android.support.constraint.ConstraintLayout>

2. 然后，指定子项布局，创建实体和适配器。

子项布局：

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

    <TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold" />
</LinearLayout>

创建实体

package com.example.testapplication;

public class Test {

    private String title;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public Test(String title) {
        this.title = title;
    }
}

创建适配器

package com.example.testapplication;

import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

import java.util.List;

public class TestRecyclerAdapter extends RecyclerView.Adapter<TestRecyclerAdapter.ViewHolder>{

    private List<Test> list;

    public TestRecyclerAdapter(List<Test> list) {
        this.list = list;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.test_item, viewGroup, false);
        final ViewHolder viewHolder = new ViewHolder(view);
        viewHolder.textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Test test = list.get(viewHolder.getAdapterPosition());
                Toast.makeText(v.getContext(), test.getTitle(), Toast.LENGTH_SHORT).show();
            }
        });
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder viewHolder, int i) {
        Test test = list.get(i);
        viewHolder.textView.setText(test.getTitle());
    }

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

    static class ViewHolder extends RecyclerView.ViewHolder {

        TextView textView;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.item_title);
        }
    }
}

3. 最后，传入数据、适配器，进行展示。

package com.example.testapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;

import java.util.ArrayList;
import java.util.List;

public class SecondActivity extends AppCompatActivity {

    private List<Test> tests;
    private RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        initView();
        initData();
    }

    private void initView() {
        recyclerView = findViewById(R.id.list);
    }

    private void initData() {
        tests = new ArrayList<>();
        for (int i = 0; i <= 5; i++) {
            tests.add(new Test("test_item_" + i));
        }
        TestRecyclerAdapter adapter = new TestRecyclerAdapter(tests);
        
        //垂直展示
        recyclerView.setLayoutManager(new LinearLayoutManager(this));   //

        //水平展示
//        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
//        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
//        recyclerView.setLayoutManager(layoutManager);

        //瀑布展示
//        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
//        recyclerView.setLayoutManager(layoutManager);

        recyclerView.setAdapter(adapter);
    }
}

垂直效果

瀑布效果