需求分析

  • 请用TabLayout和ViewPager实现下列界面(可以自行添加元素,以丰富该页面),或者用TabLayout和ViewPager2实现下列界面 :

图1

  1. 界面元素如图1所示,内容可以比图1更丰富:
  2. 点击相应标签项,出现对应的第二个页面或第三个页面,如图1所示(点击晴天标签选项卡,在对应内容处出现晴天的图片和“晴天”的文字)
  3. 要求:在选项卡中,选中的标签“晴天”文字颜色为黑色且图片为彩色,其它未选中标签的文字颜色和图片颜色都为灰色

实现

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
package com.gallifrey.tablayouttest;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;

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

public class MainActivity extends AppCompatActivity {
private ViewPager2 viewPager2;
private TabLayout tabLayout;
private List<IconRelation> iconRelationList;
private List<Fragment> fragmentList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager2=findViewById(R.id.view_pager2);
tabLayout=findViewById(R.id.tab_layout);
initIcon();
initFragment();


//viewPage2设置适配器
viewPager2.setAdapter(new ImageStateAdapter(this,fragmentList));
//实现viewPage2和tabLayout联动
new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
@Override
public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
tab.setCustomView(getTabView(iconRelationList,position));
}
}).attach();

//设置默认选项
tabLayout.getTabAt(1).select();

//设置监听
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
View view=tab.getCustomView();
ImageView imageView=view.findViewById(R.id.tab_iv);
TextView textView=view.findViewById(R.id.tab_tv);
imageView.setSelected(true);
textView.setTextAppearance(R.style.TabSelectedStyle);
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {
View view=tab.getCustomView();
ImageView imageView=view.findViewById(R.id.tab_iv);
TextView textView=view.findViewById(R.id.tab_tv);
imageView.setSelected(false);
textView.setTextAppearance(R.style.TabUnSelectedStyle);
}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});
}

// 获取tabview
private View getTabView(List<IconRelation> data, int position) {
View view= LayoutInflater.from(this).inflate(R.layout.tab_item,null);
ImageView imageView=view.findViewById(R.id.tab_iv);
TextView textView=view.findViewById(R.id.tab_tv);
imageView.setImageResource(data.get(position).getImageId());
textView.setText(data.get(position).getName());
return view;
}

//初始化图标
private void initIcon() {
iconRelationList=new ArrayList<>();
iconRelationList.add(new IconRelation(R.drawable.sunny,"晴天"));
iconRelationList.add(new IconRelation(R.drawable.cloudyy,"多云"));
iconRelationList.add(new IconRelation(R.drawable.rainy,"下雨"));

}

//初始化fragment
private void initFragment() {
fragmentList=new ArrayList<>();
fragmentList.add(ImageFragment.newInstance(R.drawable.sunday));
fragmentList.add(ImageFragment.newInstance(R.drawable.cloudyday));
fragmentList.add(ImageFragment.newInstance(R.drawable.rainyday));
}
}
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
package com.gallifrey.todayapplication.tablayout;

public class IconRelation {
private int imageId;
private String name;

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

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;
}
}
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
package com.gallifrey.tablayouttest;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;

import java.util.List;

public class ImageStateAdapter extends FragmentStateAdapter {
private List<Fragment> fragmentList;

public ImageStateAdapter(@NonNull FragmentActivity fragmentActivity, List<Fragment> fragmentList) {
super(fragmentActivity);
this.fragmentList=fragmentList;
}

@NonNull
@Override
public Fragment createFragment(int position) {
return fragmentList.get(position);
}

@Override
public int getItemCount() {
return fragmentList.size();
}
}
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
package com.gallifrey.tablayouttest;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

