功能说明
在上一次实验的基础上实现了:
-
为RecyclerView的基本视图增加了CardView父容器,并为点赞和收藏添加了点击变色效果。
-
添加了一些点击反馈动画。
本次实验中实现了:
-
RecylerView中动态内容最多显示10行,溢出则进行截断并添加省略号。
-
点击RecylerView中动态内容转跳对应的动态详情界面。
-
使用CollapsingToolbarLayout实现了浮动顶部ActionBar,下滑收起,上滑弹出。
-
使用NestedScrollView实现了大于物理屏幕的视图滚动显示。
-
使用TabLayout实现转发和评论的切换。
-
关键源码
Layout XML
本次实验中新建的Layout:
-
stream_activity
-
action_bar
-
stream_detail
-
shortcut_bar
-
CardView的圆角和阴影
app:cardCornerRadius="10dp" <!--圆角-->
app:cardElevation="3dp" <!--阴影-->
CollapsingToolbarLayout浮动ActionBar
app:layout_scrollFlags="scroll|enterAlways"
ImageView调整图片大小
android:scaleX="0.7"
android:scaleY="0.7"
控件绑定对应点击事件
android:onClick="streamDetail"
TextView设置最大行数&省略号截断+行间距
android:maxLines="10" <!--最大行数-->
android:ellipsize="end" <!--省略号截断-->
android:lineSpacingExtra="2dp" <!--行间距-->
Java
本次实验中新建的JAVA:
- StreamActivity
StreamRVAdapter
public void onBindViewHolder(@NonNull StreamRVAdapter.StreamViewHolder holder, int position) {
holder.ivAvatar.setTag(streamContainer.getAvatar());
}
MainActivity
/*收藏颜色变化*/
public void bookmarkClicked(View view) {
ImageView imvIcon = view.findViewById(R.id.ivBkmk);
if (bookmarkSelected == 0) {
bookmarkSelected = 1;
imvIcon.setColorFilter(getColor(R.color.bookmarked));
} else {
bookmarkSelected = 0;
imvIcon.setColorFilter(getColor(R.color.purple_200));
}
}
/*点击文字转跳详情*/
public void streamDetail(View view) {
Intent intent = new Intent(MainActivity.this, StreamActivity.class);
Bundle streamInfo = new Bundle();
TextView textView = this.findViewById(R.id.tvUsrName);
streamInfo.putString("usrName", String.valueOf(textView.getText()));
textView = this.findViewById(R.id.tvPostTime);
streamInfo.putString("postTime", String.valueOf(textView.getText()));
textView = this.findViewById(R.id.tvStreamContent);
streamInfo.putString("content", String.valueOf(textView.getText()));
ImageView imageView = this.findViewById(R.id.ivAvatar);
streamInfo.putInt("avatar", (int) imageView.getTag());
intent.putExtra("detail", streamInfo);
startActivity(intent);
}
StreamActivity
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.stream_activity);
//隐藏状态栏
getSupportActionBar().hide();
Intent intent = getIntent();
Bundle detail = intent.getBundleExtra("detail");
TextView textView = findViewById(R.id.tvCurrentUsrName);
textView.setText(detail.getString("usrName"));
textView = findViewById(R.id.tvActionBarAvatarUsrName);
textView.setText(detail.getString("usrName"));
textView = findViewById(R.id.tvCurrentPostTime);
textView.setText(detail.getString("postTime"));
textView = findViewById(R.id.tvCurrentStreamContent);
textView.setText(detail.getString("content"));
ImageView imageView = findViewById(R.id.ivCurrentAvatar);
imageView.setImageResource(detail.getInt("avatar"));
imageView = findViewById(R.id.ivActionBarAvatar);
imageView.setImageResource(detail.getInt("avatar"));
}
/*返回键*/
public void backClicked(){
finish();
}
功能测试
RecyclerView
-
CardView父容器
-
点赞和收藏点击变色
-
动态内容最多显示10行,溢出则截断并添加省略号
点击转跳详情界面
-
浮动顶部ActionBar,下滑收起,上滑弹出
-
长视图滚动显示
-
TabLayout切换转发和评论
-
返回键回到上级界面
核心技术
转跳的点击事件有多种实现方法:
-
在RecyclerView的Adapter中用Interface实现
-
在Activity中通过内嵌类实现
-
在Layout XML中为控件的OnClick属性绑定Activity中的方法实现
这三种方法转跳都是使用Intent在两个Activity间转跳,但利用Bundle传递值的方法略有不同,Adapter中通过点击项的Position找到对应内容,而Activity中则需要在当前context中通过findViewById()逐一获取值。 两种方法相比较,Adapter中用Interface实现在传值时更为方便,在希望传递图片时尤为明显————在Activity中通过Bundle传递图片,要么需要将图片转换为Bitmap格式;要么需要在使用Adapter适配时将图片的Resource的ID设为tag,以便在Activity中用getTag()获取。
心得体会
- UI设计参考了豆瓣和Share,但有些复杂的显示/动画效果目前实现尚有困难,希望经过本学期的努力后能把APP打磨成设想的样子。
- 在开发者设置中开启“显示布局边界”,可以直观地观察到优秀APP的布局。