类微信界面 01

1.设计目标

类微信界面
Fragment实现4个tab的切换,顶部显示当前所处页面,下方四个按钮分别为微信通讯录发现我的

2.功能说明

按下按钮以绿色显示其他以黑色显示同时切换页面和顶部的标题栏。按下其他按钮,首先让所有图标变为黑色再让点击的图标变为绿色

3.代码解析

创建4个tab页面tab01.xml~`tab04.xml`

一个top.xml作为顶部标题栏

一个frameLayout作为4个切片的容器

一个tab.xml作为底部

activity_main如下布局

主要xml

activity_main.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
<?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">
<include
android:id="@+id/include2"
layout="@layout/top"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:id="@+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/include"
app:layout_constraintTop_toBottomOf="@+id/include2"
app:layout_constraintVertical_bias="0.0"
tools:layout_editor_absoluteX="0dp">

</FrameLayout>
<include
android:id="@+id/include"
layout="@layout/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

tab.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
96
97
98
99
100
101
102
<?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="wrap_content">
<LinearLayout
android:id="@+id/LinearLayout0"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/underline"
android:baselineAligned="false"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingBottom="20dp"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:id="@+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical"
android:paddingTop="10dp">
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="30dp"
app:srcCompat="@drawable/ic___wx" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="微信"
android:textSize="12dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical"
android:paddingTop="10dp">
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="30dp"
app:srcCompat="@drawable/ic___txl" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="通讯录"
android:textSize="12dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical"
android:paddingTop="10dp">
<ImageView
android:id="@+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="30dp"
app:srcCompat="@drawable/ic___fx" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="发现"
android:textSize="12dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical"
android:paddingTop="10dp">
<ImageView
android:id="@+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="30dp"
app:srcCompat="@drawable/ic___me" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="我"
android:textSize="12dp" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

top.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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">
<TextView
android:id="@+id/textView_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#E8E8E8"
android:gravity="center"
android:paddingTop="44dp"
android:paddingBottom="10dp"
android:text="微信"
android:textColor="@color/black"
android:textSize="18sp" />
</LinearLayout>

java代码

定义全局的变量,包含底部四图文,4个fragment

1
2
3
4
5
6
7
8
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private ImageView imageView1,imageView2,imageView3,imageView4;
private TextView textView1,textView2,textView3,textView4;
private Fragment fragment1, fragment2, fragment3, fragment4;
private LinearLayout linearLayout1, linearLayout2, linearLayout3, linearLayout4;
private FragmentManager manager;
...

event_init()函数,先根据id来找到页面元素,定义4个linearLayout的监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
private void event_init(){
linearLayout1 = findViewById(R.id.LinearLayout1);
linearLayout2 = findViewById(R.id.LinearLayout2);
linearLayout3 = findViewById(R.id.LinearLayout3);
linearLayout4 = findViewById(R.id.LinearLayout4);

linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);
//四个svg
imageView1=findViewById(R.id.imageView1);
imageView2=findViewById(R.id.imageView2);
imageView3=findViewById(R.id.imageView3);
imageView4=findViewById(R.id.imageView4);
//四个文字
textView1=findViewById(R.id.textView1);
textView2=findViewById(R.id.textView2);
textView3=findViewById(R.id.textView3);
textView4=findViewById(R.id.textView4);
}

fragment_init()函数
创建4个fragment实例使用.add()方法添加4个fragment,,hide()方法隐藏后3个,防止重叠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
private void fragment_init(){
fragment1 = new Fragment1();
fragment2 = new Fragment2();
fragment3 = new Fragment3();
fragment4 = new Fragment4();
Log.d("ffff","init");

manager = getSupportFragmentManager();
FragmentTransaction transaction = manager.beginTransaction()
.add(R.id.frameLayout, fragment1)
.add(R.id.frameLayout,fragment2)
.add(R.id.frameLayout,fragment3)
.add(R.id.frameLayout,fragment4)
.hide(fragment2)
.hide(fragment3)
.hide(fragment4)
;
transaction.commit();
}

Activity初始化时执行这两个函数

1
2
3
4
5
6
7
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

event_init();
fragment_init();
}

点击事件监听之前先定义hideall()函数用于隐藏所有的fragment

与rebu()函数,用于恢复底部图片文字的初始颜色

1
2
3
4
5
6
7
private void hideall(FragmentTransaction transaction){
transaction.hide(fragment1)
.hide(fragment2)
.hide(fragment3)
.hide(fragment4);
Log.d("ffff","hide");
}
1
2
3
4
5
6
7
8
9
10
private void rebu(){
imageView1.setImageResource(R.drawable.ic___wx);
textView1.setTextColor(0xFF000000);
imageView2.setImageResource(R.drawable.ic___txl);
textView2.setTextColor(0xFF000000);
imageView3.setImageResource(R.drawable.ic___fx);
textView3.setTextColor(0xFF000000);
imageView4.setImageResource(R.drawable.ic___me);
textView4.setTextColor(0xFF000000);
}

onClick事件监听

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
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.LinearLayout1:
select(1);
break;
case R.id.LinearLayout2:
select(2);
break;
case R.id.LinearLayout3:
select(3);
break;
case R.id.LinearLayout4:
select(4);
break;
default:
break;
}
}

private void select(int i) {
TextView textView_top = findViewById(R.id.textView_top);
FragmentTransaction transaction = manager.beginTransaction();
hideall(transaction);
switch (i) {
case 1:
transaction.show(fragment1);
textView_top.setText("微信");
rebu();
imageView1.setImageResource(R.drawable.ic___wx_this);
textView1.setTextColor(0xFF07C060);
Log.d("show","case1")
;
break;
case 2:
transaction.show(fragment2);
textView_top.setText("通讯录");
rebu();
imageView2.setImageResource(R.drawable.ic___txl_this);
textView2.setTextColor(0xFF07C060);
Log.d("show","case2")
;
break;
case 3:
transaction.show(fragment3);
textView_top.setText("发现");
rebu();
imageView3.setImageResource(R.drawable.ic___fx_this);
textView3.setTextColor(0xFF07C060);
Log.d("show","case3")
;
break;
case 4:
transaction.show(fragment4);
textView_top.setText("我的");
rebu();
imageView4.setImageResource(R.drawable.ic___me_this);
textView4.setTextColor(0xFF07C060);
;
break;
default:
break;
}
transaction.commit();
}

swich 根据点击的LinearLayout执行select()

select()中i对应4个点击

1
TextView textView_top = findViewById(R.id.textView_top);

获取顶部标题栏id

在swish之前都先调用hideall()函数隐藏所有fragmenthideall(transaction);

在每个case中

  1. .show(fragment);显示对应fragment
  2. .setText()切换对应标题
  3. rebu();清空图片文字的颜色状态
  4. .setImageResource(),setTextColor()切换对应颜色图片与文字

4.运行展示截图

5.源码仓库地址

Github:https://github.com/2412322029/Applicationtest

具体MainActivity:

https://github.com/2412322029/Applicationtest/blob/master/app/src/main/java/com/example/applicationtest/MainActivity.java