上一篇请参见：移动开发技术【安卓】——Android_Studio【Part 1】
在上一篇中，我们说到，如何初步的使用Android Studio ,同时完成了基础微信页面的模仿设计。同时我们上一篇中最后留了一个尾巴，如何实现切换页面图标变换颜色问题，此篇中我们也来完善这一效果。
目录
【一】切换页面图标变换颜色（续）
（效果图）：
首先我们要了解到，对于图标颜色的变换，实质是将图片样式进行转换。这里我们就以如上的图标样式为例，一张绿色，一张灰色。在点击后会对显示图片进行切换，这就是我们效果的原理。
1、图片（文字也可以）的准备与配置
我们将准备好的图片放在drawable目录下（图片我只准备了两张），方便我们读取使用。同时创建四个.xml文件（我命名为icon_****.xml）
图片.xml配置（以微信界面为例）：icon_weixin.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tab_weixin_pressed" android:state_selected="true"/>
<item android:drawable="@drawable/tab_weixin_normal" />
</selector>我们可以看到，上面@drawable/ 后面对应两种图片。同时你点击design可以查看当前图片样式，也就是你页面初步加载的样式。同时其余的联系人、朋友、设置界面的控件配置方式相同。完成这一步后，剩下的内容就和我们上一篇配置四个Fragement的方式就一样了。
2、MainActivity中的代码编写
【图片视图的变量定义】
//四个图片视图
private ImageView img_weixin,img_contact,img_friend,img_setting,img_temp;【初始化加载图片】通过id索引绑定
private void initlImg() {
img_weixin = findViewById(R.id.imageView1);
img_contact = findViewById(R.id.imageView2);
img_friend = findViewById(R.id.imageView3);
img_setting = findViewById(R.id.imageView4);
img_temp = img_weixin;
}【图片变换】
private void ImgColorChange(int i)
{
img_temp.setSelected(false);
switch(i){
case 1: img_weixin.setSelected(true); img_temp = img_weixin; break;
case 2: img_contact.setSelected(true); img_temp = img_contact; break;
case 3: img_friend.setSelected(true); img_temp = img_friend; break;
case 4: img_setting.setSelected(true); img_temp = img_setting ;break;
default:break;
}
}【点击后的操作执行】点击对应标签后调用上面的ImgColorChange方法
@Override
public void onClick(View v) {//点击后操作
switch (v.getId()){
case R.id.tab01: show(1); ImgColorChange(1);break;
case R.id.tab02: show(2); ImgColorChange(2);break;
case R.id.tab03: show(3); ImgColorChange(3);break;
case R.id.tab04: show(4); ImgColorChange(4);break;
default: break;
}
}MainActivity代码：
package com.example.mywork;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.animation.LayoutTransition;
import android.os.Bundle;
import android.view.SurfaceControl;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
//中间部分的四个Fragment
private Fragment weixinFragment;
private Fragment friendFragment;
private Fragment contactFragment;
private Fragment settingFragment;
//四个图片视图
private ImageView img_weixin,img_contact,img_friend,img_setting,img_temp;
//四个layout布局
private LinearLayout tab01,tab02,tab03,tab04;
private FragmentManager fm;
private FragmentTransaction transaction;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);//隐藏项目名
setContentView(R.layout.activity_main);
weixinFragment = new weixinFragment();
friendFragment = new friendFragment();
contactFragment = new contactFragment();
settingFragment = new settingFragment();
//通过id获取tab（对应LinearLayout）
tab01 =findViewById(R.id.tab01);
tab02 =findViewById(R.id.tab02);
tab03 =findViewById(R.id.tab03);
tab04 =findViewById(R.id.tab04);
fm = getSupportFragmentManager();
initalfragement();//加载并初始化显示Fragment页面
initlImg();//加载初始化图片（通过id）,如果需要文字变化，也可以在这里初始化实现
img_weixin.setSelected(true);//选择微信控件初始颜色
tab01.setOnClickListener(this);
tab02.setOnClickListener(this);
tab03.setOnClickListener(this);
tab04.setOnClickListener(this);
}
private void initlImg() {
img_weixin = findViewById(R.id.imageView1);
img_contact = findViewById(R.id.imageView2);
img_friend = findViewById(R.id.imageView3);
img_setting = findViewById(R.id.imageView4);
img_temp = img_weixin;
}
private void initalfragement() {
FragmentTransaction transaction = fm.beginTransaction();//开始做transaction
transaction.add(R.id.content,weixinFragment);
transaction.add(R.id.content,friendFragment);
transaction.add(R.id.content,contactFragment);
transaction.add(R.id.content,settingFragment);
Hide(transaction);//隐藏
transaction.show(weixinFragment);
transaction.commit();
}
@Override
public void onClick(View v) {//点击后操作
switch (v.getId()){
case R.id.tab01: show(1); ImgColorChange(1);break;
case R.id.tab02: show(2); ImgColorChange(2);break;
case R.id.tab03: show(3); ImgColorChange(3);break;
case R.id.tab04: show(4); ImgColorChange(4);break;
default: break;
}
}
private void show(int i) {//展示Fragement
FragmentTransaction transaction = fm.beginTransaction();
Hide(transaction);//隐藏
switch (i)
{
case 1 : transaction.show(weixinFragment);break;
case 2 : transaction.show(contactFragment);break;
case 3 : transaction.show(friendFragment);break;
case 4 : transaction.show(settingFragment);break;
default: break;
}
transaction.commit();//提交
}
private void ImgColorChange(int i)
{
img_temp.setSelected(false);
switch(i){
case 1: img_weixin.setSelected(true); img_temp = img_weixin; break;
case 2: img_contact.setSelected(true); img_temp = img_contact; break;
case 3: img_friend.setSelected(true); img_temp = img_friend; break;
case 4: img_setting.setSelected(true); img_temp = img_setting ;break;
default:break;
}
}
private void Hide(FragmentTransaction transaction) {
transaction.hide(weixinFragment);
transaction.hide(friendFragment);
transaction.hide(contactFragment);
transaction.hide(settingFragment);
}
}综上就是我们实现图标变换的操作。
【二】实现RecyclerView列表
1、xml中list样式设计
【在fragment_contact中加入RecyclerView列表控件】：这里以联系人界面为例
【在layout文件中创建item_list.xml文件，设置列表一行中的样式】
2、Adapter适配器
我们了解到Anroid也是遵循MVC模式的设计框架。其中Activity是Controller，layout是View。但是layout很杂，为了更好的将数据绑定，Android引入了Adapter机制，我们称为适配器。
通过源码我们可以看到这是一个抽象类，因此我们选择 重写一个MAdpter_Contract类去继承它。
【自定义适配器】
public class Myadpter_Contract extends RecyclerView.Adapter<Myadpter_Contract.MyviewHolder> {
private List<Map<String,Object>> data;
private Context context;
public Myadpter_Contract(Context context, List<Map<String,Object>> data) {
this.context = context;
this.data = data;
}
@NonNull
@Override
//就相当于指针，ViewHolder是抽象的，所以需要创建其子类返回
public MyviewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
//视图压缩
View view = LayoutInflater.from(context).inflate(R.layout.item_list_contact,parent,false);
MyviewHolder holder = new MyviewHolder(view);
return holder;
}
@Override
public void onBindViewHolder(@NonNull MyviewHolder holder, int position) {
holder.connection_text1.setText(data.get(position).get("key1").toString());
holder.connection_text2.setText(data.get(position).get("key2").toString());
}
@Override
public int getItemCount() {
return data.size();
}
public class MyviewHolder extends RecyclerView.ViewHolder {
TextView connection_text1,connection_text2;
public MyviewHolder(@NonNull View itemView) {
super(itemView);
connection_text1 = itemView.findViewById(R.id.connection_text1);
connection_text2 = itemView.findViewById(R.id.connection_text2);
}
}
}在自定义的适配器中，主要重写的方法：
public Myadpter_Contract(Context context, List<Map<String,Object>> data){};public MyviewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType);public void onBindViewHolder(@NonNull MyviewHolder holder, int position) {};public int getItemCount(){};
在这个类中，我们还给了一个构造方法，用来传递我们所获得的的参数，比如我们的列表数据。那么接下来我们说一下这几个重写的函数有什么作用。
public MyviewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType)比如拿到一个盒子，然后通过view，加载了你盒子里的样式。同时这里我们看源码，这里返回的是一个抽象类，因此我们还要创建内部类MyviewHolder，将我们的文本id注入到里面。
public void onBindViewHolder(@NonNull MyviewHolder holder, int position)拿到view后，就可以向里面装东西，加载我们的信息到List<Map<String,Object>> data;，最后返回数据个数
public int getItemCount()3、联系人界面列表的代码
【recycleview配置导入】
//对recycleview进行配置
recyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);【给定数据】
//数据
String [] people = {"柏拉图","阿基米德","柴科夫斯基","尤伯罗斯"};
String [] message = {"在线","离开","忙碌","举办奥运中"};
【存储到 List<Map<String,Object>> data中】
List<Map<String,Object>> data = new ArrayList<>();
for (int i = 0 ; i <people.length;i++)
{
Map<String,Object> itemdata = new HashMap<>();
itemdata.put("key1",people[i]);
itemdata.put("key2",message[i]);
data.add(itemdata);
}说明：这里List<Map<String,Object>> data 是一个列表，但内部每一格存储的是一个Map集合
比如对应每一个map，如“柏拉图”是key1所对应的value，“在线”是key2对应的value，存储在第一格，同理，第二格内，也存储map集合，也有key1，key2，对应的值，key就类似是value的索引下标。
【加载适配器】
manager.setOrientation(RecyclerView.VERTICAL);
recyclerView.setAdapter(myadpter_contract);
【设置分割线】
//分割线
DividerItemDecoration mDivider = new DividerItemDecoration(context, DividerItemDecoration.VERTICAL);
recyclerView.addItemDecoration(mDivider);【三】RecyclerView列表效果展示
写在最后
在此过程中，我们初步了解了RecycleView的简单使用，至于更加有趣的效果，比如分组、瀑布流等，有机会我们会继续学习。
With_Zero 3.30
1479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
