完成我的动态页面
简介:
在 上一篇文章的基础上,完成一个fragment页面的大概样式。
使用CoordinatorLayout
、AppBarLayout
、CollapsingToolbarLayout
完成折叠悬浮效果。
我的动态的内容使到RecyclerView控件
和Adapter类
。
完成展示
我的动态页面最后成果
添加依赖
在Gradle.Scripts -> build.gradle (模块的)文件中添加所需依赖项。
修改xml页面
- 修改
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>
- 添加
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中添加网络权限。