/**
* A simple {@link Fragment} subclass.
* Use the {@link ImageFragment#newInstance} factory method to
* create an instance of this fragment.
*/
public class ImageFragment extends Fragment {

// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private static final String ARG_PARAM1 = "param1";
// private static final String ARG_PARAM2 = "param2";

// TODO: Rename and change types of parameters
private int mParam1;
// private String mParam2;

public ImageFragment() {
// Required empty public constructor
}

/**
* Use this factory method to create a new instance of
* this fragment using the provided parameters.
*
* @param param1 Parameter 1.
// * @param param2 Parameter 2.
* @return A new instance of fragment ImageFragment.
*/
// TODO: Rename and change types and number of parameters
public static ImageFragment newInstance(int param1) {
ImageFragment fragment = new ImageFragment();
Bundle args = new Bundle();
args.putInt(ARG_PARAM1, param1);
// args.putString(ARG_PARAM2, param2);
fragment.setArguments(args);
return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mParam1 = getArguments().getInt(ARG_PARAM1);
// mParam2 = getArguments().getString(ARG_PARAM2);
}
}



@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view= inflater.inflate(R.layout.fragment_image, container, false);
ImageView imageView=view.findViewById(R.id.fl_iv);
imageView.setImageResource(mParam1); //设置图片来源
return view;
}
}
  • 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?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=".tablayout.TabLayoutActivity">
<com.google.android.material.tabs.TabLayout
app:tabIndicatorColor="#05d236"
app:tabIndicatorHeight="5dp"
app:tabIndicatorFullWidth="false"
app:tabTextColor="#6F392727"
app:tabSelectedTextColor="#05d236"
app:tabTextAppearance="@style/TabStyle"
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<!-- 静态添加 -->
<!-- <com.google.android.material.tabs.TabItem-->
<!-- android:layout_width="wrap_content"-->
<!-- android:layout_height="match_parent"-->
<!-- android:text="tab1"/>-->
<!-- <com.google.android.material.tabs.TabItem-->
<!-- android:layout_width="wrap_content"-->
<!-- android:layout_height="match_parent"-->
<!-- android:text="tab2"/>-->
<!-- <com.google.android.material.tabs.TabItem-->
<!-- android:layout_width="wrap_content"-->
<!-- android:layout_height="match_parent"-->
<!-- android:text="tab3"/>-->



</com.google.android.material.tabs.TabLayout>
<!-- viewPage已经停止维护,请使用viewPage2-->
<!-- <androidx.viewpager.widget.ViewPager-->
<!-- android:id="@+id/view_pager"-->
<!-- android:layout_width="match_parent"-->
<!-- android:layout_height="0dp"-->
<!-- app:layout_constraintVertical_weight="1"-->
<!-- app:layout_constraintTop_toBottomOf="@id/tab_layout"-->
<!-- />-->
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/view_pager2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintVertical_weight="1"
app:layout_constraintTop_toBottomOf="@id/tab_layout"
/>


</androidx.constraintlayout.widget.ConstraintLayout>
  • fragment_image.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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=".tablayout.MessageFragment">

<!-- TODO: Update blank fragment layout -->
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/fl_iv"
android:scaleType="centerCrop"
/>

</FrameLayout>
  • tab_item.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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"
android:padding="5dp">
<TextView
android:layout_width="48dp"
android:layout_height="wrap_content"
android:id="@+id/tab_tv"
android:text="测试"
android:textColor="#a5a5a5"
android:textSize="20sp"/>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="@+id/tab_iv"
android:scaleType="center"
android:src="@drawable/fl_rb_message_bg"/>

</LinearLayout>
  • 在values文件夹下新建styles.xml文件添加字体选中效果样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<resources>

<style name="TabSelectedStyle">
<item name="android:textColor">#05d236</item>
<item name="android:textStyle">bold</item>
</style>

<style name="TabUnSelectedStyle">
<item name="android:textColor">#a5a5a5</item>
<item name="android:textStyle">normal</item>
</style>

</resources>
  • drawable文件夹下添加图标变化的样式,写法一样这里给出一个样例(其实就是设置两张照片,选中时为有色图标,非选中为灰色图标)
1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@drawable/cloudy"/>
<item android:state_selected="false" android:drawable="@drawable/cloudy2"/>
</selector>

image-20220506053035960image-20220506053056168

image-20220506053149921