移动开发技术学习（二）

简介：
在 上一篇文章的基础上，完成一个fragment页面的大概样式。
使用CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout完成折叠悬浮效果。
我的动态的内容使到RecyclerView控件和Adapter类。

完成展示

我的动态页面最后成果

添加依赖

在Gradle.Scripts -> build.gradle （模块的）文件中添加所需依赖项。

修改xml页面

1. 修改fragment_contact.xml
   

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="192dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:layout_scrollInterpolator="@android:anim/decelerate_interpolator"

            android:fitsSystemWindows="true"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:toolbarId="@+id/toolbar">

            <ImageView
                android:id="@+id/app_bar_image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:src="@drawable/person_bg" />    <!--  -->

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"></androidx.appcompat.widget.Toolbar>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

	<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="40dp"
        android:layout_marginRight="40dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
</androidx.coordinatorlayout.widget.CoordinatorLayout>

2. 添加moment_item.xml，作为RecyclerView里的一项

注： 在布局中要注意 layout_height 的属性值。然后，为了页面好看些设置一下边距 layout_marginXX。

添加Adapter

在MomentAdapter.java中，要注意给imagView绑定Src使用了Glide，在onBindViewHolder方法中可以添加点击事件。

public class MomentAdapter extends RecyclerView.Adapter<MomentAdapter.MyViewHolder> {
    private Context context;
    private List<Map<String, Object>> data;

    public MomentAdapter(Context context, List<Map<String, Object>> data) {
        this.context = context;
        this.data = data;
    }

    @NonNull
    @Override
    public MomentAdapter.MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        //不是View.inflate因为MyViewHolder只是一行不是占整个视图只是部分
        View view = LayoutInflater.from(context).inflate(R.layout.moment_item, parent, false);
        MyViewHolder myViewHolder = new MyViewHolder(view);
        return myViewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull MomentAdapter.MyViewHolder holder, int position) {
        holder.mmtTitle.setText(data.get(position).get("date").toString());
        holder.mmtContent.setText(data.get(position).get("content").toString());
        Glide.with(context)
                .load(data.get(position).get("imgSrc"))
                .into(holder.mmtImageView);

        //监听点击事件
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //跳转页面
            }
        });
    }
    
    @Override
    public int getItemCount() {
        return data.size();
    }
    
    public class MyViewHolder extends RecyclerView.ViewHolder {
        TextView mmtTitle,mmtContent;
        ImageView mmtImageView;

        public MyViewHolder(@NonNull View itemView) {
            super(itemView);

            mmtTitle = itemView.findViewById(R.id.mmtTitle);
            mmtContent = itemView.findViewById(R.id.mmtContent);
            mmtImageView = itemView.findViewById(R.id.mmtImageView);

        }
    }
}

修改fragment

在ContactFragment.java中初始化模拟数据（数据类型为List<Map<String, Object>>），再调用initRecyclerView();为recycleview配置LayoutManager和Adapter（注意代码顺序）。

public class ContactFragment extends Fragment {

    private View view;//定义view用来设置fragment的layout
    public RecyclerView recyclerView;//定义RecyclerView
    //定义以goodsentity实体类为对象的数据集合
    private List<Map<String, Object>> data;
    private MomentAdapter momentAdapter;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        view = inflater.inflate(R.layout.fragment_contact, container, false);

        //初始化模拟数据
        initData();
        //对recycleview进行配置
        initRecyclerView();

        return view;
    }

    private void initData() {
        String[] date = {"2022年1月1日", "2022年4月1日", "2022年4月3日"};
        String[] content = {"新年新气象，去年定的目标继续。", "今天不是愚人节，今天放假，不用上课哟！", "和室友一起去踏青，他们要毕业了，不知道能出去玩几次。"};
        String[] imgSrc = {"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fart_water_pic%2F21%2F02%2F02%2F4eb26a5b2e8e22460894557a3ed36be9.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651486876&t=d335486b15974bb993d3232ff1f73a58"
                , "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.puchedu.cn%2Fuploads%2F0%2F26%2F609898205%2F4190835679.jpg&refer=http%3A%2F%2Fimg.puchedu.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651487125&t=5cd2a46d5e8bbead27a07aad97c68673"
                , "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2FTemplet_origin_pic%2F04%2F69%2F56%2Fbd44279da8a34b5c50077970f54ad219.jpg%21%2Ffw%2F650%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651487164&t=ca686066aa5d5399640c0d20acfe0172"};

        data = new ArrayList<Map<String, Object>>();
        for(int i=0; i<date.length; i++){
            Map<String, Object> itemmap = new HashMap<String, Object>();
            itemmap.put("date", date[i]);
            itemmap.put("content", content[i]);
            itemmap.put("imgSrc", imgSrc[i]);

            data.add(itemmap);
        }
    }

    private void initRecyclerView() {
        recyclerView = view.findViewById(R.id.recyclerView);
        momentAdapter = new MomentAdapter(getActivity(), data);
        
        LinearLayoutManager manager = new LinearLayoutManager(getActivity(), LinearLayoutManager.VERTICAL, false);
        //设置item的分割线
        recyclerView.addItemDecoration(new DividerItemDecoration(getActivity(),DividerItemDecoration.VERTICAL));
        
        recyclerView.setLayoutManager(manager);
        recyclerView.setAdapter(momentAdapter);

    }
}

注： 因为在adapter中绑定imageView的Src使用了网络上的图片地址，所以需要在manifests中添加网络权限。