效果展示

功能实现分析:

界面主要包括两个部分,一个用来显示内容的,另一个就是底部的4个Tab,其中内容部分可以用Fragment,当点击下方不同的Tab时,内容部分显示不同的Fragment即可,具体每个Fragment中可以使用ListView和RecyclerView来填充。

首先我们来搭建主体框架

  • 在activity_main中布局微信的主题部分,分别用两个线性布局将界面分为两个部分,上部分用来放内容,下部分用来放四个Tab

    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
    <?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="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
    android:id="@+id/content_layout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="vertical">

    </LinearLayout>

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal"
    android:layout_alignParentBottom="true">
    <ImageView
    android:id="@+id/wechat"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:layout_weight="1"
    android:src="@drawable/wechat"/>
    <ImageView
    android:id="@+id/list"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:layout_weight="1"
    android:src="@drawable/list"/>
    <ImageView
    android:id="@+id/find"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:layout_weight="1"
    android:src="@drawable/find"/>
    <ImageView
    android:id="@+id/me"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:layout_weight="1"
    android:src="@drawable/me"/>
    </LinearLayout>

    </LinearLayout>
  • 创建四个用来填充内容的布局,在布局文件中布局好样式

    wechat.xml

    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
    <?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout android:layout_height="60dp"
    android:layout_width="match_parent"
    android:background="#ededed">

    <TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="微信"
    android:textSize="20sp"
    android:textColor="#000000"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.05"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

    <ImageView
    android:id="@+id/imageView7"
    android:layout_width="25dp"
    android:layout_height="25dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/imageView8"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/add" />

    <ImageView
    android:id="@+id/imageView8"
    android:layout_width="25dp"
    android:layout_height="25dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.8"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/search" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    <androidx.recyclerview.widget.RecyclerView
    android:id="@+id/wechat_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
    </LinearLayout>

    list.xml

    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
    <?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"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_height="60dp"
    android:layout_width="match_parent"
    android:background="#ededed">

    <TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="通讯录"
    android:textColor="#000000"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.05"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

    <ImageView
    android:id="@+id/imageView5"
    android:layout_width="25dp"
    android:layout_height="25dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.8"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/search" />

    <ImageView
    android:id="@+id/imageView6"
    android:layout_width="25dp"
    android:layout_height="25dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/imageView5"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/add" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    <androidx.recyclerview.widget.RecyclerView
    android:id="@+id/list_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

    </LinearLayout>

    find.xml

    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
    <?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:orientation="vertical"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_height="60dp"
    android:layout_width="match_parent"
    android:background="#ededed">

    <TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="发现"
    android:textColor="#000000"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.05"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

    <ImageView
    android:id="@+id/imageView5"
    android:layout_width="25dp"
    android:layout_height="25dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.8"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/search" />

    <ImageView
    android:id="@+id/imageView6"
    android:layout_width="25dp"
    android:layout_height="25dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/imageView5"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/add" />
    </androidx.constraintlayout.widget.ConstraintLayout>

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

    me.xml

    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
    <?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="match_parent"
    android:orientation="vertical">

    <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:orientation="horizontal"
    android:layout_marginBottom="10dp"
    android:background="#ffffff">

    <ImageView
    android:id="@+id/imageView"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginStart="24dp"
    android:layout_marginLeft="24dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/touxiang" />

    <TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="夏洛T^T"
    android:textColor="#000000"
    app:layout_constraintBottom_toBottomOf="@+id/imageView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.1"
    app:layout_constraintStart_toEndOf="@+id/imageView"
    app:layout_constraintTop_toTopOf="@+id/imageView"
    app:layout_constraintVertical_bias="0.0" />

    <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="微信号:cjp161197"
    app:layout_constraintBottom_toBottomOf="@+id/imageView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.1"
    app:layout_constraintStart_toEndOf="@+id/imageView"
    app:layout_constraintTop_toBottomOf="@+id/textView"
    app:layout_constraintVertical_bias="1.0" />

    <ImageView
    android:id="@+id/imageView2"
    android:layout_width="20dp"
    android:layout_height="20dp"
    app:layout_constraintBottom_toBottomOf="@+id/textView2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.9"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0"
    app:srcCompat="@drawable/erweima" />

    <ImageView
    android:id="@+id/imageView3"
    android:layout_width="15dp"
    android:layout_height="15dp"
    app:layout_constraintBottom_toBottomOf="@+id/imageView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.95"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0"
    app:srcCompat="@drawable/right" />

    <ImageView
    android:id="@+id/imageView4"
    android:layout_width="30dp"
    android:layout_height="30dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.95"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.055"
    app:srcCompat="@drawable/xiangji" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    <ListView
    android:id="@+id/me_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

    </LinearLayout>
  • 分别为四个内容界面创建Fragment,此时只需要显示一些简单的东西即可,用来观察是否可以切换不同的Fragment,后面还要逐一实现每个Fragment的内容。

  • 在MainActivity中实现点击下方Tab,切换上方显示内容的Fragment。关于代码的实现,见下方的代码块中的注释

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private ImageView wechat;
private ImageView list;
private ImageView find;
private ImageView me;
private WeChatFragment weChatFragment;
private ListFragment listFragment;
private FindFragment findFragment;
private MeFragment meFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().hide();//隐藏顶部导航栏
init();//初始化,
}

