facebook帖子效果
build.gradle(:app):依赖
implementation 'androidx.recyclerview:recyclerview:1.2.1'
// 从 json 文件加载数据的依赖项。
implementation 'com.android.volley:volley:1.2.0'
// 从 url 加载图像的依赖项。
implementation 'com.squareup.picasso:picasso:2.71828'
// 用于创建圆形图像的依赖项。
implementation 'de.hdodenhof:circleimageview:3.1.0'
添加权限:
<uses-permission android:name="android.permission.INTERNET" />
图标文件夹示例:
item项:facebook_feed_rv_item.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:elevation="8dp"
app:cardCornerRadius="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/idLLTopBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="4dp">
<!--用于显示用户图像的圆形图像-->
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/idCVAuthor"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="5dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/idTVAuthorName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:padding="3dp"
android:text="myapp"
android:textColor="@color/black"
android:textStyle="bold" />
<TextView
android:id="@+id/idTVTime"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="3dp"
android:text="time"
android:textColor="@color/black"
android:textSize="11sp" />
</LinearLayout>
</LinearLayout>
<!--用于显示帖子描述的文本视图-->
<TextView
android:id="@+id/idTVDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/idLLTopBar"
android:layout_margin="5dp"
android:padding="5dp"
android:text="Description"
android:textColor="@color/black"
android:textSize="11sp" />
<!--显示帖子图像的图像视图-->
<ImageView
android:id="@+id/idIVPost"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_below="@id/idTVDescription"
android:adjustViewBounds="true"
android:scaleType="fitCenter" />
<!--用于显示 facebook 操作的线性布局-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/idIVPost"
android:layout_margin="5dp"
android:orientation="horizontal"
android:padding="2dp"
android:weightSum="3">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="@drawable/background_drawable"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:src="@drawable/ic_like" />
<TextView
android:id="@+id/idTVLikes"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="4dp"
android:layout_weight="1"
android:background="@drawable/background_drawable"
android:drawablePadding="3dp"
android:padding="5dp"
android:text="likes"
android:textColor="@color/black"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="@drawable/background_drawable"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:src="@drawable/ic_comment" />
<TextView
android:id="@+id/idTVComments"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:layout_weight="1"
android:drawablePadding="3dp"
android:padding="5dp"
android:text="12"
android:textColor="@color/black"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/idLLShare"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="@drawable/background_drawable"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:src="@drawable/ic_share" />
<TextView
android:id="@+id/idTVShare"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="4dp"
android:layout_weight="1"
android:background="@drawable/background_drawable"
android:drawablePadding="3dp"
android:padding="5dp"
android:text="Share"
android:textColor="@color/black"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</androidx.cardview.widget.CardView>
drawable/background_drawable.xml 文件
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--radius for our shape-->
<corners android:radius="20dp" />
<!--background color for our shape-->
<solid android:color="#EDEDED" />
</shape>
Model类
public class FacebookFeedModal {
/** 用于存储我们的作者图片、作者姓名、postDate、postDescription、post image、post likes、post comments 的变量。*/
private String authorImage;
private String authorName;
private String postDate;
private String postDescription;
private String postIV;
private String postLikes;
private String postComments;
public String getAuthorImage() {
return authorImage;
}
public void setAuthorImage(String authorImage) {
this.authorImage = authorImage;
}
public String getAuthorName() {
return authorName;
}
public void setAuthorName(String authorName) {
this.authorName = authorName;
}
public String getPostDate() {
return postDate;
}
public void setPostDate(String postDate) {
this.postDate = postDate;
}
public String getPostDescription() {
return postDescription;
}
public void setPostDescription(String postDescription) {
this.postDescription = postDescription;
}
public String getPostIV() {
return postIV;
}
public void setPostIV(String postIV) {
this.postIV = postIV;
}
public String getPostLikes() {
return postLikes;
}
public void setPostLikes(String postLikes) {
this.postLikes = postLikes;
}
public String getPostComments() {
return postComments;
}
public void setPostComments(String postComments) {
this.postComments = postComments;
}
public FacebookFeedModal(String authorImage, String authorName, String postDate,
String postDescription, String postIV, String postLikes,
String postComments) {
this.authorImage = authorImage;
this.authorName = authorName;
this.postDate = postDate;
this.postDescription = postDescription;
this.postIV = postIV;
this.postLikes = postLikes;
this.postComments = postComments;
}
}
recyclerview adapter
public class FacebookFeedRVAdapter extends RecyclerView.Adapter<FacebookFeedRVAdapter.ViewHolder> {
private ArrayList<FacebookFeedModal> facebookFeedModalArrayList;
private Context context;
public FacebookFeedRVAdapter(ArrayList<FacebookFeedModal> facebookFeedModalArrayList, Context context) {
this.facebookFeedModalArrayList = facebookFeedModalArrayList;
this.context = context;
}
@NonNull
@Override
public FacebookFeedRVAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// 展示布局
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.facebook_feed_rv_item, parent, false);
return new FacebookFeedRVAdapter.ViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull FacebookFeedRVAdapter.ViewHolder holder, int position) {
//拿取数据并绑定到每一个item
FacebookFeedModal modal = facebookFeedModalArrayList.get(position);
Picasso.get().load(modal.getAuthorImage()).into(holder.authorIV);
holder.authorNameTV.setText(modal.getAuthorName());
holder.timeTV.setText(modal.getPostDate());
holder.descTV.setText(modal.getPostDescription());
Picasso.get().load(modal.getPostIV()).into(holder.postIV);
holder.likesTV.setText(modal.getPostLikes());
holder.commentsTV.setText(modal.getPostComments());
}
@Override
public int getItemCount() {
return facebookFeedModalArrayList.size();
}
/**
* item数据项
*/
public class ViewHolder extends RecyclerView.ViewHolder {
private CircleImageView authorIV;
private TextView authorNameTV, timeTV, descTV;
private ImageView postIV;
private TextView likesTV, commentsTV;
private LinearLayout shareLL;
public ViewHolder(@NonNull View itemView) {
super(itemView);
shareLL = itemView.findViewById(R.id.idLLShare);
authorIV = itemView.findViewById(R.id.idCVAuthor);
authorNameTV = itemView.findViewById(R.id.idTVAuthorName);
timeTV = itemView.findViewById(R.id.idTVTime);
descTV = itemView.findViewById(R.id.idTVDescription);
postIV = itemView.findViewById(R.id.idIVPost);
likesTV = itemView.findViewById(R.id.idTVLikes);
commentsTV = itemView.findViewById(R.id.idTVComments);
}
}
}
主Activity
public class NinthActivity extends AppCompatActivity {
/**
* 为我们的请求队列、数组列表、进度条、编辑文本、图像按钮和RecyclerView创建变量。
*/
private RequestQueue mRequestQueue;
private ArrayList<FacebookFeedModal> instaModalArrayList;
private ArrayList<FacebookFeedModal> facebookFeedModalArrayList;
private ProgressBar progressBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ninth);
// 初始话view
progressBar = findViewById(R.id.idLoadingPB);
getFacebookFeeds();
}
private void getFacebookFeeds() {
facebookFeedModalArrayList = new ArrayList<>();
// 用于初始化请求队列的变量
mRequestQueue = Volley.newRequestQueue(NinthActivity.this);
// 清除缓存,用于数据更新时
mRequestQueue.getCache().clear();
//返回json格式的String数据
String url = "https://jsonkeeper.com/b/KXDH";
// JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.GET, url,
// null, new Response.Listener<JSONObject>() {
// @Override
// public void onResponse(JSONObject response) { Lambda表达式
JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.GET, url,
null, response -> {
progressBar.setVisibility(View.GONE);
try {
// 从 json 对象中提取数据
String authorName = response.getString("authorName");
String authorImage = response.getString("authorImage");
JSONArray feedsArray = response.getJSONArray("feeds");
//初始化
for (int i = 0; i < feedsArray.length(); i++) {
JSONObject feedsObj = feedsArray.getJSONObject(i);
String postDate = feedsObj.getString("postDate");
String postDescription = feedsObj.getString("postDescription");
String postIV = feedsObj.getString("postIV");
String postLikes = feedsObj.getString("postLikes");
String postComments = feedsObj.getString("postComments");
// 向model类添加数据
FacebookFeedModal feedModal = new FacebookFeedModal(authorImage, authorName,
postDate, postDescription, postIV, postLikes, postComments);
facebookFeedModalArrayList.add(feedModal);
// 创建一个适配器类并在其中添加我们的数组列表
FacebookFeedRVAdapter adapter = new FacebookFeedRVAdapter(facebookFeedModalArrayList, NinthActivity.this);
RecyclerView recyclerView = findViewById(R.id.idRVInstaFeeds);
//RecyclerView设置线性布局
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(NinthActivity.this,
RecyclerView.VERTICAL, false);
recyclerView.setLayoutManager(linearLayoutManager);
//RecyclerView设置适配器
recyclerView.setAdapter(adapter);
}
} catch (JSONException e) {
e.printStackTrace();
}
}, error -> Toast.makeText(NinthActivity.this, "Fail to get data with error " + error,
Toast.LENGTH_SHORT).show());
// }, new Response.ErrorListener() {
// @Override
// public void onErrorResponse(VolleyError error) {
// Toast.makeText(NinthActivity.this, "Fail to get data with error " + error, Toast.LENGTH_SHORT).show();
// }
// });
mRequestQueue.add(jsonObjectRequest);
}
}
activity_night.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".activity.NinthActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/idRVInstaFeeds"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ProgressBar
android:id="@+id/idLoadingPB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:visibility="visible" />
</RelativeLayout>