Android学习笔记 2.4.3 实例——使用QuickContactBadge关联联系人 && 2.4.4 实例——可折叠的悬浮按钮

Android学习笔记

疯狂Android讲义

第2章 Android 应用的界面编程

2.4 第3组 UI组件：ImageView及其子类

2.4.3 实例——使用QuickContactBadge关联联系人

QuickContactBadge继承了 ImageView，因此它的本质也是图片按钮，也可以通过 android:src属性指定它显示的图片。QuickContactBadge额外增加的功能是:该图片可以关联到手机中指定联系人，当用户单击该图片时,系统将会打开相应联系人的联系方式界面。

为了让QuickContactBadge与特定联系人关联,可以调用如下方法：

• assignContactFromEmail(String emailAddappIsrclmainlress, boolean lazyLookup):将该图片关联到指定E-mail地址对应的联系人。
• assignContactFromPhone(String phoneNumber, boolean lazyLookup):将该图片关联到指定电话号码对应的联系人。
• assignContactUri(Uri contactUri):将该图片关联到特定Uri对应的联系人。

新建模块

布局

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

    <QuickContactBadge
        android:id="@+id/badge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="我的偶像"
        android:textSize="20sp" />

LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

逻辑代码

package com.dingjiaxiong.quickcontactbadgetest;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.QuickContactBadge;

public class MainActivity extends AppCompatActivity {

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

        //获取组件
        QuickContactBadge badge = findViewById(R.id.badge);
        //将组件与特定电话号码联系人建立关联
        badge.assignContactFromPhone("020-88888888",false);

    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

运行

2.4.4 实例——可折叠的悬浮按钮

ImageButton还派生了一个子类:FloatingActionButton，该组件用于代表悬浮按钮。悬浮按钮的本质依然是一个按钮，只是它有其特定的行为——该按钮默认是一个带默认填充色的圆形按钮，当用户单击该按钮时,该按钮可以显示一个波纹效果。

FloatingActionButton除可指定图片按钮的各属性之外，还可指定如下控制悬浮按钮的属性：

• app:fabSize:指定悬浮按钮的大小，可支持"normal"（正常大小）、“mini”(小按钮）两个属性值。
• app:backgroundTint:设置按钮的填充色。如果不指定该属性，则使用默认的填充色。
• app:rippleColor:指定悬浮按钮被单击时的波纹颜色。

一般来说，悬浮按钮应该悬浮在界面的右上角或右下角，用于为App 提供一些常用操作。通常，一个页面只应该有一个悬浮按钮，如果需要多个常用操作，则通过悬浮按钮进行折叠或展开。

新建模块

布局

<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">


    
    <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:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#80000000"
        android:visibility="gone">

        
        <LinearLayout
            android:id="@+id/item1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="28dp"
            android:layout_marginBottom="86dp"
            android:orientation="horizontal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:gravity="end"
                android:text="购物车"
                android:textColor="@color/white"
                android:textSize="15sp" />

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/mini_fab01"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:backgroundTint="#ff00ff"
                android:elevation="5dp"
                android:src="@drawable/ic_baseline_list_24"
                app:fabSize="mini" />

        LinearLayout>

        <LinearLayout
            android:id="@+id/item2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:orientation="horizontal"
            app:layout_constraintBottom_toTopOf="@id/item1"
            app:layout_constraintEnd_toEndOf="@id/item1"
            app:layout_constraintStart_toStartOf="@id/item1">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:gravity="end"
                android:text="继续购买"
                android:textColor="@color/white"
                android:textSize="15sp" />

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/mini_fab02"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:backgroundTint="#ffff00"
                android:elevation="5dp"
                android:src="@drawable/ic_baseline_list_24"
                app:fabSize="mini" />

        LinearLayout>

    androidx.constraintlayout.widget.ConstraintLayout>

    
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/fab"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="20dp"
        android:clickable="true"
        android:src="@drawable/ic_baseline_add_24"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:fabSize="normal"
        android:elevation="5dp"
        android:backgroundTint="#31bfcf"
        app:rippleColor="#e7d161"
        />


androidx.constraintlayout.widget.ConstraintLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

逻辑代码

package com.dingjiaxiong.floatingactionbutton;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;

import android.os.Bundle;
import android.view.View;

import com.google.android.material.floatingactionbutton.FloatingActionButton;

public class MainActivity extends AppCompatActivity {

    private boolean isShow = false;
    private ConstraintLayout content;
    private FloatingActionButton fab;

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


        fab = findViewById(R.id.fab);
        content = findViewById(R.id.content);
        //定义事件监听
        View.OnClickListener listener = view -> {
           switch (view.getId()){
               case R.id.fab:
                   isShow = !isShow;
                   content.setVisibility(isShow ? View.VISIBLE : View.GONE);
                   break;
               case R.id.mini_fab01:
               case R.id.mini_fab02:
                   content.setVisibility(View.GONE);
                   isShow = false;
                   break;
           }
        } ;

        //为悬浮按钮绑定监听
        fab.setOnClickListener(listener);

    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

运行效果

这里是直接显示的，后面可以加上动画，更加丝滑。