/*
*初始化底部的四个Tab,并添加点击事件的监听,初始时,默认显*示微信界面,并将下方的图标设置为点击状态时的图标
*/
private void init() {
wechat = findViewById(R.id.wechat);
list = findViewById(R.id.list);
find = findViewById(R.id.find);
me = findViewById(R.id.me);
wechat.setOnClickListener(this);
list.setOnClickListener(this);
find.setOnClickListener(this);
me.setOnClickListener(this);
hideAllFrag();
if(weChatFragment==null){
weChatFragment = new WeChatFragment();
}
addFrag(weChatFragment);
wechat.setImageResource(R.drawable.wechat_active);
}

/*
*添加Fragment
*/
private void addFrag(Fragment fragment) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
if(fragment!=null&&!fragment.isAdded()){
transaction.add(R.id.content_layout,fragment);
}
transaction.commit();
getSupportFragmentManager().beginTransaction().show(fragment).commit();
}

/*
*隐藏Fragment
*/
private void hideFrag(Fragment fragment) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
if(fragment!=null&&fragment.isAdded()){
transaction.hide(fragment);

}
transaction.commit();
}

/*
*隐藏所有Fragment
*/
private void hideAllFrag() {
hideFrag(weChatFragment);
hideFrag(listFragment);
hideFrag(meFragment);
hideFrag(findFragment);
}

/*
*设置显示的图片,
*flag=1 显示wechat为点击状态,其他为未点击状态
*flag=2 显示list为点击状态,其他为未点击状态
*flag=3 显示find为点击状态,其他为未点击状态
*flag=4 显示me为点击状态,其他为未点击状态
*/
private void setImage(int flag){
switch (flag){
case 1:
wechat.setImageResource(R.drawable.wechat_active);
list.setImageResource(R.drawable.list);
find.setImageResource(R.drawable.find);
me.setImageResource(R.drawable.me);
break;
case 2:
wechat.setImageResource(R.drawable.wechat);
list.setImageResource(R.drawable.list_active);
find.setImageResource(R.drawable.find);
me.setImageResource(R.drawable.me);
break;
case 3:
wechat.setImageResource(R.drawable.wechat);
list.setImageResource(R.drawable.list);
find.setImageResource(R.drawable.find_active);
me.setImageResource(R.drawable.me);
break;
case 4:
wechat.setImageResource(R.drawable.wechat);
list.setImageResource(R.drawable.list);
find.setImageResource(R.drawable.find);
me.setImageResource(R.drawable.me_active);
break;
}
}

/*
*处理点击事件
*/
@Override
public void onClick(View v) {
hideAllFrag();
switch (v.getId()){
case R.id.wechat:showWeChat();break;
case R.id.list:showList();break;
case R.id.find:showFind();break;
case R.id.me:showMe();break;
}
}

/*
*显示meFragment的内容,并设置图片
*/
private void showMe() {
if(meFragment==null){
meFragment = new MeFragment();
}
addFrag(meFragment);
setImage(4);
}
/*
*显示findFragment的内容,并设置图片
*/
private void showFind() {
if(findFragment==null){
findFragment = new FindFragment();
}
addFrag(findFragment);
setImage(3);
}
/*
*显示listFragment的内容,并设置图片
*/
private void showList() {
if(listFragment==null){
listFragment = new ListFragment();
}
addFrag(listFragment);
setImage(2);
}
/*
*显示weChatFragment的内容,并设置图片
*/
private void showWeChat() {
if(weChatFragment==null){
weChatFragment = new WeChatFragment();
}
addFrag(weChatFragment);
setImage(1);
}
}

现在,框架已经搭建好了,接下来就是实现每个Fragment的内容

实现我的界面

  • 这里我们尝试用ListView来实现。关于如何使用ListView,可以看我之前的博客->Android开发:ListView的使用方法
  • 首先创建me_item.xml的布局文件,样式自行调整。
    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
    <?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:background="#ffffff"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <ImageView
    android:id="@+id/me_image"
    android:layout_width="60dp"
    android:layout_height="60dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"
    app:srcCompat="@drawable/zhifu" />

    <TextView
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    android:textColor="#000000"
    app:layout_constraintBottom_toBottomOf="@+id/me_image"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.079"
    app:layout_constraintStart_toEndOf="@+id/me_image"
    app:layout_constraintTop_toTopOf="@+id/me_image" />

    <ImageView
    android:id="@+id/more"
    android:layout_width="20dp"
    android:layout_height="20dp"
    app:layout_constraintBottom_toBottomOf="@+id/me_image"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.926"
    app:layout_constraintStart_toEndOf="@+id/me_image"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/right" />
    </androidx.constraintlayout.widget.ConstraintLayout>
  • 创建Me的实体类
    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
    public class Me {
    private int imageId;
    private String name;
    private int more;

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

    public int getImageId() {
    return imageId;
    }

    public void setImageId(int imageId) {
    this.imageId = imageId;
    }

    public String getName() {
    return name;
    }

    public void setName(String name) {
    this.name = name;
    }

    public int getMore() {
    return more;
    }

    public void setMore(int more) {
    this.more = more;
    }
    }
  • 创建MeAdapter,通过适配器,将要显示的数据,加载到页面中
    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
    public class MeAdapter  extends ArrayAdapter<Me> {

    private int resourceId;
    public MeAdapter(@NonNull Context context, int resource, @NonNull List<Me> objects) {
    super(context, resource, objects);
    this.resourceId = resource;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
    Me me = getItem(position);
    View view;
    ViewHolder viewHolder;
    if(convertView == null){
    view = LayoutInflater.from(getContext()).inflate(resourceId,parent,false);
    viewHolder = new ViewHolder();
    viewHolder.me_image = view.findViewById(R.id.me_image);
    viewHolder.text = view.findViewById(R.id.text);
    viewHolder.more = view.findViewById(R.id.more);
    view.setTag(viewHolder);
    }else{
    view = convertView;
    viewHolder = (ViewHolder)view.getTag();
    }
    viewHolder.me_image.setImageResource(me.getImageId());
    viewHolder.text.setText(me.getName());
    viewHolder.more.setImageResource(me.getMore());
    return view;
    }

    class ViewHolder{
    ImageView me_image;
    TextView text;
    ImageView more;
    }
  • 在MeFragment中,显示创建好的视图
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    public class MeFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.me,null);
    final List<Me> datas = initDatas();
    MeAdapter meAdapter = new MeAdapter(getActivity(),R.layout.me_item,datas);
    ListView listView = view.findViewById(R.id.me_list);
    listView.setAdapter(meAdapter);
    return view;
    }

    private List<Me> initDatas() {
    List<Me> datas = new ArrayList<>();
    datas.add(new Me(R.drawable.zhifu,"支付",R.drawable.right));
    datas.add(new Me(R.drawable.shouchang,"收藏",R.drawable.right));
    datas.add(new Me(R.drawable.xiangce,"相册",R.drawable.right));
    datas.add(new Me(R.drawable.kabao,"卡包",R.drawable.right));
    datas.add(new Me(R.drawable.biaoqing,"表情",R.drawable.right));
    datas.add(new Me(R.drawable.shezhi,"设置",R.drawable.right));
    return datas;
    }
    }

    实现发现界面

  • 这里我们尝试使用RecyclerView来实现
  • 创建find_item.xml布局文件,样式自行调整
    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
    <?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_marginBottom="10dp"
    android:background="#ffffff"
    android:layout_width="match_parent" android:layout_height="wrap_content">


    <ImageView
    android:id="@+id/find_image"
    android:layout_width="60dp"
    android:layout_height="60dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"
    app:srcCompat="@drawable/pengyouquan" />

    <TextView
    android:id="@+id/find_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    android:textColor="#000000"
    app:layout_constraintBottom_toBottomOf="@+id/find_image"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.1"
    app:layout_constraintStart_toEndOf="@+id/find_image"
    app:layout_constraintTop_toTopOf="parent" />

    <ImageView
    android:id="@+id/find_more"
    android:layout_width="20dp"
    android:layout_height="20dp"
    app:layout_constraintBottom_toBottomOf="@+id/find_image"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.95"
    app:layout_constraintStart_toStartOf="@+id/find_image"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/right" />
    </androidx.constraintlayout.widget.ConstraintLayout>
  • 创建Find实体类
    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
    public class Find {
    private int imageId;
    private String text;
    private int more;

    public Find(int imageId, String text, int more) {
    this.imageId = imageId;
    this.text = text;
    this.more = more;
    }

    public int getImageId() {
    return imageId;
    }

    public void setImageId(int imageId) {
    this.imageId = imageId;
    }

    public String getText() {
    return text;
    }

    public void setText(String text) {
    this.text = text;
    }

    public int getMore() {
    return more;
    }

    public void setMore(int more) {
    this.more = more;
    }
    }

  • 创建FindAdapter适配器
    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
    public class FindAdapter extends RecyclerView.Adapter<FindAdapter.ViewHolder> {
    List<Find> findList;

    public FindAdapter(List<Find> findList) {
    this.findList = findList;
    }

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

    @Override
    public void onBindViewHolder(@NonNull FindAdapter.ViewHolder holder, int position) {
    Find find = findList.get(position);
    holder.imageId.setImageResource(find.getImageId());
    holder.more.setImageResource(find.getMore());
    holder.text.setText(find.getText());
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
    ImageView imageId;
    TextView text;
    ImageView more;
    public ViewHolder(@NonNull View itemView) {
    super(itemView);
    imageId = itemView.findViewById(R.id.find_image);
    text = itemView.findViewById(R.id.find_text);
    more = itemView.findViewById(R.id.find_more);
    }
    }
    }
  • 在FindFragment中,显示创建好的视图
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    public class FindFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.find,null);
    List<Find> findList = initData();
    FindAdapter findAdapter = new FindAdapter(findList);
    LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
    RecyclerView recyclerView = view.findViewById(R.id.find_recycler_view);
    recyclerView.setLayoutManager(layoutManager);
    recyclerView.setAdapter(findAdapter);
    return view;
    }

    private List<Find> initData() {
    List<Find> datas = new ArrayList<>();
    datas.add(new Find(R.drawable.pengyouquan,"朋友圈",R.drawable.right));
    datas.add(new Find(R.drawable.saoyisao,"扫一扫",R.drawable.right));
    datas.add(new Find(R.drawable.kanyikan,"看一看",R.drawable.right));
    datas.add(new Find(R.drawable.xiaocengxu,"小程序",R.drawable.right));
    return datas;
    }
    }

    实现通讯录界面

  • 创建list_item.xml布局文件,样式自行调整
    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
    <?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:background="#ffffff"
    android:layout_width="match_parent" android:layout_height="wrap_content">


    <ImageView
    android:id="@+id/list_image"
    android:layout_width="60dp"
    android:layout_height="60dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"
    app:srcCompat="@drawable/xinpengyou" />

    <TextView
    android:id="@+id/list_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    android:textColor="#000000"
    app:layout_constraintBottom_toBottomOf="@+id/list_image"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.1"
    app:layout_constraintStart_toEndOf="@+id/list_image"
    app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
  • 创建ContactList实体类
    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
    public class ContactList {
    private int imageId;
    private String text;

    public int getImageId() {
    return imageId;
    }

    public void setImageId(int imageId) {
    this.imageId = imageId;
    }

    public String getText() {
    return text;
    }

    public void setText(String text) {
    this.text = text;
    }

    public ContactList(int imageId, String text) {
    this.imageId = imageId;
    this.text = text;
    }
    }

  • 创建ListAdapter适配器
    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
    public class ListAdapter extends RecyclerView.Adapter<ListAdapter.ViewHolder> {
    List<ContactList> contactLists;

    public ListAdapter(List<ContactList> contactLists) {
    this.contactLists = contactLists;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

    View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item,parent,false);
    ListAdapter.ViewHolder viewHolder = new ListAdapter.ViewHolder(itemView);
    return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
    ContactList contactList = contactLists.get(position);
    holder.list_image.setImageResource(contactList.getImageId());
    holder.list_text.setText(contactList.getText());
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
    ImageView list_image;
    TextView list_text;
    public ViewHolder(@NonNull View itemView) {
    super(itemView);
    list_image = itemView.findViewById(R.id.list_image);
    list_text = itemView.findViewById(R.id.list_text);
    }
    }
    }

  • 在ListFragment中,显示创建好的视图
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    public class ListFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.list,null);
    List<ContactList> contactLists = initData();
    ListAdapter listAdapter = new ListAdapter(contactLists);
    LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
    RecyclerView recyclerView = view.findViewById(R.id.list_recycler_view);
    recyclerView.setLayoutManager(layoutManager);
    recyclerView.setAdapter(listAdapter);
    return view;
    }

    private List<ContactList> initData() {
    List<ContactList> datas = new ArrayList<>();
    datas.add(new ContactList(R.drawable.xinpengyou,"新的朋友"));
    datas.add(new ContactList(R.drawable.qunliao,"群聊"));
    datas.add(new ContactList(R.drawable.biaoqian,"标签"));
    datas.add(new ContactList(R.drawable.gongzhonghao,"公众号"));
    return datas;
    }
    }

    实现微信界面

  • 该界面在我之前的博客中已经实现过,可以看->Android开发:ListView的使用方法,这里不再说明,也和上面的差不多。

代码以上传GitHub,需要的自行下载

Github
注意:GitHub可能在国内打开速度慢,或者打不开,请科学上网。